Использование графики в HTML-документах

Рисунки и анимация могут сделать HTML-документ более привлекательным и интересным. Они не только украшают страницу, но и помогают лучше передать содержание документа. Для правильного использования графики в HTML-документе необходимо учитывать следующие факторы: многие браузеры поддерживают только графические форматы GIF и JPEG; файлы, содержащие графику, передаются медленно; некоторые пользователи не имеют графических браузеров или намерено отключают загрузку изображений; цветная графика, которая хорошо смотрится на вашем компьютере, может плохо выглядеть на другом.

Тег < IMG> вставляет изображение в документ, как если бы оно было просто одним большим символом. Синтаксис тега:
< IMG атрибут1=значение1... [атрибутN=значениеN]>

Атрибуты тега < IMG> и их значения приведены в таблице.

Обратите внимание, что ширина и высота изображения могут быть заданы не только в пикселах, но и в процентах от размеров окна браузера. Многие компоненты, включаемые в состав Web-страниц (изображения, таблицы, аплеты и т. д.), позволяют задавать размер в относительных единицах (т. е. в процентах). Это позволяет уменьшить зависимость внешнего вида документа от текущих установок конкретного браузера и особенностей операционной системы. Рекомендуется задавать только один из атрибутов пары " ширина-высота" изображения, иначе рисунок может быть непропорционально деформирован и изменит свой вид.

Пример
Если размер изображения, хранящегося в файле exm2.gif составляет 150 пикселов по ширине и 90 по высоте, то следующая команда приведет к включению в документ деформированного изображения: < IMG SRC=" exm2.gif" WIDTH=50 HEIGHT=200> .

Помните, что графика передается по сети намного медленнее, чем текст, поэтому лучше включать в документ картинки небольшого размера. Если вы задаете размер изображения меньше, чем у исходного, то это приводит только к неоправданному увеличению объема передачи информации по сети. Рациональнее предварительно уменьшить размер изображения с помощью графического редактора.

Язык HTML позволяет задать расположение изображения относительно окружающего его текста. Атрибут ALIGN может принимать следующие значения.

Пример Рассмотрим возможные варианты выравнивания изображения относительно текста.

< img src=exm.gif align=top> Первая строка текста находится сверху изображения и обычно используется для описания рисунка.

< img src=exm.gif align=middle>   Первая строка текста находится по середине изображения и используется для того же.

< img src=exm.gif align=bottom> Первая строка текста находится внизу изображения и используется также как и в двух первых случаях.

< img src=exm.gif align=right> Изображение прижимается к правому краю окна просмотра, а текст обтекает изображение слева.

< img src=exm.gif align=left> Изображение прижимается к левому краю окна просмотра, а текст обтекает изображение справа.