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 кесте

Суреттер маң ына оғ ан тү сінік беретін мә тін жазылғ анда, оны суретке байланысты жоғ ары немесе тө мен жылжытатын мү мкіндіктер жә не суретті беттің сол немесе оң жақ шетіне жылжыту 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" > Бұ л балық тың суреті

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

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