Урок №15. HTML. Посилання

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як зробити посилання на веб-сайті?

Посилання знаходяться майже на всіх веб-сторінках. Посилання дозволяють користувачам натискати їх і переходити від сторінки до сторінки.

HTML-посилання - гіперпосилання

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

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


HTML-посилання - синтаксис

HTML посилання визначаються тегом <a>:

<a href="url">link text</a>

Приклад:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Спробуйте самі! »

Атрибут href визначає адресу призначення (https://www.w3schools.com/html/) посилання. Текст посилання є видимою частиною (Visit our HTML tutorial). Натиснувши на текст посилання, вас відішле на вказану веб-адресу.

Локальні посилання

У наведеному вище прикладі використано абсолютну URL-адресу (повну веб-адресу). Локальне посилання (посилання на той самий веб-сайт) вказано з відносним URL (без https://www....).

Приклад:

<a href="html_images.asp">HTML Images</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:

This is a link

Приклад:

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


HTML-посилання - атрибут target

Атрибут target (пер. - ціль, мета) визначає, де відкривати пов'язаний документ.

Атрибут target може мати одне з таких значень:

Цей приклад відкриє пов'язаний документ у новому вікні / вкладці веб-браузера:

Приклад:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Спробуйте самі! »

Порада. Якщо веб-сторінка заблокована у фреймі, ви можете скористатися target="_top", щоб вийти з фрейму:

Приклад:

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
Спробуйте самі! »

HTML-посилання - зображення як посилання

Зазвичай зображення використовуються як посилання:

Приклад:

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Спробуйте самі! »

Примітка: border: 0; додається, щоб запобігти відображенню рамки навколо зображення в IE9 (і раніших версіях) (коли зображення є посиланням). Хоча для інших сучасних браузерів даний параметр не потрібен.


HTML-посилання - атрибут title

Атрибут title визначає додаткову інформацію про елемент. Ця інформація найчастіше відображається як текст-підказка, коли мишка переміщується над елементом (наприклад, над посиланням).

Приклад:

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
Спробуйте самі! »

HTML-посилання - Створення закладки

HTML закладки (bookmark) використовуються для того, щоб читачі могли переходити до певних частин веб-сторінки. Закладки можуть бути корисними, якщо ваша веб-сторінка дуже довга. Щоб створити закладку, спочатку потрібно створити закладку, а потім додати посилання на неї. Коли посилання буде натиснуто, сторінка прокрутиться до необхідного місця за допомогою закладки.

Приклад

Спочатку створіть закладку з атрибутом 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://www.w3schools.com/html/default.asp">HTML tutorial</a>
Спробуйте самі! »

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

<a href="/html/default.asp">HTML tutorial</a>
Спробуйте самі! »

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

<a href="default.asp">HTML tutorial</a>
Спробуйте самі! »

Примітка: Докладніше про шляхи файлів ви можете прочитати в розділі Шляхи до HTML файлів.


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


Перевірте себе вправами!


HTML теги посилання

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

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.