1.4 Құжат ішіне тізімдер орналастыру

HTML тілі мәтін абзацтарының сыртқы пішімін толық анықтауға мүмкін­дік береді. Абзац элементтерін тізім түрінде белгілеуге болады. Енді тізім­дер жасайтын мүмкіндіктердің бырсыпырасын қарастырайық. Жалпы тізім элементтері арнайы тeгтермен қоршалып, экранға шығарылғанда олардың сол жақтарында тізім белгілері орналасады.

<UL> және </UL> (unordered list – реттелмеген тізім) тeгтері арасында орналасқан мәтіндер нөмірленбей, бірақ белгіленіп жазылған тізімдер ретінде қарастырылады. Мұнда тізімнің әрбір жаңа элементін <LI> (list – тізім) белгісінен бастап жазу қажет. Мысалы:

<ul style=»margin-left:15px; margin-top:10px;»>

<li><a href=»history/sak.html» target=_blank>Қазақстан территориясындағы тайпалық одақтар және ертедегі мемлекеттер</a></li>

<li><a href=»history/turyk.html» target=_blank>Ерте және дамыған орта ғасыр мемлекеттері (6-13 ғғ. Бас кезі)</a></li>

<li><a href=»history/silk.html» target=_blank>Ұлы жібек жолы</a></li>

<li><a href=»history/mongol.html» target=_blank>Қазқстан монғол дәуіріңде</a></li>

<li><a href=»history/14-15.html» target=_blank>14-15 ғғ. Ортағасырлық мемлекеттер</a></li>

<li><a href=»history/kz.html» target=_blank>15-17 ғғ. Қазақ хандығы</a></li> <li><a href=»history/rus.html» target=_blank>Қазақстан Ресей құрамында </a></li>

<li><a href=»history/now.html» target=_blank>Қазақстан – егеменді тәуелсіз мемлекет</a></li> </ul>

Сурет 5. Тізімдерді орналастыру

Сондай-ақ, нөмірленген тізімдер – алдыңғы белгіленген тізім тәрізді шығары­лады, олар тек <ОL> және </ОL> (ordered list – реттелген тізім) тәгте­рімен қоршалады және анықтау тізімдері <DL> (definition list) тәгі арқылы жазылады нәтижесінде тізім нөмірі ретінде бүтін сандар жазылады. Жоғарыда келтіріл­ген мысалды аздап түрлендіріп,

Кесте 1.10

Type атрибуты мәніне қарай тізімдерді нөмірлеу түрлері

type мәні	стилі	тізім нөмірленуі
1	Араб цифрлары (келісім бойынша)	1, 2, 3, 4, ...
A	Латын алфавитінің бас әріптері	A, B, C, D, …
a	Латын алфавитінің кіші әріптері	a, b, c, d, …
I	Рим цифрлары (жоғарғы регистр)	I, II, III, IV, …
i	Рим цифрлары (төменгі регистр)	i, ii, iii, iv,…

Анықтау тізімдері <DL> (definition list) тәгі арқылы жазылады да, алдыңғы­лардан аздап өзгешелеу болып ке­леді. Мұнда <LI> тәгі орнына <DT> (definition term – анықталатын термин) және <DD> (definition definition – анықтаманың анықтамасы) белгілері жазылады.

HTML

HTML (HyperText Markup Language) термині – “гипермәтіндік белгілеу тілі” деген сөз. Оның алғашқы нұсқасын Европадағы элементар бөліктер физикасы лаборато­рия­сының қызметкері Тим Бернерс-Ли жасап шығарған болатын.

HTML құжаты

Тіркелу аты *.htm (Unix жүйелеріндегі файлдарда *.html)

болып келген мәтіндік файл.

<LI> тәгі сияқты <DT> және <DD> тәгтерінің жабылмай, жалғыз жазыла­ты­нына назар салыңыздар. Формаларды әртүрлі мақсаттарда қолдану мүмкіндігі бар. Мысал ретін­де, сайтқа кірген оқырмандардың ол туралы өз пікірлерін форма­ға енгізуі туралы айтуға болады, жалпы HTML формаларын пайдалану аймағы алуан түрлі болып келеді.

HTML тілінде формадағы әр түрлі өріс типтерін жасау үшін <TEXT­AREA>, <SELECT> және <INPUT> сияқты үш түрлі тeг қолданылады. Олардың кез келген саны <FORM> ... </FORM> тәрізді қосарланған тәгтер ішінде, яғни контейнерде орналаса алады.[2]

-<TEXTAREA> - Кез келген тұтынушы бірнеше жолдан тұратын мәтіндік ақпарат енгізе алатын өрісті анықтайды;

-<INPUT> - Мәлімет енгізудің кейбір өзге түрлерін: бір жол мәтін енгізу, жалаушаларды көтеріп қою және түсіру (check boxes), ажыратып қосқышты таңдау (radio buttons) және мәліметтерді жөнелтуге немесе форма­ны тазартуға арналған батырманы басу сияқты әре­кет­терді орындауды қамтамасыз етеді;

-<SELECT> - Тұтынушыға жылжымалы жолағы бар терезедегі немесе суырылып шығатын меню ішіндегі бір жолды таңдау мүмкіндігін береді.

<input> тәгінің type атрибуты төмендегідей мәндер қабылдайды:

Reset - шерткен кезде форманы автоматты түрде бастапқы қалпына келтіреді. value атрибуты – батырма бетіндегі жазуды береді.

submit - шерткен кезде форманы желіге жөнелтеді.

value атрибуты – батырма бетіндегі жазуды береді.

button – қарапайым батырма .

value атрибуты – батырма бетіндегі жазуды береді.

radio – радиобатырма.

value атрибуты – батырма бетіндегі жазуды береді.

-<input> тәгінің type атрибутының text және password мәндері енгізу өрісін береді:

-text – қарапайым енгізу өрісі. Атрибуттары:

-value атрибуты енгізу өрісінің келісім бойынша қабылданған мәнін береді;

-size атрибуты енгізу символдарының ұзандығын береді;

-maxlength атрибуты енгізілетін жолдардың максималды мүмкін мәнін береді.

-readonly атрибуты тек оқуға болатын мәндерді анықтайды. Мұндай жолды қолданушы өзгерте алмайды;

-password – «құпия сөз» енгізуге арналған өріс. Text – тен айрмашылығы, оның символдары экран бетіне жұлдызша түрінде шығады.

Мысалы:

<FORM name=forma>

<font class="ws12" color="#333399">

<PRE>

<font class="ws14" color="#333399"><b>Ақырын жүріп анық бас, еңбегің кетпес далаға!!! </b><br>

</font>

</PRE>

<PRE>

1. Қазақстан Егемендік туралы Декларациясын қашан қабылдады?

</PRE>

<PRE>

<INPUT type=reset value=Тазарту>

<INPUT type=radio name=r checked> 1991- 25 қазанда

<INPUT type=radio name=r> 1990- 28 қазанда

<INPUT type=radio name=r>1990- 25 қазанда

<INPUT type=button value=Тексеру

onclick="var answer='Дұрыс емес';

if(this.form.r[2].checked) answer='Дұрыс';

this.form.result.value=answer;">

<INPUT type=text size=15 name=result value="" readonly>

</PRE>

</FORM>

Сурет 6. Форманы пайдалану

Кесте тұрғызу <TABLE> және </TABLE> тәгтері көмегімен орындалады, оның әрбір жолын анықтау – <TR> және </TR> тәгтері арқылы, ал сол жолдардағы бағаналар – <TD> және </TD> немесе <ТН> және </ТН> тәгтері арқылы анықталады. <TD> және <ТН> тәгтерінің жұмысы ұқсас, бірақ <ТН> тәгтерімен қоршалған мәтін қарайтылған бағана тақырыптары болып табылады да, <TD> тәгтерімен одан кейінгі қарапайым бағаналар жазылады. Кесте тақырыбы <CAPTION> және </CAPTION> тәгтерімен қоршалып жазылады. Жалпы кестені толық анықтау ережесі төмендегі үлгімен беріледі:

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

BORDERCOLOR="#rrggbb" WIDTH="integer"> ......

</TABLE>

Бірақ кесте тұрғызу кезінде олардың кейбірі қолданылмауы да мүмкін. Енді осы кесте тәгі атрибуттарының атқаратын жұмысына тоқталайық:

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

BGCOLOR кесте торының ішкі фон түсін тағайындайды (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгілен­ген түс атауы).

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

BORDERCOLOR жақтау сызықтарының түсін тағайындайды (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгілен­ген түс атауы), BORDER атрибутымен бірге қолданылады.

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

Кесте тақырыбы <CAPTION> тәгімен төмендегі ережеге сәйкес беріледі:

<CAPTION ALIGN="top"> ...... </CAPTION>

Мұндағы атрибуттардың атқаратын қызметі мынадай болады.

ALIGN атрибуты кесте тақырыбын шет жақтарға туралау кезінде оның мәні LEFT, CENTER (көрсе­тілмесе, келісім бойынша осы мән қабылданады), RIGHT сөздерінің біріне сәйкес келуі тиіс. Ал егер ол тақырыпты вертикаль бағытта кестенің жоғарғы және төменгі жақтарына орналастыруы қажет болса, онда BOTTOM – жоғарыда (келісім бойынша осы мән қабылда­нады), ТОР – төменде сөздерінің бірін мән ретінде қабылдай алады.Кесте жолы <TR> және </TR> тәгтерімен қоршалып тұрады, бұлардың алғашқысының мынадай бірсыпыра атрибуттары болуы мүмкін:

<TR ALIGN="center" BGCOLOR="#rrggbb" BORDERCOLOR="#rrggbb"> Кесте жолы… </TR>

Енді <TR> тәгінің осы атрибуттарына тоқталайық.

ALIGN — жол шеттерін туралау. Оның мүмкін мәндері LEFT (келісім бойынша), CENTER, RIGHT.

BGCOLOR жолдың ішкі фон түсін анықтайды (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы).

BORDERCOLOR — жол жақтауларының түсі (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы). Бұл атрибут <TABLE> тәгінің BORDER атрибутының мәні нөлге тең болмағанда ғана қолданылады.

ROWSPAN — бірнеше жолдарды біріктіріп, бір-ақ жол етіп жазу кезінде берілетін біріктірілетін жолдар саны.

Кесте жолындағы бағаналар (ұялар) <TD>... </TD> және <ТН>... </ТН> тәгтерімен төмендегі ережеге сәйкес анықталады:

<TD немесе ТН ALIGN="right" BACKGROUND="url" [BGCOLOR="#rrggbb" BORDERCOLOR="#rrggbb"] >

Бағана… </TD немесе /TН>

<TD> және <ТН> тәгтерінің атрибуттары қызметтері:

ALIGN — мәтінді горизонталь бағытта туралау атрибуты. Оның мүмкін мәндері: LEFT, CENTER (келісім бойынша), RIGHT.

BGCOLOR – фон түсін анықтау атрибуты (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы).

BORDERCOLOR – ұя жақтауларының түсі атрибуты (он алты­лық RGB форматындағы сан немесе ағылшын тіліндегі түс атауы). Бұл атрибут <TABLE> тәгінің BORDER атрибутының мәні нөлге тең бол­ма­ғанда ғана қолданылады.

COLSPAN — бағаналар тақырыбына арналған біріктірілген жол (ұя) ішінде орналасатын бағаналар саны.

1-бөлім бойынша қорытынды.

Дипломдық жобаның 1-бөлімінде жалпы бөлім қарастырылған. World Wіde Web және HTML тілі

Хотя бы на пол страницы. Расписать.