InnoMarts logo
InnoMarts
Fast websites
← Back to course

Посилання і Навігація

Посилання і Навігація

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

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

Тепер ми з’єднаємо сторінки між собою.

Бо одна HTML-сторінка — це добре.

А багато з’єднаних HTML-сторінок — це вже сайт.

І саме тоді все починає виглядати по-справжньому.

Одинока сторінка — це записка на холодильнику.

З’єднані сторінки — це маленьке цифрове місто.

З меншою кількістю голубів.

Сподіваємось.

Що Ти Вивчиш

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

Елемент a

Посилання створюються за допомогою елемента a.

Приклад:

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

Текст між відкриваючим і закриваючим тегами буде клікабельним.

Атрибут href каже браузеру, куди має вести посилання.

Тобто це:

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

означає:

Покажи текст “Про Мене” і відправ користувача на about.html, коли він клікне.

Просто.

Потужно.

Трохи магічно.

Посилання на Іншу Сторінку

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

touch index.html about.html

У index.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>Ласкаво просимо на мій сайт.</p>

  <a href="about.html">Перейти на Сторінку Про Мене</a>
</body>
</html>

У about.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>Це сторінка про мене.</p>

  <a href="index.html">Назад на Головну</a>
</body>
</html>

Відкрий index.html у браузері і клікни посилання.

Вітаю.

Ти з’єднав дві сторінки.

Сайт почав дихати.

Дуже тихо.

Але все ж.

Relative Links

Relative link вказує на файл залежно від місця, де знаходиться поточний файл.

Приклад:

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

Це означає:

Шукай about.html у тій самій папці.

Relative links чудово підходять для сторінок твого сайту.

Приклад структури:

project/
  index.html
  about.html
  contact.html

З index.html можна послатися на contact.html так:

<a href="contact.html">Контакт</a>

Не потрібно писати повну інтернет-адресу.

Браузер розуміє шлях.

Браузери розумніші, ніж виглядають.

Іноді.

Посилання на Файли в Папках

Якщо файл знаходиться в папці, шлях змінюється.

Приклад:

project/
  index.html
  pages/
    about.html

З index.html посилайся на pages/about.html так:

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

Якщо ти всередині pages/about.html і хочеш повернутися до index.html, використовуй:

<a href="../index.html">Головна</a>

.. означає “піднятися на одну папку вище”.

Це важливо.

І небезпечно, якщо писати це напівсонним.

Шляхи маленькі, але кусаються.

Absolute Links

Absolute link використовує повний URL.

Приклад:

<a href="https://www.mozilla.org">Mozilla</a>

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

Приклади:

<a href="https://developer.mozilla.org">MDN Web Docs</a>
<a href="https://www.wikipedia.org">Wikipedia</a>

Absolute links зазвичай починаються з:

https://

Якщо забути https://, браузер може подумати, що це локальний файл.

І тоді плутанина заходить у кімнату в чоботях.

Відкрити Посилання в Новій Вкладці

Щоб відкрити посилання в новій вкладці, використовуй target="_blank":

<a href="https://developer.mozilla.org" target="_blank">Відкрити MDN</a>

Для безпеки також додай rel="noopener noreferrer":

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  Відкрити MDN
</a>

Це хороша звичка для зовнішніх посилань, які відкриваються в новій вкладці.

Так, виглядає довше.

Хороші звички часто виглядають довше.

Потім вони рятують тебе пізніше.

Email Links

Можна створити посилання, яке відкриває email-додаток:

<a href="mailto:hello@example.com">Надіслати Email</a>

Коли користувач клікне, може відкритися його поштовий клієнт.

Приклад:

<a href="mailto:contact@example.com">Написати мені</a>

Можна також додати тему:

<a href="mailto:contact@example.com?subject=Питання%20з%20Сайту">Поставити Питання</a>

Пробіли в URL часто пишуться як %20.

Не красиво.

Але працює.

Як багато речей в інтернеті.

Phone Links

Для телефонних номерів використовуй tel::

<a href="tel:+390000000000">Подзвонити</a>

Це корисно на мобільних пристроях.

На desktop може нічого не зробити або відкрити програму для дзвінків.

HTML старається.

Пристрій вирішує.

Дуже демократично.

Посилання на Секцію на Тій Самій Сторінці

Можна послатися на секцію за допомогою id.

Приклад:

<a href="#contact">Перейти до Контакту</a>

<h2 id="contact">Контакт</h2>
<p>Можна зв’язатися зі мною через email.</p>

href="#contact" вказує на елемент з:

id="contact"

Це корисно для довгих сторінок.

Наприклад, документації.

Або меню ресторану, яке вимагає кардіо.

Проста Навігація

Навігація зазвичай є групою посилань.

Приклад:

<nav>
  <a href="index.html">Головна</a>
  <a href="about.html">Про Мене</a>
  <a href="contact.html">Контакт</a>
</nav>

Елемент nav каже браузеру:

Ця зона — навігація.

Це semantic HTML.

Він додає структурі значення.

А не просто кидає посилання на сторінку як шкарпетки на стілець.

Навігація зі Списком

Багато навігаційних меню використовують списки:

<nav>
  <ul>
    <li><a href="index.html">Головна</a></li>
    <li><a href="about.html">Про Мене</a></li>
    <li><a href="contact.html">Контакт</a></li>
  </ul>
</nav>

Це чиста структура.

Меню навігації — це список посилань.

Тому список має сенс.

HTML любить, коли структура має сенс.

Він стає спокійнішим.

Розробники теж.

Іноді.

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

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

touch index.html about.html contact.html

Використовуй цю навігацію в кожному файлі:

<nav>
  <ul>
    <li><a href="index.html">Головна</a></li>
    <li><a href="about.html">Про Мене</a></li>
    <li><a href="contact.html">Контакт</a></li>
  </ul>
</nav>

Приклад index.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>
  <nav>
    <ul>
      <li><a href="index.html">Головна</a></li>
      <li><a href="about.html">Про Мене</a></li>
      <li><a href="contact.html">Контакт</a></li>
    </ul>
  </nav>

  <h1>Головна</h1>
  <p>Ласкаво просимо на мій маленький сайт.</p>
</body>
</html>

Тепер створи схожі сторінки для about.html і contact.html.

Відкрий їх у браузері й переходь між сторінками.

Тепер у тебе є маленький сайт.

Маленький.

Але справжній.

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

Забути href

Це не корисне посилання:

<a>Про Мене</a>

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

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

Без href немає напрямку.

Посилання без href — як таксі без коліс.

Неправильна Назва Файлу

Якщо файл називається:

about.html

але посилання каже:

<a href="About.html">Про Мене</a>

воно може не працювати на деяких системах.

Назви файлів можуть бути case-sensitive.

about.html і About.html можуть бути різними.

Комп’ютери можуть бути дуже строгими для машин, які все ще просять нас довести, що ми не роботи.

target blank без rel

Це працює:

<a href="https://example.com" target="_blank">Example</a>

Краще:

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

Хороші звички зараз.

Менше болю потім.

Практика

Створи маленький сайт з:

Без CSS.

Без JavaScript.

Тільки HTML links і navigation.

Сайт виглядатиме просто.

Це нормально.

Сьогодні ми будуємо зв’язки.

Декорації прийдуть пізніше.

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

Створи файл:

resources.html

Побудуй сторінку ресурсів з:

Приклад:

<a href="#top">Назад вгору</a>

і вгорі:

<h1 id="top">Корисні Ресурси</h1>

Маленька функція.

Дуже корисна.

Дуже професійна.

Майже підозріло.

Підсумок

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

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

Без посилань сторінки — це острови.

З посиланнями вони стають картою.

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

У наступному уроці ми вивчимо зображення і медіа.

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

Але іноді картинка рятує всіх від читання дванадцяти абзаців про кота.