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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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> Определяет активную область внутри изображении-карты