Раньше веб-страницы содержали только текстовое содержимое, что делало их довольно скучными и неинтересными. К счастью, не так давно для пользователей была добавлена возможность вставлять изображения на веб-страницы. В этой статье мы узнаем, как добавлять изображения на веб-страницу, которые сделают веб-сайт привлекательным, а также различные способы вставки изображений.

Существует 2 способа вставки изображений на веб-страницу:

  • Предоставляя полный путь или адрес (URL) для доступа к интернет-файлу
  • Указав путь к файлу относительно местоположения текущего файла веб-страницы
  • Сначала мы обсудим вставку изображения на веб-страницу и одновременно поймем оба вышеуказанных подхода

Добавление изображений на веб-страницу: Тег <img> используется для добавления или встраивания изображений на веб-страницу/веб-сайт. Тег «img» является пустым тегом, что означает, что он может содержать только список атрибутов и не имеет закрывающего тега. Добавление изображений улучшает качество, а также улучшает структуру дизайна, внешний вид веб-страницы. В настоящее время веб-сайт не добавляет изображения на веб-страницу напрямую, поскольку изображения связаны с веб-страницами с помощью тега <img>, который содержит место для изображения.

Синтаксис:

<img src="url" alt="some_text" width="" height="">

Атрибуты элемента <img>

Тег img содержит несколько атрибутов, перечисленных ниже.

Атрибут Значение Ссылка

HTML <img> атрибут alt

Указывает альтернативный текст для изображения.

 Текст Посмотреть

HTML <img> атрибут height

Определяет высоту изображения.

 В пикселях Посмотреть

HTML <img> атрибут ismap

Указывает изображение как карту изображений на стороне сервера.

 ismap Посмотреть

HTML <img> атрибут loading

Указывает, должен ли браузер загружать изображение немедленно или отложить загрузку изображений до тех пор, пока не будут выполнены некоторые условия.

 eager
lazy 		Посмотреть

HTML <img> атрибут src

URL-адрес изображения.

 URL Посмотреть

HTML <img> атрибут usemap

Указывает изображение в качестве карты изображения на стороне клиента.

 Название карты(map) Посмотреть

HTML <img> атрибут width

Определяет ширину изображения.

 В пикселях Посмотреть