с тегами. Форматирование

1 2 3 4

</TITLE>
</ HEAD>

4. Енді құжаттың денесін, яғни HTML құжатта не көрсетілетінін енгіземіз.Ол үшін мына жолдарды теріңіз:

<BODY BGCOLOR=yellow TEXT=blue >

мұндағы BGCOLOR=yellow құжаттың фоны – сары, ал TEXT=blue шығатын текстің түсі көк болатынын анықтайды.

5. Ары қарай тағы да теріңіз:

<H1>Это заголовок первого уровня</H1>

<H2>Это заголовок второго уровня</H2>

Бұл жолдар әр түрлі деңгейдегі тақырыптарды анықтайды.

6. Енді нөмірленген және нөмірленбеген тізім жасауды үйренейік. Ол үшін мына жолдарды енгізіңіз:

<OL >Это пример пронумерованного списка

<LI>Первый элемент

<LI>Второй элемент

<LI>Третий элемент

</OL>

<UL TYPE=DISC>Это пример непронумерованного списка

<LI>Первый элемент

<LI>Второй элемент

<LI>Третий элемент

</UL>

7. Енді тексті пішімдеуді (форматтауды), яғни тексті енгізудің түрлі пішімдерін қолдануды үйренейік. Ол үшін мына жолдарды енгізіңіз:

<I>Это курсив</I>

<B>Это жирный шрифт</B>

<U>Это подчеркнутый текст</U>

<SUP>Это верхний индекс</SUP>

<SUB>Это нижний индекс индекс</SUB>

<BR>Это начало нового абзаца.

<BIG>Это большой шрифт</BIG>

<SMALL> Это маленький шрифт</SMALL>

<STRIKE>Это перечеркнутый шрифт</STRIKE>

8. Келесі жолға <BR><BR> деп теріңіз. Бұл екі рет бос жол жасағанды білдіреді («Enter» клавишасын басқанды білдіреді).

9. Келесі жолға теріңіз: <MARQUEE >ЭТО БЕГУЩАЯ СТРОКА</MARQUEE>. Нәтижесінде жүгірмелі жол жасалынады.

10. HTML құжатта көрсетілетін ақпарат таусылғандықтан <BODY> тегін жабу керек, ол үшін </BODY> деп жазыңыз.

11. HTML құжаттағы жазу аяқталды, сондықтан <HTML> тегін де жабу керек,ол үшін </HTML> деп жазыңыз.

12. Блокнотты жауып, жасаған құжатыңызды тышқанның сол жағын екі рет шертіп ашыңыз.

2-жаттығу. Сайттың тексін өзгерту. Өзіңіз жайлы шағын ақпарат бар үй бетін (домашняя страница) жасаңыз, ол үшін барлық келтірілген тегтерді қолданып 1–ші жаттығудағы сайттың тексін өзгертіңіз.

3-жаттығу. Құжатты редақциялау.

Фондық сурет қою арқылы беттің фонын өзгертейік. Ол үшін:

· Мои рисунки бумасынан (папка) jpg форматты суреттің көшірмесін өз бумаңызға түсіріп, оған image.jpg деп ат беріңіз.

· Қайтадан өзіңіздің HTML-құжатыңыздың бетіне оралып Вид-Просмотр HTML-кода командасын орындаңыз.

· Ашылған Блокнот редакторының терезесінде HTML-кодты. Редакциялайық. <BODY> тегінде фон түсінің тегінің орнына BACKGROUND="image.jpg" дегенді қосып жазыңыз. Құжатты сақтап, Блокнот терезесін жабыңыз.

· Өзіңіздің HTML- құжатыңыздың бетіне оралып Вид-Обновить командасын орындаңыз.

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

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

2-сурет

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

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

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

<HEAD>

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

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

</CAPTION>

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

</TD>

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

</TD>

</TR>

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

</TD>

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

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

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

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

<HTML>

<HEAD>

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

</HEAD>

<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 –құжатыңызда жоғарыда көрсетілген барлық тегтер қатыстырылуы тиіс.

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