Як додати зображення до веб-сайту HTML

Додавання фотографій до сторінок вашого сайту часто може зробити їх більш приємними для очей і передавати інформацію краще, ніж використання лише тексту. Цей процес здійснюється за допомогою HTML-коду та файлу зображень. Файл може бути з іншої веб-сторінки або зберігатися на веб-сервері.

Використання тег

У HTML-коді для веб-сторінки можна додати зображення за допомогою . В потрібно вказати чотири атрибути:

  • Src - атрибут джерела вказує розташування зображення. Ви можете використовувати відносний шлях, якщо зображення знаходиться на тому ж сервері, що й сайт, але зображення з іншого сайту вимагають абсолютних шляхів.
  • Alt - альтернативний атрибут тексту - це письмовий опис зображення.
  • Ширина - Ширина зображення.
  • Висота - Висота зображення.

Необов'язковим атрибутом є Border, який дозволяє вказати рамку навколо зображення. Атрибут border задається в розмірі пікселів. Наприклад, за допомогою border = 1 в тег означає, що кордон навколо зображення буде шириною 1 піксель.

Примітка. Атрибут Border застарілий у HTML5 і не підтримується.

Приклади

Наступні приклади показують фактичний HTML, який використовується для додавання зображення у верхній частині цієї сторінки. Вони можуть бути вставлені в будь-яку точку сторінки. Перший має більш короткий URL, оскільки зображення зберігається на нашому сервері; друге - як ви пов'язуєте наш образ.

Приклад 1

Приклад 2

Які формати зображень можна використовувати на веб-сторінці?

Найпоширеніші формати зображень для фотографій, фотографій, логотипів та інших зображень - JPEG, GIF і PNG. Інші формати зображень, які не підтримуються широко, наприклад, BMP, можуть не працювати у всіх браузерах.

Чи потрібні котирування навколо атрибутів у тезі img?

Так. Хоча сьогоднішні браузери, як правило, можуть виправити будь-які помилки з відсутніми лапками навколо значення атрибута, завжди слід мати лапки навколо значення атрибута, щоб запобігти помилкам.