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

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

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