В HTML посилання створюються за допомогою елементу a. Даний елемент має атрибут href із URL-адресою необхідної сторінки. Існують два типи URL-адрес посилань: абсолютні та відносні.
Абсолютний URL – це повна адреса, що вказує на місцезнаходження ресурсу в Інтернеті, тобто це посилання на інші веб-сайти. Цей тип URL починається з протоколу, наприклад http:// або https://, містить назву домену та шлях до файлу. Нижче приведений приклад такого URL.
See the Pen Абсолютні URL by first_code (@maryna_kriukova) on CodePen.
Відносний URL – це адреса, що вказує на місцезнаходження ресурсу відносно поточної веб-сторінки. Відносні URL складаються з двох частин: шляху та імені файлу. Шлях може містити кілька рівнів папок та підпапок. Відносні URL зазвичай використовуються для створення посилань на інші сторінки в межах того ж сайту або на ресурси, які знаходяться в тій же директорії, що і поточна веб-сторінка. Приведемо приклад. Якщо ви маєте веб-сайт зі сторінкою "index.html", а на цій сторінці ви хочете створити посилання на сторінку "about.html", яка знаходиться в папці "pages", ви можете використовувати наступний відносний URL:
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Таким чином, відносні URL-адреси допомагають під час створення сайту на вашому комп'ютері, оскільки між ними можна створювати зв'язки між сторінками без необхідності налаштування доменного ім'я.
Якірне посилання – це спеціальний тип посилання, який дозволяє перейти на конкретний елемент сторінки в межах однієї HTML-сторінки. Це корисний інструмент для навігації на довгих веб-сторінках, які містять багато інформації, та для створення зручної навігації для користувачів.
Створення посилання на конкретне місце на сторінці — це процес, який складається з двох частин. Спочатку необхідно визначити місце призначення, а потім створити посилання на це місце. Для створення місця призначення використовується атрибут ідентифікатора (id), щоб надати необхідному елементу в документі унікальне ім'я, тобто те ім'я, яке може з’явитися в документі лише один раз. А для створення посилання на це місце, як і з другими посиланнями, використовується елемент a із атрибутом href. В значенні цього атрибуту набирається символ # та ідентифікатор елемента, який потрібно вказати у якірному посиланні. Нижче приведений приклад такого посилання.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Також таким же чином якірні посилання можна створювати на інші документи за допомогою комбінації абсолютного або відносного URL та ідентифікатора елемента, на який потрібно посилатись. Подивимось на приклади.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
До сайту додаються відносні якірні посилання. До елементів заголовку різних секцій ("Послуги", "Про нас", "Зв'язок з нами") додаємо універсальні ідентифікатори: "services", "about" та "connection" відповідно, на які будуть створені посилання із блоку навігації. В блоці навігації в кожний елемент списку додаємо посилання на фрагменти сайту.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Таким чином, ми вивчили, як створювати посилання на веб-сайті.