Веб-сайт - це сукупність веб-сторінок. І ці сторінки повинні бути пов’язані чи пов’язані чимось. І для цього нам потрібно використовувати тег, наданий HTML: aтег.

Цей тег визначає гіперпосилання, яке використовується для посилання з однієї сторінки на іншу. І найважливішим атрибутом aелемента є hrefатрибут, який вказує пункт призначення посилання.

У цьому посібнику я покажу вам, як створювати гіперпосилання HTML, використовуючи hrefатрибут на aтезі.

• Що таке посилання?
• Як створити внутрішні посилання
• Перегляньте сторінки на одному рівні
• Перейдіть на сторінки, розташовані в іншій папці
• Перегляньте сторінку, розташовану в папці, до кореневої
• Як створити зовнішні посилання
• Як створити якірні посилання
• Перейдіть на тій самій сторінці
• Перейдіть на іншу сторінку
• Висновок

Що таке посилання?

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

У веб-розробці існує кілька способів створення посилань, але найпоширенішим є використання aтегу та hrefатрибута. Це останнє місце, де ми вказуємо адресу призначення посилання.

aТег допомагає нам створити три основних типи посилань: внутрішнє посилання, зовнішнє посилання, і посилання якоря. Тим не менш, тепер ми можемо заглибитися в те, як створити внутрішнє посилання в наступному розділі.

Як створити внутрішні посилання

Що стосується створення веб-сайту, то має сенс мати зв’язок між сторінками. І поки ці посилання дозволяють нам переходити зі сторінки А на сторінку Б, це називається внутрішнім посиланням (оскільки воно завжди в одному імені домену або на одному веб-сайті). Отже, внутрішнє посилання - це посилання, яке дозволяє перейти на іншу сторінку веб-сайту.

Тепер, враховуючи, що наша папка структурована наступним чином:

├── folder1 | └── page2.html ├── page1.html ├── index.html 

Тут ми маємо три варіанти використання, і для кожного ми створимо приклад.

Перегляньте сторінки на одному рівні

• index.html

Browse to Page 1 

Як бачите, сторінка page1.htmlзнаходиться на одному рівні, тому шлях до hrefатрибуту - це просто назва сторінки.

Перейдіть на сторінки, розташовані в іншій папці

• page1.html

Browse to Page 2 

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

Чудово! Давайте зараз зануримось у останній варіант використання.

Перегляньте сторінку, розташовану в папці, до кореневої

• page2.html

Browse to the Home Page 

Тепер, щоб перейти до index.htmlсторінки, нам слід спочатку піднятися на один рівень вище, перш ніж мати можливість перейти до цієї сторінки.

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

Як створити зовнішні посилання

Завжди корисно мати можливість переходу до зовнішніх веб-сайтів.

Browse to Google 

Як ви можете бачити тут, для переходу до Google ми повинні вказати його URL-адресу в hrefатрибуті.

Зовнішні та внутрішні посилання використовуються для переходу зі сторінки А на сторінку Б. Однак іноді ми хочемо залишитися на одній сторінці та перейти до певної частини. І для цього ми повинні використати щось, що називається опорним посиланням, давайте заглибимося в нього в наступному розділі.

Як створити якірні посилання

Якірне посилання дещо більш конкретне: воно дозволяє нам переміщатися з точки А в точку Б, залишаючись на тій самій сторінці. Також його можна використовувати для переходу до частини на іншій сторінці.

Перейдіть на тій самій сторінці

Go to the anchor 

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

Тут замість посилання на сторінку ми маємо посилання на елемент. Коли ми натискаємо на посилання, воно буде шукати елемент з тим самим іменем без хештегу ( about). Якщо він знаходить цей ідентифікатор, він переглядає цю частину.

Перейдіть на іншу сторінку

Go to the anchor 

Це майже так само, як і в попередньому прикладі, за винятком того, що ми повинні визначити сторінку, на якій ми хочемо переглядати, і додати до неї якір.

Висновок

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

Дякуємо за читання.

Не соромтеся звертатися до мене!

ТВЕТЕР БЛОГ БЮЛЕТЕНЬ GITHUB LINKEDIN CODEPEN DEV

Фото JJ Ying на Unsplash