Интернет, компьютеры, софт и прочий Hi-Tech

Подписаться через RSS2Email.ru

Тег <a> — ссылки в HTML

Всемирная паутина совершенно немыслима без ссылок. Вернее, гиперссылок, если обозначать данное понятие скрупулёзно, с соблюдением формальностей. Впрочем, формальности нас интересуют меньше всего. Наша задача — разобраться со вставкой ссылок, например, в блог, который вы ведёте. Ну кто же не хочет, чтобы в статьях всё было оформлено правильно и качественно, правда? Значит, будем осваивать азы.

Структура гиперссылки в формате HTML

Структура чрезвычайно проста и состоит из следующих элементов:

  1. тег <a>, где наличие латинской буквы «a» обязательно, сколько бы внутри угловых скобок ни было элементов, отделённых пробелами;
  2. текст ссылки, он же «якорь», он же «анкор» (от английского «anchor»);
  3. закрывающий тег </a>, устанавливаемый сразу же после текста ссылки (то бишь, после «якоря»).

Как известно, пояснения должны быть как можно более наглядными, поэтому переходим к примерам.

Просто ссылка

Самая что ни есть простая и непритязательная ссылка выглядит следующим образом:

<a href="http://xbb.uz">
    Интернет, компьютеры, софт и прочий Hi-Tech
</a>

Здесь мы видим «якорь», содержащий слова «Интернет, компьютеры, софт и прочий Hi-Tech», а также тег <a>, внутри которого через пробел указан атрибут href. Тоже, кстати, обязательный. Знак равенства означает, что данному атрибуту присваивается некое значение.

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

Если когда-нибудь попытаетесь создать собственный сайт, то знайте, что можно всегда использовать только абсолютные гиперссылки (по крайней мере, пока не наберётесь опыта). Так точно ни в чём не запутаетесь.

Ссылки, ведущие на другие сайты, называются внешними. Естественно, таковые являются абсолютными в любом случае.

Открытие в новом окне

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

Да и не каждый веб-мастер стремится отправить посетителя на другой сайт окончательно. Ибо не факт, что человек потом найдёт дорогу обратно.

В общем, открытие гиперссылки в новой вкладке даже левым кликом бывает оправданным. Реализуется вставкой в тег <a> атрибута target со значением _blank:

<a href="http://xbb.uz" target="_blank">
    Интернет, компьютеры, софт на сайте xBB.uz!
</a>

Теперь обычный левый клик откроет страницу в новой вкладке, оставив доступной прежнюю.

Всплывающий заголовок

Давайте кое-что добавим к HTML-коду:

<a href="http://xbb.uz" target="_blank" title="Сайт xbb.uz">
    Интернет, компьютеры, софт и всякие плюшки!
</a>

Проявили наблюдательность? Нет? Тогда подсказываем: добавлен атрибут title. Ему присвоено значение "Сайт xbb.uz". Теперь, если пользователь уже навёл на ссылку указатель, но ещё сомневается, имеет ли смысл кликать, через секунду выскочит подсказка с текстом из этого самого значения. Уже точно не перепутает, нажмёт куда надо.

Шлагбаум против поисковых роботов

Бывают такие ситуации, когда нужно запретить поисковым роботам переходить по ссылкам, размещённым на веб-странице. В подобных случаях в тег <a> вставляется атрибут rel со значением nofollow. Вот так:

<a href="http://yandex.ru" rel="nofollow">Яндекс</a>

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

К тому же, «якорь» гиперссылки всё равно будет индексироваться поисковиками как обычный текст.

Ссылка-картинка

Все ссылки, приведенные выше, являются текстовыми. Однако вы наверняка неоднократно замечали, что таковыми могут быть и картинки. Всяческие фотографии, рисунки и прочая графика. Сие осуществляется очень просто: достаточно в качестве «якоря» применить тег img, служащий для вставки в веб-страницы изображений. Примерно так:

<a href="http://yandex.ru"><img src="picture.jpg"></a>

Причём, значение атрибута src — это по сути то же самое, что и значение href, но исключительно для графики. Получается либо относительная ссылка, загружающая в браузер графический файл с вашего сайта, либо абсолютная, берущая картинку с другого ресурса (так ставятся счётчики посещений и баннеры, так размещаются в блогах изображения с фотохостингов).

Резюмируем

Ваши вопросы могут быть такими: зачем вышеизложенные знания нужны человеку, который не собирается становится веб-мастером? Пусть это всего лишь азы, но каково их практическое применение?

Если раньше для добавления записей в блог вы использовали только визуальный редактор, то теперь сможете попробовать расширенные возможности — включить режим HTML. И вставить в тег <a> именно те атрибуты, которые сочтёте нужными.

Кроме того, понимая код, гораздо легче и быстрее редактировать гиперссылки в режиме HTML, нежели в визуальном. Так что попробуйте, у вас получится! Наука, как видите, не такая уж мудрёная.

Автор: vanilinkin, специально для xBB.uz, 09.05.2012


Предыдущие публикации:

Биржа долевых инвестиций SIMEX.

Последнее редактирование: 2012-05-09 23:52:07

Метки материала: в, a, html, ссылки, тег, ссылки в html, тег a, ссылки в, гипертекст, язык разметки html, язык разметки, теги, tag, tags, разработка веб-ресурса, что нужно знать чтобы создать свой сайт, разработка сайтов, информационные технологии, it, разработка сайта

Оставьте, пожалуйста, свой комментарий к публикации

Представиться как     Антибот:
   

Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а.


© 2007-2017, Дмитрий Скоробогатов.
Разрешается воспроизводить, распространять и/или изменять материалы сайта
в соответствии с условиями GNU Free Documentation License,
версии 1.2 или любой более поздней версии, опубликованной FSF,
если только иное не указано в самих материалах.