Ссылки (или гиперссылки) пронизывают Интернет как кровеносные сосуды. Не будь ссылок – не было бы Интернета.
Как создать ссылку в HTML документе и правильно прописать её атрибуты, что такое URL и как Поисковые Системы относятся к ссылкам – в этом очередном уроке для начинающих изучать HTML.
URL или «адрес» страницы в Интернет
Каждый HTML документ в Сети имеет свой «точный адрес». Его называют «УРЛом», от англ. URL — Uniform Resource Locator
Структура URL часто видна в адресной строке браузера. Он включает в себя:
- Название протокола – http:// или https://
- Домен сайта,
- папка или путь к папке, где этот документ находится,
- Имя файла (может быть не всегда).
Благодаря такому «точному адресу» и стало возможным ссылаться на этот документ из текста другого документа.
Тег <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 – целая история. Есть ещё целый ряд его значений, но все они используются сегодня крайне редко.
Это потому, что они предназначены для работы с сайтом на фреймах, ныне не популярных и, с приходом HTML5, уходящими в прошлое.
Заголовок ссылки. Атрибут title для тега <A>
Ещё один полезный атрибут — title="Текст, поясняющий куда ведёт эта ссылка"
Синтаксис:
<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="всплывающая подсказка">это - ссылка с подсказкой</a>
Как видите, браузер выводит его как всплывающую подсказку. А ещё, его учитывают и поисковые системы.
Атрибут гиперссылки 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>
Переход будет точно к этому месту, т.е. браузер поместит это место в своей верхней видимой части.
Часто, в длинных документах, в самом низу ставят такую ссылку «Наверх».
… совершив путешествие по миру ароматных зерен, нашли самые высококачественные из тех, которыми славятся Африка, Азия, Центральная и Южная Америка . Поэтому сегодня в кофейнях бренда Coffee bean вы встретите лучшие кофейные сорта от признанных мировых производителей.
? Наверх ?
Из другого документа можно также выйти к этому месту, если добавить в конце 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;}
Это указание сделать нулевую толщину бордюра у всех ссылок-картинок.
Продолжение
В следующем посте, я расскажу о почтовых ссылках, их атрибутах и методах «предохранения» от злобных спамеров 🙂