Встраивание изображений в HTML-документы.

Для встраивания изображений в HTML-документ используют тэг <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:

При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания задается значением параметра ALIGN тэга <IMG>. Возможные значения этого параметра приведены в таблице 1.

Таблица 1. Значения параметра ALIGN

Тэг/атрибут	Описание
TOP	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
TEXTTOP	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
MIDDLE	Выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE	Выравнивание середины изображения по середине текущей строки
BASELINE или BOTTOM	Выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM	Выравнивание нижней границы изображения по нижней границе текущей строки
LEFT	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны
RIGHT	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны

Все значения параметров выравнивания изображений условно делят на две группы по их принципу действия. К одной группе относят два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое «плавающее» изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Например:

<HTML>

<HEAD>

<TITLE>Встраивание изображений</title></head>

<BODY>

Выравнивание изображений <IMG SRC = final.gif ALIGN=top > по верхнему краю

Выравнивание изображений по <IMG SRC = final.gif ALIGN=baseline > базовой линии

</BODY>

</HTML>

В этом примере изображения используются как элемент строки.

Приведем пример плавающего изображения:

<HTML>

<HEAD>

<TITLE>Встраивание изображений - как плавающих элементов строки</title></head>

<BODY>

(Здесь идет текст абзаца)

(Здесь идет текст абзаца)

</BODY>

</HTML>

Если в документе используются плавающие изображения, выровненные со значением RIGHT и LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тэга принудительного прерывания строки с параметром CLEAR. В качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или ALL. Так для приведенного выше примера в нужном месте текста можно разместить строку:

Текст, следующий далее, будет размещаться ниже изображения с новой строки.

Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображений при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселях, так и в процентах от размеров окна просмотра. Значения ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры при загрузке изображений выполняют его перемасштабирование. Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр буде вычисляться автоматически из условия сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Если не требуется решать задачу изменения размеров изображения, рекомендуется указывать их реальные размеры в пикселях с помощью параметров WIDTH и HEIGHT. Указание действительных размеров:

ü позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстраций по пустому прямоугольнику, выдаваемому на экран вместо изображения (если размеры не будут указаны, то браузер не зная их, выведет маленькую пиктограмму и форматирование страницы будет нарушено);

ü позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отформатировать текст на экране. Указание размеров встроенных изображений позволяет выполнить форматирование документа до полной загрузки файлов с изображениями.

Например:

<HTML>

<HEAD>

<TITLE>Масштабирование изображений</title></head>

<BODY>

</BODY>

</HTML>