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

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 Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Геолакация HTML Drag/Drop HTML Веб Место хранения HTML Веб Работник HTML SSE

HTML Примеры

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

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

HTML Список Тегов HTML Атрибуты HTML Глобальные Атрибуты HTML Поддержка Браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы Документов HTML Кодировка Символов HTML URL Кодировка 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> создает удерживающее пространство для ссылочного изображения.

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

Тег <img> имеет два обязательных атрибута:

  • src - Указывает путь к изображению
  • alt - Задает альтернативный текст для изображения

Синтаксис

<img src="url" alt="альтернативный текст">

Атрибута src

Атрибут src обязательный, указывает путь (URL) к изображению.

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

Пример

<img src="img_chania.jpg" alt="Цветы в Ханье">
Попробуйте сами »

Атрибут 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?

Все атрибуты 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>
Попробуйте сами »

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

Используйте 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>
Попробуйте сами »

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


Общие форматы изображений

Вот наиболее распространенные типы файлов изображений, которые поддерживаются во всех браузерах (Chrome, Edge, Firefox, Safari, Opera):

Сокращение Формат файла Расширение файла
APNG Анимированная портативная сетевая графика .apng
GIF Формат обмена графическими данными .gif
ICO Microsoft значок .ico, .cur
JPEG Объединенная фотографическая экспертная группа изображение .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Переносимая сетевая графика .png
SVG Масштабируемая векторная графика .svg

Краткое содержание

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

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


HTML Упражнения

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

Упражнение:

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

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

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


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

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

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