5.2. Вставка изображений

Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться тегом <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов (табл. 5.2).

Таблица 5.2

Атрибуты тега <IMG>

Наименование атрибута	Функции атрибута
SRC	Имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Если файл находится в другом каталоге, укажите к нему путь.
ALIGN	Выравнивание изображения в документе: left - по левому краю. right - по правому краю. top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. middle - выравнивает базовую линию текущей текстовой строки с центром изображения. absmiddle - выравнивает центр текущей текстовой строки с центром изображения. bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки. absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

Продолжение табл. 5.2

BORDER	Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).
WIDTH	Ширина изображения в пикселях.
HEIGHT	Высота изображения в пикселях.
HSPACE	Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.
VSPACE	Вертикальный отступ в пикселях. Не обязательный параметр.
ALT	Это сообщение, которое: 1) выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой браузер так, что тот не показывает картинки). 2) этот текст в виде подсказки, когда курсор мыши находится на рисунке.
NAME	Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр не обязательный.
LOWSRC	Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

Атрибут SRC

Самым главным атрибутом для тега <IMG> является атрибут src, при помощи которого можно задать имя файла с картинкой.

Формат представления атрибута:

src = имя файла.

Например, тег

<IMG src = img1.gif>

заставит браузер отобразить на экране графический файл img1.gif из текущего каталога.

Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог PIC, который является подкаталогом для каталога с программами (html-файлами). Тогда в команде вывода графики используется относительная ссылка, которая имеет вид:

<IMG src = ./pic/img1.gif>

Атрибут ALT

Атрибут alt рекомендуется использовать всегда.

Если картинка найдена браузером, то стоит пользователю остановить курсор на картинке, как надпись, заданная атрибутом alt, появится в маленьком окошке и сообщит дополнительную информацию.

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt.

Формат представления атрибута:

alt = "текст надписи".

Пример использования атрибута alt

<IMG src=monstr.jpg alt="Страшный зверь">

При наведении курсора на картинку появится сообщение "Страшный зверь".

Атрибуты width и height

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.

Если атрибуты не заданы, картинка рисуется в естественных размерах. Всегда задавайте размеры картинки в параметрах height и width, резервируя тем самым место в окне браузера еще до загрузки изображения.

Формат представления атрибутов:

width=n;

height=m,

где n, m – соответственно, количество пикселей для ширины и высоты рисунка.

Рекомендуется задавать только один из этих атрибутов, чтобы не исказить графическое изображение при задании ошибочных пропорций n и m. При задании только одного атрибута height или width, второй атрибут изменяется пропорционально и графическое изображение не искажается.

Чтобы вставить графическую гиперссылку в документ, состоящей из картинки в файле название.gif шириной 82 пиксела, высотой 90 пикселов, нужно ввести следующий тег:

<img src=название.gif width=82 height=90>.

Атрибут border

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов. При отсутствии атрибута, или при значении n = 0 рамка не рисуется.

Формат представления атрибута:

Атрибут border = n.

Комплесная конструкция тега <IMG>

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная конструкция):

<IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

Примеры обычной вставки изображения в электронный документ:

1) <IMG SRC=название.gif BORDER=3 ALT=Подсказка WIDTH=17 HEIGHT=16>

2) <img src=heart.gif alt="Ты слышишь?">