Блиц-тест. 1.<A HREF=”http://www.microsoft.com”> Microsoft </A> командасы нені орындайды:

1.<A HREF=”http://www.microsoft.com”> Microsoft </A> командасы нені орындайды:

A) Microsoft сөзін шығарады

C) Интернет желісіндегі microsoft компаниясының Web парақтарының алдынғы бетіне көшуге қамтамасыз етеді.

С) А,В

Д) Дұрыс жауап жоқ

Е) В

 

29. <A HREF = “dog.htm”><IMG SRC=”dog.gip”></A> жолында <IMG SRC dog.gip> тіркесі гиперсілтеме ретінде не береді:

A) Ит суретін

C) Иттер туралы мәліметтер беретін dog.gip файлына ауыстырады.

С) В

Д) А,В

Е) Дұрыс жауап жоқ

 

3.</HREF = “dog.htm”><IMG SRC=”dog.gip”></A>;жолында <IMG SRC dog.gip> тіркесінен шыққан ит суретін шерткенде не болады:

A) Ит суретін

C) Иттер туралы мәліметтер беретін dog.gip файлына ауыстырады.

С) В

Д) А,В

Е) Дұрыс жауап жоқ

Бақылау сұрақтары:

1. <A HREF=... >атрибуты мәні ретінде қандай сөз тіркестерін алуға болады?

2. Ішкі сілтемелер дегеніміз не?

3. Орнатылған анкерге сілтеме жасау үшін не істеу керек?

4.HTML-құжатқа сурет орналастыру үшін қандай тәг қолданылады? Оның атрибуттарын атап шығыңыздар.

5. Сілтемелер картасын құру реті

6. Құжаттың ішіндегі нүктелерге сілтемелер

 

Әдебиеттер:

1. Б. Бөрібаев., Г.А.Мадьярова. Web технологиялар. Оқулық.Алматы,2011

2. Дузбаева Р.М. Основы создания HTML-документов. Уч. пособ. для студентов. –Алматы, КБТУ 2003. –82 с.

3. Нидерст Дж. Web-мастеринг для профессионалов. –СПб.:Питер, 2001. –576

4. Информатика и образование,№8, 2000. Е. В. Давыдова

5. Симонович С., Евсеев Г., Алексеев А. Специальная информатика: Уч. пособ. -М.: АСТ-

ПРЕСС: Инфорком-Пресс, 1998.-480с.

6. А. Гончаров. HTML в примерах. – СПб: "Питер", 1997.

7. Лэмонт Вуд. Web-графика. Справочник. – СПб: "Питер", 1998.

8. С. Бейн, Д. Грей. Как сделать красиво в Интернете. Перевод с англ. – СПб: "Символ- Плюс", 1998.

Зертханалық жұмыс № 6.1

Тақырыбы:Сырғымалы жолдар. Сырғымалы жолдарды ұйымдастыру.

 

Мақсаты: HTML тілінде тегтарды пайдаланып сырғымалы жолдарды ұйымдастыру.

 

Қажет құралдар мен қойылатын талаптар: дербес компьютер, Блокнот(Hotepad) және Internet Explorer программалары, сонымен бірге компьютерде қолданушы ретінде жұмыс жасай білу керек.

Жұмыстың орындалу реті:

1. Теориялық материалды игеру.

2. Жұмыстың орындалуы.

3. Бақылау сұрақтары.

Зертханалық жұмыстың орындалуына есеп беру формасы:

1. Зертханалық жұмыс номері

2. Тапсырма

3. Бағдарлама мәтіні.

4. Тестілеу нәтижесі.

5. Бақылау сұрақтарына жауап беру.

 

Әдістемелік нұсқау

<MARQUEE>жүгіртпе жол элементі.

<MARQUEE>;элементі құжат бетінде жүгіртпе жолдың құрылуын қамтамасыз етеді.

<MARQUEE атрибуттар > Жолдағы мәтін </MARQUEE>

Ол мынадай атрибуттар қолдануы мүмкін:

• bgcolor

Бұл атрибут жүгіртпе жол фонының түсін орнатады.

Синтаксис: <MARQUEE bgcolor="түс">

• height

Бұл атрибут жүгіртпе жолдың пиксельдердегі биіктігін орнатады.

Синтаксис: <MARQUEE height=сан>

• align

Бұл атрибут жүгіртпе жолдың жоғарғы шеті - top, ортасы- middle немесе төменгі шеті- bottom арқылы түзетуді қамтамасыз етеді.

Синтаксис: <MARQUEE align=...>

• direction

Бұл атрибут жүгіртпе жолға бағыт береді: left- солға, right-оңға, up-жоғарыға, down-

төменге.

Синтаксис: <MARQUEE direction="...">

• behavior

Бұл атрибут жүгіртпе жолдың жылжуын енгізеді, scroll айналдыру немесе slide

айналып келіп тоқтау,немесе alternate бі шеттен екінші шет аралығында қозғалу. Синтаксис: <MARQUEE behavior="...">

• hspace

Бұл атрибут жүгіртпе жол пиксельдерінің орналасу санын береді

Синтаксис: <MARQUEE hspace=сан>

• vspace

Бұл атрибут жүгіртпе жолдағы жоғарғы және төменгі бос кеңістік сандарын береді.

Синтаксис: <MARQUEE vspace=сан>

• loop

Бұл атрибут жүгіртпе жолға айналу санын береді.

Синтаксис: <MARQUEE loop=сан>

• scrollamount

Бұл атрибут жүгіртпе жолға жылдамдық береді, егер мәні 1-ге тең болса, онда ол өте

ақырын қозғалады, ал 10-нан үлкен болса, онда ол тезірек қозғалады. Синтаксис: <MARQUEE scrollamount=сан>

• scrolldelay

Бұл атрибут жүгіртпе жолға әр қадам аралығын орнатады.

Синтаксис: <MARQUEE scrolldelay=число>

LOOP - “сырғымалы жолдардың” қайталану санын анықтайтын бүтін сан, ІNFІNІTE

(шексіздік) мәнін қабылдауы да мүмкін.

SCROLLAMOUNT – жылжудың бір қадамында мәтіннің қанша пиксельге жылжитынын анықтайтын бүтін сан.

SCROLLDELAY – екі сырғудың арасындағы интервалды миллисекундпен көрсететін бүтін сан.

WІDTH – экрандағы “сырғымалы жолдың” енін пиксель арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.

Енді келесі мысалды Блокнотта теріп,3-2 мысал.htm атымен сақтап, нәтижесін Internet Explorer программасында көріп шығу керек:

<HTML> <HEAD> <TІTLE> 3-2 мысал </TІTLE> </HEAD>

<BODY text=red>

<CENTER>

<H2> Сырғымалы жолдар </H2> <HR>

<H3> <MARQUEE BGCOLOR= ”yellow” DІRECTІON = ”RІGHT” SCROLLAMOUNT = ”10” SCROLLDELAY=”200” WІDTH=”90%”> Бұл бірінші сырғымалы жол

</MARQUEE>

<P> <MARQUEE BGCOLOR= ”Green” DІRECTІON = ”LEFT”

HEІGHT=30 SCROLLAMOUNT=”10” SCROLLDELAY=”100” WІDTH=”90%”>

Бұл екінші сырғымалы жол </MARQUEE> </H3> <HR>

</CENTER>

</BODY>

</HTML>

 

1-Мысал: Элементтермен берілген жүгіртпе жол <MARQUEE height= 10 behavior=" scroll "> ЖОЛ </MARQUEE>

2-Мысал:

<HTML>

<HEAD><TITLE> Сырғымалы жолды ұйымдастыру </TITLE></HEAD>

<BODY text=red>

<center>

<H2>Сырғымалы жолдар</h2 <HR>

<H3><MADQUEE BGCOLOR=”yellow” DIRECTION = “RIGHT” SCROLLAMOUNT=”10” SCROLLDELAY=”200”WIDTH=”90%”> Бұл бірінші сырғымалы жол.

</MARQUEE>

<P>

<MADQUEE BGCOLOR=”green” DIRECTION = “left”

HEIGHT=30 SCROLLAMOUNT=”10” SCROLLDELAY=”100” WIDTH=”90%”>

Бұл екінші сырғымалы жол

</MARQUEE></h3><HR>

</CENTER></BODY>

</HTML>

 

4 <EMBED> видео элементі.

<EMBED> элементі Netscape тіліне қарағанда HTML тілінде өте жиі кездеседі әрі

танымал. Осыған орай Microsoft компаниясы өз браузерлері арқылы бұған көп көмек жасады. Консорциум W3C HTML 4,0 –да көбінесе <OBJECT>;дескрипторын қолдануды

ұсынады, бірақ қолданады.	Web-шебері	көбінесе <EMBED>және </EMBED>параметрлерін Синтаксис: <EMBED атрибуты></EMBED>
Элемент келесі атрибуттардан тұрады:
·	heightорнатылған объектке вертикальды өлшем береді
·	widthорнатылған объектке горизонтальды өлшем береді
·	autostarttrue және false мәндерін қосуға мүмкіндік береді.
·	looptrue және false мәндерінде қайталану санын береді
·	hiddentrue және false мәндерінде басқару панелін жасырады.src	URL
	мультимедиалық файлға нұсқайды
·	pluginspageмультимедиа файлдың ойнауы үшін URL плагинағанұсқайды
·	bgcolorобъектке фон береді
·	typeмультимедиалық файл типін анықтайды
·	qualityмультимедиалық файл сапасын анықтайды
·	altальтернативті мазмұн береді

1-Мысал:

<EMBED src=" file.swf " menu= true quality= high bgcolor= #000066 WIDTH= 760

HEIGHT= 410 TYPE=" application/x-shockwave-flash " PLUGINSPAGE=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Ver sion=ShockwaveFlash ">

</EMBED>

Мысал

Дыбыстық фрагмент(MIDI форматы) Видео фрагмент (AVIформаты )

<HTML> <HEAD>

<TITLE>Дыбыстық және видео фрагменттерінің үлгісі </TITLE>

</HEAD> <BODY>

<H1 ALIGN=CENTER >Дыбыстық және видео фрагменттерін web—бетіне орналастыру

<BR> (&lt;EMBED&gt;тэгі)</H1>

<p ALIGN= CENTER>

<TABLE width =100% border=0>

<TR valign=BOTTOM >

<TD width =50% align =center><embed src=name1.mid><br>

</P><P> _ _ _ _ _ _ _ _ _ _ _ _ <BR> _ _ _ _ _ _ _ _ _ _ _ _ <BR> _ _ _ _ _ _ _ _ _ _ _ <BR>

</P> </BODY> </HTML>

Тапсырмалар:

1. Алдыңғы бөлімдегі мысалды Блокнот программасында теріп, нәтижесін Internet Explorer

программасы арқылы көріңіздер де, өз қалауларыңыз бойынша өзгерістер енгізіңіздер.

2. Сырғымалы жолдарға құжат құрастырып оны Блокнот программасында теріп, оны 3-2 мысал.htm деп сақтап алып, нәтижесін Internet Explorer программасы арқылы көріңіздер де, келесі өзгерістер енгізіңіздер:

а) сырғымалы жолдардың биіктігін ауыстыру;

ә) бірінші сырғымалы жолдағы мәтін түрін қызылмен, екінші жолдағы мәтін түрін – көкпен бояу;

б) азат жолтан кейінгі көлденең сызықтарды әр түрлі түстерге бояу, оның қалыңдығы мен ұзындығын өз қалауларыңызша өзгерту керек.

3.HTMLдокумент ашылғанда музыка ойнау тиіс.

4. «Физика–математика факультеті», «Филология факультеті» және «Шеттілі факультеті» деген сөздерді сырғымалы жолдар бойынша жүргізіп, фондарын және қаріп түстерін әр түрлі бояулармен көрсетіңдер. Сілтемелер жасау арқылы:

А)Өз тобыңның студенттерінің тізімін жазып шығыңыз. Б)Маркерлеу арқылы мамандық аттарын жазып шығыңыз.

Бақылау сұрақтары:

1.Сырғымалы жолдар қалай ұйымдастырылады?

2. Суреттік бейнелерді сырғытуға бола ма?

3. Сырғымалы жолдар жасау тәгінің қандай атрибуттары бар, олардың мәндері неге тең бола алады?

4. Сырғымалы жолды екі бағытқа да кезектестіре отырып жылжытуға бола ма?

5. Сырғыту жылдамдығын қалай өзгертеміз?

6. Жолды жоғары, төмен сырғытуға бола ма?

 

Зертханалық жұмыс № 6.2

 

Тақырыбы: Фреймдер. Бірнеше құжаттарды бейнелеу. Фреймдерді құру. Беттердің фреймдік берілуі

Мақсаты: HTML тілінде тегтарды пайдаланып фреймдар құру.

Қажет құралдар мен қойылатын талаптар: дербес компьютер, Блокнот(Hotepad) және Internet Explorer программалары, сонымен бірге компьютерде қолданушы ретінде жұмыс жасай білу керек.

Жұмыстың орындалу реті:

1. Теориялық материалды игеру.

2. Жұмыстың орындалуы.

3. Бақылау сұрақтары.

Зертханалық жұмыстың орындалуына есеп беру формасы:

1. Зертханалық жұмыс номері

2. Тапсырма

3. Бағдарлама мәтіні.

4. Тестілеу нәтижесі.

5. Бақылау сұрақтарына жауап беру.

Әдістемелік нұсқау

Фреймнің синтаксисы.

HTML тілі броузер терезелерін бірнеше бөліктерге бөлу мүмкіндігін береді және

олардың әрқайсысында жеке web-құжаттар бейнеленеді. Осындай бөліктер фрейм немесе кадр деп аталады. Мұнда әрбір фрейм экрандағы жеке тіктөртбұрышты аймақты алып тұрады. Әр фрейм ішінде бір-бірінен тәуелсіз құжат орналастыра аламыз. Мысалы, экранды екі фреймге бөліп, сол жағына Netscape фирмасының, ал оң жағына Microsoft фирмасының web-сайттарының алғашқы парақтарын шығарып салыстыра отырып көруге болады.

Фреймдер құру тәсілдері

Фреймдер құру үшін <FRAMESET> және <FRAME> тәгтері қолданылады да, мұнда әдеттегідей <BODY> тәгі пайдаланылмайды. <FRAMESET> тәгі броузер терезесіндегі фреймдердің көлемдері мен олардың орналасу тәртібін сипаттайды, <FRAME> тәгінде фреймдердің әрқайсысына шақырылатын құжаттар аттары көрсетіледі. Екі фреймнен тұратын экран құрайтын программа бөлігінен мысал келтірейік:

<html> <frameset rows="50%,50%">

<frame src="1 файл.htm"> <frame src="2 файл.htm"> </frameset> </html>

1- сурет. Фреймдердің экрандағы көрінісі

 

Фреймді қолдана отырып, Web-беттегі мүмкіндікті дамыту барысында, сіз сыртқы түрді жақсарта аласыз және ақпараттық жүйе функциясы мен Web-қосымшасы. Әрбір терезе, немесе фрейм мынандай мағынаға ие болады:

- ӘрбірфреймдаөзініңURL орныбар, басқатәуелсізфреймдергеқарағандақолданаалады.

- Әрбірфреймдеөзініңжекеатыбар(параметрNAME), бірфреймненбасқафреймгекөшуге мүмкіндік береді.

Фреймнің өлшемі экранда тышқанның көмегімен өзгере алады(егерде бұл тиымсыз праметр болса). Берілген фрейм қозғалмалы интерфейстік шешім құруға мүмкіндік береді олар мынандай:

Статистикалық информация араласуы, автордың ойы бойынша тұрақты қолданушының көрсетуі бір статистикалық фреймде. Бұл фирманың графикалық логотипы болуы мүмкін, copyright бұл басқарушы батырма.

Статистикалық фреймнің орналастыру Web – құжаты енгізілген. Web – серверде қызықтыратын информация табады. Терезе тапсырысының нәтижесін орналастыру, егерде бір фреймде арнайы тапсырыс болады, ал басқада тапсырыс нәтижесі. Форма типының

«мастер-деталь» Web-қосымшасына орналастыру, база данных да қолданады.

Құжат форматы, фрейм қолданушысы сыртқы формат жәй құжаттан ерекше, тек тега

BODY орнына контейнер FRAMESET қолданады, ішкі HTML-құжатты қарастырады.

<HTML>

<HEAD>...</HEAD>

<FRAMESET>...</FRAMESET>

</HTML>

Фрейм құжаты специфиттілік түрде HTML-құжаты болады, BODY элементін қарастыра алмайды, қандай да бір ақпараттық жүктемеге сәйкес. Ол тек қана фреймді қарастырады, қандай да бір ақпаратты қарастырады (екі құжтты кейін қарастырамыз).

Ортақ синтаксис фреймді таныстырамыз:

 

<FRAMESET COLS="value" ROWS="value">

<FRAME SRC="url1">

<FRAME...>

... </FRAMESET>

Ортақ контейнер FRAMESET бүкіл фреймді қарастырады, экранның бөлінуіне қарай. Сізге экранды вертикальді және бірнеше горизонтальді фреймге бөлуге болады. Тег FRAME әрбір фреймді әр түрлі қарастырады. Әрбір компонемент бірдей қарастырайық. FRAMESET

<FRAMESET [COLS="value" | ROWS="value"]>

Тег <FRAMESET> аяқталу тег <FRAMESET> болады. Әр бір екі тегтың арасында, бұл тег <FRAME>, жалған тег <FRAMESET> және </FRAMESET> және контейнер тегтен

<NOFRAME> және</NOFRAME> екі құжат броузерден орналастырады қолдайтын фрейм және қолдамайтын фреймдер.

Берілген тег екі қарама-қарсы параметр болады: ROWS и COLS. ROWS = «Анықталған-горизонтальді-список»

Берілген тег кейбір терезе саның қарастырады, айырылған нүкте.

Әрбір көзқарас сандық мағына береді, терезе пиксельнің өлшемі, процент әр бір өлшем терезе және масштаб терезесімен байланысты. Сандық терезе сандық мағынамен анықталады. Ортақ суммасы биіктігі бүкіл терезе биіктігін қарастырады. Атрибутты ROWS анықтайды бір фрейм, броузер терезесі.

Синтаксистік қолданатын түрінің терезесі:

Value

Жәй сандық мағынаны анықтайды терезеде пиксель биіктігін. Бұл алыс ен жақсы міндет емес терезе биіктігі әр түрлі браузер болады. Егер сіз осындай мақсатты қолдансаңыз онда басқа да араластыруға болады., нәтижесінде 100 процент алсаңыз терезе браузердің қолданушысы.

value%

Өлшемнің мәні 1 ден 100процент. Егерде ортақ суммасы 100 көтерілсе, онда бүкіл

фреймнің суммасы 100 процентке азаяды. Егер сәйкес сумма 100 болса, онда өлшемі көбейеді.

Value*

Айта кетсек Value мәні берілген мағынада міндетті емес.Символ қарастырады қалған

орын басқа фреймге ие болады. Егер де екі және бірнеше фрейм бейнелеуі анықталса (Мысалы) қалған бөлшек фреймге бөлінеді. Егер жұлдыз алдында сан тұрса, берілген фреймді анықтайды. Мысалы, бейнелеу 3*,*, үш фрейм құруға болатынын айтады мынадай өлшемдермен 3/5 бірінші фреймге және 1/5 екінші мен басқасына.

COLS= «анықталған-горизонтальды-список терезесі»

Сол сияқты ROWS, бірақ терезені вертикальді және горизонтальді деп бөледі.

Мысалы:

<FRAMESET COLS="50,*,50">- үш фреймді бейнелейді, екі ден 50 нүкте сол және оң жақ және ішкі бір нүкте.

<FRAMESET ROWS="20%,3*,*"> - үш фреймді бейнелейді, біріншісі 20процент пен орын алады экранның үстінде, екіншісі 3/4 қалғаны бірінші фрейм орны (т.е 60 процент терезе площады), ал соңғысы ¼ (т.е 20 процент бүкіл терезе площады

<FRAMESET ROWS="*,60%,*">- аналогтық мысалға. Теги <FRAMESET> салынған бола алады, т.е. Мысалы:

<FRAMESET ROWS="50%,50%">

<FRAMESET COLS="*,*"

</FRAMESET>

</FRAMESET>