Изображения HTML создаются с помощью тега <img>, разберемся как это работает. Если вы не знакомы с HTML рекомендую начать с материала основы HTML.
В этой статье будут рассмотрены следующие вопросы:
- Тег <img> — вставка изображений в HTML-документ.
- Тег <map> — создание карты ссылок.
- Тег <picture> и его отличия от элемента <img>.
- Выравнивание изображений.
Вставка изображений с помощью<img>
Для вставки изображения в документ используется атрибут scr который задает путь к изображению.
Пример.
<img src="/img/html-logo-wiki.png">
Результат.
В статье HTML-ссылки я рассказывал о том, что такое относительный путь. Так вот, src="/img/html-logo-wiki.png" означает что изображение находится по адресу https://abuzov.com/img/html-logo-wiki.png (открыть).
Если ваш HTML-документ находится на вашем компьютере, то вы можете прописать код<img src="html-logo-wiki.png"> при условии что изображение html-logo-wiki.png находится в той же папке, в которой лежит сам HTML-документ.
Если вы хотите вставить изображение из другой папки, то вам нужно указать полный путь, например: D:\Temp\html-logo-wiki.png.
Атрибуты тега <img>
| Атрибут | Описание | Возможные значения |
|---|---|---|
src |
Путь к изображению. | URL. |
alt |
Альтернативный текст. отображается в случае, если изображение недоступно. | Текст. |
width |
Ширина изображения в пикселях. Вместо этого атрибута можно использовать CSS. | Число. |
height |
Высота изображения в пикселях. Вместо этого атрибута можно использовать CSS. | Число. |
ismap |
Указывает, что элемент используется в качестве карты изображения на стороне сервера. | Нет. |
usemap |
Название карты изображения. | Имя карты изображения (например, #imgmap), соответствующее имени элемента карты (например, <map name = «imgmap»). |
crossorigin |
Используется вместе с JavaScript, чтобы определить, как обрабатываются запросы на совместное использование ресурсов между источниками. |
|
Атрибут alt
Атрибут alt задает текст, который будет выведен в случае, если изображение не доступно. Обычно изображение может быт не доступно по двум причинам:
- Неправильно указан адрес изображения.
- Изображение было удалено.
Рассмотрим на примере первый случай.
<img src="/img/html-logo-wiki.pn" alt="Логотип HTML">
Результат.
В данном случае я забыл добавить в конце букву g: rc=»/img/html-logo-wiki.pn»
То есть указал неправильный адрес изображения.
С помощью атрибутов width и height можно задавать размеры изображения вручную. Исходные размеры изображения, которое я использую в примерах: 270 на 298. Давайте изменим эти размеры пропорционально, например, сократим в два раза.
<img src="/img/html-logo-wiki.png" alt="Логотип HTML" width="135px" height="149">
Результат.
Создание карты ссылок: тег <map>
С помощью элемента <map> можно указывать область на изображении которая будет являться активной ссылкой.
Координаты области задаются с помощью элемента <area>.
<area>
Элемент задает активную область на изображении.
Атрибуты <area>
| Атрибут | Описание | Возможные значения |
|---|---|---|
alt |
Альтернативный текст, когда изображения недоступны. Обязательно указывать этот атрибут, если присутствует атрибут href. |
Текст. |
shape |
Форма области. |
|
coords |
Координаты области в пикселях. |
|
href |
Цель, на которую ведет ссылка. | URL. |
rel |
Связь между страницей ссылки и целевым назначением ссылки. |
|
hreflang |
Язык цели ссылки. Его следует использовать только тогда, когда также используется href |
Код языка, например ru (Русский) или en (Английский). |
type |
Тип MIME связанного ресурса. | Текст. |
download |
Используется с href. Указывает, что целевую ссылку следует загрузить, а не переходить к ней. | Нет. |
target |
В каком окне откроется ссылка. |
|
Разберемся на примере.
Пример.
<img src="/img/rabochee-mesto-it.jpg" alt="Рабочее место" usemap="#map" width="400" height="379"> <map name="map"> <area shape="rect" coords="34,44,270,350" alt="Ноутбук" href="/file/html/noutbuk.html"> <area shape="rect" coords="290,172,333,250" alt="Телефон" href="/file/html/telephon.html"> <area shape="circle" coords="337,300,44" alt="Чашка кофе" href="/file/html/cofe.html"> </map>
Результат.
Тег <picture>
Элемент <picture> это контейнер для нескольких изображений, которые отображаются в зависимости от размера экрана. Разберемся на примере.
<div class="rez"><picture> <source srcset="/img/min-monitor.jpg" media="(min-width:100px) and (max-width:400px)"> <source srcset="/img/big-monitor.jpg" media="(min-width:400px) and (max-width:600px)"> <img srcset="/img/monitor.jpg" alt="Монитор" style="width:auto;"> </picture></div>
Результат.
Теперь на маленьких экранах (от 100 до 400 пикселей) будет отображаться изображение min-monitor.jpg. На средних (от 400 до 600 пикселей) — big-monitor.jpg. В остальных случаях — monitor.jpg.
Выравнивание изображений
Выравнивание изображений в HTML происходит с помощью атрибута alignкоторый имеет следующие значения:
- left (слева) используется по умолчанию.
- right (справа).
Поэтому для того, что бы выровнять изображение по центру, необходимо использовать другие теги или CSS. Проще всего выровнять изображение по центру следующим образом: обернуть изображение в div (о нем я в других материалах самоучителя) и поместить его по центру.
<div align="center"><img src="/img/rabochee-mesto-it.jpg"></div>
Результат.
Теперь вы знаете как работать с изображениями в HTML.
