НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. Уроки для початківців. W3Schools українською

En Es De Fr

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....).

Приклад

<a href="html_images.html">HTML Зображення</a>
Спробуйте самі »

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") з іншої сторінки:

Приклад

<a href="html_demo.html#C4">Перейти до розділу 4</a>
Спробуйте самі »

Зовнішні шляхи

На зовнішні сторінки можна посилатися за повним URL або по шляху відносно поточної вебсторінки.

В цьому прикладі використовується повна URL-адреса для посилання на вебсторінку:

Приклад

<a href="https://w3schoolsua.github.io/html/index.html">HTML підручник</a>

Спробуйте самі »

Цей приклад посилається на сторінку, розташовану в папці html на поточному вебсайті:

Пример

<a href="../html/index.html">HTML підручник</a>

Спробуйте самі »

Цей приклад посилається на сторінку, розташовану в тій же папці, що і поточна сторінка:

Приклад

<a href="index.html">HTML підручник</a>

Спробуйте самі »

Вы можете прочитати більше про шляхи до файлів в розділі HTML Шляхи до файлів на нашому сайті W3Schools українською.


Резюме розділу

  • Використовуйте елемент <a> для визначення посилання
  • Використовуйте атрибут href для визначення адреси посилання
  • Використовуйте атрибут target щоб визначити, де відкрити пов'язаний документ
  • Використовуйте елемент <img> (всередині <a>) для використання картинки в якості посилання
  • Використовуйте атрибут id (id="значення") для визначення закладок на сторінці
  • Використовуйте атрибут href (href="#значення") для посилання на закладку

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Використовуйте коректний HTML, щоб перетворити текст нижче в посилання на 'default.html'.

>Відвідайте HTML підручник.

HTML Теги посилань

Тег Опис
<a>Визначає гіперпосилання

Для отримання повного списку всіх доступних HTML тегів, відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.


Запитання для самоконтролю

  • Для чого потрібні посилання на вебсторінках?
  • Що таке гіперпосилання?
  • За допомогою якого тегу визначаються гіперпосилання на HTML-сторінках?
  • Який атрибут вказує адресу призначення гіперпосилання на HTML-сторінках?
  • Яка частина гіперпосилання є видимою на вебсторінках?
  • Які об’єкти на вебсторінках можуть бути гіперпосиланнями?
  • Яка різниця між локальними та абсолютними адресами гіперпосилань?
  • Які кольори за замовчуванням в гіперпосилань?
  • За допомогою чого можна змінити кольори гіперпосилань?
  • Який атрибут вказує, де відкрити пов’язаний вебдокумент?
  • Які є значення в атрибута target?
  • Чи можна використовувати зображення в якості посилання?
  • Який атрибут визначає додаткову інформацію про елемент у вигляді підказки?
  • Для чого потрібні HTML-закладки?
  • Що потрібно вказати, щоб зробити закладку на вебсторінці?
  • Які посилання використовуються для переходу по сторінках в межах одного сайту?
  • Які посилання використовуються для переходу з одного сайту на інший?


Коментарі