Изучаем гиперссылки

В данном уроке мы рассмотрим, как на сайте создавать разные виды гиперссылок и как стилизовать их внешний вид с помощью псевдоклассов в css.

Скачать код из урока. Скачиваемый файл находится в архиве. Для использования – распакуйте его с помощью любой программы архиватора.

Краткий конспект урока:

Тег <a> является одним из важных элементов HTML и предназначен для создания гиперссылок.

href – атрибут HTML тега <a>, задает адрес документа, на который следует перейти. В качестве значения используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным (например, https://ya.ru) и относительным (например, /second.html). Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

title - атрибут HTML тега <a>, добавляет всплывающую подсказку к тексту ссылки.

<a href="https://ya.ru">Яндекс</a> - в примере ссылка ведет на страницу ya.ru, по протоколу https, а на странице сайта отображается текст ссылки: Яндекс.

<a href="/second.html#ancor123">Якорь</a> - пример анкорной (якорной ссылки). Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. Закладка указывается как id – элемента. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Про протоколы передачи данных:

HTTP (Hyper Text Transfer Protocol) — это протокол, позволяющий получать различные ресурсы, например HTML-документы. Протокол HTTP лежит в основе обмена данными в Интернете. HTTP является протоколом клиент-серверного взаимодействия, что означает инициирование запросов к серверу самим получателем, обычно веб-браузером.

HTTPS (Hyper Text Transfer Protocol Secure) — это расширение протокола HTTP. Оно позволяет существенно снизить риск перехвата персональных данных посетителей (логины, пароли, номера банковских карт и т. д.), а также избежать подмены контента, в том числе рекламы, при загрузке сайта.

FTP (File Transfer Protocol) — протокол передачи файлов.

Псевдоклассы, применяемые в CSS для стилизации состояний элементов:

:hover - определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

:active - определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

:visited - применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.