Главная » Руководство по HTML — HTML5 введение » Изображения HTML

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

Изображения могут улучшить дизайн и внешний вид веб-страницы а также привлечь больше пользователей. В этом разделе вы узнаете как связать изображения с веб-документом.

Фонтан в Москве

<img src="/htm/pic_fountain.jpg" alt="Фонтан в Москве">

Леопард

<img src="/htm/img_leopard.jpg" alt="Леопард">

Вид на здание со стороны Московского зоопарка

<img src="/htm/img_building.jpg" alt="Вид на здание со стороны Московского зоопарка">

★ Примечание: вставка изображений в документы HTML — это простой процесс, который можно выполнить с помощью любого текстового редактора, например Блокнота.

Синтаксис HTML изображений

HTML тег <img> используется для встраивания изображения в веб-страницу.

Технически изображения не вставляются в веб-страницу — изображения связаны с веб-страницами. Тег <img> создает место для хранения ссылочного изображения.

Тег <img> пустой, содержит только атрибуты и не имеет закрывающего тега.

Тег <img> имеет два обязательных атрибута:

src — указывает путь к изображению;
alt — указывает альтернативный текст для изображения.

Синтаксис:

<img src="url" alt="Альтернативный текст">

Атрибут src

Обязательный атрибут src указывает путь (URL) к изображению.

★ Примечание: когда веб-страница загружается, именно браузер в этот момент получает изображение с веб-сервера и отображает его на странице. Поэтому убедитесь, что изображение действительно остается на том же месте по отношению к веб-странице, иначе ваши посетители получат значок неработающей ссылки. Иконка неработающей ссылки и альтернативный текст в атрибуте alt отображаются, если браузер не может найти изображение.

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

<img src="/htm/img_building.jpg" alt="Вид на здание со стороны Московского зоопарка">

Атрибут alt

Обязательный атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть (из-за медленного соединения, ошибки в атрибуте src или когда пользователь использует программу для чтения с экрана.

Значение атрибута alt должно описывать изображение:

<img src="/htm/img_leopard.jpg" alt="Леопард">

Если браузер не может найти изображение, он отобразит иконку и значение атрибута alt:

<img src="/htm/wrongname.gif" alt="Леопард">

Это выглядит примерно так:

Леопард

Размер изображения в HTML - ширина и высота (Width и Height)

Вы можете использовать атрибут style, чтобы указать width и height изображения.

Здесь мы используем атрибут style, чтобы указать ширину и высоту изображения:

<img src="/htm/img_leopard.jpg" alt="Леопард" style="width:194px;height:200px;">

Леопард

Альтернативный метод использования атрибутов ширины и высоты - width и heigh:

<img src="/htm/img_leopard.jpg" alt="Леопард" width="500" height="600">

Леопард

Атрибуты width и heigh всегда определяют ширину и высоту изображения в пикселях.

✪ Рекомендация: всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, веб-страница может мерцать во время загрузки изображения.

Width и Height, или Style?

Атрибуты width, height, и style допустимы в HTML.

Однако рекомендуется использовать атрибут style. Он не позволяет таблицам стилей изменять размер изображений:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

  <img src="html5_black.png" alt="Иконка HTML5" width="100" height="100">
  <img src="html5_black.png" alt="Иконка HTML5" style="width:100px;height:100px;">

</body>
</html>

Нажмите на ссылку ниже, чтобы посмотреть как это выглядит:

ПРИМЕР

Изображения в другой папке

Если у вас есть изображения в подпапке, вы должны указать имя папки в атрибуте src:

<img src="/htm/html5_black.png" alt="Иконка HTML5" style="width:100px;height:100px;">

Изображения на другом сервере/веб-сайте

Некоторые веб-сайты указывают на изображение на другом сервере.

Чтобы указать на изображение на другом сервере, вы должны указать абсолютный (полный) URL-адрес в атрибуте src:

<img src="https://www.appnet.club/appnet_logo.png" alt="AppNet.Club">

★ Примечание относительно внешних изображений: Внешние изображения могут быть защищены авторским правом. Если вы не получите разрешение на его использование, вы можете нарушить закон об авторском праве. Кроме того, вы не можете управлять внешними изображениями - они могут быть внезапно удалены или изменены.

Анимированные изображения в HTML

HTML позволяет использовать анимированные GIF-файлы:

<img src="/htm/html5_black.gif" alt="Гифка HTML5" style="width:100px;height:100px;">

Гифка HTML5

Изображение как ссылка

Чтобы использовать изображение в качестве ссылки, просто поместите тег <img> в тег <a>:

<a href="/html">
<img src="/htm/smiling.png" alt="Учебное пособие по HTML" style="width:75px;height:75px;">
</a>

Изображение ниже является ссылкой. Попробуйте нажать на него.

Плавающие изображения в HTML

Используйте свойство CSS float, чтобы изображение плавало справа или слева от текста:

<img src="/htm/smiling.png" alt="Учебное пособие по HTML" style="float:right;width:50px;height:50px;">
Изображение будет плавать справа от текста.</p>

<img src="/htm/smiling.png" alt="Учебное пособие по HTML" style="float:left;width:50px;height:50px;"> 
Изображение будет плавать слева от текста.</p>

Сместите изображение вправо:

Учебное пособие по HTML Изображение будет плавать справа от текста. Параграф с плавающим изображением. Свойство float:right.

Сместите изображение влево:

Учебное пособие по HTML Изображение будет плавать слева от текста. Параграф с плавающим изображением. Свойство float:left.

Распространенные форматы изображений

Вот наиболее распространенные типы файлов изображений, которые поддерживаются во всех браузерах (Chrome, Edge, Firefox, Safari, Opera, Яндекс браузер):

Акроним	Формат файла	Расширение файла
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

HTML изображения, подразделы

HTML - теги изображений

Справочник по тегам содержит дополнительную информацию об элементах HTML и их атрибутах.

Тег	Описание
<img>	Определяет изображение
<map>	Определяет карту изображения
<area>	Определяет кликабельную область внутри карты изображения
<picture>	Определяет контейнер для нескольких ресурсов изображения

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

Является ли утверждение верным?

Проверьте себя, насколько хорошо вы запомнили материал.

☛ Карты изображений HTML

Закладки HTML ☚

Поделиться ссылкой