HTML тег ссылки
Танцуй так, как будто на тебя никто не смотрит. Пой, как будто тебя никто не слышит. Люби так, как будто тебя никогда не предавали, и живи так, как будто земля — это рай.
26-октября-2023, 21:44 9 0
Всем привет продолжаем не лёгкое дело по наполнению сайта. Сегодня мы поговорим о ссылках в HTML. Постараюсь объяснять просто и доходчиво . Поехали , начнем с примера как выглядит сама ссылка в html.
Пример ссылки в HTML
<a href="https://lenger.kz/">Посетите веб справочник</a>
Определение и использование
Элемент <a> (в переводе с англ. anchor — якорь) предназначен для создания ссылок, которая используется для связи одной страницы с другой. Самым важным атрибутом элемента <a> является атрибут href, указывающий место назначения ссылки. Адрес ссылки может быть абсолютным и относительным. Абсолютные ссылки - это те адреса которые указывают на полный путь к файлу, документу , картинке.
https://lenger.kz/
Относительные ссылки - это те адреса которые построены относительно корня сайта.
/html
По умолчанию во всех браузерах ссылки будут выглядеть следующим образом:
- Непосещенная ссылка подчеркнута и синего цвета.
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет.
- Активная ссылка подчеркнута и красна.
Соответственно оформление ссылок можно переопределить с помощью CSS.
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <a> со следующими значениями по умолчанию:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}Атрибуты элемента <a>
| Атрибуты | Значения | Описание |
|---|---|---|
| download | filename | Предлагает скачать указанный по ссылке файл |
| href | URL | Задаёт адрес документа |
| hreflang | language_code | Идентифицирует язык текста по ссылке |
| media | media_query | Указывает, для какого носителя / устройства оптимизирован связанный документ. |
| ping | list_of_URLs | Определяет разделенный пробелами список URL-адресов, на которые при переходе по ссылке браузером (в фоновом режиме) будут отправляться запросы на публикацию с основным пингом. Обычно используется для отслеживания. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url | Указывает, какую информацию о реферере следует отправить со ссылкой |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Определяет связь между текущим документом и связанным документом |
| target | _blank _parent _self _top | Указывает, где открыть связанный документ |
| type | media_type | Указывает MIME-тип документа, на который ведёт ссылка |
Примеры
Как использовать изображение в качестве ссылки:
<a href="https://lenger.kz/"> <img border="0" src="путь к картинке" width="100" height="100"> </a>
Как открыть ссылку в новом окне браузера:
<a href="https://lenger.kz/" target="_blank">Посетите наш ресурс</a>
Как сделать ссылку на адрес электронной почты:
<a href="mailto:someone@example.com">Отправить email</a>
Как привязать к номеру телефона:
<a href="tel:+4733378901">+47 333 78 901</a>
Как сделать ссылку на другой раздел на той же странице:
<a href="#section2">Go to Section 2</a>
Как сделать ссылку на jаvascript:
<a href="jаvascript:alert('Hello World!');">Execute jаvascript</a>
