Изображения могут нести определенную информацию, да и просто придают Web-странице привлекательный вид. Тегом НТМL, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.
Пример вставки изображения:
<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">
Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <А>, что и для текста, но между <А> и </А> вставляется тег изображения <IMG>:
<А НREF="адрес файла или изображения"> <IMG SRC="image.gif"></А>
При этом изображение, используемое в качестве гипертекстовой ссылки, обводится дополнительной рамкой. В приведенном ниже примере портрет автора связан с файлом, содержащим его биографию.
Атрибуты и их аргументы. Тег изображения имеет один обязательный атрибут SRC и необязательные: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.
Атрибут SRC
Указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения.
Атрибут ALT
Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику. В некоторых случаях при недостаточной пропускной способности линий связи пользователи отключают отображение графики. Наличие названий вместо картинок облегчает восприятие Web-страниц в таком режиме.
Атрибут АLIGN
Определяет положение изображения относительно окружающего его текста. Возможные значения аргумента — ["top" | "middle" | "bottom"] (соответственно, "вверху", "посередине", "внизу").
ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста.
ALIGN="middle" выравнивает центр изображения по базовой линии строки окружающего текста.
ALIGN="bottom" выравнивает нижний край изображения по базовой линии строки окружающего текста.
Кроме основных значений атрибута ALIGN="ключевое слово" существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста. Рассмотрим их подробнее.
ALIGN="left" определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа.
ALIGN="right" определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева.
ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста точно так же, как при использовании стандартного набора атрибутов.
ALIGN="textop" выравнивает верх изображения по верхнему краю самого высокого текстового символа в строке окружающего текста. Действие этого аргумента в большинстве случаев, но не всегда, подобно действию аргумента ALIGN="top".
ALIGN="middle" выравнивает центр изображения по базисной линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.
ALIGN="absmiddle" выравнивает центр изображения по центру строки окружающего текста.
ALIGN="baseline" выравнивает нижний край изображения по базисной линии строки окружающего текста, то есть производит такое же действие, как и ALIGN="bottom".
ALIGN="bottom" выравнивает нижний край изображения по базисной линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.
ALIGN="absbottom" выравнивает нижний край изображения по нижнему краю строки окружающего текста.
Атрибут BORDER
Целочисленное значение аргумента определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует. Чтобы не вводить пользователей в заблуждение, не стоит задействовать BORDER=O в изображениях, которые представляют собой часть элемента якоря, поскольку рисунки, применяемые в качестве гиперссылок, обычно выделяются цветной рамкой.
Атрибут НSРАСЕ
Целочисленное значение этого атрибута задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом.
Атрибут VSPACE
Целочисленное значение этого атрибута задает вертикальное расстояние между строками текста и изображением.
Атрибуты WIDTH и HEIGHT
Оба атрибута задают целочисленные значения размеров изображения по горизонтали и по вертикали соответственно. Это позволяет уменьшить время загрузки страницы с графикой. Браузер сразу отводит рамку для изображения и продолжает загружать текст на страницу. Пока загружается графика, пользователь может начать читать текст.
