Өз бетінше үйренуге арналған сұрақтар мен тапсырмалар:
Тізімдермен жұмыс жасағандағы мысалдарды кестелерге енгізе отырып қайта жазыңыз.
Кесте ұяшықтарын әртүрлі түспен бояу және кесте сызықтарын өзгерту туралы ақпараттар тауып, мысалдарын жасап көріңіз.
№6 Зертханалық жұмыс
Тақырыбы: Фреймдер құру тәсілдері
Мақсаты: HTML құжаттарын фреймдерге бөлуге мысалдар келтіре отырып фреймдер құрудың маңыздылығын көрсету.
Бір Web–парақта бірнеше құжаттардың орналастырылуы.
HTML тілі броузер программасы терезелерін бірнеше бөлікке бөліп тастау мүмкіндігін береді және олардың әрқайсысында жеке құжаттар бейнеленеді. Осындай бөліктерді фрейм деп атаймыз.
Фреймдер құру үшін HTML ерекше құжаты пайдалынады, оның құрылымы кәдімгі құжаттардан бөлек болады. Осындай құжаттарда құжат “денесінің” бөлімдері болмайды, ал шын мәнінде, қандай да болсын мәтінде мүлде болмайды. Оның орнына бұл құжаттарда <FRAMESET> және </FRAMESET> тэгтерінің арасында орналасқан фреймдер болады. Бұл сипаттамада броузер терезесіндегі бөліктердің өлшемдері мен олардың орналасу тәртібі сипатталады, сонымен қатар аталмыш бөліктердің әрқайсысынан шақырылуы тиіс құжаттар көрсетіледі.
<FRAMEST> тэгі, терезелерде бөлу әдістерін анықтайтын, COLS= және ROWS= міндетті артибуттарына ие болуы тиіс. COLS= артибуттарын пайдаланған уақытта терезелер вертикаль сызықтармен, ал ROWS- артибуттарымен пайдаланған уақытта горизонталь сызықтармен бөлінеді. Егер аталмыш атрибуттың екеуі де берілсе, терезеде бөлікшелерден құралатын тор пайда болады. Осы атрибуттардың мәндері терезе бөліктерінің биіктігін (немесе енін) анықтайды. Әр бағанға (жолға) арналған параметрлер пиксель өлшем бірлігі бойынша үтірлер арқылы немесе проценттермен (% белгісі) беріледі. Соңғы параметр ретінде (*) жұлдызша белгісінде пайдалануға болады. Осындай фрейм үшін барлық қалған бос кеңістіктер бөлініп беріледі.
3. <FRAMESET> және </FRAMESET> тэгтерінің арасында, қалыптастырылған бөліктердің қажеттілігін көрсететін қосымша тэгтер орналастырылады. Осы мақсаттар үшін терезені қосымша бөлу мүмкіндігін беретін, ендірілген <FRAMESET> тэгін немесе экрандағы жеке бөліктеріне шығарылатын құжаттарды анықтайтын, жеке даралық <FRAME> тэгтерін пайдалануға болады. <FRAMESET> және </FRAMESET> тэгтерінің араларына орналастырылған элементтердің саны, қалыптастырылған бөлік санына сәйкес болуы керек.
<FRAME> тэгінде, аталмыш бөлікке шақырылатын құжаттарды анықтайтын, SRC=міндетті атрибуттары болуы керек. Қосымша атрибуттар жеке фреймдер арасындағы қоршауларды және оның басқа кейбір қасиеттерін реттеу мүмкіндігін береді.
<HTML><HEAD><TITLE> Құжаттың күрделі құрылымы </TITLE></HEAD>
<FRAMESET ROWS="45%, 30%, 25%">
<FRAMESET COLS="40%, 30%, 30%">
<FRAMESET ROWS ="50%, 50%">
<FRAME SRC= "1 мысал.htm">
<FRAME SRC= "Өлшем.html"></FRAMESET>
<FRAME SRC= "сызықтар.htm">
<FRAME SRC= "туралау.html"></FRAMESET>
<FRAMESET COLS="60%, 40%">
<FRAME SRC= "Тізімдер.html">
<FRAME SRC= "1.htm"></FRAMESET>
<FRAMESET COLS="30%, 40%, 30%">
<FRAME SRC= "Гүл.htm">
<FRAME SRC= "бег.строка.htm">
<FRAME SRC="Список.html">
</FRAMESET></FRAMESET></FRAMESET>
</HTML>
№8 Зертханалық жұмыс
Тақырыбы: Web-беттерін безендіруде суреттерді қолдану.
Мақсаты: Web-беттерінде қолданылатын негізгі графикалық форматтармен таныстыру және оларды қолдану.
Суреттік бейнелер Web-парақтарды әшекейлеп безендіру кезінде маңызды құралдар рөлін атқарады. Суреттердің өздері HTML құжаттарынан бөлек орналасқан жеке файлдарда сақталады, алайда олар броузер арқылы Web-беттерінің ішінде бейнеленеді. Суреттердің бейнелеу ережелерін келесі түрде беруге болады:
1. Суреттерді құжаттардың ішіне орналастыру үшін <ІMG> жеке, яғни жабылмайтын жалқы тэг қолданылады.
Бұл тэгте міндетті түрде SRC=”...” атрибуты болуы тиіс, оның мәнін абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL-адресі көрсетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді және ол <IMG…>тэгі тұрған орыннан көрінеді. Мысалы, мына жол <IMG SRC=«fist.jpg»> экранға fist.jpg файлындағы балық суретін шығарады.
3. Суреттер өздерінің көлемдерін сақтай отырып Web–парағына орналасады. Егер суретті ықшамдап бейнелеу кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін WIDTH= (ені) және HEIGHT= (биіктігі) атрибуттарының көмегімен беруге болады. Осы екі атрибуттардың мәні Web-беттегі суреттің биіктігі мен енін бүтін санмен берілген пикселмен (нүктелермен) көрсетеді. Төмендегі жол: <IMG SRC=«fish.jpg» WIDTH=500 HEIGIT=250> суретті 500х250 нүктелерден тұратын төртбұрышты аумаққа орналастырады. Сурет айналасындағы жақтау (рамка-border) сызығының қалыңдығын да параметр ретінде көрсетуге болады:
Border = Пиксельдер саны
Жақтау тек әдемілік үшін ғана емес, суреті А тэгінің ішінде гиперсілтеме ретінде пайдаланғанда, ол бір рет шертілген соң жақтау сызығының түсі өзгеріп оның қолданылғаны белгілі болып тұрады.
Енді суретті пайдалану мысалын келтірейік:
<HTML><HEAD><TITLE>1</TITLE></HEAD>
<BODY>
<IMG SRC="С:\Images\Enrique Iglesias1.jpg" WIDTH=150 HEIGHT=200 BORDER=3 align="center">
</BODY></HTML>
Бұл жолдар гиперсілтеме ретінде Энрике Иглесиастың суретін (ол сурет алдын ала болуы тиіс және де орналасу орнын дұрыс көрсету қажет) шығарады.
Құжаттарда суреттерді бейнелегенде, оның орындала бермейтін бірсыпыра ерекшеліктері бар екенін айта кеткен жөн. Біріншіден, шығарылатын Web-беттерін суреттерді көрсетуге қажетті мүмкіндігі жоқ броузерлер арқылы да шығарыла береді. Екіншіден, көбінесе қолданушылар құжатты желі арқылы тез қабылдау үшін суреттерді бейнелейтін команданы алып тастайды. Бұл екі жағдайда да суретті көре алмағанның өзінде, суретте не бейнеленетінің білген дұрыс болар еді. Бұл мақсат үшін суретті сипаттайтын қосымша мәтіндерді қолданады.
4. Қосымша мәтін суреттің мүмкіндігінше толық мәтін түрінде сипатталады. Егер қандай да болсын себептерге байланысты броузер суретті көрсете алмаса, ол суреттің орнына сипаттама ретінде қосымша мәтін беріледі. Ол мәтін <IMG…> тэгі арқылы ALT=«…» арнайы атрибутының мәнімен беріледі. Мысалы:
<html>
<BODY>
<IMG SRC=«Enrique Iglesias.jpg» alt=«Enrique Iglesias суреті»>
</BODY>
<html>
Бұл жолдар сурет шықпаған жағдайда, сол сурет орнына тышқан курсорын алып барғанда, Enrique Iglesias суреті деген сөзді бейнелейді.
Суреттер маңына оған түсінік беретін мәтін жазылғанда, оны суретке байланысты жоғары немесе төмен жылжытатын мүмкіндіктер және суретті беттің сол немесе оң жақ шетіне жылжыту Align атрибуты арқылы беріледі. Оны туралау атрибуттары деп атайды, олар:
Align=«bottom» - мәтін суреттің төменгі жағында:
Align = «left» - сурет жолдың сол жағында:
Align = «middle» -мәтін суреттің ортасында:
Align = «right» - сурет жолдың оң жағында:
Align = «top» - мәтін суреттің жоғарғы жағында орналасқан.