Понедельник, 21 Января 2013 14:47

Создание гиперссылки, тег а

Written by 
Оцени эту запись
(3 Голоса)

Тег <a> служит для создания ссылки на HTML странице. HTML - это гипертекстовый язык разметки. При этом гипертекстом является именно ссылка, которая позволяет связывать разные документы между собой. В теле ссылки может быть текст, картинка или более сложный контент. При помощи HTML ссылок делают меню, баннеры и просто связь между разными страницами. Ссылка является одним из самых основных элементов страницы, который позволяет сделать контент более удобным в использовании, задавая ссылку на источник информации или подробнее описание темы. В данной статье мы рассмотрим способ задания ссылки на HTML странице и ее основные атрибуты.   

 

Создание гиперссылки, тег аИсточник картинки - Depositphotos

Ссылка на HTML странице задается при помощи тега <a>. Тег <a> является не пустым, он должен иметь открывающий и закрывающий теги. Внутри тега a может быть текст или более сложный контент.

 

 

<a href="/">Home Page</a>

 

 

Пример HTML ссылки:

 

 

<a href="/">Ссылка на главную страницу Kate-Land</a>

 

Ссылка на главную страницу Kate-Land

 

 

Пример реализации картинки внутри ссылки:

 

 

<a href="/"><img src="/logo.png"></a>

 

 

 

Несколько замечаний по ссылке HTML:

 

  • ссылка не может содержать другую ссылку или элемент button
  • ссылка не должна содержать по умолчанию блочный элемент div, p, для этого можно использовать элементы span, b (блочное отображение можно добавить в CSS)
  • для удобства использования страницы, необходимо оформлять посещенные ссылки(:visited) и ссылки при наведении(:hover) - базовая стилизация ссылок

 

Атрибуты ссылки.

 

Для ссылки HTML доступны все универсальные атрибуты и некоторые собственные.

 

Основным и единственным обязательным атрибутом HTML ссылки является href, который указывает путь к документу, на который будет осуществлен переход при клике на ссылку. Путь, прописанный в атрибуте href, может быть абсолютным или относительным. Абсолютный путь используется для перехода на другой ресурс и его вид не зависит от используемого ресурса (везде будет одинаковым). Относительный путь используется для перехода на другую страницу того же ресурса и не будет работать на других

 

<a href="/html-css">Раздел HTML/CSS</a> /*относительный путь*/

<a href="http://kate-land.net">Главная страница Kate-Land</a> /*абсолютный путь*/

 

Атрибут title задает всплывающую подсказку, которая появляется при наведении на ссылку. 

 

<a href="http://kate-land.net" title="Главная страница Kate-Land">На главную</a>

 

Вот ссылка, при наведении на которую появится текст "Главная страница Kate-Land":

 

 

На главную

 

При наведении это выглядит так:

 

 

Данный атрибут не является обязательным, но очень желателен. Указывая у атрибуте title тега a информацию о прилинкованной странице, вы помогаете пользователю сориентироваться куда его приведет нажатие на ссылку и нужно ли ему на нее нажимать. В атрибуте title можно указывать название страницы, ее описание или цель перехода по ней.

 

Атрибут target позволяет указать окно, в котором нужно открыть ссылку. Значение _self  атрибута target открывает ссылку в текущем окне (по умолчанию), а значение _blank - в новом окне. Также есть значения _parent(открытие ссылки в родительском фрейме), _top (в главном окне, минуя все фреймы).

 

<a href="http://kate-land.net" title="Главная страница Kate-Land" target="_blank">На главную</a> /*ссылка откроется в новом окне*/

 

Атрибут tabindex определяет номер данной ссылки в последовательности перехода по активным элементам при нажатии на клавишу Tab. Если указать данный атрибут со положительным числовым значением, пользователь сможет попасть на ссылку, перемещаясь по элементам при помощи Tab'а, не используя при этом мышку. Это удобно для тех, кто привык в работе с HTML документом чаще пользоваться клавиатурой.

 

Атрибут hreflang со значением в виде кода языка, например "en", указывает язык текста на странице, путь на которую указан в атрибуте href HTML ссылки.

 

Атрибут rel задает взаимоотношения между текущим документом и тем, куда ведет ссылка. Может принимать значения - alternate, author, help, next и другие. Одно из часто используемых значений атрибута - nofollow. Он предназначен для поисковых систем, указывает что ссылка не должны влиять на показатели ТИЦ и PR.

 

Атрибут type указывает MiME-type документа, на который ведет ссылка.

 

Атрибут media указывает под какое устройство оптимизирован документ, путь на который указан в ссылке.

 

Есть еще несколько атрибутов, которые не поддерживаются в HTML5: charset(кодировка), coords(координаты ссылки), name(задает анкор), rev(противоположность rel), shape(форма ссылки). 

 

 

Псевдоклассы ссылки HTML

 

У ссылок есть несколько состояний - при наведении, активная, помещенная. Для стилизации данных состояний в CSS используются псевдоклассы.

 

  • a:active -- активная ссылка; ссылка становится активной при нажатии на нее (в момент клика на ссылку)
  • a:hover -- ссылка при наведении, когда курсор мыши находится над ссылкой
  • a:link -- еще не посещенные ссылки
  • a:visited -- посещенные ссылки
  • a:focus -- работает не только для ссылки; ссылка получает фокус, если пользователь переместился на нее по Tab'у, при помощи tabindex

 

Эти псевдоклассы задают стилизацию ссылки при соответствующий состояниях:

 

<a href="http://kate-land.net">Kate-Land</a>

<style>

a {

color: blue;

}

a:hover {

color: green;

}

a:visited {

color: red;

}

 

a:visited:hover {
 
color: yellow;
 
}

</style>

 

Результат:

 

 

Kate-Land

 

Хочу заметить, что при работе с определенным проектом вы наверняка будете часто посещать большую часть страниц и у вас все ссылки будут посещенными. 

 

 

Еще несколько слов о HTML ссылках

 

Ссылка HTML является строчным элементом, также ей свойственны синий цвет и подчеркивание, а курсор в виде "руки":

 

 

a:-webkit-any-link {

      color: -webkit-link; /*цвет синий, немного отличается в разных браузерах*/

      text-decoration: underline; /*подчеркивание ссылки*/

     cursor: auto; /*изменение вида курсора*/

}

 

Убрать подчеркивание можно при помощи стилей:

 

a {

      text-decoration: none;

}

 

Цвет ссылки меняется при помощи свойства color:

 

a {

       color: red;

}

 

Если ссылка лежит внутри блока, котором задано свойство color, то это свойство не будет влиять на ссылку. Для ссылки его нужно прописать отдельно:

 

div {

color: red; /*цвет текста блока*/

}

 

div a {

color: green; /*цвет ссылки в текстовом блоке, он должен отличаться от цвета текста*/

}

 

 

 

 

Ссылка на HTML странице может также вести на другую часть текущей страницы, для этого можно использовать анкоры. Нужно сделать два элемента - элемент, на который будет осуществлен переход, и саму ссылку. Подобным образом обычно реализуют ссылку "Наверх" - Реализация перехода наверх страницы

 

Иногда ссылки используют для создания активных элементов, при клике на которые происходят некоторые действия(анимация, всплывающее окно, закрывание блока), но нет перехода на другую страницу. Этот подход не правильный с точки зрения семантики. Но если вы все таки решили использовать такой способ, то ссылку нужно сделать неактивной.

 

Ссылки важны не только для удобства пользователей. Они очень активно используются для раскрутки сайта. Поисковые системы учитывают количество ссылкой с текущей страницы и на нее. Чем больше ссылок на страницу, тем больше ее вес, тем больше к ней доверия со стороны поисковых систем и тем выше она находится в поисковой выдаче. Чем больше ссылок на текущую страницу и чем меньше ссылок с нее, тем выше PR(PageRank) страницы. Чтобы ссылки со страницы не оказывали негативное влияние на PR, ссылкам ставят атрибут rel="nofollow". Это особенно актуально для форумов и других ресурсов, где пользователи могут сами добавлять на страницу информацию.

 

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов