Зображення і Медіа

З поверненням.

У попередньому уроці ти навчився з’єднувати сторінки за допомогою посилань і навігації.

Тепер додамо зображення.

Бо текст — потужний.

Але іноді одне зображення пояснює щось швидше, ніж п’ять абзаців і маленька емоційна криза.

Зображення роблять сторінки більш візуальними, особистими і зрозумілими.

Але їх треба додавати правильно.

Інакше браузер покаже іконку зламаного зображення.

А ця маленька іконка — це спосіб браузера сказати:

“Я старався, але ти дав мені хаос.”

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

як додавати зображення за допомогою тегу img;
що означає src;
що означає alt;
чому альтернативний текст важливий;
як працюють шляхи до зображень;
як використовувати зображення з папок;
як додавати ширину і висоту;
типові помилки із зображеннями;
базові ідеї медіа в HTML.

Елемент img

Зображення додаються за допомогою елемента img.

Приклад:

<img src="cat.jpg" alt="Милий кіт сидить на стільці">

Тег img не потребує закриваючого тегу.

Це не потрібно:

</img>

Елемент зображення зазвичай має два дуже важливі атрибути:

src;
alt.

Маленькі атрибути.

Великі наслідки.

Як забути один гвинтик, коли збираєш стілець.

Атрибут src

Атрибут src каже браузеру, де знаходиться файл зображення.

Приклад:

<img src="photo.jpg" alt="Гірський пейзаж">

Це означає:

Знайди файл photo.jpg і покажи його тут.

Якщо зображення знаходиться в тій самій папці, що й HTML-файл, це працює:

project/
  index.html
  photo.jpg

HTML:

<img src="photo.jpg" alt="Гірський пейзаж">

Просто.

Чисто.

Без драми.

Рідкісний момент у web development.

Зображення в Папках

Зазвичай зображення зберігають у папці.

Приклад:

project/
  index.html
  images/
    profile.jpg

Щоб показати profile.jpg, напиши:

<img src="images/profile.jpg" alt="Портрет людини">

Шлях має відповідати реальному розташуванню зображення.

Якщо папка називається images, не пиши image.

Якщо файл називається profile.jpg, не пиши Profile.jpg.

Комп’ютери суворі.

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

Атрибут alt

Атрибут alt дає альтернативний текст для зображення.

Приклад:

<img src="dog.jpg" alt="Коричневий собака грається в парку">

Текст alt використовується, коли:

зображення не завантажилось;
screen reader читає сторінку;
пошукові системи намагаються зрозуміти зображення;
користувач не може добре бачити зображення.

Хороший текст alt описує значення зображення.

Не тільки назву файлу.

Погано:

<img src="dog.jpg" alt="собака">

Краще:

<img src="dog.jpg" alt="Коричневий собака грається в парку">

Хороший alt — це не декорація.

Це доступність.

А доступність не є опціональною, якщо ти хочеш створювати нормальні сайти.

Декоративні Зображення

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

Наприклад, фоновий візерунок або маленький візуальний орнамент.

У такому випадку можна використати порожній alt:

<img src="decoration.png" alt="">

Це каже screen readers:

Це зображення декоративне. Його можна пропустити.

Але будь уважний.

Не використовуй порожній alt для значущих зображень.

Якщо зображення передає інформацію, опиши його.

Якщо воно просто декорація, порожній alt допустимий.

HTML простий.

Але він очікує чесності.

Ширина і Висота

Можна задати ширину і висоту зображення:

<img src="profile.jpg" alt="Портрет людини" width="300" height="300">

Це каже браузеру розмір зображення.

Це може допомогти сторінці завантажувати layout стабільніше.

Але не розтягуй зображення випадково.

Так люди можуть виглядати, ніби на них напав принтер.

Якщо оригінальне зображення квадратне, використовуй квадратні розміри.

Якщо оригінальне зображення широке, використовуй широкі розміри.

Поважай зображення.

Зображення має почуття.

Скоріш за все, ні.

Але все одно.

Створи Сторінку для Практики

Створи новий файл:

touch images.html

Створи папку images:

mkdir images

Поклади зображення всередину папки і назви його:

profile.jpg

Тепер напиши це в images.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика Зображень</title>
</head>
<body>
  <h1>Практика Зображень</h1>

  <p>Ця сторінка показує, як додати зображення в HTML.</p>

  <img src="images/profile.jpg" alt="Профільне фото для сторінки практики" width="300">

  <p>Зображення вище завантажується з папки images.</p>
</body>
</html>

Відкрий файл у браузері.

Якщо зображення з’явилося — чудово.

Якщо ні — перевір шлях.

Браузер не злий.

Він просто загубився.

Поширені Формати Зображень

Поширені формати зображень:

.jpg або .jpeg;
.png;
.webp;
.svg;
.gif.

Використовуй .jpg для фотографій.

Використовуй .png, коли потрібна прозорість або чітка графіка.

Використовуй .webp для сучасних оптимізованих зображень.

Використовуй .svg для логотипів і іконок, коли можливо.

Використовуй .gif обережно.

Один анімований gif може бути смішним.

Двадцять анімованих gif можуть перетворити сайт на цифровий цирк.

Назви Файлів Зображень

Використовуй прості назви файлів.

Добре:

profile.jpg
hero-image.webp
course-cover.png

Погано:

My Final Image NEW VERSION 222!!!.jpg
photo from phone (copy).jpeg
IMG_20240318_174433.jpg

Прості назви легше використовувати.

Використовуй маленькі літери.

Використовуй дефіси замість пробілів.

Приклад:

my-profile-photo.jpg

Не так:

my profile photo.jpg

Пробіли в назвах файлів можуть створювати неприємні проблеми.

А неприємних проблем у нас і так достатньо.

Інтернет доставляє їх щодня.

Зовнішні Зображення

Можна також використати зображення з іншого сайту:

<img src="https://example.com/photo.jpg" alt="Приклад зображення">

Але будь обережний.

Зовнішні зображення можуть зникнути.

Інший сайт може їх заблокувати.

Вони можуть повільно завантажуватись.

Для власного сайту зазвичай краще зберігати зображення у своєму проєкті.

Твої файли.

Твій контроль.

Твоє маленьке королівство.

Зображення і Посилання

Зображення також може бути всередині посилання.

Приклад:

<a href="about.html">
  <img src="images/profile.jpg" alt="Перейти на сторінку про мене" width="200">
</a>

Тепер зображення клікабельне.

Це корисно для логотипів, карток, галерей і візуальної навігації.

Але текст alt має описувати мету посилання.

Не тільки саме зображення.

Якщо клік по зображенню веде на сторінку “Про мене”, alt має допомагати це зрозуміти.

Figure і Figcaption

HTML має figure і figcaption для зображень із підписами.

Приклад:

<figure>
  <img src="images/mountain.jpg" alt="Гірський пейзаж на світанку" width="500">
  <figcaption>Гірський пейзаж на світанку.</figcaption>
</figure>

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

Текст alt допомагає доступності.

figcaption дає видиме пояснення для всіх.

Вони пов’язані.

Але це не одне й те саме.

Базові Медіа: Audio і Video

HTML також може показувати audio і video.

Приклад audio:

<audio controls>
  <source src="audio/song.mp3" type="audio/mpeg">
  Твій браузер не підтримує audio element.
</audio>

Приклад video:

<video controls width="500">
  <source src="videos/demo.mp4" type="video/mp4">
  Твій браузер не підтримує video element.
</video>

Атрибут controls показує play, pause і volume controls.

Без controls користувачі можуть не мати контролю над медіа.

А ніхто не любить сайт, який поводиться як радіо, одержиме привидом.

Типові Помилки

Неправильний Шлях до Зображення

Якщо файл тут:

images/profile.jpg

Не пиши:

<img src="profile.jpg" alt="Профільне фото">

Використовуй:

<img src="images/profile.jpg" alt="Профільне фото">

Шлях має відповідати місцю розташування файлу.

Відсутній alt

Це погано:

<img src="profile.jpg">

Краще:

<img src="profile.jpg" alt="Профільне фото власника сайту">

Завжди думай про alt.

Навіть якщо текст порожній для декоративних зображень.

Величезні Зображення

Не завантажуй гігантські зображення без думки.

Фото на 10 MB може зробити сторінку повільною.

Повільні сайти болючі.

Користувачі не чекають.

Вони йдуть.

Як коти, коли ти намагаєшся пояснити JavaScript.

Практика

Створи сторінку з назвою:

gallery.html

Вона має містити:

один h1;
один вступний абзац;
три зображення;
корисний текст alt для кожного зображення;
одне зображення всередині посилання;
одне зображення з figure і figcaption.

Використовуй папку images.

Тримай назви файлів простими.

Без CSS.

Без JavaScript.

Тільки чистий HTML.

Міні-Завдання

Створи просту персональну сторінку з:

профільним зображенням;
коротким вступом;
списком хобі;
одним зображенням, пов’язаним із хобі;
контактним посиланням;
підписом під одним зображенням.

Використовуй змістовний текст alt.

Не пиши alt="image".

Це не корисно.

Це HTML-версія знизування плечима.

Підсумок

Сьогодні ти дізнався, що:

зображення додаються елементом img;
src каже браузеру, де знаходиться файл зображення;
alt описує зображення для доступності і запасного тексту;
шляхи до зображень мають відповідати структурі папок;
назви файлів мають бути простими і маленькими літерами;
width і height можуть допомогти контролювати відображення зображення;
figure і figcaption додають підписи;
audio і video можна додати через audio і video;
хороша структура медіа робить сторінки кориснішими і доступнішими.

Зображення роблять сайти живішими.

Але тільки коли вони використовуються правильно.

Хороше зображення підтримує контент.

Погане зображення просто сидить там як розгублена картопля.

Наступний Урок

У наступному уроці ми вивчимо таблиці.

Таблиці не для layout.

Таблиці — для даних.

Дуже важливо.

Дуже часто використовується неправильно.

Будемо строгими.