HTML Посилання

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

Посилання HTML документами називаються гіпертекстовими посиланнями, або гіперпосиланнями. Для їх вставки використовують елемент. Як посилання можна використовувати як текст, і зображення.

За промовчанням HTML посилання відображаються як підкреслений текст синього кольору. При наведенні курсору миші на посилання вона стає червоною. Посилання, якими вже клацали (відвідані посилання), стають фіолетовими.

• не відвідані посилання: підкреслений текст синього кольору
• відвідувані посилання: підкреслений текст фіолетового кольору
• активні посилання: підкреслений текст червоного кольору

Змінити колір посилань та прибрати підкреслення можна за допомогою CSS стилів.

Синтаксис

Щоб сказати браузеру, що ця частина тексту є посиланням, необхідно помістити його в тег ․ Адреса документа, на який потрібно перейти, вказується за допомогою атрибуту href .

a href="url">текст посиланняa>.

приклад

html>
html>
head>
title>Заголовок вікна веб-сторінки title> head>
body>
h2>Приклад посилання h2>
a
href="https://ua.w3docs.com/">W3Docs.com a> body> html>

Результат

У цьому прикладі ми використовували тег для визначення підзаголовків і тег для створення посилань. Між тегами і ми розмістили W3Docs.com. Натисніть на нього і буде перенаправлено на домашню сторінку нашого веб-сайту.

Атрибут target

Для того, щоб посилання відкривалося у новому вікні, необхідно додати атрибут target , значенням якого є"_blank" .

Не забудьте додавати слєш (/) до посилання.

Атрибут ID

Атрибут id використовується для створення унікального ідентифікатора частини документа, щоб до нього можна було звертатися.

Для того, щоб перенаправити користувача на певну частину тексту на тій самій веб-сторінці, необхідно:

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

1. Створити гіперпосилання із зазначенням id, якому передує символ ґрат #.
   приклад. Коли ми клацнемо на це посилання, ми будемо перенаправлені на частину тексту з унікальним ідентифікатором “приклад”

Тепер давайте подивимося, як це виглядає у коді HTML.

приклад

html>
html>
head>
title>Заголовок вікна веб-сторінки title> head>
body>
h2>Приклад посилання з атрибутом id h2>
a
id="приклад">Тут знаходиться частина тексту з унікальним ідентифікатором приклад, куди користувач буде перенаправлений після натискання на посилання a>
a
href="#приклад">Коли ми клацнемо на це посилання, ми будемо перенаправлені на частину тексту з унікальним ідентифікатором “приклад” a> body> html>

Результат

Як додати гіперпосилання до зображення

1. src - джерело зображення
2. alt - альтернативний текст
3. width - ширина зображення
4. height - висота зображення

приклад

html>
html>
head>
title>Заголовок вікна веб-сторінки title> head>
body>
a
href="https://ua.w3docs.com/">
img
src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"
width="190"
height="45"
alt="logo" /> a> body> html>

Результат

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

Про HTML зображення ми поговоримо докладніше у наступному розділі.

Практикуйте свої знання

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

HTML-посилання можуть відкривати нову вкладку браузера або поштову програму для надсилання електронного листа.

Посилання в HTML

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

Така частина HTML як "Гіпертекст" визначає, який вид посилань ми використовуємо: гіпертекстові посилання (або гіперпосилання).

У HTML посилання - це малі елементи, написані за допомогою тега.

Атрибут href (hypertext reference) використовується для визначення цілі посилання (куди ви переходите при натисканні по ній).

Посилання є основним взаємодією з веб-сторінкою: ви переходите від одного документа до іншого, клацнувши за посиланнями.

Є три виду мети, які ви можете визначити:

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

Посилання з якорем

Посилання з якорем призначені для навігації в межах однієї сторінки. Випереджаючи значення атрибуту href з #, можна налаштувати перехід до елемента HTML з певним атрибутом id .

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

Відносні адреси

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

Але стосовно чого? Ну, щодо поточної сторінки.

Давайте використовуємо простий приклад, у якому папка my-first-website містить два файли HTML.

В home.html ви хочете визначити посилання на contact.html. Оскільки ці два файли знаходяться в одній папці, Ви можете просто написати в home.html:

На реальному сайті процес аналогічний.

Скажімо, у вас є сайт з ім'ям http://ireallylovecats.com, на якому у вас є дві веб-сторінки: index.html та gallery.html:

В index.html ви могли б написати наступне посилання:

Пам'ятайте: веб-сайти розміщуються на комп'ютерах, таких, що ви зараз використовуєте. Вони просто називаються «сервери», тому що їх єдина мета полягає у тому, щоб зберігати сайти. Але вони ще мають файли і папкияк на «звичайних» комп'ютерах.

Абсолютні адреси

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

Вам потрібна повна адреса вашого HTML-документа: http://ireallylovecats.com/gallery.html.

Цей URL може бути розбитий на три частини:

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

Ви зазвичай використовуєте абсолютні адреси для визначення посилання з свого сайту на інший сайт.

У файлі http://ireallylovecats.com/gallery.html ви могли б написати:

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

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

Створення посилань

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

• https://yandex.ru - адреса Яндекса;
• //yandex.ru - та сама адреса, але без зазначення протоколу, браузер сам підставить потрібний протокол (http або https);
• image/pic.png - адреса локальної картинки;
• documents/info.pdf - адреса PDF-документа;
• page/contact.html - адреса HTML-файлу;
• # — заглушка, що дозволяє зробити посилання, клацання по якому не відкриває іншу веб-сторінку і нікуди не веде.

Як бачите, адреси можуть бути досить різноманітними та вказувати на документи різного типу.

Наприклад, для створення посилання на сайт webref.ru пишеться наступний код HTML (приклад 1).

Приклад 1. Створення посилання

Мал. 1. Посилання у браузері

За промовчанням текстові посилання відображаються синього кольору та з підкресленням. При наведенні курсору миші на посилання змінюється вигляд курсору і він перетворюється на «руку, що вказує». Зауважте, що в браузері ми бачимо тільки текст посилання, а не адресу сайту. Щоб його дізнатися, треба навести курсор миші на посилання і адреса буде показана знизу у рядку, що спливає.

Посилання-заповнювач

Приклад 2. Вкладене меню

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

Мал. 2. Вид меню із заповнювачем

Підсумки