САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

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

HTML Формы

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

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

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



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


Пример

<img src="pic_trulli.jpg" alt="Итальянские Трулли">
Редактор кода »

Пример

<img src="img_girl.jpg" alt="Девушка в куртке">
Редактор кода »

Пример

<img src="img_chania.jpg" alt="Цветы в Ханье">
Редактор кода »

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

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

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

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

<img src="url">

Атрибут alt

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

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

Пример

<img src="img_chania.jpg" alt="Цветы в Ханье">
Редактор кода »

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

Пример

<img src="wrongname.gif" alt="Цветы в Ханье">
Редактор кода »

Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него.


Размер изображения - ширина и высота

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

Пример

<img src="img_girl.jpg" alt="Девушка в куртке" style="width:500px;height:600px;">
Редактор кода »

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

Пример

<img src="img_girl.jpg" alt="Девушка в куртке" width="500" height="600">
Редактор кода »

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

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


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

Все атрибуты width, height и style являются действительными в HTML5.

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

Пример

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

<img src="html5.gif" alt="Иконка HTML5" style="width:128px;height:128px;">
<img src="html5.gif" alt="Иконка HTML5" width="128"height="128">

</body>
</html>
Редактор кода »

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

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

Тем не менее, она является общей, чтобы хранить изображение в подпапке. Необходимо указать имя папки, в атрибуте src:

Пример

<img src="/images/html5.gif" alt="Иконка HTML5" style="width:128px;height:128px;">
Редактор кода »

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

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

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

Пример

<img src="https://schoolsw3.com/images/schoolsw3_green.jpg" alt="schoolsw3.com">
Редактор кода »

Вы можете прочитать больше о пути файла в главе HTML путь к файлам.


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

Стандарт GIF позволяет анимированные изображения:

Пример

<img src="programming.gif" alt="Человек Компьютер" style="width:48px;height:48px;">
Редактор кода »

Обратите внимание, что синтаксис вставки анимированных изображений ничем не отличается от не-анимированных изображений.


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

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

Пример

<a href="index.php">
  <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="Смайлик" style="float:right;width:42px;height:42px;">
Изображение будет плавать справа от текста.</p>

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

Изображение карта

Тег <map> определяет изображение-карту. Изображение-карта представляет собой изображения с областей.

На изображении ниже нажмите на компьютер, телефон или чашку кофе:

Рабочее место Компьютер Телефон Чашка кофе

Пример

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Компьютер" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Телефон" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Чашка кофе" href="coffee.htm">
</map>
Редактор кода »

Атрибут name и <map> связан с тегом <img> и атрибут usemap создает связь между изображением и картой.

Элемент <map> содержит ряд тегов <area>, которые определяют кликабельные области на изображении карты.


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

Чтобы добавить фоновое изображение в элемент HTML, используйте свойство CSS background-image:

Пример

Чтобы добавить фоновое изображение на веб-страницу, укажите фоновое изображение свойство background-image в теге <body>:

<body style="background-image:url('clouds.jpg');">

<h2>Изображения фон</h2>

</body>
Редактор кода »

Пример

Чтобы добавить фоновое изображение в параграфе, укажите свойство background-image в теге </p>:

<body>

<p style="background-image:url('clouds.jpg');">
...
</p>

</body>
Редактор кода »

Чтобы узнать больше о фоновых изображениях, изучите наши CSS фоновый учебник.


Элемент <picture>

HTML5 представляет элемент <picture> для того, чтобы добавить больше гибкости указания ресурсов изображения.

Элемент <picture> содержит ряд элементов <source>, каждый из которых ссылается к различным источникам изображения. Таким образом, браузер может выбрать изображение, которое лучше всего подходит для текущего вида и/или устройства.

Каждый элемент <source> имеет атрибуты, описывающие, когда их изображение наиболее подходящее.

Браузер будет использовать первый элемент <source> с соответствующим атрибутом значения и игнорировать любые следующие элементы <source>.

Пример

Показать одно изображение, если окно браузера (видовое окно) не менее 650 пикселей, и другое изображение, если нет, но больше, чем 465 пикселей.

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Цветы" style="width:auto;">
</picture>
Редактор кода »

Примечание: Всегда указывайте элемент <img> как последний ребенок элемента <picture>. Элемент <img> используется браузерами, которые не поддерживает элемент <picture>, или если ни один из тегов <source> не совпадают.


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 Упражнения

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

Упражнение:

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

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

Начните упражнения


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

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