Встраивание изображений в HTML-документы
Для встраивания изображений в HTML-документы следует использовать тэг <IMG> , имеющий единственный обязательный параметр scr , определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:
<IMG picture="gif">
Данный тэг может иметь ряд параметров.
Выравнивание изображений.
При включении графического изображения в документ можно указать его расположение относительно текста или друних элементов страницы. Способ выравнивания изображения задаётся значением параметра align тэга <IMG> . Возможные знаения этого параметра:
| Значение параметра align | Действие параметра |
| top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки |
| texttop | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки |
| middle | Выравнивание середины изображение по базовой линии текущей строки |
| absmiddle | Выравнивание середины изображение посередине текущей строки |
| baseline или bottom | Выравнивание нижней границы изображение по базовой линии текущей строки |
| absbottom | Выравнивание нижней границы изображение по нижней границе текущей строки |
| left | Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны |
| right | Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны |
Поясним действие параметров выравнивания, приведённых в таблице. Сразу же оговоримся, что все значения параметров выравнивания изображений можно услоавно разделить на две группы по их принцыпу действия. К одной группе относятся два значения параметра - left и right . При использовании любого из этих параметров мы получаем так называемое "плавающие" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением может занимать несколько строк.
К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраваются в строчку текста, а параметры выравнивания задают расположение изображение относительно строки текста. Таким образом, в отличии от плавающих изображений, здесь изображения являются обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой текста, правда, достаточно большой (типа буквицы).
Приведём пример кода, в котором используются изображения:
Действие кода здесь.
Возникает вопрос, в чём разница между базовой линией и нижней границей строки? Или различие между самым высоким элементом строки и самым высоким текстовым элементом строки? Результат действия этих параметров может отличаться в зависимости от содержимого рассмотриваемой строки.
Базовая линия ( baseline или bottom ) - это нижняя часть линии текста, которая проводиться без учёта нижней части (descender) некоторых символов, например, букв типа j, q, y. В отличии от выравнивания по базовой линии, при задании значения absbottom выравнивание выполняется по нижней части самого низкого элемента в строке, т.е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрани top и texttop .
Задание размеров выводимого изображения.
Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображения при отображении - width и height . Значения параметров могут указываться как в пикселах, так и в процентах от размеров окна просмотра.
Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузер автоматически при загрузке изображения выполняет его перемасштабирование. Заметим, что неаккуратное задание параметров может привести к изменению пропоций рисунка и, как следствие, к его искажению.
Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычеслятся автоматически из условий сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения.
Если не требуется изменить размеры изображения, настоятельно рекомендуется указывать их реальные размеры в пикселах. Указание действительных размеров:
позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстрации по пустому прямоугольнику, выдаваемому на экран вместо изображения (если размеры не будут указаны, то браузер, не зная их, выведет маленькую пиктограмму и форматирование будет нарушено).
позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отфармотировать текст на экране. Указание размеров изображений позволяет выполнить форматирование документа до полной загрузки файлов и сизображениеми.
Отделение изображений от текста.
Для тэга <IMG> можно задать параметры hspace и vspace , значения которых определяют отступы от изображения, оставляемые пустыми, соответственно по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.
Рамки вокруг изображений.
Изображение, встраеваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тэга <IMG> . В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умочанию рамка вокруг изображения не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой.
Альтернативный текст.
Одним из параметров тэга <IMG> является параметр alt , определяющий альтернативный текст. Его указание даёт возможность пользователям работающих в режиме отключенной загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях.
При отключеном изображении вместо них на экране появится альтернативный текст, определённый значением параметра alt . Значение этого параметра имеет смысл и для случаев, когда загрузка изображений будет выполняться. Поскольку загрузка изображений выполняется на втором проходе после отобрадений текстовой информации, то изначально на экране на месте изображения появится альтернативный текст, который по мере загрузки будет сменяться изображением.
Современные браузеры также будут отображать альтернативный текст в качестве подасказки (tooltip) при помещении курсора мыши в оасть изображения.