Гиперссылка (англ. hyperlink) в компьютерной терминологии — часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, директория, приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы этого объекта.
Гиперссылка может быть добавлена к любому элементу гипертекстового документа и обычно выделяется графически. В HTML-документах текстовые ссылки по умолчанию выделяются синим цветом, при наведении на них курсором мыши в окне браузера изменяются, например, меняют цвет или выделяются подчеркиванием. При навигации в браузере с помощью клавиатуры текстовые и графические ссылки выделяются прямоугольной пунктирной рамочкой. Посещенная ранее ссылка обычно выделяется цветом, отличным от цвета непосещенной ссылки.
«Битой» ссылкой называют такую гиперссылку, которая ссылается на отсутствующий по каким-либо причинам объект, например, если документ или файл удален или перемещен администратором ресурса, на котором он был расположен, или если сам ресурс недоступен. Обычно в таком случае на странице появляется сообщение с кодом ошибки, но это происходит не всегда.
Для создания ссылки необходимо сообщить браузеру, что является
ссылкой, а также указать адрес документа, на который следует сделать
ссылку. Оба действия выполняются с помощью тега <a>,
который имеет единственный обязательный атрибут href.
В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают
везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка.
Начинаются они с указания протокола передачи данных. Так, для веб-страниц это
обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно,
абсолютные ссылки начинаются с ключевого слова http://
(пример 1).
Пример 1. Использование абсолютных ссылок
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Абсолютная ссылка</title>
</head>
<body>
<p><a href="http://www.yandex.ru">Поисковая система Яндекс</a></p>
</body>
</html>Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.
/
Эти две ссылки называются неполные и указывают веб-серверу загружать
файл index.html (или default.html), который находится в корне сайта
или папке demo. Если файл index.html отсутствует, браузер, как правило,
показывает список файлов, находящихся в данном каталоге.
/demo/
/images/pic.gif
Слэш перед адресом говорит о том, что адресация начинается от корня
сайта. Ссылка ведет на рисунок pic.gif, который находится в папке
images. А та в свою очередь размещена в корне сайта.
../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше
в списке каталогов сайта.
manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде точек,
то она размещена внутри текущего каталога (пример 2).
Пример 2. Использование относительных ссылок
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Относительная ссылка</title>
</head>
<body>
<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
<p><a href="tip.html">Как сделать такое же фото?</a></p>
</body>
</html>Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html.
Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная
запись избыточна и ее можно сократить до file/doc.html.
Цвета ссылок задаются в качестве атрибутов тега <body>.
Атрибуты являются необязательными и если они не указаны используются
значения по умолчанию.
link — определяет цвет ссылок на веб-странице
(цвет по умолчанию синий, #0000FF).
alink — цвет активной ссылки. Цвет ссылки
меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный,
#FF0000.
vlink — цвет уже посещенных ссылок. Цвет
по умолчанию фиолетовый, #800080.
В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb,
где r, g и b обозначают соответственно красную, зеленую и синюю составляющую.
Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует
диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются
в одно число, перед которым ставится символ # (пример 3).
Пример 3. Задание цветов ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Цвет ссылок</title>
</head>
<body link="red" vlink="#cecece" alink="#ff0000" bgcolor="black">
<p><a href="content.html">Содержание сайта</a></p>
</body>
</html>Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.
По умолчанию, при переходе по ссылке документ открывается в текущем окне или
фрейме. При необходимости, это условие может быть изменено атрибутом target
тега <a>. Этот атрибут может принимать следующие
значения:
_blank — загружает страницу в новое окно браузера;
_self — загружает страницу в текущее окно;
_parent — загружает страницу во фрейм-родитель;
_top — отменяет все фреймы и загружает страницу в полном
окне браузера.
В примере 4 показано создание ссылки на сайт, который открывается в новом окне.
Пример 4. Открытие документа в новом окне
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Новое окно</title>
</head>
<body>
<p><a href="https://webref.ru" target="_blank">Ссылка открывает новое
окно на сайт webref.ru</a></p>
</body>
</html>Для создания валидного кода атрибут target может использоваться только при переходном
<!DOCTYPE>, как показано во всех примерах этой статьи.
Если на сайте используются фреймы, то в качестве значения target можно использовать имя фрейма
(пример 5).
Пример 5. Открытие документа во фрейме
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Открытие файла во фрейме</title>
</head>
<body>
<p><a href="https://webref.ru" target="newframe">Сайт webref.ru</a></p>
</body>
</html>Ссылка в примере 5 ведет на сайт webref.ru, открывающийся во фрейме с
именем newframe.
Когда у target указано неизвестное значение,
например, имя фрейма набрано с ошибкой, то это приводит к тому, что ссылка открывается
в новом окне.
Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом
окне, нет необходимости добавлять во все теги <a> target="_blank". Код
можно сократить,
если вначале страницы добавить строку <base target="_blank">,
как показано в примере 6
Пример 6. Использование тега <base>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Открытие файла во фрейме</title>
<base target="_blank">
</head>
<body>
<p><a href="1.html">Ссылка откроется в новом окне</a></p>
<p><a href="2.html" target="_self">Ссылка откроется в текущем окне</a></p>
</body>
</html>Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно,
если добавить к тегу <a> атрибут target="_self",
как показано в данном примере.
Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в
этом случае надо поместить между тегами <a>
и </a>, как показано в примере 7.
Пример 7. Создание рисунка-ссылки
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ссылка</title>
</head>
<body>
<p><a href="sample.html"><img src="images/sample.gif" width="50"
height="50" alt="Пример"></a></p>
</body>
</html>Атрибут href тега <a>
задает путь к документу, на который указывает ссылка, а src
тега <img> — путь к графическому файлу.
Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок.
Чтобы убрать рамку, следует для тега <img> использовать
стилевое свойство border (пример 8).
Пример 8. Удаление рамки вокруг изображения
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ссылка</title>
<style>
a img {
border: none; /* Убираем рамку */
}
</style>
</head>
<body>
<p><a href="sample.html"><img src="images/sample.gif" width="50"
height="50" alt="Пример"></a></p>
</body>
</html>Якорем называется закладка с уникальным именем на определённом месте веб-страницы, предназначенная для перехода к ней по ссылке. Якоря удобно применять в документах большого объёма, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей уникальное имя при помощи
атрибута id (пример 9). В имени допустимо писать русские, латинские буквы и символы, нельзя только
пробел. В качестве значения href для перехода к этому якорю используется значение id с
символом решётки (#) впереди.
Пример 9. Создание якоря
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Быстрый переход внутри документа</title>
</head>
<body>
<p id="top"></p>
<p>...</p>
<p><a href="#top">Наверх</a></p>
</body>
</html>
Имя ссылки на якорь начинается с решётки (#), после чего идёт имя якоря, оно выбирается любое, соответствующее
тематике. Главное, чтобы значения атрибутов id и href совпадали (символ решётки не в
счёт).
При щелчке по такой ссылке произойдёт переход к элементу в окне браузера.
С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.
Ссылку также можно сделать на якорь на другой веб-странице и даже на другом сайте. Для этого в атрибуте href элемента <a> надо указать полный адрес документа и в конце добавить символ решётки и имя якоря (пример 10)
Пример 10. Ссылка на закладку из другой веб-страницы
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Якорь в другом документе</title>
</head>
<body>
<p><a href="https://ru.wikipedia.org/wiki/HTML5#HTML_5.1">HTML 5.1</a></p>
</body>
</html>Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет. По этой причине решётку часто используют для пустых ссылок, когда ссылка нужна, но адрес пока не известен (пример 11) или нажатие обрабатывается программой на JavaScript.
Пример 11. Пустые ссылки
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>#</title>
</head>
<body>
<p><a href="#">О нас</a></p>
</body>
</html>