Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Виды гиперссылок и их свойства

Гиперссылка представляет собой объект, в который встроен URL-редирект на определенный адрес / файл. В качестве объекта может использоваться обычный текст (так чаще всего и происходит), а также картинки, кнопки или что-то другое. В роли файла обычно выступает HTML-страница. Кроме того, ссылка может вести на файл с произвольным расширением, к примеру, на архив ZIP и др.

Виды гиперссылок и их свойства

Как было сказано выше, в подавляющем большинстве случаев гиперссылка – это текст со встроенным редиректом на определенную HTML-страницу. В таком виде гиперссылки используются для создания внутренней и внешней перелинковки сайтов, навигационной системы и в других целях. Довольно часто гиперссылки используют для скачивания файлов и указания кликабельных email-адресов.

Для создания гиперссылки используется HTML-элемент «a». Сама конструкция выглядит следующим образом:

текст ссылки

Гиперссылка может быть внешней и внутренней по отношению к какому-то конкретному сайту. Внешние гиперссылки ведут на страницы (или файлы) другого ресурса (с другим доменным именем), внутренние – на страницы этого же (внутренняя перелинковка). При этом внутренняя гиперссылка может указывать не только на конкретный файл, но и на конкретное место в этом файле (абзац, заголовок, блок и т.д.). Для этого необходимо присвоить блоку CSS-идентификатор, а в атрибуте href ссылки вместо стандартного адреса указать #id. Такой метод называют якорем. Безо всяких дополнительных скриптов, установленных на сайте, фокус к якорю будет перемещаться мгновенно, резким рывком, что выглядит не очень эстетично. Именно поэтому есть смысл организовать плавную прокрутку до якоря.

Выше было сказано, что ссылку можно вставить в любое изображение на странице. Помимо обычных изображений можно использовать так называемую графическую карту – картинку, поделенную на участки, в каждый из которых встраивается ссылка. Такая организация изображений называется CSS-спрайтом. Мы уже как-то поднимали эту тему в одной из прошлых статей. Он немного усложняет процесс разработки сайта, зато главным преимуществом является сокращение числа обращений к серверу (все необходимые для верстки иконки собраны в одном изображении, которое собственно и называется спрайтом).

Гиперссылка может быть рабочей и нерабочей. В первом случае адрес, указанный в атрибуте href, загружается без каких-либо ошибок (либо с некритичными ошибками). Во втором случае документ в силу ряда причин не загружается при нажатии на ссылку. Это может происходить из-за ошибок в записи адреса, а также из-за проблем на стороне внешнего сайта (куда ведет ссылка). К примеру, страница или файл были удалены / сменили адрес на другой без редиректа 301 и т.д.

Что касается состояний гиперссылки, то их может быть несколько.

  1. Обычное состояние. Подразумевается, что ссылка еще не использовалась. Для описания этого состояния используется CSS-псевдокласс link (a:link) (или просто без псевдокласса). По умолчанию такая ссылка в браузере отображается синим цветом.
  2. Состояние наведения. Подразумевается, что на ссылку наведен курсор мыши (она находится под ним). Здесь используется псевдокласс hover (a:hover). По умолчанию ссылка имеет синий цвет, но у нее убирается нижнее подчеркивание.
  3. Состояние клика. Подразумевается, что по ссылке был совершен клик мышкой, но кнопка нажатия еще не отпущена. Используется псевдокласс active (a:active). По умолчанию ссылка имеет красный цвет.
  4. Посещенное состояние. Подразумевается, что в течение недавнего времени эту ссылку уже нажимали. Используется псевдокласс visited (a:visited). По умолчанию ссылка имеет фиолетовый цвет.

При помощи CSS можно детально настроить стили для каждого состояния ссылки и при этом лучше придерживаться классических цветов, которые понятны пользователям на интуитивном уровне. Типичный CSS для всех состояний ссылок на сайте может выглядеть, например, так:

a {
	text-decoration: underline;
	color:#0000ee;
}
a:hover {
	text-decoration: none;
	color:#cc0000;
}
a:active {
	text-decoration: none;
	color:#ff0000;
}
a:visited {
	text-decoration: underline;
	color:#551a8b;
} 

В данном свойства идут по порядку, согласно логике:

  1. сначала человек наводит курсор мышки на ссылку;
  2. ссылка при этом становится активной и меняет свои свойства;
  3. после этого совершается клик левой кнопкой мышки и ссылка опять меняет свойства;
  4. с тех пор, как ссылка была посещена, браузер на какое-то время это запомнит и будет применять к ней стили посещенной.

Подобное цветовое разделение позволяет заметно улучшить юзабилити. Ведь пользователю будет гораздо проще распознать ссылку на странице, определить, наживается ли она, и понять, переходил ли он по ней раньше.

Отдельно стоит отметить еще несколько моментов:

Вес по ссылке можно запретить передавать при помощи специального атрибута rel, например:

текст ссылки

Данная конструкция используется для того, чтобы не разбазаривать авторитетность ресурса налево и направо. Например, вы составляете рейтинг из самых худших сайтов рунета или же приводите перечень опасных для пользователей сайтов. В данном случае будет не лишним использовать атрибут rel, чтобы поисковые системы не поняли вас неправильно.

Ссылку можно открывать и в новом окне, для этого используется специальный атрибут target, например так:

текст ссылки

Такая ссылка откроется в новом окне. Иногда (очень редко) есть смысл это делать, но в большинстве случаев, создавать новую вкладку, а то и копию браузера, не спросясь при этом у самого пользователя, является очень плохим тоном. Данную проблему мы довольно подробно обсуждали в статье, носящей слегка философский характер, которая так и называется «Ссылка откроется в новом окне».





Предыдущая статья:
Похожие статьи на WordPress — плагин Related Posts

Читайте также:
Графический контент как антиреклама бизнес-сайта

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»