жаттығу. Сурет түсіру. Құжатқа гиперсілтеме жасау.

<IMG> және <A HREF>тегтерін қолданыпкелесі HTML- құжатын жасау.(2-сурет)

 

 

2-сурет

1) Блокнот текстік редакторының терезесін ашып, бос құжатты Задание4.html деп сақтаңыз

2) Құжаттың бірінші жолына <HTML> деп жазыңыз..

3) Терезе тақырыбын жазу үшін мына жолдарды енгізіңіз:

<HEAD>

Lt;TITLE> Вставка рисунка и гиперссылки

</TITLE>

</HEAD>

4) Ары қарай <BODY BGCOLOR=pink TEXT=black LINK=blue VLINK=red>деп енгізіңіз.

5) Енді суретті түсіреміз. Ол үшін келесі жаңа мына тіркестерді жазыңыз: <IMG SRC="image.jpg" ALT="Здесь должен быть рисунок" HEIGHT=250 WIDTH=250 ALIGN=middle ISMAP>

6) Сурет пен келесі жазылатын текст арасында 3 бос жол болу керек. Ол үшін <BR><BR><BR> деп жазыңыз.

7) Енді құжатқа Задание1.html құжатын шақыратын гиперсілтеме (гиперссылка)жасаймыз Ол үшін мына жолдарды теріңіз:

<A HREF="Задание1.html"> Перейти по гиперссылке </A>

8) </BODY> тегін жабыңыз.

9) </HTML> тегін жабыңыз.

4-жаттығу. Кестесі бар (таблица) HTML-құжат жасау.

Төмендегі программаның тексін Блокнот текстік редакторында теріп, құжатты Задание 5.html деген атпен сақтаңыз. Кестені жасауда қолданылатын барлық тегтерді меңгеріңіз.

<HTML>

<HEAD>

<TITLE>Пример 2</TITLE>

</HEAD>

<H1>Простейшая таблица </H1>

<TABLE BORDER=1> <!--Это начало таблицы-->

<CAPTION> <!--Это заголовок таблицы-->

У таблицы может быть заголовок

</CAPTION>

<TR> <!--Это начало первой строки-->

<TD> <!--Это начало первой ячейки-->

Первая строка, первая колонка

</TD> <!--Это конец первой ячейки-->

<TD> <!--Это начало второй ячейки-->

Первая строка, вторая колонка

</TD> <!--Это конец второй ячейки-->

</TR> <!--Это конец первой строки-->

<TR> <!--Это начало второй строки-->

<TD> <!--Это начало первой ячейки-->

Вторая строка, первая колонка

</TD> <!--Это конец первой ячейки-->

<TD> <!--Это начало второй ячейки-->

Вторая строка, вторая колонка

</TD> <!--Это конец второй ячейки-->

</TR> <!--Это конец второй строки-->

</TABLE> <!--Это конец таблицы-->

</BODY>

</HTML>

6-жаттығу. Біріктірілген және бөлінген ұяшықтары бар кесте жасау. Colspan, Rowspan тегтерін меңгеру.

Өзіңіздің бумаңызда жаңадан біріктірілген және бөлінген ұяшықтары тұратын кестесі бар HTML- құжат жасаңыз.Ол үшін төменде келтірілген программаның тексін теріп, құжатты Задание 6.html деген атпен сақтаңыз. Colspan, Rowspan тегтерінің қызметіне назар аударып, зерттеңіз. Нәтижесі мына суреттегідей болуы тиіс:

 

<HTML>

<HEAD>

<TITLE>Пример объединения ячеек с помощью COLSPAN и ROWSPAN</TITLE>

</HEAD>

<BODY BGCOLOR = BLUE TEXT = BLACK >

<TABLE ALIGN= “CENTER” BORDER= “2” LEFTMARGIN= “40” RIGHTMARGIN= “40” CELLPACING= “0” CELLPADDING= “40” WIDTH= “100%” HEIGHT= “200”>

<TR ALIGN= “CENTER” BGCOLOR=GRAY>

<TH COLSPAN= “2”> Ячейка1 </TH>

</TR>

<TR>

<TD ALIGN= “CENTER” ROWSPAN= “3”> Ячейка 2 </TD>

<TD ALIGN= “CENTER” > Ячейка 3 </TD>

</TR>

<TR>

<TD ALIGN= “CENTER” > Ячейка 4 </TD>

</TR>

<TR>

<TD ALIGN= “CENTER” > Ячейка 5 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Өздік жұмыс тапсырмалары:

1. Өз тобыңыздың HTML-құжатын жасаңыз. Құжатта тобыңыздағы студенттер тізімі, кесте және топтың фотосуреті болуы керек. Өз фамилияңызға гиперсілтеме жасап, өзіңіздің жеке Web-бетіңізді (яғни, сіздің жеке HTML-құжатыңыз, онда сіз туралы шағын ақпарат болу керек) шақыратындай етіңіз.

2. Өз курсыңызға HTML-құжатын жасаңыз. Құжатта курстағы топтар тізімі, және сіздің факультетте 1-курста оқитындардың ішіндегі Алтын Белгі иегерлері туралы деректер кестесі болу керек. Өз тобыңыздың атына гиперсілтеме жасап, өзіңіздің тобыңыздың жеке Web-бетін (яғни, сіздің жеке HTML-құжатыңыз, онда сіздің топ туралы шағын ақпарат және топтың фотосуреті болуы керек) шақыратындай етіңіз.

3. Факультеттің HTML-құжатын жасаңыз. Құжатта факультеттегі мамандықтар тізімі, кафедралар жайлы дерегі бар кесте (кафедра аты, қазақ, орыс топтарының саны), факультетті мамандығын сипаттайтын сурет болуы керек. Мамандықтар тізіміндегі өз мамандығыңызға гиперсілтеме жасаңыз, ол сіздің мамандық жайлы қысқаша ақпараты бар HTML-құжатты шақыруы тиіс.

4. Өз университетіңіздің HTML-құжатын жасаңыз. Құжатта барлық факультеттер тізімі, факультеттер жайлы деректері (факультет аты, кафедра саны) бар кесте және университет эмблемасы бар сурет болуы тиіс. Өз факультетіңіздің атына гиперсілтеме жасаңыз. Ол факультет жайлы шағын ақпараты бар HTML-құжатын шақыруы тиіс.

5. Сіздің топқа сабақ беретін оқытушылар жайлы HTML-құжатын жасаңыз. Құжатта оқытушылар тізімі, олар жайлы деректері бар кесте (аты-жөні, сабақ беретін пәні) және мұғалімге қатысты сурет болуы тиіс. Құжатта өз топ жетекшіңізге (куратор) гиперсілтеме жасаңыз. Гиперсілтеме топ жетекшіңіз жайлы шағын ақпараты бар HTML-құжатын шақыруы тиіс.

Ескерту: Жасайтын HTML –құжатыңызда жоғарыда көрсетілген барлық тегтер қатыстырылуы тиіс.

Бақылау сұрақтары:

  1. HTML дегеніміз не?
  2. HTML құжат қалай жасалады?
  3. HTML құжаттың құрылым қандай?
  4. Браузер не үшін қолданылады? Қандай браузерлерді білесіз?
  5. кестені жасау үшін қандай тегтер қолданылады?