Кестелер:
HTML тіліндегі кестелер құрылымдалудың басты құралдарының бірі болып табылады.
Келесі мысалды қарастырайық:
<table width=300 height=200 border=1 cellpadding=5 cellspacing=1>
<tr>
<th>Баған 1</th>
<th> Баған 2</th>
<th> Баған 3</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
width ="..." - кесте ұзындығы (в пикселах или процентах)
height ="..." - кесте биіктігі (в пикселах или процентах)
border ="..." - сызықтар қалыңдығы (если указать 0 - таблица станет невидимой!)
cellpadding="..." - ұяшықтардағы объектілердің айналасы
cellspacing="..." - ұяшықтар арасындағы қашықтық
Нәтиже мына түрде:
Баған 1 |
Баған 2 |
Баған 3 |
11 |
12 |
13 |
21 |
22 |
23 |
<tr> ... <tr> - кесте жолын береді
<th> ... <th> - жолдағы ұяшықты береді(баған тақырыбы)
<td> ... <td> - жолдағы ұяшықты береді (ұяшық)
Әр жол немесе ұяшық үшін, кестеден бөлек, түзетулер немесе фон бере аламыз:
Баған 1 |
Баған 2 |
Баған 3 |
11 |
12 |
13 |
21 |
22 |
23 |
<table background="путь"> - барлық кесте үшін фондық сурет
<tr bgcolor=#ccffcc> - барлық жол бойынша фон түсі (жасылдау)
<td align=right> - ұяшықта көлденеңнен түзету (оңға)
<th valign=bottom> - ұяшықта тігінен түзету (төмен қарай)
<tr height=10> - жол биіктігі (10)
<td width=100> - баған ұзындығы (100)
Ұяшықтарды біріктіру:
Баған 1,2 |
Баған 3 |
|
11 |
12 |
13 23 |
21 |
22 |
|
<th colspan=2> - көлденеңнен біріктіру (бұл ұяшық екі көлденең ұяшықты біріктіреді)
<td rowspan=2> - тігінен біріктіру (бұл ұяшық тігінен екі ұяшықты біріктіреді)
HTML командалары.
HTML тілінің бастапқы мәтінді белгілейтін командалары тәг деп аталады. Тәг символдар тізбегінен тұрады. Барлық тәг “кіші” ( <) символынан басталады да, “үлкен” (>) символымен аяқталады. Осындай кос символ тізбегі бұрыштық жақшалар деп аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз – тәг орналасады.
HTML тіліндегі әрбір тәг бір арнаулы қызмет атқарады. Олардың жазылуында әріптер регистрі ешбір рөл атқармайды, бас әріпті де, кіші әріптерді де қатар қолдана беруге рұқсат етілген. Бірақ тәг атауларын жай мәтіннен айыру мақсатында оларды бас әріппен жазу қалыптасқан.
HTML тілінің бір тәгі әдетте құжаттың белгілі бір бөлігіне, мысалы бір абзацқа ғана, әсер етеді. Осыған орай екі тәг қатар қолданылады: бірі – ашады, екіншісі – жабады. Ашатын тәг белгілі бір әсер ету ісін бастайды, ал жабатын тәг- сол әсерді аяқтайды. Жабу тәгтері қиғаш сызық символымен (/) басталуы тиіс.
Кейбір тәгтер өз жазылу орнына қарай тек бір ғана әсерін тигізеді. Мұндайда жабу тәгі қажет болмай қалада да, ол жазылмайды. Егер тәг ретінде HTML тілінде қолданылмайтын түйінді сөз жазылып кетсе, онда оның ешбір әсері болмайды.
Броузер арқылы құжат экранда көрсетілген шақта тәгтердің өздері бейнеленбей, тек олардың құжат мәтініне тигізетін әсері ғана білініп тұрады.
Тәг атрибуттары
Көбінесе ашылу тәгтерінің тигізетін әсерлерін түрлендіретін олардың атрибуттары болады. Атрибуттар немесе сипаттамалар – тәг атауының және бір-бірінен бос орын арқылы бөлініп жазылатын қосымша түйінді сөздерден тұрады.
Кейбір атрибуттар оның мәнін жазуды талап етеді. Атрибут мәні оның түйінді сөзінен теңдік белгісі (=) арқылы бөлініп жазылады. Атрибут мәні қостырнақшаға алынып жазылуы тиіс, бірақ кейде костырнақшаны жазбаса да болады.
Жабылу тәгтерінің ешқашанда атрибуттары болмайды.
HTML құжатының құрылымы
HTML құжаты сол құжаттың негізгі мәтінінен және белгілеу тәгтерінен тұрады да, қарапайым символдар жиыны болып табылады. Сондықтан оны құрастыру үшін жай мәтіндік редактордың бірін, мысалы Windows ортасындағы Блокнотты, пайдалана беруге болады.
1.HTML құжатының кез келгені < HTML > тәгінен басталып, соған сәйке
</ HTML > түріндегі жабылу тәгімен аяқталады. Осы екеуінің ортасында
құжаттаың тақырыптық бөлігі мен тұлғасы болып келетін негізгі бөлігі
орналасады.
2. Құжаттың тақырыптық бөлігі <HEAD> және </HEAD> тәгтерінің
ортасында тұрады да, жалпы құжат туралы мәлімет береді. Әдетте, бұл
бөлікті <TITLE> … </TITLE> тәгтерімен шектелетін құжаттың ресми
атауы орналасады. Көптеген броузерлер бұл атауды терезе тақырыбында
тұратын файл аты есебінде пайдаланады.
3. Жазылатын мәтін құжат тұлғасы деп аталатын <BODY>…</BODY>
тәгтерінің ортасына жазылады.
Осы айтылған төрт тәг HTML құжатының кез келгенінде болуы тиіс. Бірақ < HTML >, <TITLE> тәгтерін жазбай кетсе де болады, дегенмен HTML тілінің құрылымы олардың толық болуын талап етеді. Өйткені алдын ала тұтынушының қандай броузер пайдаланатыны, оның қалай жұмыс істейтіні порграмма құрушыға белгісіз болады ғой.
Енді қарапайым түрде дұрыс құрастырылған HTML құжатын мысал ретінде келтіре кетейік.
< HTML >
<HEAD>
<TITLE> Құжат тақырыбы </TITLE>
</HEAD>
<BODY>
Бұл мәтін экранға шығады
</BODY>
< /HTML >
Осы құжат жұмысы нәтижесінде экранға мынадай мәтін ғана шығады:
Бұл мәтін экранға шығады.
Құжаттың функционалдық бөліктерін анықтау
HTML тілі құжаттың функционалдық жеке бөліктерін сипаттауға арналған. Көптеген құжаттарда негізгі функционалдық бөліктер ретінде тақырыптар мен абзацтар да қарастырылады.
1. HTML тілі құжаттардың ішкі тақырыптардың көлеміне қарай алты түрлі
деңгейін жасай алады. Олар <H1> және </H1> тәгтерінен басталып, <H6>
және </H6> тәгтеріне дейін жалғасады. Компьютер экранында олар әртүрлі
мөлшердегі қәріптермен көрсетіледі.
HTML тілінің идеология бойынша тақырып болып келетін кез келген мәтін
осы тәгтердің бірімен бейнелеуі тиіс. Тәгтерсіз де мәтін әріптерін улкейтіп
жазатын басқа мүмкіндіктер де бар.
2. Жаңа жолдан басталатын абзацтарды белгілеу үшін <Р> тәгі (жабу тәгі
</Р>) қолданылады. Бір абзацты жаппай жаңа абзац бастап кетсек,
алдыңғы абзац автоматты түрде жабылады. Сондықтан көбінесе <Р>
түріндегі жабу тәгін жазбаса да болады. HTML тілінде абзац азат жолдан
басталмайды, тек абзацтар арасына бір бос жол қалдырып кетеді. Көбінесе
абзацтарды анық етіп бөліп тұру үшін көлденең горизонталь сызық
қойылады. Горизонталь сызық қою <HR> тәгімен көлденең орындалады,
оның жабу тәгі болмайды.
3. Сөздер арасына қойылған бірнеше бос орын таңбаларын тек біреу ғана
көріп тұрады да, басқалары жойылып кетеді. Сол сияқты келесі қатарға
көшіретін Enter пернесін басу таңбасы да HTML тілінде ешбір әсер
етпейді.
4. Егер абзац жасап бос жол қалдырмай, жаңа жолға көшу қажет болса, онда
парсыз жалғыз қолданылатын <BR> тәгін қолдану керек.
<HTML>
<HEAD>
<TITLE> Құжаттың функциональдық бөліктері. </TITLE>
<HEAD>
<BODY>
<H1> 1 - деңгейдегі бас тақырып </H1>
<H2> 2 – деңгейдегі ішкі тақырып </H2>
<H> Мына жолдар екі – үш қатарға бөлініп жазылғанымен олар
бір жолға бірге жазылады.
<P> Жабу тәгін жазбаса да болады.
<P> Абзац басы тәгі тек даңа жолға көоіріп қана қоймай, жол
арасына орын қалдырып отырады.
<NR> Горизотталь сызықтан кейінгі мәтін <BR> екі жолға
бөлініп жазылған.
<BODY>
</HTML>
Құжаттың негізгі бөлігі
Құжаттың тақырыптан кейінгі негізгі бөлігі <BODY>... </BODY> тәгтерінің ортасында орналасады. Мұнда көптеген атрибуттар, яғни параметрлер болады. Олардың әрқайсысы құжаттың формасын, әріптері түсін т.б. анықтайды. Бұл тәгтің негізгі атрибуттары: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK, ALINK. Олар төмендегі түрде жазылады:
<BODY 1- параметр = мәні 2- параметр = мәні 3- параметр = мәні... >
құжаттың негізгі тұлғасы
</BODY>
1. Параметрлер тізімін толық берудің керегі жоқ, көбінесе олардың бірде біреуі болмауы да мүмкін, мұндайда олардың алдын ала келісім бойынша бекітілген мәндері қолданылады.
BGCOLOR – құжаттың жалпы мәтінінің фонын түсін анықтайды, егер ол көрсетілмесе, ақ тіс қолданылады. Фон түсі ағылшын тілі аттарымен немесе оналтылық сандар түрінде RGB тәсілімен беріледі. Мысалы:
<body bgcolor = “ yellow”> мұнда фон түсі сары болады.
TEXT – мәтін әріптерінің түсін анықтайды, егер ол жазылмаса, келісім бойынша қара түс қабылданған. Фон түсін өзгерткенде соған үйлесімді символдар түсі бекітіледі. Бұл да ағылшын тілі аттарымен немесе оналтылық сандар түрінде RGB тәсілімен беріледі.
LINK – гипермәтіндік сілтеме ретінде қабылданған сөз тіркесінің түсін белгілейді. Егер көрсетілмесе, ол көк түс болып саналады.
VLINK – пайдаланылған гипермәтіндік сілтеме түсін анықтайды. Келісім бойынша, ол қызылқоңыр түс болып саналады.
ALINK - гипермәтіндік сілтемені курсор көрсетіп тұрған кездегі оның түсін белгілейді. Бұл мәтін өте сирек өзгертіледі.
BACKGROUND – мәтіннің фонында орналасатын суретті анықтайды, ол түс қағаз рөлін атқарады. Суреттік файлдың типі gif немесе jpg болуы тиіс.
Суреттің адресі көрсетілсе, ол Интернет желісінен тауып алады.
2. HTML тілінде түрлі түстер он алтылық сандар түріндегі RGB тәсілімен берілуі де ( COLOR= # COFFCO) мүмкін, оның мүмкіндігі өте мол. Мұндағы алғашқы екі сан қызыл (Red) бөлігін, келесі екі сан – жасыл түс (Green) бөлігін, соңғы екі сан көк (Blue) түс бөлігін анықтайды. Жоғарыдағы көптеген параметрлер түсті пайдаланады, олар ағылшын тіліндегі негізгі он алты түс атымен немесе солардың кодтарымен төмендегідей түрде беріледі.
Black = «#000000» қара Silver= «# cococo» күміс түсті Grey = «#808080» сұр White = «# FFFFFF» ақ Maroon = «#800000» қызыл күрең Purple = «#800080» күлгін Red = «# FF0000» қызыл Fuchsia = «#FF00FF » қызғыш |
Green = «#008000» жасыл Lime = «# 00FF00» лимон түсті Olive = «#808000» кофе түсті Yellow = «#FFFF00» сары Navy =«#000080» қаракөк Blue = «#0000FF» көгілдір Teal = «#008080» шай түсі Aqua = «#00FFFF» көк |
1. Келесі жолға көшу <BR>тәгі арқылы орындалады. Ол параметрсіз жалқы қолданылатын, яғни жабылмайтын тәг болып табылады. Мысалы:
<BR> Абай Құнанбаев <BR> Мұхтар Әуезов <BR> Сәкен Сейфуллин
Бұл жолдарда экранға мынандай мәліметтер шығады:
Абай Құнанбаев
Мұхтар Әуезов
Сәкен Сейфуллин
Ал мына жолдар:
<P> Мына жолдар екі – үш қатарға
бөлініп жазылғанымен олар
бір жолға бірге жазылады.
Экранға мынадай мәлімет шығарады:
Мына жолдар екі – үш қатарға бөлініп жазылғанымен олар бір жолға бірге жазылады.
2. <HR> тәгі экран бетінде көлденең сызық жүргізеді. Ол параметрсіз қолданылса, төмендегідей көлденеең жолды толық алып тұрған қара сызық жүргізеді:
Ал параметрлер арқылы оның түсін, ұзындығын және қалыңдығын өзгертуге болады. Төменде бірнеше көлденең сызықтардан мысал келтірілген:
Бұл жолдардың нәтижесі төмендегідей:
<HTML>
<HEAD>
<TITLE> Cызықтар </TITLE>
</HEAD>
<BODY>
<H1> Бірнеше көлденең сызықтар: </H1>
<HR color = red size= 2 width = 100 %><BR>
<HR color = green size= 4 width = 50 % ><BR>
<HR color = blue size = 8 width = 25 %><BR>
<HR color = black size= 16 width = 12 %><BR>
</BODY>
</HTML>
Web – парақтардағы суреттер
Суреттік бейнелер Web – парақтарды әшекелеп безендіру кезінде маңызды құралдар рөлін атқарады. Суреттердің өздері HTML құжаттарынан бөлек орналасқан жеке файлдарда сақталады, алайда олар броузер арқылы Web – парақтардың ішінде бейнеленелі. Суреттерді бейнелеу ережелерін былай беруге болады.
1. суреттерді құжаттардың ішіне орналастыру үшін <IMG…> жеке, яғни жабылмайтын жалқы тәг қолданылады.
2. Бұл тәгте міндетті түрде SRC = «...» атрибуты болуы керек, оның мәнін абсолюттік және салыстырмалы түрде жазылған бейнелеу файлның URL – адресі көрсетіледі. Құжатты әкранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді және ол <IMG…> тәгі тұрған орыннан көрінеді. Мысалы мына жол:
<IMG SRC= « Закат. jpg»>
экранға Закат. jpg файлдағы суретті шығарады.
Ескерту: қазіргі кездегі броузерлер тек қана gif, jpg, png типтердегі суреттік файлдарды ғана пайдаланады.
3. Суреттер өздрінің көлемдерін сақтай отырып Web – парағына орналасады. Егер суретті ықшамдап бейнелеу кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін WIDTH= (ені) және HEIGIT = (биіктігі) атрибуттарының көмегімен беріге болады. Осы екі атрибуттардың мәні Web – парақтағы суреттің биіктігі мен енін бүтін санмен берілген пиксельмен көрсетеді. Төмендегі жол:
<IMG SRC= « Закат. jpg» WIDTH=500 HEIGIT =250 > суретті 500*250 нүктелерден тұратын төртбұрышты аумаққа орналастырады. Сурет айналасындағы жақтау зысығының қалындығын да параметр ретінде көрсетуге болады:
Border = Пикселдер саны
Жақтау тек әдемілік үшін ғана емес, суретті А тәгінің ішінде гипперсілтеме ретінде пайдаланғанда, ол бір рет шертілген соң жақтау сызығының түсі өзгеріп оның колданылғаны белгілі болып тұрады. Енді гипперсілтеме ретінде суретті пайдаланудан бір мысал келтіреік:
<HTML>
<BODY>
<A HREF = « dog.htm»> <IMG SRC = « dog. gif» WIDTH=87 HEIGIT =100
BORDER=2 > </A>
</BODY>
</HTML>
Бұл жолдар гипперсілтеме ретінде шығатын ит суретін шығарады, оны шерту иттер туралы мәліметке ауысуды орындайды.
Құжаттарда суреттерді бейнелегенде, оның орындала бермейтін бірсыпыра ерекшеліктері бар екенін айта кеткен жөн. Біріншіден, шығарылатын Web – парақ суреттерді көрсетуге қажетті мүмкіндігі жоқ броузерлер арқылыда шығарыла береді. Екіншіден, көбінесе қолданушылар құжатты желі арқылы тез қабылдау үшін суреттерді бейнелейтін команданы алып тастайды. Бұл екі жағдайда да суретті көре алмағанның өзінде, суретте не бейнелетінін қосымша мәтіндерді қолданады.
4. Қосымша мәтін суреттің мүмкіндігінше толық мәтін түрінде сипатталады. Егер қандайда болсын себептерге байланысты броузер суретті көрсете алмаса, ол суреттің орнына сипаттама ретінде қосымша мәтін беріледі. Ол мәтін <IMG…> тәгі арқылы ALT = «...» арнайы атрибуттың мәнімен беріледі. Мысалы:
<HTML>
<BODY>
<IMG SRC = « dog. gif» alt = «ит суреті»>
</BODY>
</HTML>
Бұл жолдар сурет шықпаған жағдайда, сол сурет орнына тышқан курсорын алып барғанда, ит суреті деген сөзді бейнелейді.
Суреттер маңына оған түсінік беретін мәтін жазылғанда, оны суретке байланысты жоғары немесе төмен жылжытатын мүмкіндіктер және суреттің беттің сол немесе оң жақ шетіне жылжыту Align атрибуты арқылыберіледі. Оны туралау атрибуттары деп атайды, олар:
Align = «bottom» - мәтін суреттің төменгі жағында;
Align = «left» - сурет жолдың сол жағында;
Align = «middle» - мәтін суреттің ортасында;
Align = «right» - сурет жолдың оң жағында;
Align = «top» - мәтін суреттің жоғары жағында орналасқан.
<IMG SRC= « Закат. jpg» border=2 align = «middle»> Күннің батуы.
Мұнда мәтін сурет ортасында орналасады.
<IMG SRC= « Закат. jpg» border=2 align = «top»> Күннің батуы.
Мұнда мәтін суреттің жоғарға жағында орналасады.
<IMG SRC= « Закат. jpg» border=2 align = «right»> Күннің батуы.
Мұнда мәтін сурет жолдың оң жағында орналасады.
Қаріп стильдерін басқару
HTML 4.0 нұсқасынан бастап кез келген құжатты әдемілеп әшекейлеу ісін, сол құжаттан бөлек жасау мүмкіндігі пайда болды, алайда бұл концепция тек байқау сипатына ие болып отыр және оны көптеген броузерлер арқылы жасауға болмайды. Сол себепті HTML тілінде, тек қана құжаттарды әшекейлеу үшін ғана қолданылатын тәгтер ғана бар.
1. Әріптің мөлшерін, түсін және сызылымын таңдап алу үшін <FONT> тәгін пайдаланады. Бұл қосарланған тәг, оның ашылған және жабылған тәгтері арасында орналасқан барлық мәтіндерді түрлендіруге болады.
<FONT> тәгінде қолдануға болатын SIZE =…; COLOR =…; FACE =…; тәрізді үш атрибуттың бірі тұруы тиіс.
SIZE =… атрибуты әріптің көлемін тағайындайды. әріптердің алдын ала берілетін жеті түрлі көлемі бар, олар 1- ден 7- ге дейінгі сандармен белгіленеді. Бұл сандар бір өлшем бірліктеріне сәйкес келмейді, тек санның мәні үлкейген сайын әріптің де мөлшері ұлғаяды. Егер сан көрсетілмесе, келісім бойынша ол үшке тең болып саналады.
COLOR =… атрибуты әріптің түсін таңдау мүмкіндігін береді, ол ағылшын тіліндегі мағынасы бар түйінді сөз арқылы немесе RGB жүйесіндегі он алтылық санмен берілуі да мүмкін.
FACE =… атрибуты қаріп типін береді. Осы атрибуттың мәні компьютерге орнатылған қаріптер атының біріне сәйкес келуі керек. Бірақ Интернетте орнатылған құжатты қабылдайтын тұтынушының компьютерінде қандай қаріптердің орнатылғандарының алдын ала білу қиын, сол себепті осы атрибутты көрсетілген дұрыс. Мысалы:
<HTML>
<BODY>
Алдарыңызда < font color=”red” FASE =“ARIAL” SIZE =”3”> үшінші мөлшермен типімен жазылған қызыл түсті әріптер </FONT>
</BODY>
</HTML>
Мұның нәтижесі:
Алдарыңызда үшінші мөлшермен типімен жазылған қызыл түсті әріптер
2. Осы параметрлердің барлығын бүкіл құжат үшін бірден біреу қажет болса, онда <BASEFONT> атты бір ғана тәг пайдаланады. Бұл тәгте де жоғарыда келтірілген атрибуттар пайдаланады, олар қаріп түрін, түсін және мөлшерін анықтайды, егер олардың нақты мәндері көрсетілмесе, үнсіз келісім тәсілі бойынша белгілі бір мәндер таңдалып алынады.
3. Тәгтердің тағы бір арнайы тобы қаріптердің сызылымын өзгерту мүмкіндігін береді. <B> және </B> тәгтері араларында орналасқан мәтін қарайтылған қаріпке ауысады. <I> және </I> тәгтері қаріптерді курсивпен берсе, <U> және </U> тәгтері мәндерінің астын сызып, <S> және </S> тәгтері белдерінен сызылған символдарды бейнелейді. Мысалы:
<HTML>
<HEAD> Қәріп типін, түрін, мөлшерін басқару
</HEAD>
<BODY>
<BASEFONT SIZE=4 FACE= “Arial KZ”>
Негізгі қаріп Arial KZ типінде төртінші мөлшермен жазылған
<P><FONT SIZE= - 2 FASE= “Times New Poman KZ” COLOR= “GREEN”> Бұл мәтін әріптерді алдыңғыдан екі мөлшерге ұқсату жане ол басқа қәріп типі мен жасыл түсті қолданылады. </FONT>
<P> <B> қарайтылған қәріп түрі </B>
<P> <I> қисатылған курсивпен жазылған қаріп түрі </I>
<P> <U> асты сызылған қәріп түрі </U>
<P> <S> белінен сызылған қәріп түрі </S>
</BODY>
</HTML>
Мұның нәтижесі:
Негізгі қаріп Times New Poman KZ типінде төртінші мөлшермен жазылған
Бұл мәтін әріптерді алдыңғыдан екі мөлшерге ұқсату жане ол басқа қәріп типі мен жасыл түсті қолданылады.
қарайтылған қәріп түрі
қисатылған курсивпен жазылған қаріп түрі
асты сызылған қаріп түрі
б
елінен
сызылған қәріп түрі
Мәтін фрагменттерін логикалық стильмен безендіру
Логикалық стильдер <B> <I> <U> тәгтері сияқты сөздерді ерекшелеп көрсетеді, олар программа мәтінін жазғанда немесе цитат келтірген кезде қолданылады. Логикалық стильдерді пайдалану кезінде броузер экранға не шығаратынын алдын ала айту қиын. Әртүрлі броузерлер экранға логикалық стильмен берілген символдарды әртүрлі етіп шығаруы мүмкін. Бұрынғы броузерлер логикалық стильде берілген қаріптерді ерекшелемей, жай қаріп түрінде бейнейлей беруі де ықтимал.
<EM>… </EM>
Ағылшынның emphasis - акцент сөзінен шыққан, яғни курсив түрінде берілетін мәтін бөлігін қоршап тұратын белгілер болып табылады.
<STRONG> …</STRONG>
Ағылшының strong emphasis – күшті акцент дегенді, мәтін ішінде қарайтылған қаріп болып көрсетіледі.
<CODE>…</CODE>
Программа мәтінін көрсету үшін қолданылатын стиль түрі.
<SAMP>…</SAMP>
Ағылшының simple – мысал, үлгі деген сөзді, программа жұмысын нәтижелерін ендері бірдей моношрифт түрінде экранға шығарарда пайдаланылады.
<KBD>…</KBD>
Ағылшының keyboard – пернетақта қысқаша сөзі. Пернелерден енгізілген сөз тіркестерін көрсету мақсатында қолданылады.
<VAR>…</VAR>
Ағылшының variable – айнымалы сөзі, программадағы айнымалы аттарын жазу үшін енгізілген стиль түрі, қыйсатылған курсивке ұқсас қаріп түрі.
Осылардың жұмысын бір мысал арқылы көрсетейік:
<HTML>
<HEAD> <TITLE> Мысал </TITLE> </HEAD>
<BODY> <CENTER>
<H2> Мәтін фрагменттерін белгілеп ерекшелеу тәсілдері </H2>
<P> Мәтіндерді төмендегідей түрде ерекшелеуге болады <BR> <HR>
<P> <B> қалыңдатып қарайтылған қәріптермен немесе </B><BR>
<P> <I> қисатылған курсивпен немесе </I><BR>
<P> <U> асты сызылған символдар арқылы жазуға болады. </U><BR>
<P> Оған қоса мәтіндерді ендері бірдей қаріптері арқылы логикалық
стильде жазу мүмкіндіктері де бар. <HR>
<H3> Логикалық стильдер түрлері: </H3> <HR>
<P> <EM> ЕМ - ағылшынның emphasis - акцент сөзінен шыққан, яғни
курсив түрінде берілетін мәтін бөлігі </EM> <BR>
<STRONG> STRONG ағылшының strong emphasis – күшті акцент дегенді,
мәтін ішінде қарайтылған қаріп болып көрсетіледі. </STRONG> <BR>
<CODE> CODE программа мәтінін көрсету үшін қолданылатын стиль түрі.
</CODE> <BR>
<SAMP> SAMP - ағылшының simple – мысал, үлгі деген сөзді, программа
жұмысын нәтижелерін ендері бірдей моношрифт түрінде экранға шығарарда
пайдаланылады. </SAMP> <BR>
<KBD> KBD - ағылшының keyboard – пернетақта қысқаша сөзі.
Пернелерден енгізілген сөз тіркестерін көрсету мақсатында қолданылады.
</KBD> <BR>
<VAR> VAR - ағылшының variable – айнымалы сөзі, программадағы
айнымалы аттарын жазу үшін енгізілген стиль түрі, қыйсатылған курсивке
ұқсас қаріп түрі. </VAR>
</CENTER>
</BODY>
</HTML>
Бағдарлама жұмысының нәтижесі :
Мәтін фрагменттерін белгілеп ерекшелеу тәсілдері Мәтіндерді төмендегідей түрде ерекшелеуге болады |
қалыңдатып қарайтылған қәріптермен немесе қисатылған курсивпен немесе асты сызылған символдар арқылы жазуға болады.
|
Оған қоса мәтіндерді ендері бірдей қаріптері арқылы логикалық стильде жазу мүмкіндіктері де бар.
|
Логикалық стильдер түрлері: |
ЕМ - ағылшынның emphasis - акцент сөзінен шыққан, яғни курсив түрінде берілетін мәтін бөлігі STRONG ағылшының strong emphasis – күшті акцент дегенді, мәтін ішінде қарайтылған қаріп болып көрсетіледі. CODE программа мәтінін көрсету үшін қолданылатын стиль түрі. SAMP - ағылшының simple – мысал, үлгі деген сөзді, программа жұмысын нәтижелерін ендері бірдей моношрифт түрінде экранға шығарарда пайдаланылады. KBD - ағылшының keyboard – пернетақта қысқаша сөзі.Пернелерден енгізілген сөз тіркестерін көрсету мақсатында қолданылады. VAR - ағылшының variable – айнымалы сөзі, программадағы айнымалы аттарын жазу үшін енгізілген стиль түрі, қыйсатылған курсивке ұқсас қаріп түрі.
|
Сырғымалы жолдар ұйымдастыру
<MARQUEE> … </MARQUEE> тәгтері мәтіндерді үздіксіз жылжып отыратын «сырғымалы жол» түрінде экранға шығарады. Бұл тәгтәң ашылуы кезінде тізбектеліп жазылатын бірсыпыра атрибуттері бар, олар сырғымалы жолдың жылжу жылдамдығын, бағытын, әріптері түсін, т.б. өзгертеді. Параметрлерді өзгертпеуге, яғни жазбауға да болады, онда олардың алдын ала келісім бойынша бұрын орнатылған мәндері іске қосылады.
Енді жиі өзгертілетін параметрлерді және олардың мүмкін мәндерін қарастырайық.
BEHAVIOR – мәтіннің бір бағыты (SCROLL) немесе қос бағытта да (ALTERNATE) жылжыуын, әйтпесе жылжымай тоқтап тұруын (SLIDE) қамтаммасыз етеді. Оның мүмкін мәндері: SCROLL \ SLIDE \ ALTERNATE.
BGCOLOR - «сырғымалы жолдың» фон түсін анықтайды, он алтылық RGB форматында немесе ағылшынша белгілі бір түс аты беріледі.
DIRECTION – жолдың сырғу бағытын анықтайды, оның мүмкін мәндері: LEFT (солға) және RIGHT (онға), келісім бойынша LEFT мәні іске қосылады.
HEIGHT - «сырғымалы жолдың» биіктігін пиксель арқылы көрсететін бүтін сан, оны пайызбен де көрсетуге болады.
WIDHT – экрандағы «сырғымалы жолдың» енін пиксель арқылы көрсететін бүтін сан, оны пайызбен де көрсетуге болады.
Келесі мысал осы <MARQUEE> тәгі мен оның параметрлерін пайдалану жолын көрсетеді.
<HTML>
<HEAD> <TITLE> Мысал </TITLE> </HEAD>
<BODY text= red> <CENTER>
<H2> Сырғымалы жолдар мысалдары </H2> <HR>
<H3>< MARQUEE BGCOLOR = “blue” BEHAVIOR = “SCROLL”
DIRECTION = “RIGHT” HEIGHT = 30> Бұл алғашқы сырғымалы жол </MARQUEE > </H3>
<P> < MARQUEE BGCOLOR = “green” HEIGHT = 30 WIDHT = “90 %”>
Бұл екінші сырғымалы жол </MARQUEE>
<P> < MARQUEE BGCOLOR = “green” HEIGHT = 30 BEHAVIOR = “ALTERNATE” DIRECTION =”LEFT” HEIGHT = 30 WIDHT = “90 %”>
Бұл үшінші сырғымалы жол </MARQUEE>
<HR>
</CENTER> </BODY> </HTML>
HTML тілінде тізімдер жасау тәгтері
Тізімдердің (lists) HTML тіліне енгізуінің басты себебі – мәтіндік редактордың тізімдерімен жұмыс істеу мүмкіндерінің мол болуы әсерінен деп айтуға болады. Тізім құрғанда оның жолдарын нөмерлеу немесе белгілеуді біртіндеп орындау қажет етілмей, бұл жұмысты программа өз міндетіне алады. Егер тізім жаңа жолмен толықтырылатын немесе оның бірі қысқартылатын болса, онда нөмерлеу реттілігі де автоматты түрде түзеледі. Тізім нөмерленбей, тек белгіленетін кездерде әрбір жол алдына маркерлеу белгілері: сызықшалар, дөңгелекшілер, тіктөртбұрыштылар, ромбылар және де басқа да таңбалар қойылады . Осының нәтижесінде тізім оқуға ыңғайлы түрдегі «фирмалық» сипатқа ие болады.
Тізім жасау үшін қолданылатын тәгтерді шартты түрде екі топқа бөлуге болады : олардың біріншісі – тізімнің жалпы көрінісін анықтайтын атрибуттық сыртқы белгілер, ал екіншісі – оның құрылымын қалыптастыратын ішкі белгілер. Соңғы ішкі белгілер үшін тек бір ғана ашылу тәгі қолданылады.
Тізім тәгтерінің ең қарапайым түрі – нөмерленбеген белгілеу тізімі <UL> (unordered list)
Нөмірленбеген тізімдер: <UL> …</UL>
<UL> және </UL> сыртқы тәгтерінің арасында орналасқан мәтін жолын <LI> ішкі тәгімен бастап отыру керек. Сонымен нөмірленбейтін тізімінің жазылу үлгісі мен оның экранға шығатын жұмыс нәтижесі мынадай болды:
тізімнің 1 жолы тізімнің 2 жолы ... тізімнің сонғы жолы |
<LI> тізімнің 1 жолы
<LI> тізімнің 2 жолы
...
<LI> тізімнің соңғы жолы
Нөмірленген тізімдер: <OL> … </OL>
Нөмірленген тізімдер алдыңғы тізім сияқты құрылады, тек әрбір жол алдына нөмір қойылады. Мысалы, жоғарыдағы программа жолдарын тек сыртқы тәгті <OL> (ordered list – реттелген тізім) өзгертіп былай жазсақ, оң жақта көрсетілген тізім экранға шығады:
1. тізімнің 1 жолы 2. тізімнің 2 жолы 3. тізімнің 3 жолы |
<OL>
<LI> тізімнің 1 жолы
<LI> тізімнің 2 жолы
<LI> тізімнің 3 жолы
</OL>
Тізімдерді қалыптастыру
Мәтіндік процессорлармен жұмыс істеген кезде көбінесе тізімдердің екі түрін пайдаланады, олар – реттелген (нөмірленген) және реттелмеген (таңбаланған). HTML тілі тізімдердің әр түрлі бес түрін қалыптастыру мүмкіндігін береді. Алайда, аталмыш бес түрдің екеуі ескірген деп есептеліп, іс жүзінде қолданылмайды. Сонымен, бүгінгі күні тізімдердің үш түрін қолданылады: реттелген, реттелмеген және анықтамалар тізімі.
1. Реттелген және реттелмеген тізімдер шамамен алған бірдей тәртіппен қалыптастырылады. Тізімдер реттелген болса, барлық уақытта тізімдердің <OL> және </OL> атты ашылатын және жабылатын тәгтерінің арасында, ал реттелмеген болса <UL> және </UL> тәгтерінің арасында орналастырылады.
Тізімдердің ішінде тізім элементтері орналастырылады. Оларды <LI> және </LI> тәгтердің арасында орналастырылады, алайда, соңғы жағдайда жабылатын тәг көрсетілмеуіде де мүмкін, себебі, жабатын тәгтердің қайта орналасатыны былай да белгілі болады.
<OL> , <UL> және <LI> тәгтерінде TYPE = атрибуты болуы мүмкін, оның мағынасы тізім элементтерінің белгілену тәсілдерін көрсетеді. Реттелген тізімдерді араб цифрлармен, рим цифрлармен, латын әріптермен нөмірлеуге болады. Реттелмеген тізімдер қара түсті шеңьер түріндегі, немесе квадрвт типті белгімен таңбаланады.
Тізімдер ендірілмелі болуы мүмкін. Сонымен қатар, тізім элементтерінде гипперсілтемелер, және сөз арасы элементтерін форматтауға және ерекшелеу үшін қолданылатын тәгтер болуы мүмкін.
2. Тізім анықтамалары <DL> тәгәнен басталады да </DL> тәгімен аяқталады. Аталмыш тізімдерде белгілер мен нөмірлеуді пайдаланбайды. Тізім аныңтамалары берілетін атаулар мен тиісті анықтамаларда құралады. Анықтамалары берілетін атауларды <DT> тәгімен, ал анықтамаларды <DD> тәгімен белгілейді. Жабатын тәгтерді көрсетпеуге болады. Анықталатын атаулар мен анықтамалар рет ретімен келіп отырады деп жоспарланады, алайда, бұл мәселе аса қатты талап етілмейді. Анықтамалар экранда сол жағынан ығыса отырып белгіленеді.
<DL>
<DTxSTRONG> MIDI (Musical Instrument Digital Interface ) </STRJNG>
<00> - компьютерге музыка аспаптарын қосы стандарты. <DTxSTRONG>
МРСҰ(MuitimediaРС) </STRONG><00> - мультемедиалық дербес компьютерге қойылатын талаптарды сипаттайтын стандарт. <DTxSTRONG> OLE (Object Liking and Embedding) </STRONG> <00> - Қралдар элемнттерінің модель және жасаушы- компания туралы мәліметтері бар стандартты, ол праграммалық құралдар көмегімен баптауға жол береді.
</DL>
HTML құжаттарындағы мультимедиялық объектілер
World Wide Wed қызметі қолданымғакңінен енген мерзім барысында
мультемедия да кеңінен тарай бастады, себебі HTML тілі Wed-парақтарында мультемедиялықобъектілердің пайда болуында бірден үйлесіп кете алмады. Бейне және дыбыстық файлдар бүгінгі күнге дейін, қосымша жалғанған және тіркелген қосылғылар арқылы жарыққа шығарылатын “сыртқы” объектілер ретінде қарастырылуда.
Мультемедияның бейне және дыбыстық файлдары әр түрлі форматтарды қолдана алады. Күнделікті қолданып жүрген форматтар, оны қайта бейнелеу мүмкін болғанға дейін, файлдың толық көрініс беруін талап етеді. Бүгінгі күнгі ағымдық фрматтар, мәләметтерді жадыдан шығару барысындағы нақты үақыт кезінде дыбыс пен бейнекөріністерді жарыққа шығару мүмкіндігін береді.
Интернеттің ағымдық форматтарында радиохабарлар бнріледі. Мысалы, Ресейде осындай формат арқылы “Күміс жаңбыр” радиостанциясы хабар таратады.
Web – параққа мультимедиялық объектілерді енгізудің ең қарапайым әдісі – бұл <A> гипперсілтеме тәгін пайдалану. Осындай сілтемені қалыптастыру ең жеңіл нәрсе және бұл жағдайда мультемедиялық файл оқырманды HTML құжатындағы басқа мазмұндық мәліметтерден назарын аудартпайды.
Кейбір жағдайларда дыбыстық немесе мультимедиялық файлды тікелей Web- парағына енгізу талап етіледі, мысалы, аталмыш файлды автоматты түрде жарыққа шығару үшін аталмыш операцияны жүзеге асырады. Бүгінгі күні аталмыш мақсатқа жету үшін, HTML стандартына қатаң түрде кірмегеніне қарамастан, <EMBED> тәгін қолданған ыңғайлырақ. Бұл тәгтерді кеңінен тараған екі броузерлер арқылы тану мүмкіндігін аламыз, олар – Internet Explorer және Netscape Navigator, алайда, мультимедиялық файлды жарыққа шығару мүмкіндігін тек қана қосалқы ретінде жалғанған тиісті қосымшалар ғана анықтайды.
<EMBED> тәгі дара болып табылады, себебі оған жабылатын тәг талап етілмейді. Оның міндетті SRC= болып табылады. WIDTH= және HEIGHT атрибуттарын да пайдалану мүмкін болып табылады, олар мультимедиялық объектіні жарыққа шығару үшін “бөлінген”, экрандағы тік төртбұрыш аумақтағы өлшемдердің мәнін анықтайды.
<HTML>
<HEAD>
<BODY>
<TITLE> Құжаттағы мультимедия </TITLE>
</HEAD>
</BODY>
</HTML>
Кестелерді қалыптастыру
Кесте мәліметтердің үлкен көлемін ұсынудың ең ыңғайлы әдістерінің бірі. HTML тілі кестелердің әр алуан түрін қалыптастырудың орасан зор мүмкіндіктеріне ие болады.
1. HTML тіліндегі кестелер <TABLE> тәгімен басталады да </TABLE> тәгімен жабылады. Кесте ішіндегі мәтін, кесте элементтерін анықтайтын арнайы тігтердің ішіне орналастырылады.
2. <TABLE> және </TABLE> тәгтердің арасында, кестелердің атауларын анықтайтын, <CAPTION> және </CAPTION> тәгтері қосарланып кездесуі мүмкін. Кестелердің атаулары тікелей кестелердің үстіне немесе тікелей кестелердің астында орналасады.
3. Одан кейін кестелердің жолдарын анықтайтын <TR> және </TR> кетелері кездеседі. Жабатын тәгтерді кездестіруге болады, себебі кестенің келесі жолының басталуымен немесе кестенің өзімен бірге аяқталады.
4. Кестенің әрбір жолы ұялардан тұрады. Ұяларды немесе бағандар мен жолдардың атауларына ие <TH> тәгімен, немесе кәдуелгі мәліметтерге ие <TD> тәгісімен белгілейді. Бұл тәгтер сонымен қатар, қосарланып берілуі мүмкін, бірақ бұл жерде де жабатын тәгтерді көрсетпеуге де болады, себебі жабатын тәгтерді көрсетпеу басқа түсініктер бермейді.
5. Ұялардың ішінде, құжат пішіні бөліміне рұқсат берілетін, HTML– ге қатысты кез келген мәліметтер мен кез келген тәгтер болуы мүмкін. Мысалы, кесте ұяларында ендірілген басқа кестелер болуы мүмкін. Броузерлер автоматты түрде ұялар мен бүкіл кестенің өлшемдерін есептеп шығарады, алайда бұл қасиеттерді ішінара атрибуттар көмегімен де беруге болады.
6. Кестелердің айрықша өзіндік атрибуттарынан, мысалы, BORDER атрибутын жеке дара көрсетуге болады, ол атрибут кесте маңында және оның жеке ұяларының маңынын бөлек қоршау жүргізу мүмкіндігін береді. Аталмыш артибуттың мәні пиксель өлшем бірлігімен өлшенетін, сытрқы қоршаудың қалындығы болып табылады.