Зображення у HTML

Зображення грає важливу роль в створенні привабливих та інформативних веб-сторінок. В HTML використовується тег <img>, який дозволяє вставляти зображення в ваш вміст. У цій статті ми детально розглянемо використання тега <img>, його можливості та взаємодію з іншими елементами HTML.

Приклад

<img src="url_зображення" alt="текстовий опис" width="ширина" height="висота">

Розглянемо атрибути тегу <img>:

  • src - URL-адреса або шлях до зображення
  • alt - Текстовий опис зображення, який виводиться, якщо зображення не може бути завантажене.
  • width і height - Опціональні параметри, які визначають ширину та висоту зображення. Вони можуть бути вказані у пікселях або інших одиницях виміру.

Вставка зображення

Приклад

<img src="dark-green-sky.jpg" alt="Темне зелене небо">

Цей приклад вставляє зображення "dark-green-sky.jpg" і вказує альтернативний текст "Темне зелене небо". Зображення взято з unsplash.com

Результат

Темне зелене небо

Зображення у тегу <a>

Однією з цікавих можливостей тегу <img> є його використання всередині тегу <a>. Це дозволяє зробити зображення посиланням.

Приклад

<a href="https://unsplash.com" target="_blank">

<img src="dark-green-sky.jpg" alt="Темне зелене небо">

</a>

Натисніть на зображення для перевірки. Зверніть увагу, що у тег <a> додано параметр _blank, який відкриває посилання у новому вікні.

Результат

Темне зелене небо

Параметр float

Параметр float використовується для вирівнювання елемента вздовж лівого або правого краю і дозволяє текстовим елементам обгортати його. Це може бути корисно при розташуванні зображень поруч з текстом.

Приклад

<p><img src="dark-green-sky.jpg" alt="Темне зелене небо" width="19px" height="12px" style="float: right;"> Текст, який відображається зліва від зображення.</p>

<p><img src="dark-green-sky.jpg" alt="Темне зелене небо" width="19px" height="12px" style="float: left;"> Текст, який відображається зправа від зображення.</p>

Цей приклад вставляє зображення "dark-green-sky.jpg" і вказує альтернативний текст "Темне зелене небо". Зображення взято з unsplash.com

Результат

Темне зелене небо Текст, який відображається зліва від зображення.


Темне зелене небо Текст, який відображається зправа від зображення.

В цьому прикладі, зображення вирівнюється зліва, і текст обгортає його.

Зображення в HTML - це важливий елемент для передачі інформації та зроблення вашого вмісту більш привабливим. Вивчення можливостей тегу <img> і його взаємодія з іншими елементами HTML дозволяє створювати веб-сторінки, які ефективно комунікують із ваших відвідувачами. Не забувайте також про використання CSS для стилізації та розміщення зображень на сторінці.