Тақырыбы: HTML тілі. Веб-беттер құрастыру

HTML (Hyper Text Markup Language) - гипермә тіндік ө лшеуіш тілі кү рделі SGML (Standard Generalized Markup Language) ө лшеуіш тілінің мү шесі болып табылады. HTML кез келген тілдер сияқ ты бағ дарлама қ ұ рудың стандартты қ ұ рылымынан тұ рады. Бұ л жағ дайда ол HTML – қ ұ жат. HTML – тег директивалары бұ рыштама жақ шаларына алынады. Бұ рыштама жақ шағ а алынбағ ан барлық объектілерді интерпретатор экранда бейнеленетін мә тін ретінде қ абылдайды. Тег – браузер интерпретаторына тиісті нақ ты ә р директивағ а мә нді қ алай ө ң деуді кө рсететін HTML командасы. Бұ л мә н тег атрибуты деп аталады. Тегтің атрибуты болуы да, болмауы да мү мкін. Мысалы, < HTML> тегінің атрибуты болмайды.

HTML – қ ұ жаты қ ысқ а тү рде қ ұ жат тақ ырыбынан жә не қ ұ жат денесінен тұ рады.

Синтаксис. HTML тегінің жалпы тү рде барлық атрибуттарымен жазылу синтаксисі келесі тү рде болады:

< тег атрибут аты1= “мә н” атр_аты.2 = “мә н” атр_аты.N = “мә н”> ө ң делетін мә н < /жабылатын тег>

Атрибут мә ні тік жақ шағ а алынады. Тегтің барлығ ы жұ ппен болады: ашылатын жә не жабылатын; < тег> ө ң делетін мә н < /тег>

Бірігу принципі қ аралады:

< тег1> < тег2> ө ң делетін мә н < /тег2> < /тег1>

HTML-қ ұ жаты — бұ л *.html кең ейтілуі бар мә тіндік файл (Unix-жү йелері *.html кең ейтілу бар файлдан тұ руы мү мкін). Қ арапайым HTML-қ ұ жат:

Міндетті тегтер.

< html>... < /html>

< html> тегі HTML-қ ұ жатты ашуы керек. Сол сияқ ты < /html> тегі HTML-қ ұ жатты аяқ тайды.

< head>... < /head>

Бұ л тегтер жұ бы қ ұ жат тақ ырыбының басы мен соң ын кө рсетеді. Қ ұ жат тақ ырыбынан басқ а (тө мендегі < title> тегінің жазбасын қ араң ыз), бұ л бө лімде кө птеген ақ параттар бар.

< title>... < /title>

< title> жә не < /title> тегінің арасындағ ы ақ параттар браузермен қ ұ жат аты деп аталады. Netscape Navigator, мысалы, терезе тақ ырыбында кезектегі қ ұ жаттың атын кө рсетеді жә не оны ә р беттің сол жақ жоғ арғ ы бұ рышында принтерге басып шығ арады. Аты 64 символдан ұ зақ болмауы керек.

< body>... < /body>

Бұ л тегтер жұ бы HTML-қ ұ жат денесінің басы мен соң ын кө рсетеді. Дене ол қ ұ жаттың мазмұ нын анық тайды.

< H1>... < /H1> — < H6>... < /H6>

< Hi> (мұ ндағ ы i — 1 ден 6-ғ а дейінгі сан) тү ріндегі тег алты ә ртү лі дең гейдегі тақ ырыпты сипаттайды. Бірінші дең гей – ең ү лкен, алтыншы дең гей – ең кіші тақ ырып.

< P>... < /P>

Мұ ндай тегтер жұ бы абзацты сипаттайды. < P> жә не < /P> тегі арасындағ ылар бір абзац болып қ абылданады. < Hi> жә не < P> тегтері қ осымша ALIGN (" элайн" деп оқ ылады, ағ ылшыннан аударса " тү зулеп келтіру") атрибутынан тұ руы мү мкін, мысалы:

< H1 ALIGN=CENTER> тақ ырыпты ортағ а тү зулеп келтіру< /H1>

немесе

< P ALIGN=RIGHT> абзацты оң жақ қ а бойынша тү зулеп келтіру < /P>

< html>

< head>

< title> 2 Мысал< /title>

< /head>

< body>

< H1 ALIGN=CENTER> Сә лем! < /H1>

< H2> Бұ л HTML-қ ұ жатының кү рделі мысалы< /H2>

< P> Біз енді білеміз абзацты тек солғ а ғ ана емес тү зулеп келтіруге, < /P>

< P ALIGN=CENTER> сонымен бірге орта бойынша< /P> < P ALIGN=RIGHT> немесе оң жақ бойынша тү зулеп келтіруге.< /P>

< /body>

< /html>

Жұ п емес тегтер. Бұ л бө лім HTML қ ұ жатының екі негізгі ержесіне бағ ынбайтын тегтер жө нінде болады: олардың барлығ ы жұ п емес, ал кейбіреулері (& -деп аталатын тізбектер) кіші ә ріппен енгізілуі керек.

< BR> Бұ л тег абзацты ү збей жаң а жолғ а ө ту ү шін қ олданылады. Ө лең жазуғ а ө те ың ғ айлы. < HR> Белгі < HR> мынадай горизонтальды сызық ты бейнелейді:

Белгі сонымен бірге қ осымша SIZE (сызық тын қ алың дығ ын пиксельде береді) атрибутынан тұ руы мү мкін жә не/немесе WIDTH (сызық тын қ алың дығ ын процентте береді). Тө менде горизонтальды сызық тар коллекциясы келтірілген.

< html>

< head>

< title> Сызық мысалы< /title>

< /head>

< body>

< H1> Горизонтальды сызық тар коллекциясы< /H1>

< HR SIZE=2 WIDTH=100%> < BR>

< HR SIZE=4 WIDTH=50%> < BR>

< HR SIZE=8 WIDTH=25%> < BR>

< HR SIZE=16 WIDTH=12%> < BR>

< /body>

< /html>

HTML мә тіннің толық абзац тү рін анық тауғ а мү мкіндік береді. Абзацтарды тізім тү рінде ұ йымдастыруғ а болады.

Нө мірленбеген тізімдер: < UL>. < UL> жә не < /UL> тегтері арасында орналасқ ан мә тін нө мірленбеген тізім болып қ абылданады. Тізімнің ә р жаң а элементтің < LI> тегінен бастау керек.

Нө мірленген тізімдер: < OL>... < /OL>. Нө мірленген тізімдер, нө мірленбеген тізімдер сияқ ты орналасқ ан, бірақ жаң а элементті белгілейтін символдардың орнына цифрлар қ олданылады.

< OL>

< LI> 1 курс

< LI> 2 курс

< LI> 4 курс

< /OL>

< UL>

< LI> техникалық

< LI> агрономиялық

< LI> жергеорналастыру

< /UL>

< H2> Ежелгі грек қ ұ дайлары: < /H2>

< OL TYPE=I>

< LI> Аполлон

< LI> Афина

< LI> Зевс

< LI> Гермес

< LI> Артемида

< /OL>

< OL TYPE=a START=3 >

< LI> бірінші бө лім < LI> екінші бө лім

< LI VALUE=8> сегізінші бө лім

< LI type=" 1" > тоғ ызыншы бө лім

< LI TYPE=A> оныншы бө лім латындық нө мірлеумен

< LI> он бірінші бө лім

< /OL>

1 тапсырма: «1 Тізім» тақ ырыбымен HTML-қ ұ жатын қ ұ рың ыз, онда дербес компьютердің қ ұ рылғ ылары маркерленген тізім тү рінде шығ уы керек. Тізімге арналғ ан маркер ретінде боялмағ ан шең берді пайдаланың ыз.

Кесте тегтерімен танысу жә не кесте қ ұ ру. HTML тілінде бағ аналар жә не жолдармен кестелер қ ұ рылады. Ұ яшық кез келген HTML элементтерінен тұ рады: тізім, графиктер, гиперсілтемелер т.б.

ALIGN - Қ ұ жат ө рісіне сә йкес кесте орналасуын келтіреді. Керекті мә ндер: ALIGN=LEFT (солғ а туралап келтіру), ALIGN=CENTER (ортағ а туралап келтіру), ALIGN=RIGHT (оң ғ а туралап келтіру).

WIDTH - Кесте ені. Оны пикселде береміз (мысалы, WIDTH=400) немесе бет енінен процентпен (мысалы, WIDTH=80%).

BORDER

Кестенің ішкі рамкасымен ұ яшық тар енін пикселде келтіреді (мысалы, BORDER=4). Егер атрибут келтірілмесе, онда кесте рамкасыз болады.

CELLSPACING - Кесте ұ яшығ ының рамкалары арасындағ ы қ ашық тық ты келтіреді (мысалы, CELLSPACING=2).

CELLPADDING - Мә тін жә не ұ яшық рамкалары арасындағ ы қ ашық тық ты келтіреді (мысалы, CELLPADDING=10).

< CAPTION>... < /CAPTION> ) – кесте тақ ырыбы Кестенің ә р жолы < TR> тегімен басталып жә не < /TR> тегімен аяқ талады.

< TR> тегі келесі атрибуттардан тұ рады:

ALIGN жол ұ яшығ ындағ ы мә тінді тү зулеп келтіреді. Рұ қ сат етілген мә ндер: ALIGN=LEFT (солғ а тү зулеп келтіру), ALIGN=CENTER (ортағ а тү зулеп келтіру), ALIGN=RIGHT (оң ғ а тү зулеп келтіру).

VALIGN жол ұ яшығ ындағ ы мә тінді вертикальды тү зулеп келтіреді. Рұ қ сат етілген мә ндер: VALIGN=TOP (жоғ арғ ы жақ бойынша тү зулеп келтіру), АLIGN=MIDDLE (орта бойынша тү зулеп келтіру), VALIGN=BOTTOM (тө менгі жақ бойынша тү зулеп келтіру).

Кестенің ә р ұ яшығ ы < TD> тегімен басталып жә не < /TD> тегімен аяқ талады. < TD> тегіі келесі атрибуттардан тұ рады:

NOWRAP бұ л атрибуттың болуы, ұ яшық тағ ылар бір жолда кө рсетілуі керек.

COLSPAN горизонталь бойынша ұ яшық тарды біріктіреді. Мысалы, COLSPAN=3 деп, алсақ онда жолдың 3 ұ яшығ ын бірітіріледі.

ROWSPAN вертикаль бойынша ұ яшық тарды біріктіреді. ALIGN ұ яшық тағ ы мә тінді тү зулеп келтіреді. Рұ қ сат етілген мә ндер: ALIGN=LEFT (солғ а тү зулеп келтіру), ALIGN=CENTER (ортағ а тү зулеп келтіру), ALIGN=RIGHT (оң ғ а тү зулеп келтіру).

VALIGN жол ұ яшығ ындағ ы мә тінді вертикальды тү зулеп келтіреді. Рұ қ сат етілген мә ндер: VALIGN=TOP (жоғ арғ ы жақ бойынша тү зулеп келтіру).

1 - мысал:

1. Мына бағ дарламаны енгізің із:

< table border=5>

< caption> Кесте< /caption>

< tr> < th rowspan=2> < /th> < th colspan=2> Орташа мә ні< /th> < /tr>

< tr> < td> Бойы< /td> < td> Салмағ ы< /td> < /tr>

< tr> < td> Еркектер< /td> < td align=center> 174< /td> < td align=center> 78< /td> < /tr>

< tr> < td> Ә йелдер< /td> < td align=center> 165< /td> < td align=center> 56< /td> < /tr>

< /table>

2. Кесте.htm деп ө з бумаң ызда сақ таң ыздар.

2 тапсырма: Берiлген ү лгi бойынша тө мендегі кестелерге бағ дарлама жазың ыз жә не оның тақ ырыбын ортағ а туралап қ ойың ыз:

Ведомость

Автомобильдер

Кестенің ұ яшық тарын ә р тү рлі тү спен бояң ыздар.

Байланыстыру. Гипермә тін жай мә тіннен ерекшелігі, оны тек басынан соң ына дейін ғ ана оқ уғ а болады, сонымен бірге мә тіннің бір фрагментінен екінші фрагментіне ө тудің кө птеген тү рін жү зеге асырады. Жү йе кө птеген ә йгілі бағ дарламалық ө німдер кө мегімен гипермә тіндік принцип бойынша келтірілген. Маустың сол жақ батырмасын басу кезінде кезектегі қ ұ жаттың кейбір белгіленген фрагментінен қ ұ жат фрагментіне немесе алдын-ала белгіленген қ ұ жатқ а ө туге болады. HTML-да бір мә тін фрагментінен екіншісіне мынадай тү рдегі белгімен ө теді:

< A HREF=" [ө ту адресі]" > мә тіннің белгіленген фрагменті< /A>

[ө ту адресі] параметрі ретінде аргументтердің бірнеше тү рі қ олданылады.

Ең қ арапайымы - ө тетін HTML- қ ұ жаттың атын береміз. Мысалы:

3 тапсырма: HTML-қ ұ жаттағ ы бейнелер

HTML-қ ұ жатта бейнені ө те қ арапайым жолмен тұ рғ ызуғ а болады. Ол ү шін бұ л бейне GIF форматында болу керек (файл *.gif кең ейтілуімен) немесе JPEG (файл *.jpg немесе *.jpeg кең ейтілуімен) жә не бір жол HTML-мә тінде. Бізге қ ұ жатқ а HTML қ ұ жатпен бір каталогта орналасқ ан picture.gif файлында жазылғ ан бейнені іске қ осу керек. Онда жол мынадай болады:

< IMG SRC=" picture.gif" >

Белгі < IMG SRC=" [файл аты]" > ALT атрибутын қ осу керек=" [мә тін]" , мысалы:

< IMG SRC=" picture.gif" ALT=" Сурет" >

Жү гіртпе жол MARQUEE тегі кө мегімен қ ұ рылады.

Сипаттамалары атрибуттармен беріледі.

Жалпы жазылуы:

< MARQUEE> мә тін < / MARQUEE >

Мү мкін атрибуттар:

1. Берілген ү зіндіні талдаң ыз:

< marquee height=50 width=90% hspase=3

vspace=3 align=middle bgcolor=blue

direction=left behavior=alternate

loop=infinite scrollamount=4

scrolldelay=50>

сіздің хабарың ыз

< /marquee>

ALIGN атрибуты – жолақ ө рісінде мә тінді орталық тауды анық тайды (мә ндері: top - жоғ арығ а, bottom – тө менге, middle - ортасы бойынша).

BEHAVIOR атрибуты – жү гіртпе жолдың қ озғ алыс типі (мә ндері: scroll – мә тін бір шеттен пайда болып, келесіден жоғ алады, slide – жү гіртпе жол ө рістің бір шетінен шығ ады жә не қ арсы шетке тоқ тайды, alternate – айнымалы бағ ыт береді – бір шеттен келесі шетке дейін жә не керісінше.

LOOPатрибуты – жү гіртпе жолда мә тіннің қ айталану саны (мә ндері: сә йкес сандар, немесе infinite – жү гіртпе жол шексіз қ айталана береді).

Бұ л жағ дайда жү гіртпе жолдың жылжу жылдамдығ ын реттеуге болады,, ол ү шін SCROLLAMOUNT жә не SCROLLDELAY атрибуттарының мә ндерін ауыстыру қ ажет.

< marquee> тегі графикалық объектілерді де жылжыту мү мкіндігін береді.Ол ү шін мә тін орынына < img src> тегінің кө мегімен сурет орналастыру керек.

Аудио- мен видеоклиптер жә не оларды қ олдану. Аудиофайл форматтары: AU, WAV, MIDI, RA, MP3, WMA.

Видеофайл форматтары: AVI, WM, VIVO, QT, MPEG, RV.

Ө те белгілі тә сіл – бұ л нақ ты бір дауыс файлына немесе видеоклипке қ арапайым сілтеме қ олдану:

< A HREF = “1.wav”> Ә н (100 K)< /A>

< A HREF = “1.avi”> Видеоклип (1.3 Mgb)< /A>.

Екінші тә сіл – < EMBED> тегін қ олдану:

< EMBED src = “URL” width = “” height = “” autostart = true|false hidden = true|false loop = true| false|N>

autostart – аудио- немесе видеоклип автоматты тү рде жү ктеледі;

hidden – ойнағ ыштың (проигрыватель) басқ ару панелі шығ арылады немесе шығ арылмайды;

loop – ү ндеу саны;

Internet Explorer кө мегімен дауыс файлын енгізу:

< BGSOUND src = “URL” loop = N>.

Internet Explorer кө мегімен видеоклипті енгізу:

< IMG src = ”1.gif ” dynsrc = “1.avi ” controls loop = N>

4 тапсырма: «Менің веб-парағ ым» атты қ арапайым веб-бет қ ұ растырың ыз. Онда міндетті тізім, кесте, сурет, мультимедия, гиперсілтеме қ олданың ыз.

№29-30 зертханалық жұ мыс