Посилання та зображення

HTML посилання та зображення — дошка з фото з'єднаними червоними нитками як мережа посилань

У попередньому уроці ми навчилися форматувати текст та створювати списки. Але сторінка без посилань — як книга без змісту, а без зображень — як газета без фотографій. Сьогодні це виправимо.

Посилання `<a>`

Тег <a> (anchor — "якір") створює гіперпосилання — клікабельний текст, який переносить на іншу сторінку.

<a href="https://google.com">Перейти до Google</a>

Результат: Перейти до Google

Атрибут	Що робить
`href`	Адреса, куди веде посилання (обов'язковий)
`target`	Де відкрити посилання

Інфо

Слово "гіперпосилання" придумав Тед Нельсон у 1965 році. Префікс "гіпер-" означає "за межами" — текст, який виходить за межі лінійного читання і дозволяє стрибати між пов'язаними ідеями. Люди мріяли про це з 1930-х років — за десятиліття до появи комп'ютерів!

Абсолютні та відносні шляхи

Це одна з найважливіших тем. В href (і пізніше в src для зображень) можна вказати два типи адрес:

Абсолютний шлях

Повна адреса — як GPS-координати. Працює звідки завгодно:

<a href="https://www.wikipedia.org">Вікіпедія</a>

Використовуй для зовнішніх сайтів.

Відносний шлях

Адреса відносно поточного файлу — як "друга двері зліва":

<!-- Файл у тій самій папці -->
<a href="about.html">Про мене</a>

<!-- Файл у підпапці -->
<a href="pages/contacts.html">Контакти</a>

<!-- Файл на рівень вище -->
<a href="../index.html">На головну</a>

Використовуй для свого сайту. Ось як це працює:

my-site/
├── index.html          ← ти тут
├── about.html          ← href="about.html"
├── pages/
│   └── contacts.html   ← href="pages/contacts.html"
└── blog/
    └── post.html       ← href="blog/post.html"

Увага

Типова помилка: писати href="google.com" без https://. Браузер вирішить, що це файл google.com у твоїй папці! Для зовнішніх сайтів завжди починай з https://.

Типи посилань

Зовнішнє посилання (на інший сайт)

<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  GitHub
</a>

target="_blank" — відкриває в новій вкладці
rel="noopener noreferrer" — захист безпеки (завжди додавай разом з _blank)

Внутрішнє посилання (на свою сторінку)

<a href="about.html">Про мене</a>

Якірне посилання (на секцію сторінки)

<!-- Посилання на секцію -->
<a href="#contacts">Перейти до контактів</a>

<!-- Десь нижче на сторінці -->
<h2 id="contacts">Контакти</h2>

Посилання на email та телефон

<a href="mailto:hello@example.com">Написати листа</a>
<a href="tel:+380991234567">Зателефонувати</a>

Як писати текст посилань

<!-- ❌ Погано — незрозуміло куди веде -->
<a href="menu.html">Натисни тут</a>

<!-- ✅ Добре — зрозуміло без контексту -->
<a href="menu.html">Переглянути меню ресторану</a>

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

Зображення `<img>`

Тег <img> додає зображення на сторінку. Це самозакриваючий тег — без </img>:

<img src="photo.jpg" alt="Осінній парк з жовтим листям">

Атрибут	Що робить	Обов'язковий?
`src`	Шлях до зображення	Так
`alt`	Текстовий опис зображення	Так
`width`	Ширина в пікселях	Ні
`height`	Висота в пікселях	Ні

Атрибут `alt` — чому він обов'язковий

alt (alternative text) — це текст, який:

Озвучується скрін-рідерами для людей з вадами зору
Показується, якщо зображення не завантажилось
Допомагає пошуковим системам зрозуміти що на картинці

<!-- ❌ Погано -->
<img src="dog.jpg" alt="зображення">
<img src="dog.jpg" alt="фото">
<img src="dog.jpg">

<!-- ✅ Добре -->
<img src="dog.jpg" alt="Золотистий ретривер ловить фрізбі в парку">

Порада

Правило для alt: описуй що зображено, а не що це. Скрін-рідер вже каже "зображення" — не потрібно повторювати. Для декоративних зображень (які не несуть інформації) використовуй порожній alt: alt="".

Формати зображень

Формат	Найкраще для	Прозорість	Розмір
JPEG	Фотографії	Ні	Маленький
PNG	Логотипи, скріншоти, іконки	Так	Середній
SVG	Іконки, схеми, логотипи	Так	Дуже маленький
WebP	Майже все (сучасний формат)	Так	Менше за JPEG на 25-34%
GIF	Прості анімації	Так (1 біт)	Різний

Практичне правило:

Фото → JPEG або WebP
Логотип/іконка → SVG
Скріншот → PNG
Анімація → GIF

Розміри зображень

<!-- Фіксовані розміри -->
<img src="photo.jpg" alt="Опис" width="400" height="300">

<!-- Тільки ширина — висота масштабується пропорційно -->
<img src="photo.jpg" alt="Опис" width="400">

Увага

Завжди вказуй width і height — це допомагає браузеру зарезервувати місце ще до завантаження. Без них сторінка буде "стрибати" коли зображення з'являються.

Зображення як посилання

Можна зробити зображення клікабельним, обгорнувши його в <a>:

<a href="https://github.com">
  <img src="github-logo.png" alt="Перейти на GitHub">
</a>

Практика: сторінка з навігацією та зображеннями

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Мій блог</title>
</head>
<body>
  <!-- Навігація -->
  <a href="index.html">Головна</a> |
  <a href="about.html">Про мене</a> |
  <a href="gallery.html">Галерея</a>

  <h1>Мій блог про подорожі</h1>

  <h2>Карпати</h2>
  <img src="images/carpathians.jpg" alt="Гірський пейзаж Карпат з хмарами" width="600">
  <p>Минулого літа я відвідав <strong>Карпати</strong>. Ось кілька порад:</p>
  <ul>
    <li>Взяти зручне взуття</li>
    <li>Не забути дощовик</li>
  </ul>

  <p>
    Більше фото у <a href="gallery.html">галереї</a>.
    Корисний ресурс: <a href="https://carpaty.info" target="_blank" rel="noopener noreferrer">carpaty.info</a>
  </p>

  <!-- Якірне посилання -->
  <h2 id="contacts">Контакти</h2>
  <p><a href="mailto:traveler@example.com">Написати мені</a></p>
</body>
</html>

Підсумок

<a href=""> — створює посилання (абсолютні для зовнішніх, відносні для своїх)
target="_blank" — відкриває в новій вкладці (+ rel="noopener noreferrer")
<img src="" alt=""> — додає зображення (alt обов'язковий!)
Формати: JPEG для фото, PNG для скріншотів, SVG для іконок, WebP для всього
width/height — завжди вказуй для стабільного відображення

Що далі?

У наступному уроці вивчимо таблиці — потужний інструмент для структурування даних.