HTML з нуля: як вставити посилання в HTML. Урок №6 Overcod.net

HTML з нуля: як вставити посилання в HTML. Урок №6

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

Що таке посилання в HTML?

Посилання в HTML – це елемент, що дозволяє користувачу перейти до іншої частини документа, іншого документа чи ресурсу. При натисканні на таке посилання здійснюється перехід.

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

Як вставити посилання в HTML-документ

Щоб створити посилання, використовується тег <a> із атрибутом href, який вказує шлях до ресурсу.

Приклад:

<a href="адреса_посилання">Текст посилання</a>

Важливо:

Адреса посилання має бути написана латиницею.
Закриваючий тег </a> є обов’язковим.

Приклад:

<a href="karta.html">Посилання на карту</a>

Практика: створення взаємопов’язаних сторінок

Створіть два HTML-документи:

1.html

<html>
<head>
<title>Моя перша HTML-сторінка на overcod.net</title>
</head>
<body>
<a href="2.html">Перейти на сторінку №2</a>
<p>Ласкаво просимо на мою першу сторінку на overcod.net.</p>
</body>
</html>

2.html

<html>
<head>
<title>Сторінка №2 на overcod.net</title>
</head>
<body>
<a href="1.html">Повернутися на сторінку №1</a>
<p>Це друга сторінка на overcod.net.</p>
</body>
</html>

Файли мають бути в одній папці.

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

Посилання на зовнішній сайт:

<a href="https://www.overcod.net">Перейти на мій блог</a>

Посилання на електронну пошту:

<a href="mailto:admin@overcod.net">Написати листа</a>

Посилання, що відкривається у новому вікні:

<a href="https://www.overcod.net" target="_blank">Відкрити у новому вікні</a>

Посилання для завантаження

Щоб користувач міг завантажити файл, додайте атрибут download:

<a href="file.zip" download>Завантажити архів</a>

Для зображень:

<a href="image.jpg" download>Завантажити зображення</a>

Картинка як посилання

Картинку можна зробити посиланням, розмістивши тег <img> всередині тега <a>:

<a href="https://www.overcod.net">
  <img src="image.jpg" alt="Картинка-посилання">
</a>

Підказка для посилання

Додайте атрибут title, щоб при наведенні з’являлася підказка:

<a href="https://www.overcod.net" title="Мій блог">Мій блог</a>

Зміна кольору посилань

Змінити кольори посилань можна через атрибути тега <body>:

<body link="#00FF00" alink="#FFFF00" vlink="#EEE9E9">
  <a href="1.html">Приклад посилання</a>
</body>

link – колір звичайного посилання.
alink – колір активного посилання (при натисканні).
vlink – колір відвіданого посилання.

Спробуйте самостійно реалізувати всі приклади на практиці. Підписуйтеся на оновлення мого блогу на overcod.net і не пропустіть нові уроки з HTML. Успіхів!