Названия коды Названия коды

Тү стер аттары жə не # RGB мə ндері

Black (черный) " #000000" Green (зеленый) " #008000"

Silver (серебристый) " #C0C0C0" Lime (лимонный) " #00FF00"

Gray (серый) " #808080" Olive (олифковый) " #808000"

White (белый) " #FFFFFF" Yellow (желтый) " #FFFF00"

Maroon (темнобордовый) " #800000" Navy (темносиний) " #000080"

Red (красный) " #FF0000" Blue (синий) " #0000FF"

Purple (фиолетовый) " #800080" Teal (Зеленоголубой) " #008080"

Fuchsia (розовый, фуксия) " #FF00FF" Aqua (светлосиний) " #00FFFF"

Мысалы: < body bgcolor = white text = black link = red vlink = maroon

alink = fuschia background = " face.jpg" >

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

< BODY BGCOLOR=”#FFFFFF”>

< BODY BGCOLOR=”WHITE”>

3-тапсырма. HR - горизонталь сызық тар Горизонталь сызық тарды тақ ырыптардың ө згеруін кө рсету ү шін

қ олдануғ а болады.

HR элементтерінде жабылатын белгілерге тиым салынғ ан. Рұ қ сат етілген атрибуттар: ALIGN, NOSHADE, SIZE жə не WIDTH.

Атрибут Қ олданылуы

ALIGN Осы атрибуттың кө мегімен сызық тарды тең естіруді сол жақ қ а (align=left), оң жақ қ а (align=right) немесе ортаң ғ ы жақ қ а (align=center) орындауғ а болады. NOSHADE Егер бұ л атрибут болса, онда браузер ү ш ө лшемділік эффектісін пайдаланбайды. Ол сызық екі тү сті тү рде емес, 1 тү стің жолағ ы тү рінде шығ арылу керектігін кө рсетеді.

SIZE Сызық биіктігін пиксельде кө рсетуге болады, бұ л атрибут бү тін сандарды қ абылдай алады, мысалы, 4, 8 немесе 16 жə не т.б. WIDTH Сызық тар ұ зындығ ын пиксельде (мысалы, width=100) немесе браузер терезесінің енін пайыздық қ атынаста (мысалы, width=" 50%") кө рсетуге болады. Егер пайыздар пайдаланылса, онда санғ а пайыз белгісін қ осың ыз. COLOR Бө лініп тұ ратын сызық тардың тү сін кө рсету ү шін RGB-ның 16 мə нін немесе тү стің стандартты аттарын қ олдануғ а болады. Горизонталь сызық тарды мə тінді бө лу қ ажет болғ анда қ олдануғ а болады.

Сызық тарды пайдаланудың негізгі принциптері, олар ешқ ашанда тақ ырып аты мен мə тін арасында болмау керек. Оларды сонымен қ атар, қ ұ жатта бос орын қ алдыру ү шін қ олданудың қ ажеттігі жоқ. Беттерді безендірген кезде, мə тінмен толтырылмағ ан, бос орындар маң ызды роль атқ арады. Ə рине бос орындардың шектен тыс кө п болуы, қ ұ жаттың жалпы тү рін бұ зып тұ рады, алайда егер бос орын мү лдем болмаса, онда беттер толып кеткен сияқ ты болып кө рінеді.

< HR ALIGN=CENTER WIDTH=50% SIZE=5 COLOR=NAVY>

Тө менгі мысалда горизонталь сызық тардың аздағ ан коллекциялары келтірілген:

< html> < head> < title> < /title> < /head>

< body> < H1 ALIGN=CENTER> Горизонталь сызық тар жиыны < /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>

Осы бағ дарлама бө лігінің нə тижесі экранда тө мендегідей болуы тиіс:

4-тапсырма. Гиперсілтеме бойынша кө шу - < A> тегі (анкер) HTML-де мə тіннің бір бө лігінен келесісіне кө шу мына тег кө мегімен беріледі:

< A HREF=" [кө шу мекен-жайы]" > аргументтердің бірнеше типтері қ олданылуы мү мкін.

Ең қ арапайымы – кө шу __________қ ажет болып табылатын басқ а HTML-қ ұ жаттың атын беру керек.

Мысалы: < A HREF=" pr2.htm" > Перейти к оглавлению< /A> HTML - мə тіннің бұ ндай кө ріністі ерекшеленген кө ріністің қ ұ жатта пайда болуына ə келеді, оны тышқ анмен шертетін болсақ, келесі терезеге pr.htm қ ұ жаты жү ктеледі. Есте сақ таң ыздар: Егер кө шу мекен-жайында каталог кө рсетілмесе, кө шу ағ ымдағ ы каталогтың ішінде орындалатын болады. Жү ктеген файлды кө ріп болғ ан соң, керісінше браузер саймандар тақ тасынан АРТҚ А батырмасын шерту арқ ылы кері қ айтуымызғ а болады. Осылайша, егер сіз файл аты бойынша бір-біріне сілтеме жасайтын, жə не сіздің компьютерің ізде бір каталогта жинақ талғ ан, қ андай да бір HTML- қ ұ жаттарының тобын жарық қ а шығ аруғ а даярлап қ ойсаң ыз жə не қ ұ жатты кез- келген басқ а компьютердің, локальді желінің немесе Интернеттің кез-келген басқ а каталогіне қ оятын болсақ, онда қ ұ жаттардың барлық осы топтары дə л солай жұ мыс жасайды. Енді сізде Интернетке қ осылмай қ ұ жаттардың тұ тас жинақ тарын ө ң деуге мү мкіндіктерің із болады жə не толық дайын болды дегенде, қ ұ жаттар жинағ ын тұ тас Интернетке қ оя аласыз. Қ ажетінше ауысуды жай ғ ана қ андай да бір қ ұ жатқ а емес, сонымен қ оса осы қ ұ жат ішіндегі нақ ты бір орынғ а жасауғ а болады. Ол ү шін ауысу

жасалатын қ ұ жаттың ішінде, қ андай да бір тіреу нү ктесін, немесе анкерді жасау керек. Оны мысалда талдаймыз.

Мə селен, pr1.htm файлынан pr2.htm файлындағ ы «Ауысу аяқ талды» сө зіне ауысуды жү зеге асыру қ ажет болсын делік (файлдар 1 каталогта орналасқ ан). Ең алдымен pr2.htm файлында мынадай анкер жасау керек:

< A NAME=" AAA" > Ауысу аяқ талды< /A>.

Сонымен қ атар, «Ауысу аяқ талды» деген сө з қ ұ жаттың мə тінінде

ешқ андай тү рде де кө рінбейді. Содан кейін 1.htm файлында (немесе басқ а файлда) осы анкерге ауысуды анық тауғ а болады.

< A HREF=" 2.htm#AAA" > AAA анкеріне ауысу< /A>.

Айта кететін болсақ, осы анкерге ауысуды pr2.htm қ ұ жатының ішінде де анық тауғ а болады, тек оғ ан мынадай кө ріністі қ оссақ жеткілікті:

< A HREF=" #AAA" > Переход к анкеру AAA< /A>.

Практикада бұ л ірі қ ұ жаттарды даярлауғ а ө те ың ғ айлы. Қ ұ жат басына қ ұ жаттың тарауларының басында орналасқ ан, анкерге сілтемелерден тұ ратын, мазмұ нын қ оюғ а болады. Тү сініспеушілікті болдырмау ү шін анкерлердің аттарын латын ə ріптерімен жазу ұ сынылады. Анкерлер аттарының жазылуын қ адағ алаң ыздар:

браузерлердің кө пшілігі ə ріптерді кішілерінен ажырата алады. Егер анкер аты AAA болса, aaa анкеріне немесе AaA анкеріне сілтеме жасағ ан болсаң ыз, қ ұ жат дұ рыс жү ктелгенімен де, ол сізді AAA анкеріне апармайды.

Ə зірше біз тек қ ана HTML-қ ұ жатына сілтемелерді талқ ыладық. Алайда басқ а да ресурстардың тү рлеріне сілтеме жасау мү мкін:

< A HREF=" ftp: //server/directory/file.ext" > Файлды жү ктеу< /A>

Бұ ндай сілтеме, егер оны пайдаланатын болсақ, файлдарды тасымалдау хаттамасын жіберетін болсақ, тұ тынушының локальді дискісіне server серверінің directory каталогіндегі, file.ext файлын жү ктейді.

< A HREF=" mailto: user@mail.box" > Хатты жіберу< /A>

Егер тұ тынушы ауысуды осы сілтеме бойынша жасайтын болса, оның экранында оның пошталық бағ дарламасының хаттарды жіберуді енгізу терезесі ашылады. Пошталық бағ дарламаның терезесінің To: (" қ айда") жолында user@mail.box деп кө рсетіледі.

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

< HTML>

< HEAD>

< TITLE> 8 Мысал < /TITLE>

< /HEAD>

< BODY>

< H1> Байланыстыру < /H1>

< P> Сілтемелердің кө мегімен басқ а файлдарғ а кө шуге болады (Мысалы, < A HREF=" pr.htm" > осы басшылық тың мазмұ ны < /A>) < /P>

< P> Файлдарды жү ктеуге болады (мысалы, < A HREF=" ftp: //yi.com/home/ChuvakhinNikolai/html-pr.doc" > бұ л басшылық Microsoft Word 2.0 пішімінде< /A>) по FTP. < /P>

< P> Тұ тынушығ а поштаны жө нелтуге мү мкіндік беруге болады (мысалы,

< A HREF=" mailto: nc@iname.com" > осы басшылық тың авторына< /A>). < /P>

< /BODY>

< /HTML>

Анкерлер бірінің ішінде бірі бола алмайды. Ашылатын жə не жабылатын белгілер міндетті тү рде болу керек. Анкерлер гипермə тіндік сілтемелерді анық тау ү шін қ олданылады, мысалы,

< a href=" hands-on.html" > бақ ыт< /a> жолы.

Сонымен қ атар, қ ұ жат ішіндегі гипермə тіндік сілтемелер нұ сқ ап кө рсете алатын нақ ты нү ктелерді анық тау ү шін қ олданылады, мысалы,

< h2> < a name=mit> Тек-Сквер 545 – рай для хакера< /a> < /h2>

name Анкер атын анық тайтын жол. Анкерлер аттары бір қ ұ жат ішінде қ айталанбауы керек.

href Гипермə тіндік сілтеме бойынша кө шу жү зеге асырылатын, ресурстың мекен-жайын кө рсетеді.

title Сілтеме жасалғ ан, ресурстың атын білдіреді.

Экрандағ ы кө рініс тө мендегідей болу керек:

5-тапсырма. HTML қ ұ жатына суреттерді қ ою

HTML қ ұ жатына суреттерді қ ою ө те қ арапайым. Суретті қ ай жерге қ ойғ ың ыз келеді, сол орынғ а осы тегты енгізің із. Содан соң файл атын суреттің URL-на ауыстырың ыз.

< IMG SRC=”имя файла”>

Бұ л жерде SRC міндетті атрибут. Ол суретке - GIF, JPEG немесе PNG пішімді форматқ а мең зейтін жол.

Браузер бұ л суретті тиісті орынғ а кө рсетіп шығ арады. Тө мендегі мысалғ а қ араң ыз. Ол бір суретті ү ш рет кө рсетеді. Ə рбір ретте сурет жолда бейнеленеді, сондық тан браузер оны мə тіннің сол жағ ына орналастырады.

< HTML> < HEAD>

< TITLE> IMG тегін пайдалану< /TITLE> < /HEAD> < BODY> < Р>

< IMG SRC=”dog.gif”>

Бұ л мə тін суреттен кейін жазылады.

< Р> Бұ л мə тін < IMG SRC=”dog.gif”> суретпен бө лінген.

< Р> Бұ л жағ дайда сурет мə тіннен кейін пайда болады.

< IMG SRC=” dog.gif”>

< /BODY> < /HTML>

Қ ұ жаттың бұ л бө лігінің экрандағ ы кө рінісі тө мендегідей болу керек:

Жолдағ ы мə тінді суреттермен бірге орналастыру ALIGN атрибутымен жү зеге асырылады. Жолғ а суретті қ ойғ ан кезде мə тін суреттің тө менгі бө лігіне қ ойылады. Мү мкін, бетте тым кө п бос орын қ алатындық тан сіз сурет орнын

ө згерткің із келеді. Бұ ны ALIGN атрибутының кө мегімен < IMG> дескрипторында ө згертуге болады. Кестеде осы атрибутке иемдеуге болатын мə ндер жазылғ ан.

Мə ндер Сипатталуы

align=ТОР Мə тінді суреттің жоғ арғ ы жағ ына қ ою

align=MIDDLE Мə тінді суреттің ортаң ғ ы жағ ына қ арай реттейді

align=BOTTOM Мə тінді суреттің тө менгі жағ ына қ ояды

align=left Суретті сол жақ ө ріс бойынша реттейді. Суреттен кейінгімə тін суреттің оң жағ ынан келеді

align=right Суретті оң жақ ө ріс бойынша реттейді. Суреттен кейінгімə тін суреттің сол жағ ынан келеді

< HTML> < HEAD>

< TITLE> IMG дескрипторында ALIGN атрибутын пайдалану< /TITLE> < /HEAD>

< BODY> < Р>

< IMG SRC=”dog.gif” ALIGN=TOP>

Бұ л мə тін суреттің оң жақ шеті бойынша тураланғ ан. < /Р> < Р>

< IMG SRC=”dog.gif” ALIGN=MIDDLE> Мына мə тін суреттің ортасы бойынша тураланғ ан. < /Р> < Р>

< IMG SRC=”dog.gif” ALIGN=BOTTOM>

Бұ л мə тін суреттің тө менгі жақ шеті бойынша тураланғ ан. < /Р> < /BODY> < /HTML>.

Келесі мысал суреттің мə тінді жанап ө тетіндігін кө рсетеді.

< HTML> < HEAD>

< TITLE> IMG& тегінің ALIGN атрибутында пайдаланылады < /TITLE> < /HEAD>

< BODY>

< P>

< IMG SRC=”dog.gif” ALIGN=LEFT>

Бұ л мə тін суреттің оң жақ шетінде жə не тө менгі жағ ында орналасқ ан.

< /P> < P>

< IMG SRC=”dog.gif” ALIGN=RIGHT>

Бұ л мə тін суреттің сол жақ шетінде жə не тө менгі жағ ында орналасқ ан.

< /Р>

< /BODY>

< /HTML>

Қ ұ жаттың бұ л бө лігінің экрандағ ы кө рінісі тө мендегідей болу керек:

6-тапсырма. FONT тегі

HTML-де мə тіннің сыртқ ы тү рін басқ аруда FONT қ ызмет атқ арады.

FONT элементі < FONT> тегімен ашылып, < /FONT> тегімен жабылатын элемент болып табылады. Егер ашылатын тегте атрибуттар болмаса, онда FONT элементі ешқ андай ə сер етпейді. FONT элементін кез-келген мə тіннің

ішінде қ олдануғ а болады. FАСЕ, SIZE жə не COLOR атрибуттарының кө мегімен қ ұ жаттарда мə тіннің сыртқ ы тү рін тү бімен ө згертуге болады. FACE ө зің іздің қ ұ жат экранғ а шық қ анда қ олданғ ың ыз келетін

қ аріпті таң дауғ а мү мкіндік береді. FACE атрибутының параметрі – қ аріп аты. Атрибутта кө рсетілген атау тұ тынушының компьютеріндегі қ аріп атауымен дə л сай келуі керек, ə йтпесе браузер бұ л атрибутты жояды жə не оқ ырманның белгілеген қ арпін пайдаланады. Қ аріп атауындағ ы бас жə не кіші ə ріптер жойылады, ал бос орындар міндетті тү рде болу керек.

Тө менде қ аріпті қ алай таң дау керектігі кө рсетілген.

< HTML>

< HEAD>

< TITLE> Қ аріп типін таң дау < /TITLE>

< /HEAD>

< BODY>

< FONT FACE=“Arial”> Мына жерде қ аріптің басқ а типі таң дап алынғ ан

< /FONT>

< /BODY>

< /HTML>

Бағ дарлама кө рінісінің нə тижесі тө мендегідей:

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

< HTML>

< HEAD>

< TITLE> Қ аріп таң дау мысалы < /TITLE>

< /HEAD>

< BODY>

< FONT FACE=”Verdana”, “Arial”, “Helvetica”>

Бұ л қ аріп таң дау мысалы. < /FONT>

< /BODY>

< /HTML>

Бұ л мысалда негізгі нұ сқ а есебінде Verdana қ арпі кө рсетілді, бірақ сонымен қ оса Arial жə не Helvetica қ аріптері жазылғ ан.

Бағ дарлама кө рінісінің нə тижесі тө мендегідей:

SIZE Бұ л элемент мə тіннің белгілерінің биіктігін кө рсетуге мү мкіндік береді. Қ аріп ө лшемі 1-ден 7-ге дейінгі шартты бірлікте кө рсетіледі, ə р бірлік қ аріп ө лшемдерін білдіреді. Мə селен, сіздің қ арпің із кə дімгі стильде

болсын десең із, 3-ші ө лшем жазылуы тиіс. SIZE атрибутын екі тү рлі тə сілмен пайдалануғ а болады: 1) қ аріптің абсолют ө лшемін кө рсету керек, мысалы SIZE=5; 2) салыстырмалы ө лшем, мысалы SIZE=+2. Екінші тə сіл кө бінесе негізгі қ аріп basefont кө рсетілген кезде қ олданылады.

Тө менде кө рсетілген мысал қ аріптің абсолют ө лшемін орнату эффектісін кө рсетеді:

< font size=1> size=1 < /font>

< font size=2> size=2 < /font>

< font size=3> size=3 < /font>

< font size=4> size=4 < /font>

< font size=5> size=5 < /font>

< font size=6> size=6 < /font>

< font size=7> size=7 < /font>

Бұ л бағ дарламаның жұ мысының нə тижесі:

Келесі мысал қ аріптің 3-ке тең болатын базалық ө лшемі кезіндегі қ аріптің салыстырмалы ө лшемінің эффектісін кө рсетеді:

size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

Қ аріптің 6-ғ а тең болатын базалық ө лшемінде де дə л солай болады:

size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

Қ аріптің ө лшемінің ө згеру мысалы:

< HTML>

< HEAD>

< TITLE> Қ аріп ө лшемін таң дау мысалы < /TITLE>

< /HEAD>

< BODY>

< FONT SIZE=l> Ө лшем 1 < /FONT> < BR>

< FONT SIZE=-l> Ө лшем 2 < /FONT> < BR>

< FONT SIZE=3> Ө лшем 3 < /FONT> < BR>

< FONT SIZE=4> Ө лшем 4 < /FONT> < BR>

< FONT SIZE=+2> Ө лшем 5 < /FONT> < BR>

< FONT SIZE=6> Ө лшем 6 < /FONT> < BR>

< FONT SIZE=+4> Ө лшем 7 < /FONT> < BR>

< /BODY>

< /HTML>

COLOR Мə тін тү сін қ аріптің тү сі мен ө лшемі сияқ ты қ ылып кө рсетуге болады. COLOR атрибуты RGB-ның он алты мə нін немесе стандартты тү стерді қ абылдайды. Тү стерді анық тау BODY элементінің BGCOLOR атрибутында

қ олданылатындарғ а ұ қ сас болып келеді.

< HTML>

< HEAD>

< TITLE> Тү с таң дау мысалы < /TITLE>

< /HEAD>

< BODY>

< FONT COLOR=“BLUE”> Бұ л мə тін кө к тү сті< /FONT> < BR>

< FONT COLOR= “GREEN”> Ал мына мə тін жасыл тү сті< / FONT> < BR >

< /BODY> < /HTML>

Студенттердің ө зіндік жұ мыстары:

1. 6 Мысал.html файлын ашың ыз (C: \Мои документы\st) жə не келесі ө згерістерді енгізің із:

а) Басты тақ ырыпты жə не Тақ ырыпшаны ортаң ғ ы жақ қ а орналастырың ыз;

ə) Бірінші азат жолдың мə тінін сызық қ а дейін қ ызыл тү спен, екінші азат жолдың мə тінін сызық қ а дейін кө к тү спен, ү шінші азат жолдың мə тінін сызық қ а дейін жасыл тү спен бояң ыз;

б) Азат жолдан кейінгі ү ш қ ара горизонталь сызық тарды басқ а тү стерге бояң ыз жə не олардың ені мен қ алың дығ ын ө з қ алауларың ызша ө згертің із;

в) Мə тін жазылатын жалпы фонды сұ р тү спен бояң ыз;

№4 Зертханалық жұ мыс. Жү гірме жолдарды жə не тізімдерді HTML ортасымен ұ йымдастыру

1-тапсырма. Жү гірме жолдар

< MARQUEE> жə не < /MARQUEE> тегтер браузер терезесінде «жү гірме жолды» қ ұ райды жə не тө мендегі параметрлерімен қ олданылады:

< MARQUEE [ALIGN=" align" ] [BEHAVIOR=" behavior" ] [BGCOLOR=" #rrggbb" ]

[DIRECTION=" direction" ] [HEIGHT=" integer" ] [HSPACE=" integer" ]

[LOOP=" integer" ] [SCROLLAMOUNT=" integer" ] [SCROLLDELAY=" integer" ]

[VSPACE=" integer" ] [WIDTH=" integer" ]> < /MARQUEE>

Олардың белгіленуі тө мендегідей.

ALIGN - «жү гірме жолды» реттеуді жү зеге асырады жə не келесі мə ндердің біреуін қ абылдайды: TOP, MIDDLE, BOTTOM.

BEHAVIOR - мə тіндік анимацияның сипатын анық тайды жə не SCROLL, SLIDE, ALTERNATE мə ндерін қ абылдайды.

BGCOLOR - «жү гірме жолдың» фон тү сін анық тайды (RGB 16-лық пішіміде немесе ағ ылшын атауының біреуі арқ ылы). DIRECTION - мə тіннің қ озғ алысының бағ ытын береді. LEFT жə не RIGHT мə ндері де болуы мү мкін, алайда, ə детте LEFT орнатылғ ан. HEIGHT – «жү гірме жолдың» биіктігін пиксельде анық тайтын бү тін сан.

Сонымен қ атар, пайыздық (%) кө рсеткіште де анық тала алады. HSPACE – айналдыру аймағ ының сыртқ ы шеті мен браузер терезесінің арасындағ ы сол жə не оң жақ ө рістің ө лшемдерін пиксельде кө рсететін бү тін сан.

LOOP – «жү гірме жолдың» қ айталануының жиынын анық тайтын бү тін сан. INFINITE (шексіз) мə нін қ абылдауы мү мкін.

SCROLLAMOUNT – мə тін бір қ адамғ а орын ауыстыратын арақ ашық тық ты пиксельмен анық тайтын бү тін сан.

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

VSPACE – қ адам арасындағ ы аралық ты кө рсететін бү тін сан.

WIDTH –«жү гірме жолдың» енін пиксельде беретін бү тін сан. Пайыздық (%) тү рде де анық талуы мү мкін.

Келесі 13–мысалдан < MARQUEE> < /MARQUEE> тегтерін жə не олардың атрибуттарын пайдалану жолдарын кө руге болады:

< HTML> < HEAD> < TITLE> 13 Мысал < /TITLE> < /HEAD>

< BODY text=red>

< CENTER>

< H2> Жү гірме жолдар < /H2> < HR>

< H3> < MARQUEE BGCOLOR=" Yellow" BEHAVIOR=" SCROLL"

DIRECTION=" RIGHT" SCROLLAMOUNT=" 10" SCROLLDELAY=" 200"

WIDTH=" 90%" > Бұ л жү гірме жол < /MARQUEE>

< P> < MARQUEE BGCOLOR=" Green" BEHAVIOR=" SCROLL"

DIRECTION=" LEFT" HEIGHT=30 SCROLLAMOUNT=" 10"

SCROLLDELAY=" 100" VSPACE=" 40" WIDTH=" 90%" >

Бұ л келесі жү гірме жол < /MARQUEE> < /H3>

< HR> < /CENTER> < /BODY>

< /HTML>

Бағ дарлама кө рінісінің нə тижесі тө мендегідей:

Қ ұ жаттың ішінде мə тінді ұ йымдастыру HTML мə тіннің тұ тас азат жолдарының сыртқ ы тү рін анық тауғ а

мү мкіндік береді. Азат жолдарды тізім тү рінде ұ йымдастырып, оларды пішімделген тү рде экран бетіне шығ аруғ а болады, немесе сол жақ ө рісті ұ лғ айтуғ а болады. Олардың бə рін рет-ретімен талдайық.

2-тапсырма. Нө мірленбеген тізімдер: < UL>... < /UL>

< UL> жə не < /UL> белгілерінің арасында орналасқ ан мə тін нө мірленбеген тізім сияқ ты қ абылданады. Тізімнің ə рбір жаң а элементін < LI> белгісінен бастау керек. Мысалы, тө мендегідей тізім жасау ү шін:

• Қ аламсаптар;

• Қ арындаштар;

• Бояулар

мынадай HTML-мə тін қ ажет (14 мысал):

< HTML> < HEAD> < TITLE> 14 Мысал < /TITLE> < /HEAD>

< BODY text=green>

< H2 FLIGN=CENTER> Маркерленген тізім < /H2> < HR>

< UL>

< LI> қ аламсаптар;

< LI> қ арындаштар;

< LI> бояулар

< /UL>

< HR> < /BODY>

< /HTML>

Назар аударың ыздар: < LI> белгішесінің жабылатын сың арлы белгішесі жоқ.

Осы бағ дарламаның нə тижесі тө мендегідей:

3-тапсырма. Нө мірленген тізімдер: < OL>... < /OL>

Нө мірленген тізімдер, нө мірленбеген тізімдер сияқ ты қ ұ рылғ ан, тек онда жаң а элементті ерекшелейтін, символдардың орнына, сандар қ олданылады. Егер біздің алғ ашқ ы мысалымызды аздап ө згешелендіретін болсақ (14 Мысал):

< HTML> < HEAD> < TITLE> 15 Мысал < /TITLE> < /HEAD>

< BODY text=green>

< H2 FLIGN=CENTER> Нө мірленген тізім < /H2> < HR>

< OL>

< LI> қ аламсаптар;

< LI> қ арындаштар;

< LI> бояулар

< /OL>

< HR> < /BODY>

< /HTML>

Экранда тө мендегідей тізім алынады:

4-тапсырма. Анық тамалар тізімі: < DL>... < /DL>

Анық тамалар тізімі тізімдердің басқ а тү рінен ө згеше болып келеді. < LI>

белгішесінің орнына анық тамалар тізімінде < DT> (ағ ылшынның definition term – анық талатын термин) жə не < DD> (ағ ылшынның definition definition – анық таманың анық тамасы). Оны (16 Мысал, бірінші бө лігі) тө мендегі мысалда

талдап кө рсетейік:

< H3 FLIGN=CENTER> Ұ зын анық тамалар < /H3>

< DL>

< DT> HTML

< DD> HTML термині (HyperText Markup Language) 'гипермə тіндерді

маркерлеу тілі' дегенді білдіреді. HTML-дің бірінші нұ сқ асын Элементар бө лшектер физикасы Европалық зертхананың қ ызметкері Тим Бернерс-Ли ө ң деген болатын.

< DT> HTML-қ ұ жаты

< DD> *.htm кең ейтілуі бар мə тіндік қ ұ жат болып табылады (Unix-жү йелері кең ейтілуі *.html болатын файлдардан тұ рады).

< /DL>

Бұ л кө рініс экранда былай шығ арылатын болады: Назар аударың ыздар: < LI> белгішесі сияқ ты, < DT> жə не < DD>

белгішелерінің де сың арлы (жабылатын) белгішелері жоқ.

Егер анық талатын терминдер неғ ұ рлым қ ысқ а болса, онда модификацияланғ ан ашылатын < DL COMPACT> белгішесін пайдалануғ а болады. Мысалы, HTML мə тіннің мынадай кө рінісі (16 мысал, екінші бө лігі)

берілсін:

< HR> < H3 FLIGN=CENTER> Қ ысқ а анық тамалар < /H3>

< DL COMPACT>

< DT> А

< DD> Алфавиттің бірінші ə рпі

< DT> Б

< DD> Алфавиттің екінші ə рпі

< DT> В

< DD> Алфавиттің ү шінші ə рпі

< /DL>

Экрандағ ы кө рініс шамамен мынадай болуы керек:

5-тапсырма. Алдын-ала қ ойылғ ан тізімдер

Кез-келген тізімнің элементінің қ ұ рамында кез-келген тү рдегі тү рдегі біртұ тас тізімдер болады. Алдын-ала қ ойылғ ан тізімдер ə ртү рлі типтегі жоспарлар мен мазмұ ндарды дайындағ ан кезде ө те ың ғ айлы.

Біздің тізімдер жө нінде білімімізді қ ысқ аша 17 мысал тү рінде келтіруімізге болады:

< html> < head> < title> 11 Мысал < /title> < /head>

< body>

< H1> HTML тізімдердің бірнеше тү рлерін қ амтиды < /H1>

< DL>

< DT> нө мірленбеген тізімдер

< DD> нө мірленбеген тізім элементтері сол жақ қ а қ арай арнайы символдармен жə не шегініспен ерекшеленеді:

< UL>

< LI> 1-ші Элемент

< LI> 2-ші Элемент

< LI> 3-ші Элемент

< /UL>

< DT> нө мірленген тізімдер

< DD> нө мірленген тізім элементтері сол жақ қ а қ арай шегініспен, сонымен қ атар нө мірлермен ерешеленеді:

< OL>

< LI> 1-ші Элемент

< LI> 2-ші Элемент

< LI> 3-ші Элемент

< /OL>

< DT> Анық тамалар тізімдері

< DD> Тізімдердің бұ л тү рі алдың ғ ы екеуіне қ арағ анда кү рделірек болғ анымен ə серлі болып кө рінеді.

< P> Тізімдердің біреуін басқ а тізімдерге қ оюғ а болатынын есте ұ стаң ыздар, бірақ тізімдерді қ оюдың тым кө п дең гейлерін қ оюдың керегі жоқ. < /P>

< P> Тізім элементтерінің ішінде бірнеше азат жолдар болуы мү мкін. Сонымен қ оса, барлық азат жолдардың сол жақ ө рістері бірдей болады.

< /P>

< /DL>

< /body> < /html>

Осы бағ дарламаның нə тижесі тө мендегідей:

Студенттердің ө зіндік тапсырмалары:

1. 13 мысалын терің із, нə тижесін қ араң ыз жə не ары қ арай келесі ө згерістерді жасаң ыз:

а) Жү гірме жолдың биіктігін ө згертің із;

б) Бірінші жү гірме жолдың мə тінінің тү сін - қ ызыл, екінші мə тіндікін - кө к __________қ ылың ыз;

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

2. 2 бетке 14 мысалын терің із, нə тижесін қ араң ыз жə не ары қ арай ə р жолғ а топстуденттерінің есімдерінің тізімдерін жазың ыз;

3. 2 бетке 15 мысалын терің із, нə тижесін қ араң ыз жə не ары қ арай ə р жолғ а топ студенттерінің тегін жазып, жуан жə не ə ртү рлі тү сті бө ліп тұ ратын горизонталь сызық тар жү ргізің із;

4. 3 бетке 16 мысалын терің із, нə тижесін қ араң ыз жə не ары қ арай ұ зын анық тамалар жолында экономисттің, бухгалтердің, қ аржы қ ызметкерінің мамандығ ына тү сіндірме берің із;

5. 3 бетке 16 мысалын терің із, нə тижесін қ араң ыз жə не ары қ арай қ ысқ а анық тамалар жолында топ студенттерінің аттарын жазың ыз жə не «оқ у озаты», «ə демі жігіт», «сұ лу қ ыз» сияқ ты сө здерге қ ысқ аша сипаттама берің із;

6. 3 бетке 17 мысалын сіздің мə тінді ө згерткен кө ріністерің ізбен терің із, нə тижесін қ араң ыз жə не ары қ арай ə р жолда жолдарды жə не оларды безендіруді ө з қ алауың ыз бойынша ө згертің із.

№5 Зертханалық жұ мыс. Кестелерді қ ұ ру

Кесте < TABLE> жə не < /TABLE>, жолдар – < TR> жə не < /TR> тегтарымен, ал жолдағ ы жеке бағ андар – < TD> жə не < /TD> немесе < ТН> жə не < /ТН> тегтерімен анық талынады. Кесте тақ ырыбының < ТН> жə не < /ТН> біріктірілген бағ андарындағ ы тегтері, < TD> < /TD> ұ яшық тарының тегтері сияқ ты функцияларды орындайды, бірақ < ТН> < /ТН> олардың арасына қ ойылғ ан мə тіннің қ алың болуын браузерге бұ йырады.

Бас ə ріптің тегтері < CAPTION> < /CAPTION> кесте тақ ырыбын береді.

Кестені анық тау келесі синтаксиске ие:

< TABLE ALIGN=" align" BGCOLOR=" #rrggbb" BORDER=" integer"

BORDERCOLOR=" #rrggbb" CELLPADDING=" integer"

CELLSPACING=" integer" WIDTH=" integer" >

< /TABLE>

Олардың атқ аратын функциялары мыналар:

ALIGN - кестені туралауды анық тайды (қ алыпты жағ дайда – сол жақ жиегі бойынша). ALIGN келесі мə ндердің біреуін қ абылдай алады: LEFT, CENTER, RIGHT.

BGCOLOR - фонның тү сін береді (RGB 16-лық пішімінде немесе тү стердің ө з аттарын беру арқ ылы).

BORDER – кестенің жақ тауларының қ алың дығ ын пиксельде беретін, бү тін сан. Егер BORDER анық талмағ ан болса, жақ тауы кө рінбейді.

BORDERCOLOR жақ таудың тү сін анық тайды (RGB 16-лық пішімінде немесе тү стердің ө з аттарының бірін беру арқ ылы); BORDER атрибутымен бірге қ олданылуы керек.

CELLPADDING – ұ яшық тағ ы берілгендер мен ұ яшық тың жақ тауы арасындағ ы горизонталь жə не вертикаль арақ ашық тық ты беретін бү тін сан. Ол пиксельде беріледі.

CELLSPACING – ұ яшық тар арасындағ ы горизонталь жə не вертикаль арақ ашық тық ты анық тайтын бү тін сан. Ол пиксельде беріледі.

WIDTH – кестенің енін анық тайтын бү тін сан. Оның мə ні пиксельде немесе пайыздық (%) тү рде берілуі мү мкін.

Тақ ырып тө менде кө рсетілген синтаксиске сай < CAPTION> тегімен анық талады:

< CAPTION ALIGN=" align" VALIGN=" valign" > < /CAPTION>

< CAPTION> тегінің тө мендегідей атрибуттары бар:

ALIGN тақ ырыпты туралауды анық тайды жə не келесі мə ндердің бірін қ абылдайды: LEFT, CENTER (қ алыпты жағ дайда) немесе RIGHT. VALIGN тақ ырыпты вертикаль туралауды анық тайды жə не келесі

мə ндердің бірін қ абылдайды: ТОР, MIDDLE, BOTTOM (қ алыпты жағ дайда), BASELINE.

< TR> < /TR> тегімен анық талатын кесте жолының ө зінің атрибуты бар:

< TR ALIGN=" align" BGCOLOR=" #rrggbb" BORDERCOLOR=" #rrggbb" >

Жол… < /TR>.

< TR> тегінің атрибуттары:

ALIGN – жолдарды туралау. LEFT (қ алыпты жағ дайда), CENTER, RIGHT сияқ ты мə ндер де болуы мү мкін.

BGCOLOR фонның тү сін анық тайды (RGB 16-лық пішімінде немесе анық тү стеу аттарының бірі).

BORDERCOLOR – жолдың жақ тауының тү сі (RGB 16-лық пішімінде немесе тү стердің ө з аттарының бірін беру арқ ылы). Бұ л атрибут < TABLE> тегінің BORDER атрибутына 0-ден ө згеше мə н берген жағ дайда ғ ана

қ олданылады.

Кесте ұ яшық тары (бағ андар) келесі синтаксистерге сай < TD> < /TD>

жə не < ТН> < /ТН> тегтерімен анық талады:

< TD немесе ТН ALIGN=" align" BACKGROUND=" url" ] BGCOLOR=" #rrggbb"

BORDERCOLOR=" #rrggbb" ] > Бағ ан… < /TD или /TН>

< TD> жə не < ТН> тегтерінің тө мендегідей атрибуттары бар:

COLSPAN – Бағ андардың тақ ырыптары ү шін арналғ ан, берілген ұ яшық қ а тү сетін, бағ андар жиынын анық тайды.

Енді тапсырмаларды қ арастырайық.

1-тапсырма. Келесі мысалды терің із, нə тижені қ араң ыз жə не ары қ арай кейбір ө згерістерді орындаң ыз:

< TABLE ALIGN=CENTER BORDER=3 CELLSPACING=2

CELLPADDING=2 WIDTH=" 80%"

BGCOLOR=YELLOW BORDERCOLOR=BLUE>

< CAPTION> < H2> Кесте тақ ырыбы < /H2> < /CAPTION>

< TR> < TD> кестенің бірінші торы < /TD>

< TD> кестенің екінші торы < /TD> < /TR>

< TR> < TD> кестенің ү шінші торы < /TD>

< TD> кестенің тө ртінші торы < /TD> < /TR>

< /TABLE>

а) 1 - жолдың фон тү сін кү міс, сұ р тү стерге (< TR BGCOLOR=SILVER>) ө згертің із.

б) жақ тау қ алың дығ ын, тордағ ы мə тінді жə не т.б. ө згертің із.

Экрандағ ы кө рініс мынадай болу керек:

2-тапсырма. Келесі мысалды терің із, нə тижені қ араң ыз жə не ары қ арай кейбір ө згерістерді орындаң ыз:

< table align=right border=3 width=80% bordercolor=blue> < caption

align=right> Кестенің жоғ арғ ы жағ ының оң жағ ында тақ ырыбы шығ ады

< /caption>

< tr> < th colspan=3> Бағ ан тақ ырыбы < /th> < /tr> < tr align=right

bgcolor=yellow> < th> Бағ ан 1 < /th> < th> Бағ ан 2 < /th> < th> Бағ ан 3< /th> < /tr>

< tr> < td> 1 бағ анның берілгендері < /td>

< td> 2 бағ анның берілгендері < /td>

< td> 3 бағ анның берілгендері < /td>

< /tr>

< /table>

Экрандағ ы кө рініс мынадай болуы тиіс:

а) екі жолғ а да тағ ы бір бағ ан қ осың ыз;

ə) тағ ы да екі жол қ осың ыз;

б) тордағ ы мə тіндердің сө зін, жол фонының жə не жеке торлардың тү сін ө згертің із;

в) тақ ырып тү сін ө згертің із жə не т.б.

г) кесте алдында, кесте тақ ырыбынан кейін жə не соң ынан ə ртү рлі тү сті горизонталь сызық тарды жү ргізің із.