ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

En Ua

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

❮ Prev Next ❯

В этой теме:

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

Пример

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

Пример

<img src="../images/img_girl.jpg" alt="Девушка в жакете">
Попробуйте сами »

Пример

<img src="../images/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="index.html">
  <img src="smiley.gif" alt="HTML Учебник" 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 Учебник.

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

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

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