Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Робота з Клікабельними Зображеннями, Підписами та Оптимізацією | Робота з Медіа та Таблицями
Ultimate HTML
course content

Зміст курсу

Ultimate HTML

Ultimate HTML

1. Розуміння веб-розробки
3. Структура HTML-Документа

book
Робота з Клікабельними Зображеннями, Підписами та Оптимізацією

Клікабельні зображення

Клікабельні зображення — це зображення на веб-сторінці, на які можна натискати, зазвичай для переходу на іншу веб-сторінку або виконання інших дій. Зазвичай цей підхід використовується в інтернет-магазинах. Користувачі звикають натискати на зображення, щоб отримати картку з повним описом товару та ціною.

Щоб зробити зображення клікабельним, можна обгорнути тег <img> у тег <a>. Наприклад:

У цьому прикладі тег <a> визначає URL-адресу для переходу в атрибуті href, а тег <img/> визначає зображення для відображення. Коли користувач натискає на зображення, браузер переходить за URL-адресою, вказаною в атрибуті href.

Підпис до зображення

Ви можете використовувати елементи HTML figure та figcaption, щоб додати підпис до зображення на веб-сторінці. Ось приклад:

html

index.html

copy
  • figure: елемент містить як figcaption, так і img елементи;
  • figcaption: визначає текст підпису, який видно користувачам;
  • img: визначає зображення для відображення.

Оптимізація зображень

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

  • Змінюйте розмір зображень до відповідного розміру. Змінюйте розмір зображень до того, в якому вони будуть відображатися на сторінці, замість завантаження великих зображень і зміни їх розміру за допомогою HTML або CSS;
  • Використовуйте відповідні формати файлів. Зазвичай JPEG використовують для фотографій, PNG — для графіки та зображень із прозорістю. Уникайте великих BMP або TIFF файлів;
  • Стискайте зображення. Існує багато онлайн-інструментів, які дозволяють стискати зображення без втрати якості. Використовуйте їх перед завантаженням зображень на сайт.

Примітка

Ви можете скористатися наступними джерелами для стиснення зображень: Оптимізація растрової графіки, Оптимізація векторної графіки. У чому між ними різниця? - Розгляньте це у наступному розділі.

question mark

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

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 3
Ми дуже хвилюємося, що щось пішло не так. Що трапилося?
some-alt