HTML підтримує різні формати зображень, але найбільш поширеними є всіми відомі формати JPEG, PNG та GIF. Ці формати використовуються для растрової графіки, тобто для зображень, які складаються з пікселів. Для векторних зображень, таких як іконки та ілюстрації, які створюються в спеціальних графічних редакторах, наприклад, в Adobe Illustrator, застосовується формат SVG.
Для того, щоб додати зображення на веб-сторінку використовується елемент img. До речі, <img> не має тега, що закривається. Даний елемент має два обов'язкові атрибути – src та alt.
Src (від "source", що означає "джерело") надає шлях до файлу зображення. Це його URL-адреса. В більшості випадків зображення, які ви використовуєте на своїх сторінках, будуть перебувати на вашому власному сервері, тому ви будете використовувати відносні URL-адреси. (Мова про відносні та абсолютні URL-адреси йшла в попередньому уроці). Розробники зазвичай організовують зображення для сайту в папку під назвою "images", яка знаходиться безпосередньо в папці проекту. Тоді шлях до зображення можи виглядати наступним чином: (src = "images/cat.png").
Alt надає альтернативний текст опису зображення, якщо зображення недоступне. Це корисно для користувачів, які не можуть побачити зображення через помилку завантаження.
Також ще можна використовувати атрибути для задання ширини та висоти зображення – width та height відповідно. Якщо встановлено лише один вимір, наприклад, тільки width, то зображення буде пропорційно масштабуватися. Нижче представлений приклад вбудовування зображення з усіма вищезазначеними атрибутами.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Хотілося б в цьому уроці розглянути ще один тип зображень на веб-сторінці – фонові. Тільки вони додаються на сторінку не через HTML, а за допомогою каскадних таблиць стилів CSS, детальніше про які буде йти мова в останніх уроках. Фонове зображення має наступний синтаксис: background-image: url(); . В дужках після url прописується шлях до файлу (відносний або абсолютний URL).
Ще одною суттєвою властивістю для налаштування фонового зображення є background-size. Дана властивість керує розмірами зображення всередині елемента, для якого це зображення задане фоном. Є два основних значення для цієї властивості: cover та contain. При значенні cover зображення масштабується без зміни пропорцій так, щоб закрити фон всього елемента. Коротка сторона зображення підлаштовується під відповідну сторону елемента, а довга сторона закриває довгу сторону елемента, та все, що не потрапляє у поле зору, обрізається. При значенні contain зображення масштабується без зміни пропорцій так, щоб повністю поміститися в елементі.
Застосування цих двох властивостей продемонстровано безпосередньо в блоці з практикою.
На сайт додаються два зображення — звичайне та фонове. В секцію із основним контентом в блок "Про нас" було додане зображення команди шириною 900 пікселів. Для створення фонового зображення був доданий css код. Та в ньому були прописані дві властивості для налаштування фонового зображення — background-image із URL-адресою зображення та background-size із значенням cover для того, щоб воно повністю покривало розміри блоку, не змінюючи пропорцій. Це зображення виступило фоном для елементу header. Детальніше про налаштування CSS-коду написано в останніх уроках.
Щоб прибрати відображення коду та відкрити тільки відображення сайту, натисніть один раз на кнопку із написом HTML або CSS.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Таким чином, ми з'ясували, як додається зображення на веб-сторінку.