paragraf9-3

Вграждането на изображения в Web страница по стандартите на HTML 4.0 е обединено с вграждането и на други обекти с помощта на тага <OBJECT>....</OBJECT> (праграф 15.3).

За сега обаче по-широко се използва неконтейнерния таг <IMG...>, който се интерпретира от всички браузери. За това в параграфа се разглежда тагът <IMG...>.Този таг има само един задължителен атрибут SRC=..., с който се указва мястото и името на файла с изображението.

Най-простата структура на тага има следния вид:

Изображението в този случай ще се покаже в прозореца на браузера непосредствено след текст или друг обект, описан с предшестващи тагове.

На фиг. 9.1 е показан кода на Web страница, в която едно и също изображение (файл mu-planet.jpg) е вградено по различен начин в текста.

В прозореца на браузера тази страница изглежда така, както е показана на фиг.9.2.

Съпоставянето на таговете със съответните изображения от фиг.9.2 показва следното:

- тагът за първото изображение ( <IMG SRC="img/mu-planet.jpg" >) го вмъква между редовете на текста по подразбиране в ляво на прозореца на браузера;

- тъй като в тага за второто изображение (<IMG SRC="img/mu-planet.jpg" ALIGN="LEFT">) се използва атрибута ALIGN="LEFT" изображението е в ляво, но за разлика от първия случай постранството отдясно на изображението е запълнено с текст;

- аналогично третото изображение, поради включване на атрибута ALIGN="RIGHT" , е в дясно, а в ляво от него се разполага текст;

- атрибут за рзполагане на изображението в центъра на екрана няма. За това за целта се използва конейнерния таг <DIV ALIGN="center"> ... </DIV>.

Ако файлът с изображението се намира в същата директория (папка), в която е файлът на Web страницата, в която то се вгражда, е достатъчно в атрибута SRC да се посочи само името на файла.

Ако файлът е на друг URL адрес,например http://www.naval-acad.bg, тогава тагът ще изглежда така:

В тага IMG се използват и други атрибути. Най-често използваните са посочени в таблица .9.1.

Атрибути	Стойности на атрибутите	Резултат при изобразяване в прозореца на браузера
ALT=	Текст	Текста се извежда в мястото на изображението, ако то по някаква причина не се зарежда. При посочване на изображението текста се показва за няколко секунди.
ALGN=	left	Изображението се разполага до лявата рамка на прозореца на браузера.
	right	Изображението се разполага до дясната рамка на прозореца на браузера.
	top, middle, bottom	При подравняване на изображението по подразбиране ( в ляво) се задава разположението напр, на текст по вертикалата на изображението ( в горния край, по средата, по долния край)
WIDTH=	Число	Ширина на изображението в пиксели.
HEIGHT=	Число	Височина на изображението в пиксели.
BORDER=	Число	Ширина на рамката около изображението в пиксели. При BORDER=0 отсъства рамка.
VSPACE=	Число	Разстояние в пиксели до останалите обекти в страницата, на която се разполага изображението по вертикала.
HSPACE=	Число	Разстояние в пиксели до останалите обекти в страницата, на която се разполага изображението по хоризонтала.

На фиг.9.3 е показан кода на Web страница с използване на атрибутите от табл.9.1 за тага <IMG ...>.

Web страницата изглежда в прозореца на браузера така, както е показано на фиг.9.4.

При съпоставяне на таговете за изображения от фиг.9.3 със съответните изображения от фиг.9.5 се вижда резултата от използваните атрибути.

Във връзка с исползването на атрибутите за размера на изображенито (WIDTH="150" HEIGHT="102")е необходимо да се отбележи следното.

Правилно е в тага <IMG...> да се задават реалните размери на изображението, въпреки, че това не е задължително.Това е важно поне по две причини.

Първо, при задаване размер на изображението различен от реалния, качеатвото му се влошава поради факта, че изображенията, използвани в Web страниците са главно растерни.

Второ, намаляването на размера на изображението не води до "ускоряване" на зареждането му, тъй като се зарежда изображението с реалните си размери.

9.3 Вграждане на изображения в Web страници