Ссылки HTML
Ссылки встречаются почти на каждой веб-странице. Они позволяют пользователям переходить кликами с одной страницы на другую.
Ссылки HTML - Гиперссылки
Ссылки HTML — это гиперссылки. Вы кликаете по ссылке, чтобы перейти к другому документу, а когда вы наводите мышь на ссылку, указатель превращается в маленькую руку.
Примечание: Ссылка не обязательно должна быть текстом. Это может быть изображение или любой другой элемент HTML.
Ссылки HTML - Синтаксис
Тег <a> определяет гиперссылку. Его самый важный атрибут — href, задающий назначение ссылки. Текст ссылки — это видимая часть, по которой читатель кликает, чтобы перейти по этому адресу.
По умолчанию непосещённая ссылка подчёркнута и синяя, посещённая — подчёркнута и фиолетовая, а активная — подчёркнута и красная.
Совет: Ссылки можно оформить с помощью CSS так, чтобы они выглядели иначе.
Пример
Ссылка на PromptCookbook.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовая ссылка</title>
</head>
<body>
<a href="https://prompt-cookbook.com">Посетите PromptCookbook!</a>
</body>
</html>
Синтаксис ссылки
Форма гиперссылки.
<a href="url">link text</a>
Ссылки HTML - атрибут target
По умолчанию ссылка открывается в текущем окне. Атрибут target меняет то, где открывается связанный документ. Его значения: _self (по умолчанию, то же окно или вкладка), _blank (новое окно или вкладка), _parent (родительский фрейм) и _top (всё окно).
Пример
Ссылка, открывающаяся в новой вкладке с target="_blank".
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Открытие в новой вкладке</title>
</head>
<body>
<a href="https://prompt-cookbook.com" target="_blank">Посетите PromptCookbook!</a>
</body>
</html>
Абсолютные URL и относительные URL
Абсолютный URL — это полный веб-адрес, например https://www.w3.org/. Относительный URL указывает на страницу в пределах того же сайта и опускает часть https://www.
Пример
Страница как с абсолютными, так и с относительными ссылками.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Абсолютные и относительные URL</title>
</head>
<body>
<h2>Абсолютные URL</h2>
<p><a href="https://www.linkedin.com">Linkedin</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Относительные URL</h2>
<p><a href="PromptCookbook.jpg">Изображения HTML</a></p>
<p><a href="/html/html-intro">Учебник по HTML</a></p>
</body>
</html>
Ссылки HTML - использование изображения как ссылки
Чтобы использовать изображение как ссылку, поместите тег <img> внутрь тега <a>.
Пример
Изображение, работающее как ссылка.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ссылка-изображение</title>
</head>
<body>
<a href="https://prompt-cookbook.com">
<img src="/sites/default/files/html/HtmlLinks/smiley.gif" alt="Учебник по HTML" style="width:42px;height:42px;">
</a>
</body>
</html>
Ссылка на адрес электронной почты
Используйте mailto: внутри href, чтобы создать ссылку, открывающую почтовую программу пользователя с новым сообщением.
Пример
Ссылка, начинающая новое письмо.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ссылка для email</title>
</head>
<body>
<a href="mailto:someone@example.com">Отправить письмо</a>
</body>
</html>
Кнопка как ссылка
Чтобы кнопка вела себя как ссылка, добавьте немного JavaScript, который запускается при нажатии кнопки и меняет местоположение страницы.
Пример
Кнопка, переходящая как ссылка при нажатии.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кнопка как ссылка</title>
</head>
<body>
<button onclick="document.location='https://prompt-cookbook.com'">Учебник по HTML</button>
</body>
</html>
Заголовки ссылок
Атрибут title даёт дополнительную информацию об элементе, обычно показываемую как всплывающая подсказка при наведении мыши.
Пример
Ссылка со всплывающей подсказкой из её атрибута title.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовок ссылки</title>
</head>
<body>
<a href="https://prompt-cookbook.com" title="Перейти к разделу HTML на PromptCookbook">Посетите наш учебник по HTML</a>
</body>
</html>
Подробнее об абсолютных и относительных URL
Можно ссылаться полным URL, путём относительно домена или путём относительно папки текущей страницы.
Полный URL
Ссылка с использованием полного веб-адреса.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Полная ссылка</title>
</head>
<body>
<a href="https://prompt-cookbook.com">Учебник по HTML</a>
</body>
</html>
Относительно домена
Ссылка на страницу в папке html текущего сайта.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Домен ссылки</title>
</head>
<body>
<a href="/html/html-intro">Учебник по HTML</a>
</body>
</html>
Та же папка
Ссылка на страницу в той же папке.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Папка ссылки</title>
</head>
<body>
<a href="/html/html-intro">Учебник по HTML</a>
</body>
</html>
Итоги главы
Подведём итог: используйте элемент <a>, чтобы создать ссылку, атрибут href, чтобы задать её адрес, и атрибут target, чтобы задать, где она открывается. Поместите <img> внутрь <a>, чтобы использовать изображение как ссылку, и используйте mailto: в href, чтобы открыть почтовую программу пользователя.
Теги ссылок HTML
Основной тег здесь — <a>, который определяет гиперссылку.