Створення посилань є однією з основних завдань при розробці веб-сторінок. Посилання дозволяють користувачам переміщатися по різних сторінках в Інтернеті. Вони можуть бути використані для переходу на інші сторінки вашого веб-сайту, переходу на зовнішні сайти або завантаження файлів. У цьому посібнику ми розглянемо основні принципи створення посилань у HTML для початківців.
Створення посилань у HTML просто. Для цього використовується тег . Всередині тегу вказується текст посилання, а атрибут href задає адресу сторінки, на яку буде проводитися перехід при натисканні на посилання. Нижче наведено приклад створення посилання:
В даному прикладі при натисканні на посилання "Натисніть тут, щоб перейти на приклад сайту" відбудеться перехід на сторінку https://www.example.com.
Що таке посилання і навіщо вона потрібна?
Посилання особливо корисні веб-розробникам, оскільки вони дозволяють створювати навігацію між сторінками, забезпечуючи потік інформації між різними розділами Сайту.
Крім того, посилання широко використовуються для надання додаткової інформації. Наприклад, користувач може знайти більш детальний опис товару, натиснувши на посилання з назвою товару.
Посилання можуть вказувати на інші веб-сторінки всередині поточного сайту, на зовнішні веб-ресурси або навіть на різні розділи тієї ж сторінки. Все це робить посилання важливим елементом веб-розробки та навігації по інтернету.
Створення посилання
Посилання в HTML дозволяють створювати переходи на інші сторінки. Для створення посилання використовується тег . Усередині цього тегу необхідно вказати атрибут href, який визначає адресу сторінки, на яку має вести посилання.
В даному прикладі посилання веде на сторінку example.com. при натисканні на це посилання браузер відкриє нову вкладку або вікно і покаже вміст зазначеної сторінки.
Якщо посилання веде на сторінку в тому ж домені, то можна використовувати відносний шлях в атрибуті href:
При натисканні на посилання браузер відкриє сторінку about в тому ж домені.
Також можна створити посилання на певне місце на сторінці, використовуючи якорі:
При натисканні на це посилання сторінка прокрутиться до розділу з ідентифікатором section1.
Тег-основний інструмент
Ось приклад використання тегу :
- Посилання на зовнішній ресурс цей приклад створює посилання на зовнішній ресурс, вказаний в атрибуті "href". При натисканні на посилання користувач буде перенаправлений на вказаний зовнішній ресурс.
- Посилання на внутрішню сторінку у цьому прикладі створюється посилання на внутрішню сторінку, яка називається " page2.html". Якщо дана сторінка знаходиться в тій же папці, що і поточна сторінка, то при натисканні на посилання користувач буде перенаправлений на вказану сторінку.
Ось приклад використання атрибута"target":
- Посилання, що відкривається в новій вкладці це посилання буде відкриватися в новій вкладці браузера, щоб користувач міг залишатися на поточній сторінці.
Атрибути тегу: href та target
Атрибут href визначає URL-адресу, на яку буде здійснено перехід при кліці на посилання. URL може вказувати на іншу сторінку в тому ж домені або на зовнішній ресурс. Наприклад:
Атрибут target визначає спосіб відкриття пов'язаного документа. Можливі значення:
- _blank: відкриває пов'язаний документ у новому вікні або вкладці браузера
- _self: відкриває пов'язаний документ у поточній вкладці або вікні
- _parent: відкриває пов'язаний документ у батьківській вкладці або вікні, якщо такий є
- _top: відкриває пов'язаний документ у верхньому вікні або вкладці браузера
- ім'я_фрейма: відкриває пов'язаний документ в зазначеному фреймі. Ім'я фрейму має бути вказано в атрибуті name тегу або
Комбінуючи атрибути href і target, ви можете створювати різноманітні посилання, які ведуть на різні сторінки і відкриваються в різних вікнах або вкладках браузера.
Відносні та абсолютні шляхи
- Відносні шляхи - це шляхи, які вказуються щодо поточної директорії або розташування файлу. Вони використовуються, коли потрібно створити посилання на сторінки, що знаходяться в тій же папці або в підпапці.
- Абсолютні шляхи - це повні шляхи до файлів або сторінок. Вони використовуються, коли потрібно створити посилання на сторінки, що знаходяться в іншій папці або на іншому веб-сайті.
Відносні шляхи, як правило, є кращими, оскільки вони є більш гнучкими і дозволяють переносити сайт на інший сервер без зміни шляхів. Однак, іноді потрібно використовувати абсолютні шляхи, особливо коли посилання веде на інший домен або на веб-ресурс з іншим ім'ям домену.
Внутрішня і зовнішня посилання
У HTML є два типи посилань: внутрішнє та зовнішнє.
Внутрішнє посилання - це посилання на іншу веб-сторінку всередині того ж веб-сайту. Вона використовує відносний шлях, який вказує на розташування файлу щодо поточної сторінки. Наприклад:
У цьому прикладі, при натисканні на посилання "про сайт", буде відкрита сторінка about.html на тому ж веб-сайті.
Щоб зв'язати посилання з текстом або зображенням, використовуйте тег . Атрибут href визначає адресу сторінки, на яку буде вести посилання.
Зовнішнє посилання - це посилання на веб-сторінку, яка знаходиться на іншому веб-сайті. Вона використовує абсолютний шлях, який містить повну адресу веб-сторінки. Наприклад:
У цьому прикладі, при натисканні на посилання "Example.com" , буде відкрита веб-сторінка за адресою https://example.com.
Зовнішні посилання можуть вказувати на будь-які веб-сторінки в Інтернеті, але важливо, щоб адреса була існуючою.
Створення посилання на іншу сторінку
Для того щоб вказати адресу, на який буде вести посилання, використовується атрибут href . У значенні цього атрибута вказується шлях до файлу або Адреса сайту.
Приклад створення посилання на іншу сторінку:
- Про компанію - це посилання буде вести на сторінку, яка знаходиться в тому ж каталозі, що і поточна сторінка, і називається about.html .
- Приклад - це посилання буде вести на зовнішній сайт https://www.example.com .
Коли посилання створено, за замовчуванням воно відображатиметься як синій підкреслений текст. Зовнішній вигляд посилання може бути змінений за допомогою CSS.