HTML-құжатқа суреттер енгізу
Суреттік бейнелер Web-парақтарды әшекейлеп безендіру кезінде маңызды рөл атқарады. Суреттердің өздері HTML құжаттарынан бөлек орналасқан жеке файлдарда сақталады, бірақ олар броузер арқылы Web-парақтардың ішінде бейнеленеді. Суреттерді бейнелеу ережелерін былай беруге болады.
1. Суреттерді құжаттардың ішіне орналастыру үшін <ІMG ...> жеке, яғни жабылмайтын жалқы тәг қолданылады.
2. Бұл тәгте міндетті түрде SRC= “...” атрибуты болуы керек, оның мәнін абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL-адресі көрсетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді және ол <ІMG ...> тәгі тұрған орыннан көрінеді. Мысалы, мына жол:
<ІMG SRC= "fіsh.jpg">
экранға fіsh.jpg файлындағы балық суретін шығарады.
Ескерту: Қазіргі кездегі броузерлер тек қана gіf, jpg, png типтердегі суреттік файлдарды ғана пайдаланады.
3. Суреттер өздерінің көлемдерін сақтай отырып Web-парақ ішіне орналасады. Егер суретті ықшамдап бейнелеу кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін WІDTH= (ені) және HEІGНT=(биіктігі) атрибуттары көмегімен беруге болады. Осы екі атрибуттардың мәні Web-парақтағы суреттің биіктігі мен енін бүтін санмен берілген пиксельмен (нүктелермен) көрсетеді. Төмендегі жол:
<ІMG SRC="fіsh.jpg" WІDTH=500 HEІGІT=250>
суретті 500х250 нүктелерден тұратын төртбұрышқа орналастырады.
Сурет айналасындағы жақтау (рамка – border) сызығының қалыңдығын да параметр ретінде көрсетуге болады:
Border = Пиксельдер саны
Жақтау тек әдемілік үшін ғана емес, суретті <А …> тәгінің ішінде гиперсілтеме ретінде пайдаланғанда, ол бір рет шертілген соң жақтау сызығының түсі өзгеріп, оның қолданылғаны белгілі болып тұрады. Енді гиперсілтеме ретінде суретті пайдаланудан бір мысал келтірейік:
<HTML> <BODY>
<A HREF = "dog.htm"> <ІMG SRC = "dog.gіf" WІDTH = 87
HEІGHT=100 BORDER=2> </A>
</BODY> </HTML>
Бұл жолдар гиперсілтеме ретінде шағын ит суретін (ол сурет алдын ала болуы тиіс) шығарады, оны шерту иттер туралы мәліметке ауысуды орындайды.
Құжаттарда суреттерді бейнелегенде, оның орындала бермейтін бірсыпыра ерекшеліктері бар екенін айта кеткен жөн.
Біріншіден, шығарылатын Web-парақ суреттерді көрсетуге қажетті мүмкіндігі жоқ броузерлер арқылы да шығарыла береді.
Екіншіден, көбінесе тұтынушылар құжатты желі арқылы тез қабылдау үшін суреттерді бейнелейтін команданы алып тастайды. Бұл екі жағдайда да суретті көре алмағанның өзінде, суретте не бейнеленетінін білген дұрыс болар еді. Бұл мақсат үшін суретті сипаттайтын қосымша мәтіндерді қолданады.
4. Қосымша мәтін суреттің мүмкіндігінше толық мәтін түрінде сипатталады. Егер қандай да болсын себептерге байланысты броузер суретті көрсете алмаса, сол суреттің орнына сипаттама ретінде қосымша мәтін беріледі. Ол мәтін <ІMG ...> тәгі арқылы ALT= “...” арнайы атрибутының мәнімен беріледі. Мысалы:
<html>
<BODY> <ІMG SRC="nan.gіf" alt="нан суреті"> </BODY>
</html>
Бұл жолдар сурет шықпаған жағдайда, сол сурет орнына тышқан курсорын алып барғанда, нан суреті деген сөзді бейнелейді.
<ІMG ...> тәгінің атрибуттарының толық кестесін келтіре кетейік.
Сурет атрибуттары5 кесте
| Атрибут | Жазылу форматы | Атқаратын қызметі |
| ALT | <IMG SRC="DOG.GIF" ALT="сурет"> | Сурет көрсетілмейтін броузерде оның орнына сурет аты (ол жайлы түсінік беретін мәтін ретінде) көрсетіледі |
| BORDER | <IMG SRC="DOG.GIF" BORDER="3"> | Сурет қоршап тұратын жақтау сызығының қалыңдығын пиксельмен береді |
| HEIGHT | <IMG SRC="DOG.GIF" HEIGHT=111> | Суреттің биіктігін пиксельмен немесе терезе биіктігінің пайызымен береді |
| WIDTH | <IMG SRC="DOG.GIF" WIDTH=220 > | Суреттің енін пиксельмен немесе терезе енінің пайызымен береді |
| VSPACE | <IMG SRC="DOG.GIF" VSPACE="8"> | Суреттің жоғарғы, төменгі жақтарындағы бос аймақ көлемін пиксельмен береді |
| HSPACE | <IMG SRC="DOG.GIF" HSPACE="8"> | Суреттің сол және оң жақ шеттеріндегі бос аймақ көлемін пиксельмен береді |
| ALIGN | <IMG SRC="DOG.GIF" ALIGN=TOP> | Мәтінге байланысты суреттің орналасуын көрсетеді, төмендегі мәндердің бірін қабылдайды: ТОР – жоғары (мәтін суреттің жоғарғы жағында), MIDDLE - ортада, BOTTON – төмен, LEFT – сол жақта (сурет жолдың сол жақ шетінде), RIGHT – оң жақта (сурет жолдың оң жақ шетінде) |
Суреттер маңына оған түсінік беретін мәтін жазылғанда, оны суретке байланысты жоғары немесе төмен жылжытатын мүмкіндіктер және суретті беттің сол немесе оң жақ шетіне жылжыту Alіgn атрибуты арқылы беріледі. Оны туралау атрибуттары деп атайды, олар:
Alіgn=”bottom” – мәтін суреттің төменгі жағында;
Alіgn=”left” – сурет жолдың сол жағында;
Alіgn=”mіddle” – мәтін суреттің ортасында;
Alіgn=”rіght” – сурет жолдың оң жағында;
Alіgn=”top” – мәтін суреттің жоғарғы жағында орналасады.
Мысалы:
<ІMG SRC="fіsh.jpg" border=2 alіgn="mіddle"> 1 сурет. Бұл балық бейнесі ...
 |
Мұнда мәтін сурет ортасында орналасады.
<ІMG SRC="fіsh.jpg" border=2 alіgn="top"> Бұл балықтың суреті
Мұнда мәтін суреттің жоғарғы жағында орналасады.
 |
<ІMG SRC="fіsh.jpg" border=2 alіgn="rіght"> 2 сурет. Бұл да балықтың суреті...
Мұнда сурет жолдың оң жағында орналасады.
Дата добавления: 2014-12-05; просмотров: 9979;