Теги HTML для вставки картинки, изображения в HTML. Картинка в HTML – все о теге IMG Имя файла изображения указывается в атрибуте тега
Тег IMG
предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src
, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег IMG
в контейнер A
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border=0
в тег IMG
.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
Закрывающий тег
Не требуется.
Параметры
align
- определяет как рисунок будет выравниваться по краю и способ обтекания текстом. alt
- альтернативный текст для изображения. border
- толщина рамки вокруг изображения. height
- высота изображения. hspace
- горизонтальный отступ от изображения до окружающего контента. ismap
- говорит браузеру, что картинка является серверной картой-изображением. lowsrc
- путь к графическому файлу низкого разрешения для предварительного отображения. src
- путь к графическому файлу. vspace
- вертикальный отступ от изображения до окружающего контента. width
- ширина изображения. usemap
- ссылка на тег MAP
, содержащий координаты для клиентской карты-изображения.
Пример 1. Использование тега IMG
Lorem ipsum dolor sit amet...
Описание параметров тега IMG
Параметр ALIGN
Описание
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align
тега IMG
.
Синтаксис
Аргументы
В таблице 1 перечислены возможные значение параметра align
и результат его использования.
Таблица 1. Использование значений параметра align
Значение align
Описание
Пример
absbottom
Нижняя граница изображения выравнивается по самому нижнему краю текущей строки.
absmiddle
Середина изображения выравнивается по средней линии текста.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
bottom или baseline
Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left
Изображение располагается по левому краю родительского элемента.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle
Середина изображения выравнивается по базовой линии текущей строки текста.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right
Изображение выравнивается по правому краю родительского элемента.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
texttop
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Наиболее популярные параметры - left
и right
, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG
добавить параметры hspace
и vspace
, задающие расстояние до текста в пикселах.
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom
, absmiddle
, baseline
и texttop
не описаны в спецификации HTML 4.
Значение по умолчанию
bottom
Пример 2. Выравнивание рисунка
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom
, absmiddle
, baseline
и texttop
не поддерживаются спецификацией HTML 4.
Параметр ALT
Описание
Параметр alt
устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Описание
Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border
тега IMG
. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки в этом случае совпадает с цветом текста, заданным с помощью стиля или параметра text
тега BODY
.
Синтаксис
Аргументы
Значение по умолчанию
0
Пример 3. Рамка вокруг рисунка
рамка зеленого цвета толщиной 2 пиксела
Параметр HEIGHT и WIDTH
Описание
Для изменения размеров изображения средствами HTML предусмотрены параметры width
и height
. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента - контейнера, где находится тег IMG
. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=100%
означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width
или height
сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту - размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
Синтаксис
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная ширина или высота изображения.
Пример 4. Размеры изображения
Параметр HSPACE и VSPACE
Описание
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace
и vspace
. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.
Синтаксис
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 5. Отступы от рисунка
Параметр ISMAP
Описание
Параметр ismap
говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
Отправка данных на сервер происходит следующим образом. Необходимо поместить тег IMG
в контейнер A
, где в качестве значения параметра href
указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
По умолчанию этот параметр выключен.
Пример 6. Рисунок как карта-изображение
Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.
Параметр LOWSRC
Описание
Параметр lowsrc
используется для отображения рисунка низкого качества перед полной загрузкой конечного изображения. Такой подход предназначен для снижения времени ожидания пользователя. Предварительно ему показывается изображение в низком разрешении или черно-белый рисунок, который быстро загружается из-за небольшого исходного объема файла. Пока пользователь рассматривает его, происходит загрузка изображения хорошего качества, которое постепенно сменяет первоначальное. Размеры этих изображений обязательно должны совпадать.
Синтаксис
Аргументы
Значение по умолчанию
Нет.
Пример 7. Путь к рисунку низкого качества
Параметр SRC
Описание
Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.
Синтаксис
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Рисунки также могут применяться в качестве карт-изображений, когда картинка
содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему
виду ничем не отличается от обычного изображения, но при этом оно может быть
разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
Атрибуты
Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
Альтернативный текст для изображения.
Толщина рамки вокруг изображения.
Высота изображения.
Горизонтальный отступ от изображения до окружающего контента.
Говорит браузеру, что картинка является серверной картой-изображением.
Указывает адрес документа, где содержится аннотация к картинке.
Адрес изображения низкого качества.
Путь к графическому файлу.
Вертикальный отступ от изображения до окружающего контента.
Ширина изображения.
Ссылка на тег