HTML Посилання
Посилання знаходяться майже на всіх вебсторінках. Посилання дозволяють користувачам переходити від сторінки до сторінки.
В цій темі:
HTML Посилання - Гіперпосилання
HTML посилання - це гіперпосилання.
Ви можете натиснути на посилання і перейти до іншого документу.
При наведенні миші на посилання стрілка миші перетвориться в маленьку стрілку.
Примітка: Посилання не обов'язково повинно бути текстовим. Посиланням може бути зображення або будь-який інший HTML елемент.
HTML Посилання - Синтаксис
Гіперпосилання визначаються за допомогою HTML тега <a> (від слова anchor - якір):
<a href="url">Текст посилання</a>
Приклад
<a href="https://www.w3schools.com/html/">HTML уроки для початківців онлайн</a>
Спробуйте самі »
Атрибут href вказує адресу призначення посилання (https://w3schoolsua.github.io/html/).
Текст посилання є видимою частиною (HTML уроки для початківців онлайн).
Натиснувши на текст посилання, вас відправить за вказаною адресою.
Примітка: Без косої риски (слеша) в кінці адрес підпапок ви можете згенерувати два запити до сервера. Багато серверів автоматично додають косу риску в кінець адреси, а потім створюють новий запит.
Локальні посилання
У наведеному вище прикладі використовується абсолютний URL (повна вебадреса).
Локальне посилання (посилання на той самий веб-сайт) вказується з відносним URL (без https://www....).
HTML Кольори посилань
За замовчуванням посилання буде виглядати так (у всіх браузерах):
- Невідвідуване посилання - підкреслене і синім кольором
- Відвідуване посилання - підкреслене і фіолетовим кольором
- Активне посилання - підкреслене і червоним кольором
Ви можете змінити кольори за замовчуванням, використовуючи CSS:
Приклад
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Спробуйте самі »
Посилання часто стилізуються у вигляді кнопок за допомогою CSS:
Це посиланняПриклад
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Спробуйте самі »
Щоб дізнатись більше про CSS, перейдіть на CSS Підручник на нашому сайті W3Schools українською.
HTML посилання - Атрибут target
Атрибут target вказує, де відкрити пов’язаний документ.
Атрибут target може мати одне із наступних значень:
_blank- Відкриває пов’язаний документ в новому вікні або вкладці_self- Відкриває пов’язаний документ в тому ж вікні / вкладці, в якому він був натиснутий (за замовчуванням)_parent- Відкриває пов’язаний документ в батьківському фреймі_top- Відкриває пов’язаний документ в повному тілі вікна- framename - Відкриває пов’язаний документ в названому фреймі
Цей приклад відкриє пов’язаний документ в новому вікні / вкладці браузера:
Приклад
<a href="https://www.w3schools.com/" target="_blank">Відвідайте W3Schools!</a>
Спробуйте самі »
Порада: Якщо ваша вебсторінка заблокована у фреймі, ви можете використовувати target="_top", щоб вийти з фрейму:
Приклад
<a href="https://www.w3schools.com/html/" target="_top">HTML5 Підручник!</a>
Спробуйте самі »
HTML Посилання - Зображення як посилання
Часто в якості посилань використовуються зображення:
Приклад
<a href="index.html">
<img src="smiley.gif" alt="HTML уроки для початківців" style="width:42px;height:42px;border:0;">
</a>
Спробуйте самі »
Примітка: border:0; додається, щоб IE9 (і більш ранні версії) не відображали рамку навколо зображення (коли зображення є посиланням).
Атрибут Title - Підказка для посилань
Атрибут title визначає додаткову інформацію про елемент. Інформація найчастіше відображається у вигляді підказки, коли курсор переміщується над елементом.
Приклад
<a href="https://www.w3schools.com/html/" title="Перейти на уроки по HTML для початківців">Уроки по HTML для початківців</a>
Спробуйте самі »
HTML Посилання - Як створити закладку
HTML-закладки використовуються, щоб дозволити читачам переходити до певних частин вебсторінки.
Закладки можуть бути корисні, якщо ваша вебсторінка дуже довга.
Щоб створити закладку, спочатку необхідно створити закладку, а потім додати посилання на неї.
При натисканні на посилання сторінка прокручується до місця із закладкою.
Приклад
Спочатку створіть закладку з атрибутом id:
<h2 id="C4">Розділ 4</h2>
Потім додайте посилання на закладку ("Перейти до розділу 4") на тій самій сторінці:
<a href="#C4">Перейти до розділу 4</a>
Або додайте посилання на закладку ("Перейти до розділу 4") з іншої сторінки:
Зовнішні шляхи
На зовнішні сторінки можна посилатися за повним URL або по шляху відносно поточної вебсторінки.
В цьому прикладі використовується повна URL-адреса для посилання на вебсторінку:
Цей приклад посилається на сторінку, розташовану в папці html на поточному вебсайті:
Цей приклад посилається на сторінку, розташовану в тій же папці, що і поточна сторінка:
Вы можете прочитати більше про шляхи до файлів в розділі HTML Шляхи до файлів на нашому сайті W3Schools українською.
Резюме розділу
- Використовуйте елемент
<a>для визначення посилання - Використовуйте атрибут
hrefдля визначення адреси посилання - Використовуйте атрибут
targetщоб визначити, де відкрити пов'язаний документ - Використовуйте елемент
<img>(всередині <a>) для використання картинки в якості посилання - Використовуйте атрибут
id(id="значення") для визначення закладок на сторінці - Використовуйте атрибут
href(href="#значення") для посилання на закладку
HTML Вправи
HTML Теги посилань
| Тег | Опис |
|---|---|
| <a> | Визначає гіперпосилання |
Для отримання повного списку всіх доступних HTML тегів, відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
Запитання для самоконтролю
- Для чого потрібні посилання на вебсторінках?
- Що таке гіперпосилання?
- За допомогою якого тегу визначаються гіперпосилання на HTML-сторінках?
- Який атрибут вказує адресу призначення гіперпосилання на HTML-сторінках?
- Яка частина гіперпосилання є видимою на вебсторінках?
- Які об’єкти на вебсторінках можуть бути гіперпосиланнями?
- Яка різниця між локальними та абсолютними адресами гіперпосилань?
- Які кольори за замовчуванням в гіперпосилань?
- За допомогою чого можна змінити кольори гіперпосилань?
- Який атрибут вказує, де відкрити пов’язаний вебдокумент?
- Які є значення в атрибута target?
- Чи можна використовувати зображення в якості посилання?
- Який атрибут визначає додаткову інформацію про елемент у вигляді підказки?
- Для чого потрібні HTML-закладки?
- Що потрібно вказати, щоб зробити закладку на вебсторінці?
- Які посилання використовуються для переходу по сторінках в межах одного сайту?
- Які посилання використовуються для переходу з одного сайту на інший?
