ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Как сделать? СПРАВОЧНИКИ БОЛЬШЕ 🔍 ◑ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

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

❮ Prev Next ❯

В этой теме:

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

Пример

<img src="pic_trulli.jpg" alt="Italian Trulli">
Попробуйте сами »

Пример

<img src="img_girl.jpg" alt="Girl in a jacket">
Попробуйте сами »

Пример

<img src="img_chania.jpg" alt="Flowers in Chania">
Попробуйте сами »

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

В HTML изображения определяются с помощью тега <img>.

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

Атрибут src указывает URL (веб-адрес) изображения:

<img src="url">

Атрибут alt

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

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

Пример

<img src="img_chania.jpg" alt="Flowers in Chania">
Попробуйте сами »

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

Пример

<img src="wrongname.gif" alt="Flowers in Chania">
Попробуйте сами »

Примечание: Атрибут alt обязателен в соответствии со спецификацией HTML5. Без него веб-страница не будет считаться валидной (т.е. соответствовать стандарту HTML5).

Размер изображения - Width и Height - Ширина и Высота

Вы можете использовать атрибут style для определения ширины и высоты изображения.

Пример

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Попробуйте сами »

Кроме того, вы можете использовать атрибуты width и height:

Пример

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Попробуйте сами »

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

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

Ширина и высота или стиль?

Атрибуты width, height и style валидны в HTML.

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

Пример

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

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
Попробуйте сами »

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

Если не указано, браузер ожидает найти изображения в той же папке, в которой находится и веб-страница.

Однако изображения обычно сохраняются в подпапках (других папках). Затем вы должны включить имя папки (указать путь) в атрибут src:

Пример

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Попробуйте сами »

Обычно папкам с изображениями дают названия img или images.

Изображение на другом сервере

Некоторые веб-сайты сохраняют свои изображения на специальных серверах изображений.

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

Пример

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Попробуйте сами »

Вы можете прочитать больше о путях к файлам в разделе HTML Пути к файлам.

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

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

Пример

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Попробуйте сами »

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

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

Пример

<a href="index.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Попробуйте сами »

Примечание: border:0; добавлено, чтобы IE9 (и более ранние версии) не отображали рамку вокруг изображения (когда изображение является ссылкой).

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

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

Пример

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
Изображение буде плавати праворуч від тексту.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Изображение буде плавати ліворуч від тексту.</p>
Попробуйте сами »

Совет: Чтобы узнать больше о CSS Float, прочитайте раздел CSS Float на нашем сайте W3Schools на русском.

HTML Считыватели экрана (скринридеры)

Программа чтения с экрана – это программа, которая читает код HTML, преобразует текст и позволяет пользователю "прослушивать" контент. Программы чтения с экрана полезны для людей с нарушениями зрения или для обучения.

Резюме раздела

  • Используйте HTML элемент <img> для определения изображения
  • Используйте HTML атрибут src для определения URL изображения
  • Используйте HTML атрибут alt для определения альтернативного текста для изображения, если оно не может быть отображено
  • Используйте HTML атрибуты width и height для определения размера изображения
  • Используйте CSS свойства width и height для определения размера изображения (альтернативно)
  • Используйте CSS свойство float, чтобы позволить изображению плавать относительно других элементов
  • Используйте HTML элемент <map> для определения изображения-карты
  • Используйте HTML элемент <area> для определения интерактивных областей на изображении-карте
  • Используйте для HTML элемента <img> атрибут usemap, который указывает на изображение-карту
  • Используйте HTML элемент <picture> для отображения разных изображений для разных устройств

Примечание: Загрузка изображений занимает некоторое время. Большие изображения могут замедлить загрузку вашей веб-страницы. Используйте изображения на странице умеренно, по возможности максимально уменьшая их размеры (сжимая специальными программами).

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте атрибуты HTML изображения, чтобы установить размер изображения 250 пикселей в ширину и 400 пикселей в высоту.

<img src='scream.png' ='250' ='400'>

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

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

Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

  • С помощью какого тега определяются изображения на HTML-странице?
  • С помощью какого атрибута указывается URL изображения?
  • Какой атрибут предоставляет альтернативный текст изображению?
  • Что отображает браузер, когда не может найти изображения на веб-странице?
  • Какой атрибут изображения является обязательным согласно спецификации HTML5?
  • Какой атрибут необходимо использовать для стилизации изображения?
  • Какие атрибуты можно использовать для установки ширины и высоты изображения?
  • Где рекомендуется хранить изображения на сайте?
  • Можно ли сохранять изображения на другом сайте или сервере?
  • Можно ли использовать на веб-странице анимированные изображения?
  • Какое расширение обычно имеют анимированные изображения?
  • Возможно ли использование изображений в качестве ссылок?
  • Внутрь какого тега нужно вставить изображения, чтобы оно стало ссылкой?
  • Какое CSS-свойство позволяет изображению плавать справа или слева от текста?
❮ Prev Next ❯