2

2 HTML ЌЂЖАТТАРЫНДАЃЫ КЕСТЕЛЕР

HTML ќђжатында кестелік мѕліметтерді жиі орналастыруѓа тура келеді. Ол џшін HTML тілініњ кестені ќђру џшін арнайы операторлары бар. Web-ќђжатыныњ негiзгi бљлiктерiнiњ бiрi - кесте. Ол тiктљртбђрыш баѓаналар мен кљлденењ орналасќан жолдардан тђратын торлар жиыны тџрiнде ќарастырылады. Жол мен баѓанныњ ќиылысы ђяшыќ деп аталады. Бiр ђяшыќта мѕтiн, сурет немесе басќа бiр шаѓын кесте орналаса алады. Кесте келесi бљлiктерден тђрады:

• кесте таќырыбы;

• баѓаналар таќырыптары;

• ђяшыќтар.

2.1. Ќарапайым кесте

Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оњѓа ќарай жол соњына дейiн, сонан соњ келесi жолѓа кљшу). Ѕрбiр ђяшыќќа мѕлiметтер енгiзiледi. Боя ђяшыќ жасау џшiн бос орын тањбалары енгiзiлуi тиiс.

Кестелерді ѕртџрлі тэг-тер ќалыптастырады. Кесте љзініњ ішкі ќђрылымы мен мазмђнын сипаттайтын <TABLE></TABLE> тэг-терімен беріледі.

Кез келген кесте оныњ ђяшыќтарын сипаттайтын<TR></TR> (Table Row) тэгімен берілетін жолдардан тђрады.

Ђяшыќтар пішімі мен мазмђны <TD></TD> (Table Data) тэгінде, ал ђяшыќ таќырыпшалары <TH></TH> (Table Header) тэгінде орналасады.

Ќарапайын 2*3 кестесін жасау џшін тљменгі тэгтер жиынын ќолдануѓа болады:

<TABLE border=1>

<TR>

<TD> мѕтін</td>

<TD> мѕтін</td>

<TD> мѕтін</td>

</tr>

<TR>

<TD> мѕтін</td>

<TD> мѕтін</td>

<TD> мѕтін</td>

</tr>

</table>

Бђл жерде border кесте сызыќтарыныњ ені. Кестеніњ ђяшыќтарыныњ енін пайз арќылы љзгерту џшін width атрибутн ќолданса болады, мысалы:

<TABLE width=50%>

Тапсырма - 1. Екі жол мен екі баѓанадан тђратын кестені ќђру, таќырыпша беру.

HTML\1.html

<TABLE>

<TH>Тарихи кџнтізбе</TH>

<TR>

<TD>Мезолит, Неолит, Б.Э.Д. II-III мыњ ж.</TD>

<TD>Жалпыланѓан мѕдениет білімі. Ќазаќстанныњ шекараларын далалы Батыс Сібір аудандары, Алтай, Орталыќ Азияныњ Солтџстік аудандары ќоршап тђр. Тайпалар білімі мен тайпалар бірлестіктерініњ жалпыланѓан туыстыќтары. Ањшылыќ, балыќ аулау, тау істері, тігіншілік. Ауа-райына байланысты халыќтыњ отырыќшылыќќа айналуы арта тџсті. Бђл алѓашќы ќауым тђрмыс тіршілігініњ кљрінісі. </TD>

</TR>

<TR>

<TD>б.э.д.IV ѓ. соњы - III-мыњ ж. басы. Энеолит.</TD>

<TD>љндірістік кџштіњ даму нѕтижесінде тау ѓасырысыныњ 200 тђраѓыныњ шолуы бойынша жергілікті негізде энеолитке љтті. Жылќыларды кљбейту џшін ќолайлы климат шарттарыныњ туындауына байланысты тђрѓындар ірі ќара мал шаруашылыѓына љтуге дайын болды. Орталыќ Ќазаќстанныњ мѕдениеттері Сібірмен, Оралмен, Орта Азиямен тыѓыз байланыста. Мал шаруашылыѓы, ат љсіру, аѓаш љњдеу, балыќ аулау, ањшылыќ, жинау. </TD>

</TR>

</TABLE>

Кестедегі бљлгіш сызыќтардыњ ќалыњдыѓы <TABLE> тэгініњ атрибуты BORDER, кљмегімен беріледі, ал ђяшыќ ішіндегі аќпараттарды кљлденењінен туралау џшін ALIGN атрибуты ќолданады.

<TABLE BORDER=љлшем ALIGN=туралау >

Мысалы: <TABLE BORDER=2 ALIGN=CENTER >

Тљмендегі тапсырмада HTML ќђжатыныњ 2 кестесі аныќталѓан бастапќы мѕтінді кестірді. Оныњ біріншісі 3 жолдан тђрады жѕне ешќандай ќосымша бейнелеуі жоќ. Ал екінші кесте орталыќ тандырылѓан. Оныњ 2 пикселі бар ені жѕне навигатордыњ кљру терезесініњ енінен 60% ені бар.

Тапсырма - 2. Шектеулері бейнеленген жѕне бейнеленбеген 3*3 кестесі

HTML\2.html

<HTML>

<HEAD>

<TITLE>Кесте</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<TABLE>

<TR>

<TD>000</TD><TD>001</TD><TD>002</TD>

</TR>

<TR>

<TD>010</TD><TD>011</TD><TD>012</TD>

</TR>

<TR>

<TD>100</TD><TD>101</TD><TD>102</TD>

</TR>

</TABLE>

<TABLE ALIGN=JUSTIFY BORDER=2 WIDTH=60%>

<TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>

<TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>

<TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>

</TABLE>

</BODY>

</HTML>

Тапсырма - 11: HTML- ќђжатта келесі ќђрылымдаѓы кестені жасањыз:

Кесте
Ђяшыќ ђзындыѓы - 2 см | Ђяшыќ ђзындыѓы -6 см | Ђяшыќ ђзындыѓы -3 см | Ђяшыќ ђзындыѓы -5 см