САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основы HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Класс HTML Идентификатор HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Резюме HTML Доступность

HTML Справочник

HTML Список тегов HTML Атрибуты HTML Глоб. атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

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


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


Пример

<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 обязателен. Без него веб-страница не будет считаться валидной.


В контенте

Размер изображения - 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="default.asp">
  <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;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Попробуйте сами »

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


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 Справочник тегов.