Сабақтың тақырыбы: HTML тілінің негіздері

2.  2-мысалдың Браузердегі тџрі.

3.  Харіптерді форматтау Тэгі

3-мысал: Web-беттердегі харіптерді форматтау

HTML-код

<H1 ALIGN=CENTER> <FONT COLOR=blue SIZE=7> Қазақстан Республикасының мемлекеттік рѕміздері</FONT> </H1>

<BR>

<HR>

<H2 ALIGN=LEFT > <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік байрағы</FONT></H2>

<H2> <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік елтаңбасы</FONT> </H2>

<H2> <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік ѕн ђраны </FONT> </H2>

<BR>

<P><FONT  FACE="Times New Roman" SIZE=3> Қазақстан Республикасының мемлекеттік байрағы <B><I> тіктљртбђрыш кљгілдір тџсті ортасында 32 сѕулелі кџн, оның астында самғап ђшқан дала бџркіті бейнеленген мата. Оның діңгек тђсында - ђлттық нақыштағы ою-љрнектердің тік жолағы бар.

Бейнеленген кџн,  сѕуле, бџркіт жѕне ою-љрнектер алтын тџсті. Байрақтың кљлденеңі оның ђзындығының 1:2-дей. 1:2.</FONT></P>

<P><FONT  </I></B> FACE="Times New Roman" SIZE=3> <B><I>Қазақстан Республикасының елтаңбасыда</I></B> <I>шаңырақ</I> кљгілдір фон џстінде, жан-жағына кџн сѕулесі тѕрізді шашыраған уықтар (тіреуіштер), жақтауында аңыздағы қанатты тђлпарлар  бейнелеген. Елтаңбаның тљменгі бљлігінде "Қазақстан" деген жазу бар.

Қазақстан Республикасының мемлекеттік елтаңбасы - алтын жѕне кљгілдір тџстермен бейнеленген. </FONT></P>

<P></P>

4-сурет. 3-мысалдың Браузердегі тџрі.

5-сурет. Мѕліметтер тізімін безендіру тэгтері.

Тэг  Тағайындамасы  Тџсініктеме

<LI>Тізім индексіТэг индекстер тізімін береді

<UL>

<LI>

</UL>Нљмірленбеген тізімТізімді маркирленген тџрде береді

Ѕрбір элемент  <LI> тэгінен кейін тђрады.

<OL>

<LI>

</OL>Нљмірленген тізімТізімді нљмірленген тџрде береді.

Браузерде тізім элементтері 1-ден басталып, автоматты тџрде нљмірленеді. Ѕрбір элемент  <LI> тэгінен кейін орналасуы керек.

<DL>

<DT>

<DD>

</DL>Анықтамалар тізімітэг <DD> анықтамалар  тізімін немесе тэг <DТ>  термин сљздігін шығару џшін.

4-мысал: Мѕліметтер тізімін нљмірленбеген тізім тџрінде беру.

HTML-коды

<H1 ALIGN=CENTER> <FONT COLOR=blue SIZE=7> Қазақстан Республикасының мемлекеттік рѕміздері </FONT> </H1>

<BR>

<HR>

<UL>

<LI>

<H2 ALIGN=LEFT > <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік байрағы </FONT></H2>

<LI>   

<H2> <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік  елтаңбасы </FONT> </H2>

<LI>

<H2> <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік ѕн ђраны </FONT> </H2>

</UL>

<BR>

<H1 ALIGN=CENTER> <FONT COLOR=blue SIZE=7> Қазақстан Республикасының мемлекеттік рѕміздері </FONT> </H1>

<BR>

<HR>

<UL>

<LI>

<H2 ALIGN=LEFT > <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік байрағы </FONT></H2>

<LI>   

<H2> <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік  елтаңбасы</FONT> </H2>

<LI>

<H2> <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік ѕнђраны </FONT> </H2>

</UL>

<BR>

6-сурет. 4-мысалдың Браузердегі тџрі.

Кестелер

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

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

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

Кестелердің жалпы тџрі тљмендегідей:

<TABLE>

<TH>ђяшық тақырыпшасы</TH>

<TR>

<TD> ђяшық мазмђны</TD>

<TD> ђяшық мазмђны </TD>

…

</TR>

<TR>

<TD> ђяшық мазмђны </TD>

<TD> ђяшық мазмђны </TD>

…

</TR>

</TABLE>

5-мысал: Екі жол мен екі бағанадан тђратын кестені қђру, тақырыпша беру.

<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 >

6-мысал: Кесте жақтауын жасау жѕне бет ортасына орналастыру:

<TABLE BORDER=2  ALIGN=CENTER >

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

<TR>

<TD>Мезолит, Неолит, XII-III тыс. до н.э.</TD>

<TD>Жалпыланған мѕдениет білімі. Қазақстанның шекараларын далалы Батыс Сібір аудандары, Алтай…

1-практикалық тапсырма Бос Web-бетін қђру (Жџктеу)

Жђмыстың орындалуы:

1. HTML-файлы қђрылуы џшін программаны жџктеңіз (мысалы, Блокнот)

2. HTML-кодын теріңіз:

<HTML>

<HEAD>

<TITLE>Қазақстан Республикасының мемлекеттік рѕміздері</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

3. Файл-Басқаша сақтау

4. Файл типі: Барлық файлдар

5. Ат беру (мысалы, symbol1.htm немесе symbol1.html)-Сақтау

6. Браузерде кљру (мысалы, Internet Explorer)

2-практикалық тапсырма. Web-бетті тљмендегідей безендіріңіз (Жџктеу)

Жђмыстың орындалуы:

1. HTML-файлы қђрылуы џшін программаны жџктеңіз (мысалы, Блокнот)

2. HTML-кодына љзгерісті енгізіңіз

<HTML>

<HEAD>

<TITLE>Қазақстан Республикасының мемлекеттік рѕміздері</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER> Қазақстан Республикасының мемлекеттік рѕміздері </H1>

<BR>

<HR>

<H2 ALIGN=LEFT > Қазақстан Республикасының мемлекеттік байрағы</H2>

<H2>Қазақстан Республикасының мемлекеттік елтаңбасы</H2>

<H2>Қазақстан Республикасының мемлекеттік ѕн ђраны</H2>

<BR>

<P> Қазақстан Республикасының мемлекеттік байрағында тіктљртбђрыш кљгілдір тџсті мата ортасында 32 сѕулелі кџн, оның астында самғап ђшқан дала бџркіті бейнеленген. Оның діңгек тђсында - ђлттық нақыштағы ою-љрнектердің тік жолағы бар. Бейнеленген кџн,  сѕуле, бџркіт жѕне ою-љрнектер алтын тџсті. Байрақтың кљлденеңі оның ђзындығының 1:2-дей.</P>

<P> Қазақстан Республикасының мемлекеттік елтаңбасында кљгілдір фонның џстінде шаңырақ бейнеленген (киіз џйдің жарық тџсіретін жоғарғы бљлігі), оның жан-жағында кџн сѕулесі тѕрізді уықтар шашырап тђр, жақтауында аңыздағы қанатты тђлпар бейнеленген. Елтаңбаның тљменгі бљлігінде "Қазақстан" деген жазу бар.

Қазақстан Республикасының мемлекеттік елтаңбасы - алтын жѕне кљгілдір тџстермен бейнеленген.</P>

<P></P>

</BODY>

</HTML>

3. Файл-Сақтау

4. Браузерде кљру(мысалы, Internet Explorer)

3-практикалық тапсырма. Web-бетіндегі мѕтін харіпін тљмендегідей пішімдеңіз (Жџктеу).

Жђмыстың орындалуы:

1. HTML-файлы қђрылуы џшін программаны жџктеңіз (мысалы, Блокнот)

2. HTML-кодына келесі љзгерістерді енгізіңіз:

<H1 ALIGN=CENTER> <FONT COLOR=blue SIZE=7> Қазақстан Республикасының мемлекеттік рѕміздері </FONT> </H1>

<BR>

<HR>

<H2 ALIGN=LEFT > <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік байрағы </FONT></H2>

<H2> <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік елтаңбасы</FONT> </H2>

<H2> <FONT COLOR=red SIZE=6>Қазақстан Республикасының мемлекеттік ѕн ђраны </FONT> </H2>

<BR>

<P><FONT  FACE="Times New Roman" SIZE=3> <B><I>Қазақстан   Республикасының мемлекеттік байрағында </I></B> тіктљртбђрыш кљгілдір тџсті мата ортасында 32 сѕулелі кџн, оның астында самғап ђшқан дала бџркіті бейнеленген. Оның діңгек тђсында - ђлттық нақыштағы ою-љрнектердің тік жолағы бар. Бейнеленген кџн,  сѕуле, бџркіт жѕне ою-љрнектер алтын тџсті. Байрақтың кљлденеңі оның ђзындығының 1:2-дей.</FONT></P>

<P><FONT  FACE="Times New Roman" SIZE=3> <B><I>Қазақстан Республикасының мемлекеттік елтаңбасында</I></B> кљгілдір фонның џстінде шаңырақ бейнеленген (киіз џйдің жарық тџсіретін жоғарғы бљлігі), оның жан-жағында кџн сѕулесі тѕрізді уықтар шашырап тђр, жақтауында аңыздағы қанатты тђлпар бейнеленген. Елтаңбаның тљменгі бљлігінде "Қазақстан" деген жазу бар.

Қазақстан Республикасының мемлекеттік елтаңбасы - алтын жѕне кљгілдір тџстермен бейнеленген.</FONT></P>

<P></P>

3. Файл-Сақтау

4. Браузерде кљру(мысалы, Internet Explorer)

4-практикалық тапсырма. Web-беттегі мѕтінді мѕліметтердің нљмірленбеген тізімі тџрінде кљрсету (Жџктеу).

Жђмыстың технологиясы:

1. HTML-файлы қђрылуы џшін программаны жџктеңіз (мысалы, Блокнот)

2. HTML-кодына келесі љзгерістерді енгізіңіз:

<H1 ALIGN=CENTER> <FONT COLOR=blue SIZE=7> Қазақстан Республикасының мемлекеттік рѕміздері </FONT> </H1>

<BR>

<HR>

<UL>

<LI>

<H2 ALIGN=LEFT > <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік байрағы </FONT></H2>

<LI>   

<H2> <FONT COLOR=red SIZE=6> Қазақстан Республикасының мемлекеттік елтаңбасы</FONT> </H2>

<LI>

<H2> <FONT COLOR=red SIZE=6>Қазақстан Республикасының мемлекеттік ѕн ђраны </FONT> </H2>

</UL>

<BR>

3. Файл-Сақтау

4. Браузерде кљру(мысалы, Internet Explorer)

5-практикалық тапсырма: Екі жол жѕне екі бағанадан тђратын кесте қђр. Кесте ђяшықтарына атау бер.

Жђмыстың технологиясы:

1. HTML-файлы қђрылуы џшін программаны жџктеңіз (мысалы, Блокнот)

2. Ввести HTML-код:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<TABLE  BORDER=2  ALIGN=CENTER >

<TH>Исторический календарь</TH>

<TR>

<TD>Мезолит, Неолит, XII-III тыс. до н.э.</TD>

<TD> Жалпыланған мѕдениет білімі. Қазақстанның шекараларын далалы Батыс Сібір аудандары, Алтай…

</TD>

</TR>

<TR>

<TD>Конец IV - начало III тысячелетия до н.э. Энеолит.</TD>

<TD> .</TD>

</TR>

</TABLE>

</BODY>

</HTML>

3. Файл-Сақтау

4. Браузерде кљру(мысалы, Internet Explorer)

Љз бетімен орындауға арналған тапсырмалар

1. Редакторды пайдаланбай Web-бетті қђр.

2. Web-бетке Қазақстан Республикасының ѕн ђранын жаз, оны гимн.doc файлы тѕрізді љңде. (файлды  басқаша сақтаңыз -gimn.htm)

3. Љзіңіздің Web-сайты џшін алғашқы бет қђрыңыз (автор жайлы жѕне сайтты қђру мақсаты туралы ақпарат жазыңыз).

4. Web-редакторды пайдаланып мѕтінді форматтау  мен ѕртџрлі типтегі тізімдерді қђру мџмкіндіктерін жариялайтын Web-бет жасаңыз.

4. Web-бетке файлдағы кестені орналастыр (мысалы, Тарих.doc).

Сђрақтар:

1. Web-бет дегеніміз не жѕне оның қђрамына қандай объектілер кіреді?

2. Web-сайт дегеніміз не жѕне оның қђрамына қандай объектілер кіреді?

3. HTML-файлдарының жетістіктерін атаңыз.

4. Web-бет қђру џшін қандай программалар бар?

5. Қандай тілдер Web-бет қђру мџмкіндігін бере алады?

6. HTML-файлда қандай тэг-тердің болуы шарт?

7. HTML-файлда қандай тэг-тер мѕтінді безендіру мџмкіндігін береді?

***********************************************************************************