Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лабораторные работы.docx
Скачиваний:
74
Добавлен:
18.02.2016
Размер:
5.91 Mб
Скачать

Тақырыбы: html – құжаттарды белгілеу тілі. Web-беттерді құру негіздері. Html тілінің негізгі тэгтері. Туралау және шегіністер, абзацтарды белгілеу. Маркелер, тізімдер, шрифттер

Сабақ мақсаты: World Wіde Web және HTML тілінің тэгтерімен жұмыс атқаруды үйрету. HTML тілінің негізгі тэгтерімен жұмыс жасап үйрету, құжаттардағы түстерді анықтауды білу және қаріптерді форматтау. Гипертекстік сілтемені жасауды үйрену. HTML-құжатқа суреттер енгізуді үйрену

Сабақ жоспары:

1) Берілген зертханалық жұмыстың нұсқауымен танысу

2) Берілген зертханалық жұмыстың әдістемелік нұсқауында келтірілген мысалдар мен тапсырмаларды орындау

3) Жеке тапсырманы ретінде орындау

4) Бақылау сұрақтарға жауап беру

Қысқаша теориялық мағлумат

Html тілінің құрылымы

<HTML>

<HEAD> <TITLE> құжат тақырыбы </TITLE> </HEAD>

<BODY>

құжат тұлғасы

</BODY>

</HTML>

Көп жағдайларда HTML құжаттардың тақырыптары болады. Олар <Hn></Hn> тэгтер арқылы жасалады, n–нің орнына 1-ден 6-ға дейін сан жазамыз. Осы тегтер ортасына мәтін орналастырсақ, сізге белгілі көлемді тақырып шығады.

<H1>Тақырып</H1>

<H2>Тақырып</H2>

<H3>Тақырып</H3>

<H4>Тақырып</H4>

<H5>Тақырып</H5>

<H6>Тақырып</H6>

Ал енді жаңа абзацқа шығару үшін <P>, ал жаңа жолға шығу үшін <BR> тэгі жазылады. Бұл тэгтерді жабу керек емес. Әрине, егер Сіз <P> тэгінде ALIGN абзацты түзеу элементін қолданбасаңыздар:

<P ALIGN=LEFT>Сол жақ шетке түзеу</P>

<P ALIGN=CENTER>Ортаға келтіру</P>

<P ALIGN=RIGHT>Оң жақ шетке түзеу</P>

Ал мәтінге қалын, курсивті, сызықты және т.с.с. түр беру үшін, оны сай келетін тэгтер ортасына жазу керек:

<B> қалын текст </B>

<I> Курсивті </I>

<U> Асты сызылған </U>

<STRIKE>Сызылып тастаған</STRIKE>

<SUP> Жоғарғы индекс </SUP>

<SUB> Төменгі индекс </SUB>

Кейбір тэгтер белгілі бір параметрлермен қолданыла алады немесе қолдану тиіс, олар ашылған тэг элементтерінде жазылады (бір тэгте бірнеше параметр беруге болады). Мысалы, ашылып жатқан <FONT> тэгінің (</FONT> жабылатын тэг жазылу тиіс) бірнеше арибуттары болуы мүмкін:

SIZE - шрифттің өлшемін береді (стандартты шрифт өлшемі -"3"). Мәтінді <FONT SIZE=n></FONT> тэгтерінің ортасына қойсақ (бұл жердегі n - цифра) Сіз оған керекті өлшем бересіз:

<font size="1">Мысал 1</font> <font size="2"> Мысал 2 </font> <font size="3"> Мысал 3 </font> <font size="4"> Мысал 4 </font> <font size="5"> Мысал 5 </font> <font size="6"> Мысал 6 </font>

<font COLOR="white"> Красный </font> <font COLOR="#FF0000"> Красный </font>

Сонымен түс туралы басынан айтып кетейік. <BODY> тэгінің ішіне BGCOLOR параметрін жазып және оған түс атын немесе оның 6 орынды кодын беру керек. Берілген екі мысал бетті қызыл түспен бояйды.

<BODY BGCOLOR="RED"> (түстің аты қолданылған) <BODY BGCOLOR="#FF0000"> (түс 6 орынды кодпен берілген)

Сурет тэгтері.

HTML құжатына сурет салу үшін келесі құрылымды жасау керек. (толық көрсетілген):

<IMG SRC="Сурет аты" BORDER="0" ALIGN=" түзеу" WIDTH="Ені" HEIGHT="Биіктігі" HSPACE=" 1-орын қалу" VSPACE="2-орын қалу" ALT="сұхбат">

Кестелер тэгтері

Кестелерді қолдана отырып, бірнеше бағана құруға және суреттің фоны мен үйлесуін сәндірек етуге болады т.с.с.

Кесте <TABLE> ашылатын тегімен басталып </TABLE> тегімен аяқталады. <TABLE> тегінде мынадай атрибуттары болуы мүмкін:

Кестенің құрылымын біліп алу үшін, қарапайым мысалды алып қарайық:

1 ұяшық

2 ұяшық

3 ұяшық

4 ұяшық

Ескерту: Берілген мысалда кестенің ені қолдан берілген (WIDTH="200" пиксель), бірақ пайызбен берген ыңғайлы, себебі бұл жағдайда терезенің көлеміне қарай өзгеріп отырады.

Мұндай кесте былай жасалады:

<TABLE BORDER="2" WIDTH="200" BGCOLOR="#00FF00"> <TR> <TD>1 ұяшық</TD> <TD>2 ұяшық</TD> </TR> <TR> <TD> 3 ұяшық</TD> <TD> 4 ұяшық</TD> </TR> </TABLE>

Кестеде тақырып орналасуы мүмкін, ол <CAPTION></CAPTION> тэгтерінің ортасында орналасады. Ол міндетті түрде <TITLE> тэгінен кейін орналасу керек. Тақырыпқа ALIGN атрибутын қолдануға болады, ол кестеде орналасуын анықтайды:

TOP - тақырып кестенің жоғарғы жағының ортасына жазылады. LEFT - тақырып кестенің жоғарғы жағының сол жақ шетіне жазылады. RIGHT - тақырып кестенің жоғарғы жағының оң жақ шетіне жазылады. BOTTOM -тақырып кестенің төменгі жағының ортасына жазылады.

Ал енді кестенің жолдары мен ұяшықтары туралы. Кестенің жолдары <TR> тэгімен басталады және </TR> тэгімен жабылады, ал әрбір ұяшық <TD> тэгімен басталып </TD> тэгімен аяқталады.