Перейти до основного контенту

Як зробити перехід між сторінками в HTML

3 хв читання
2437 переглядів

Перехід між сторінками на веб-сайті є одним з основних елементів створення зручної навігації для користувачів. Правильне оформлення переходів допомагає користувачам легко переміщатися по різних розділах сайту і знаходити потрібну інформацію. У HTML існують кілька способів реалізації переходів між сторінками, які ми розглянемо в цій статті.

Найбільш простим і поширеним способом є використання гіперпосилань. Гіперпосилання-це активні елементи, які можна натиснути, щоб перейти на іншу сторінку сайту або відкрити новий документ. Для створення гіперпосилання в HTML використовується тег . Усередині тега вказується адреса сторінки або документа, на який потрібно здійснити перехід. Текст, який буде видно користувачеві, полягає між відкриває і закриває тегами .

Приклад використання гіперпосилання:

Цей приклад створить гіперпосилання з текстом "Перейти на нову сторінку". При кліці на це посилання веб-браузер перенаправить користувача на сторінку "новая_сторінка.html " у тому ж вікні браузера.

Рекомендується використовувати різні стилізації і ефекти для гіперпосилань, щоб привернути увагу користувачів і зробити переходи більш помітними. Наприклад, ви можете застосувати жирне зображення до тексту посилання за допомогою тегу або курсивом за допомогою тегу . Ці теги вкажуть веб-браузеру, яке форматування потрібно застосувати до тексту посилання.

Синтаксис посилання в HTML

Синтаксис посилання в HTML виглядає наступним чином:

У цьому синтаксисі використовуються три основні теги:

Наприклад,якщо ми хочемо створити посилання на сторінку " about.html "з текстом"про нас":

При використанні зображень замість тексту, ви можете використовувати наступний синтаксис:

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

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

Тег та атрибути href та target

Використання відносного шляху дозволяє посилатися на файли всередині поточного сайту:

Атрибут target визначає, як буде відкрито перехід - у поточному вікні або в новому вікні браузера. Можливі значення атрибута:

_selfВідкриває посилання в поточному вікні (за замовчуванням)
_blankВідкриває посилання в новому вікні або вкладці браузера
_parentВідкриває посилання в батьківському фреймі або вікні
_topВідкриває посилання в повному вікні браузера

Приклад використання атрибута target:

Відносні та абсолютні посилання

  • Посилання на сторінку-посилання на сторінку, що знаходиться в поточній директорії;
  • Посилання на сторінку-посилання на сторінку, що знаходиться в директорії вище поточної;
  • Посилання на сторінку - посилання на сторінку, що знаходиться в кореневій директорії.
  • Посилання на сторінку-посилання на сторінку за повною URL-адресою;
  • Написати лист-посилання для відправки електронного листа;
  • Зателефонувати-посилання для набору номера телефону.