Рисунки и анимация могут сделать HTML-документ более привлекательным и интересным. Они не только украшают страницу, но и помогают лучше передать содержание документа. Для правильного использования графики в HTML-документе необходимо учитывать следующие факторы: многие браузеры поддерживают только графические форматы GIF и JPEG; файлы, содержащие графику, передаются медленно; некоторые пользователи не имеют графических браузеров или намерено отключают загрузку изображений; цветная графика, которая хорошо смотрится на вашем компьютере, может плохо выглядеть на другом.
Тег <img> вставляет изображение в документ, как если бы оно было просто одним большим символом. Синтаксис тега:
<img атрибут1=значение1 ... [атрибутN=значениеN]>
Атрибуты тега <img> и их значения приведены в таблице.
| Атрибут | Назначение |
|---|---|
| src="файл" | Задает url-адрес изображения (можно указывать как абсолютный, так и относительный url-адрес; если файл с изображением находится в той же директории, что и HTML-документ, то достаточно просто указать имя файла); этот атрибут является обязательным |
| alt="текст" | Задает альтернативный текст для браузеров, не поддерживающих работу с изображениями |
| align="тип" | Задает расположение картинки относительно текста, тип может принимать следующие значения: top, middle, bottom, left, right |
| border=n | Устанавливает толщину обрамления вокруг изображения в пикселах |
| height=n(%) | Устанавливает высоту изображения в пикселах или в процентах от высоты окна браузера |
| width=n(%) | Устанавливает ширину изображения в пикселах или в процентах |
| hspace=n | Задает свободное пространство слева и справа от изображения (в пикселах) |
| vspace=n | Задается свободное пространство над и под изображением (в пикселах) |
Обратите внимание, что ширина и высота изображения могут быть заданы не только в пикселах, но и в процентах от размеров окна браузера. Многие компоненты, включаемые в состав Web-страниц (изображения, таблицы, аплеты и т. д.), позволяют задавать размер в относительных единицах (т. е. в процентах). Это позволяет уменьшить зависимость внешнего вида документа от текущих установок конкретного браузера и особенностей операционной системы. Рекомендуется задавать только один из атрибутов пары "ширина-высота" изображения, иначе рисунок может быть непропорционально деформирован и изменит свой вид.
Пример
Если размер изображения, хранящегося в файле exm2.gif составляет 150 пикселов по ширине и 90 по высоте, то следующая команда приведет к включению в документ деформированного изображения: <img src="/sites/default/files/informatika1/exm2.gif" width="50" height="200"> .
Помните, что графика передается по сети намного медленнее, чем текст, поэтому лучше включать в документ картинки небольшого размера. Если вы задаете размер изображения меньше, чем у исходного, то это приводит только к неоправданному увеличению объема передачи информации по сети. Рациональнее предварительно уменьшить размер изображения с помощью графического редактора.
Язык HTML позволяет задать расположение изображения относительно окружающего его текста. Атрибут align может принимать следующие значения.
| Значение | Функция |
|---|---|
| top | Выравнивает одну строку по верху изображения, остальные помещает после рисунка |
| middle | Выравнивает одну строку по середине изображения, остальные помещает после рисунка |
| bottom | Выравнивает одну строку по низу изображения, остальные помещает после рисунка |
| left | Прижимает обтекаемое текстом изображение к левой стороне окна браузера |
| right | Прижимает обтекаемое текстом изображение к правой стороне окна браузера |
Пример
Рассмотрим возможные варианты выравнивания изображения относительно текста.
 Первая строка текста находится сверху изображения и обычно используется для описания рисунка. |
||
|
Первая строка текста находится по середине изображения и используется для того же. |
||
|
Первая строка текста находится внизу изображения и используется также как и в двух первых случаях. |
||
|
||
|
Задания
- Запустите браузер, выберите любую картинку и скопируйте ее к себе в директорию public_html (для копирования картинки поставьте курсор мыши на выбранное изображение, нажмите правую кнопку мышки и в появившемся контекстном меню выберите пункт "Сохранить картинку как..." ("Save image as..."), а в окне, задающем список директорий, выберите public_html и введите имя файла).
- В документ, хранящийся в файле image.html, включите скопированное изображение, при этом рисунок должен иметь рамку шириной 3 пиксела и прижиматься к правому краю, а расстояние вокруг рисунка должно составлять 5 пикселов. Включите альтернативный текст в описание тега img.