HTML изображения

HTML изображения
Изображения 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, чтобы определить, как обрабатываются запросы на совместное использование ресурсов между источниками.
  • anonymous
  • use-credentials

Атрибут alt

Атрибут alt задает текст, который будет выведен в случае, если изображение не доступно. Обычно изображение может быт не доступно по двум причинам:

  1. Неправильно указан адрес изображения.
  2. Изображение было удалено.

Рассмотрим на примере первый случай.

<img src="/img/html-logo-wiki.pn" alt="Логотип HTML">

Результат.

Логотип 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">

Результат.

Логотип HTML

Создание карты  ссылок: тег <map>

С помощью элемента <map> можно указывать область на изображении которая будет являться активной ссылкой.

Координаты области задаются с помощью элемента <area>.

<area>

Элемент задает активную область на изображении.

Атрибуты <area>

Атрибут Описание Возможные значения
alt Альтернативный текст, когда изображения недоступны. Обязательно указывать этот атрибут, если присутствует атрибут href. Текст.
shape Форма области.
  • rect: Прямоугольник. Это значение по умолчанию, если атрибут формы не задан.
  • circle: Круг.
  • poly: Многоугольник.
  • default: Вся область изображения.
coords Координаты области в пикселях.
  • Для прямоугольных форм это список из четырех значений, разделенных запятыми, для левого, верхнего, правого и нижнего (например, coords = «0,0,50,50»).
  • Для круглых форм это список из трех значений, разделенных запятыми для левого, верхнего и радиуса (например, coords = «50,50,25»).
  • Для многоугольных фигур это список с разделителями-запятыми, содержащий четное количество значений с указанием левого и верхнего края каждой точки фигуры (например, coords = «0,0,25,25,50,25,50,100»).
href Цель, на которую ведет ссылка. URL.
rel Связь между страницей ссылки и целевым назначением ссылки.
  • alternate: Альтернативная версия текущей веб-страницы.
  • author: Страница, содержащая данные об авторе страницы / статьи.
  • bookmark: Ссылка на текущий раздел страницы.
  • help: Помощь в зависимости от контекста.
  • license: Лицензия на авторское право на текущий документ.
  • next: Указывает, что страница находится в последовательности, а связанная страница является следующей страницей в последовательности.
  • nofollow: Указывает, что связанный ресурс не одобрен автором текущего документа..
  • noreferrer: Сообщает браузеру не отправлять заголовок реферера HTTP при переходе по ссылке..
  • prefetch: Связанный ресурс должен быть кэширован.
  • prev: Указывает, что страница находится в последовательности, а связанная страница является предыдущей страницей в последовательности.
  • search: Средство поиска, которое можно использовать для поиска текущих и связанных документов.
  • tag: Термин тегирования (не путать с тегами HTML), применяемый к ссылке.
hreflang Язык цели ссылки. Его следует использовать только тогда, когда также используется href . Код языка, например ru (Русский) или en (Английский).
type Тип MIME связанного ресурса. Текст.
download Используется с href. Указывает, что целевую ссылку следует загрузить, а не переходить к ней. Нет.
target В каком окне откроется ссылка.
  • _self: В новом.
  • _blank: В текущем.

Разберемся на примере.

Пример.

<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.


Анатолий Бузов
Анатолий Бузов / об авторе

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.


Добавить комментарий

Ваш адрес email не будет опубликован.