Web – парақтардағы суреттер

Суреттік бейнелер Web – парақтарды әшекелеп безендіру кезінде маңызды құралдар рөлін атқарады. Суреттердің өздері HTML құжаттарынан бөлек орналасқан жеке файлдарда сақталады, алайда олар броузер арқылы Web – парақтардың ішінде бейнеленелі. Суреттерді бейнелеу ережелерін былай беруге болады.

1. суреттерді құжаттардың ішіне орналастыру үшін <IMG…> жеке, яғни жабылмайтын жалқы тәг қолданылады.

2. Бұл тәгте міндетті түрде SRC = «...» атрибуты болуы керек, оның мәнін абсолюттік және салыстырмалы түрде жазылған бейнелеу файлның URL – адресі көрсетіледі. Құжатты әкранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді және ол <IMG…> тәгі тұрған орыннан көрінеді. Мысалы мына жол:

< IMG SRC= «Закат. jpg» >

экранға Закат. jpg файлдағы суретті шығарады.

Ескерту: қазіргі кездегі броузерлер тек қана gif, jpg, png типтердегі суреттік файлдарды ғана пайдаланады.

3. Суреттер өздрінің көлемдерін сақтай отырып Web – парағына орналасады. Егер суретті ықшамдап бейнелеу кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін WIDTH= (ені) және HEIGIT = (биіктігі) атрибуттарының көмегімен беріге болады. Осы екі атрибуттардың мәні Web – парақтағы суреттің биіктігі мен енін бүтін санмен берілген пиксельмен көрсетеді. Төмендегі жол:

< IMG SRC= «Закат. jpg» WIDTH=500 HEIGIT =250 > суретті 500*250 нүктелерден тұратын төртбұрышты аумаққа орналастырады. Сурет айналасындағы жақтау зысығының қалындығын да параметр ретінде көрсетуге болады:

Border = Пикселдер саны

Жақтау тек әдемілік үшін ғана емес, суретті А тәгінің ішінде гипперсілтеме ретінде пайдаланғанда, ол бір рет шертілген соң жақтау сызығының түсі өзгеріп оның колданылғаны белгілі болып тұрады. Енді гипперсілтеме ретінде суретті пайдаланудан бір мысал келтіреік:

< HTML >

< BODY>

<A HREF = «dog.htm»> <IMG SRC = «dog. gif» WIDTH=87 HEIGIT =100

BORDER=2 > </A>

</ BODY>

</ HTML >

Бұл жолдар гипперсілтеме ретінде шығатын ит суретін шығарады, оны шерту иттер туралы мәліметке ауысуды орындайды.

Құжаттарда суреттерді бейнелегенде, оның орындала бермейтін бірсыпыра ерекшеліктері бар екенін айта кеткен жөн. Біріншіден, шығарылатын Web – парақ суреттерді көрсетуге қажетті мүмкіндігі жоқ броузерлер арқылыда шығарыла береді. Екіншіден, көбінесе қолданушылар құжатты желі арқылы тез қабылдау үшін суреттерді бейнелейтін команданы алып тастайды. Бұл екі жағдайда да суретті көре алмағанның өзінде, суретте не бейнелетінін қосымша мәтіндерді қолданады.

4. Қосымша мәтін суреттің мүмкіндігінше толық мәтін түрінде сипатталады. Егер қандайда болсын себептерге байланысты броузер суретті көрсете алмаса, ол суреттің орнына сипаттама ретінде қосымша мәтін беріледі. Ол мәтін <IMG…> тәгі арқылы ALT = «...» арнайы атрибуттың мәнімен беріледі. Мысалы:

< HTML >

< BODY>

<IMG SRC = «dog. gif» alt = «ит суреті»>

</ BODY>

</ HTML >

Бұл жолдар сурет шықпаған жағдайда, сол сурет орнына тышқан курсорын алып барғанда, ит суреті деген сөзді бейнелейді.

Суреттер маңына оған түсінік беретін мәтін жазылғанда, оны суретке байланысты жоғары немесе төмен жылжытатын мүмкіндіктер және суреттің беттің сол немесе оң жақ шетіне жылжыту Align атрибуты арқылыберіледі. Оны туралау атрибуттары деп атайды, олар:

Align = «bottom» - мәтін суреттің төменгі жағында;

Align = «left» - сурет жолдың сол жағында;

Align = «middle» - мәтін суреттің ортасында;

Align = «right» - сурет жолдың оң жағында;

Align = «top» - мәтін суреттің жоғары жағында орналасқан.

< IMG SRC= «Закат. jpg» border=2 align = «middle» > Күннің батуы.

Мұнда мәтін сурет ортасында орналасады.

< IMG SRC= «Закат. jpg» border=2 align = «top» > Күннің батуы.

Мұнда мәтін суреттің жоғарға жағында орналасады.

< IMG SRC= «Закат. jpg» border=2 align = «right» > Күннің батуы.

Мұнда мәтін сурет жолдың оң жағында орналасады.