Ссылки, которые представлены элементом <a></a>, играют важную роль - они обеспечивают навигацию между отдельными документами. Этот элемент имеет следующие атрибуты:
href
: определяет адрес ссылки
hreflang
: указывает на язык документа, на который ведет данная ссылка
media
: определяет устройство, для которого предназначена ссылка
rel
: определяет отношение между данным документом и ресурсом, на который ведет ссылка
target
: определяет, как документ по ссылке должен открываться
type
: указывает на mime-тип ресурса по ссылке
Наиболее важным атрибутом является href
:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ссылки</title> </head> <body> <a href="content.html">Учебник по HTML5</a> </body> </html>
Здесь для ссылки используется относительный путь content.html. То есть в одной папке с данным документом должен находиться файл content.html, на который будет идти переход по нажатию на ссылку.
Также мы можем использовать абсолютные пути с полным указанием адреса:
<a href="http://metanit.com/web/html5/">Учебник по HTML5</a>
И также мы можем задать внутренние ссылки, которые будут переходить к определенным блокам внутри элементов:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Внутренние ссылки</title> </head> <body> <a href="#paragraph1">Параграф 1</a> | <a href="#paragraph2">Параграф 2</a> | <a href="#paragraph3">Параграф 3</a> <h2 id="paragraph1">Параграф 1</h2> <p>Содержание параграфа 1</p> <h2 id="paragraph2">Параграф 2</h2> <p>Содержание параграфа 2</p> <h2 id="paragraph3">Параграф 3</h2> <p>Содержание параграфа 3</p> </body> </html>
Чтобы определить внутреннюю ссылку, указывается знак решетки (#), после которого идет id того элемента, к которому надо осуществить переход. В данном случае переход будет идти к заголовкам h2.
По умолчанию ресурсы, на которые ведут ссылке, открываются в том же окне. С помощью атрибута target можно переопределить это действие. Атрибут target может принимать следующие значения:
_blank
: открытие html-документа в новом окне или вкладке браузера_self
: открытие html-документа в том же фрейме (или окне)_parent
: открытие документа в родительском фрейме, если ссылка расположена во внутреннем фрейме_top
: открытие html-документа на все окно браузераframename
: открытие html-документа во фрейме, который называется framename (В данном случае framename - только пример, название фрейма может быть произвольным)Например, открытие документа по ссылке в новом окне:
<a href="http://metanit.com/web/html5/" target="_blank">Учебник по HTML5</a>
Значение _blank
как раз и указывает браузеру, что ресурс надо открыть в новой вкладке.
По умолчанию ссылка уже имеет некоторый цвет (один из оттенков синего), кроме того она имеет подчеркивание. При нажатии на ссылку она становится активной и приобретает красный цвет, а после перехода по ссылке эта ссылка может окраситься в другой цвет (как правило, в фиолетовый). Подобная стилизация задается многими браузерами по умолчанию, но мы можем ее переопределить. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ссылки</title> <style> a:link {color:blue; text-decoration:none} a:visited {color:pink; text-decoration:none} a:hover {color:red; text-decoration:underline} a:active {color:yellow; text-decoration:underline} </style> </head> <body> <a href="index.html">Учебник по HTML5</a> </body> </html>
Здесь определены стили для ссылок в различных состояниях. a:link
применяется для ссылок в обычном состоянии, когда они не нажаты и на них не наведен указатель мыши.
a:visited
указывает на состояние ссылки, по которой уже был осуществлен переход.
a:hover
указывает на состояние ссылки, на которую навели указатель мыши.
a:active
указывает на ссылку в нажатом состоянии.
Стиль color
устанавливает цвет ссылки. А стиль text-decoration
устанавливает подчеркивание: если значение underline
, то ссылка поддчеркнута,
если none
, то подчеркивание отсутствует.
Поместив внутрь элемента <a>
элемент <img>
, можно сделать ссылку-изображение:
<a href="index.html"> <img src="cover.png" alt="HTML tutorial"> </a>