Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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

HTML Формы

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

HTML Графика

HTML Холст HTML SVG

HTML Медиа

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

HTML APIы

HTML5 Геолокация HTML5 Перетаскивание HTML5 Веб хранилище HTML5 Веб работник HTML5 SSE

HTML Примеры

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

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

HTML Список тегов HTML Атрибуты тегов HTML Глобальные атрибуты HTML Поддержка браузера HTML События атрибутов HTML Цвета HTML Canvas 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> создает удерживающее пространство для ссылочного изображения.

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