Как создать ссылку в HTML-документе. Тег A – его синтаксис и атрибуты

Ссылки (или гиперссылки) пронизывают Интернет как кровеносные сосуды. Не будь ссылок – не было бы Интернета.

Как создать ссылку в HTML документе и правильно прописать её атрибуты, что такое URL и как Поисковые Системы относятся к ссылкам – в этом очередном уроке для начинающих изучать HTML.

URL или "адрес" страницы в Интернет

Каждый HTML документ в Сети имеет свой "точный адрес". Его называют "УРЛом", от англ. URL — Uniform Resource Locator

Структура URL часто видна в адресной строке браузера. Он включает в себя:

1. Название протокола – http:// или https://
2. Домен сайта,
3. папка или путь к папке, где этот документ находится,
4. Имя файла (может быть не всегда).

Благодаря такому "точному адресу" и стало возможным ссылаться на этот документ из текста другого документа.

Тег <A> и его базовый синтаксис

Надеюсь, слово "синтаксис" вас уже не пугает

<a href="http://domen-saita.ru/papka-na-servere/dokument.html">текст
 ссылки</a>

Как видите, после начала тега <A>, должен идти обязательный атрибут  href, который задаёт адрес документа, на который следует перейти.

Внутри самого тега-контейнера <A> стоит текст (хотя может быть и картинка), который и является текстом ссылки. Его ещё называют "Анкор" или просто - Якорь.

Абсолютная и относительная ссылка

В примерах выше, были использованы абсолютные ссылки. Такие, которые содержат полный URL документа.

В некоторых случаях, атрибут href не содержит полного URL с названием протокола и домена сайта. Если документ, на который ведёт ссылка, находится на том же сайте – можно использовать относительную ссылку, ведущую от того места, где находится сам документ.

Схема, когда применена относительная ссылка

Пример: ссылка из документа first.html ведёт на файл second.html, который находится в папке news

Относительная ссылка на каталог, уровнем выше текущего

Код:

<a href="../first.html">это - относительная ссылка на файл
 в каталоге, уровнем выше</a>

Эта ссылка ведёт на файл first.html в "родительском" каталоге, т.е. на один уровень выше.

Сочетание ../ указывает на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка.

Атрибуты тега <A>. Как открыть документ по ссылке в новом окне

Для того, что бы документ по ссылке открывался в новой вкладке браузера, нужно использовать атрибут target="_blank"

Атрибут ссылки target="_blank"

Не злоупотребляйте им. Не нужно делать внутренние ссылки сайта с этим атрибутом. Пользователя будут раздражать "плодящиеся окна".

Вообще, с этим атрибутом target – целая история. Есть ещё целый ряд его значений, но все они используются сегодня крайне редко.

Это потому, что они предназначены для работы с сайтом на фреймах, ныне не популярных и, с приходом HTML5, уходящими в прошлое.

Заголовок ссылки. Атрибут title для тега <A>

Ещё один полезный атрибут - title="Текст, поясняющий куда ведёт эта ссылка"

Синтаксис:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"
 title="всплывающая подсказка">это - ссылка с подсказкой</a>

Как видите, браузер выводит его как всплывающую подсказку. А ещё, его учитывают и поисковые системы.

Подсказка из атрибута для ссылки title

Атрибут гиперссылки nofollow. Запрет передачи "траста" сайта по ссылке

Есть ещё один неоднозначный атрибут для ссылок rel="nofollow"

Он говорит Поисковым Системам, что документ по ссылке, возможно, не заслуживает доверия. При этом показатели доверия ("траста") с сайта Источника, не передаются на сайт по ссылке.

Тема о "трасте" и ссылочном ранжировании ещё впереди, но если коротко, то "участь" сайтов в ВЫДАЧЕ Поисковых Систем зависит также и от количества ссылок, ведущих на этот сайт. Чем их больше, чем более авторитетные сайты ссылаются – тем больше доверие к сайту по ссылке.

В некоторых случаях, стоит "экранировать" ссылки этим атрибутом. Например, если вы пишите отрицательный отзыв о каком-либо сервисе.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow">плохой сайт</a>

Внутренняя ссылка или якорь внутри документа

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

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

При создании такого якоря вместо атрибута href используют атрибут name

Синтаксис при создании якоря:

<a name="top"></a>

При создании ссылки, в конце URL добавляют через знак # – имя "якоря":

<p><a href="#top">Наверх</a></p>

Переход будет точно к этому месту, т.е. браузер поместит это место в своей верхней видимой части.

Часто, в длинных документах, в самом низу ставят такую ссылку "Наверх".

Из другого документа можно также выйти к этому месту, если добавить в конце URL через знак #имя_якоря

<a href="http://domen-saita.ru/dokument.html#top">текст ссылки ведёт
 к якорю "top" в этом документе</a>

Якорь ссылки – картинка

Ссылкой может быть и любая картинка.

Код:

<a href="http://sait.ru/dokument.html"><img src=kartinka.jpg"
width="100" height="131" /></a>

По умолчанию, ссылки подчёркиваются браузером сплошной синей чертой, а ссылки-картинки приобретают синюю рамку.

Ссылки-картинки приобретают синюю рамку

Что бы избавится от неё – в файл CSS для сайта добавляют простое правило:

a {border: 0px;}

Это указание сделать нулевую толщину бордюра у всех ссылок-картинок.

Продолжение

В следующем посте, я расскажу о почтовых ссылках, их атрибутах и методах "предохранения" от злобных спамеров

Метки: , HTML, обучение | Рубрика: Новичку

Оставьте свой комментарий