Урок 15 із 239

Внутрішні посилання в HTML

Навчіться створювати посилання між сторінками одного сайту за допомогою відносних шляхів.

Внутрішні посилання в HTML

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

Якщо вставити повний шлях до файлу на комп'ютері, після перенесення сайту в іншу папку або на сервер такі посилання перестануть працювати.

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

Для сторінок власного сайту використовують відносні посилання. У атрибуті href потрібно вказувати тільки назву файлу разом із розширенням.

<a href="page.html">
  Перейти на сторінку page
</a>

Наприклад, якщо у кореневій папці сайту є два файли index.html та page.html, їх можна зв'язати між собою.

<!-- index.html -->

<h1>Index</h1>

<a href="page.html">
  Перейти на page
</a>

<!-- page.html -->

<h1>Page</h1>

<a href="index.html">
  Повернутися на index
</a>

Посилання	Призначення
page.html	Перехід до файлу page.html у цій самій папці
index.html	Перехід до головної сторінки
folder/page.html	Перехід до файлу всередині папки

Внутрішні посилання є основою навігації сайту. За їх допомогою створюють меню, переходи між сторінками та структуру вебресурсу.

<h1>Головна сторінка</h1>

<ul>
  <li>
    <a href="1.html">Сторінка 1</a>
  </li>

  <li>
    <a href="2.html">Сторінка 2</a>
  </li>

  <li>
    <a href="3.html">Сторінка 3</a>
  </li>
</ul>

❗ Важливо:

Для сторінок одного сайту використовуйте відносні шляхи. Повні адреси з диска комп'ютера працюватимуть тільки у вас і зламаються після перенесення проєкту.

📌 Завдання:

Створіть три HTML-сторінки: 1.html, 2.html, 3.html.
Додайте на кожну сторінку посилання на інші сторінки.
Створіть index.html із посиланнями на всі три сторінки.
Розмістіть посилання всередині списку ul.

💡 Показати підказку

У href потрібно писати назву HTML-файлу, наприклад href="page.html". Якщо файли знаходяться в одній папці — додатковий шлях не потрібен.

✅ Показати відповідь

Приклад index.html:

<h1>Головна</h1>

<ul>
  <li>
    <a href="1.html">
      Сторінка 1
    </a>
  </li>

  <li>
    <a href="2.html">
      Сторінка 2
    </a>
  </li>

  <li>
    <a href="3.html">
      Сторінка 3
    </a>
  </li>
</ul>