Помимо текста на веб—страницах довольно часто можно встретить различные картинки, изображения, схемы и прочие графические элементы. Как правило, их добавляют при помощи стандартного HTML—тега img, обладающего целым рядом полезных атрибутов и возможностей.
Характерный пример добавления изображения в коде страницы:
| 1 | <img alt=”description” src=”/images/image.jpg”> |
В данном случае используется лишь два атрибута – alt и src. Основное предназначение первого атрибута – предоставлять альтернативный текст / описание изображения, которое проиндексируется поисковой системой и, скорее всего, будет использоваться при составлении выдачи по картинкам. Если не заполнять alt, то в плане SEO (привлечение пользователей с поисковиков) от картинки не будет практически никакой пользы.
Кроме того, текст из alt будет показываться на веб—странице вместо самого изображения в ситуации, когда пользователь полностью отключит графику в своем браузере. Атрибут src, как вы догадались, содержит адрес графического файла, который будет вставлен на страницу. Сюда можно вставить внутренний (если картинка располагается в одной из директорий вашего сайта) или внешний адрес. При указании внутреннего адреса можно использовать не только абсолютный, но и относительный путь.
Атрибут title используется у картинок достаточно часто, хоть и является общим для всех HTML—элементов. Обычно здесь прописывают человекопонятное название изображения на русском языке (если сайт русскоязычный). Содержимое title показывается в небольшой всплывающей подсказке при наведении курсора мышки на картинку.
Атрибут align позволяет задавать картинке нужный тип выравнивания. К примеру, если вы хотите, чтобы изображение размещалось с правой или с левой стороны страницы, а текстовый контент обтекал его по противоположной стороне (и занимал несколько строк),то следует использовать значения align=”right” или align=”left” соответственно.
Если хотите, чтобы на одной линии с изображением (независимо от его высоты) помещалась лишь одна строка текста, то используйте одно из следующих значений для align – middle (строка пройдет по середине высоты), bottom (строка пройдет по нижней границе), top (строка пройдет по верхней границе).
Посредством стандартных атрибутов width и height можно задавать пиксельную / процентную высоту и ширину изображений. Однако стоит учитывать, что при изменении пропорций браузер исказит картинку. Можно задавать отступы от изображения до ближайших элементов в обе стороны, а также вверх / вниз. Делается это посредством атрибутов hspace и vspace (указываются значения в пикселях).
Часто картинке задают небольшую рамку для того, чтобы визуально выделить ее. Сделать это можно при помощи таких атрибутов, как border и bordercolor. Первый атрибут задает пиксельную толщину нашей границы, а второй – ее цвет. Цвет следует задавать лишь тогда, когда толщина не равна нулю.
Если вы захотите оформить картинку в виде ссылки, к примеру, на какую—либо страницу или раздел, то воспользуйтесь связкой элементов a + img. Вот пример такой связки:
Здесь example_url – это адрес нужной страницы, а img_url – адрес картинки.
| 1 | <a href=”example_url”><img src=”img_url”></a> |
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
| HTML |
|
| XHTML |
|
Атрибуты
- align
- Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
- alt
- Альтернативный текст для изображения.
- border
- Толщина рамки вокруг изображения.
- height
- Высота изображения.
- hspace
- Горизонтальный отступ от изображения до окружающего контента.
- ismap
- Говорит браузеру, что картинка является серверной картой-изображением.
- longdesc
- Указывает адрес документа, где содержится аннотация к картинке.
- lowsrc
- Адрес изображения низкого качества.
- src
- Путь к графическому файлу.
- vspace
- Вертикальный отступ от изображения до окружающего контента.
- width
- Ширина изображения.
- usemap
- Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег IMG</title>
</head>
<body>
<p><a href="lorem.html"><img src="images/girl.png"
width="189" height="255" alt="lorem"></a>
Lorem ipsum dolor sit amet...</p>
</body>
</html>
