Ссылки, якоря и тег BASE

Оглавление
04 июля 2009 г.

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

Гиперссылка - это ссылка на определенный объект в сети (документ, файл и прочее). Тег гиперссылки <a> представляет собой контейнер, в который помещается объект (якорь-источник). Этим объектом может быть текст, картинка, блок и вообще что угодно. Подробности о том где и как использовать ссылки читайте в этой статье.

Вся информация о переходе указывается в атрибутах:

<a href="якорь-назначение" title="комментарий">якорь-источник</a>

Таким образом создаётся связь между двумя якорями - источником и целью. Говоря образно - путь из пункта А в пункт B. Следует пояснить следующие строки спецификации, посвящённые гиперссылкам:

Каждый элемент A определяет якорь:

  1. Содержимое элемента A определяет местонахождение якоря.
  2. Атрибут name именует якорь так, что он может быть якорем назначения нескольких ссылок.
  3. Атрибут href делает этот якорь источником одной конкретной гиперссылки.

Авторы могут также создать элемент A, который не специфицирует никаких якорей, т.е. не специфицирует href, name или id. Значения этих атрибутов могут быть установлены позже с помощью скриптов. Спцификация HTML 4.01 в переводе Пирамидина А..

Про скрипты я писать не буду, так как статья не об этом. А вот про атрибуты href, name и id поговорим предметно. Для наглядности приведу пример с авиа-перелётами. Из Минска можно попасть в Москву на самолёте. Но стоит учитывать, что в Москве 3 аэропорта и самолёт может прилететь в какой-то один из них.

Самолёт 100% прилетит в Москву, но 100%-ной гарантии попадания в аэропорт Домодедово нет. Всё зависит от авиа-перевозчика, купленного билета и других факторов. Вероятных маршрутов три:

  1. Аэропорт Минск » Москва » Аэропорт Шереметьево
  2. Аэропорт Минск » Москва » Аэропорт Домодедово
  3. Аэропорт Минск » Москва » Аэропорт Внуково

Аэропорт Минск - это источник или пункт отправления А. Когда мы заключаем текст в тег <A>, текст становится якорем-источником. Москва - пункт назначения Б. Пункт назначения указывается через атрибут тега href.

<a href='Moscow'>Москва</a>

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

Можно встретить разговорный вариант: Поставь анкер. Правильнее употреблять именно определение якорь, так как обозначаются данные элементы ссылок именно значком якоря.

Кнопка

Московские аэропорты - это те самые якоря (анкеры). Якорей может быть любое количество. В HTML 4 якорь указывается через атрибут name тега <A>и ставится в текст следующей конструкцией:

<!-- пустой якорь -->
<a name='anchor_name'></a>

<!-- Текст в роли якоря -->
<a name='anchor_name'>Текст якоря</a>

В HTML5 данный вариант является устаревшим и не рекомендуется для использования. Вместо атрибута name рекомендуют использовать атрибут id. Причём можно ссылаться на id любого элемента страницы, так что этот вариант предпочтительнее и намного универсальнее. Чтобы сослаться на якорь, нужно после текста ссылки поставить символ # и указать имя якоря:

<!-- Текст статьи A (minsk.html) -->
Билет на самолёт в <a href='Moscow.html'>Москву</a>.

<!-- Текст статьи Б (moscow.html) -->
Аэропорт прибытия в Москве: <span id="vnukovo">Внуково</span>.

<!-- Ссылка на якорь статьи Б из статьи А -->
Купите билет на самолёт в Москву. Аэропорт
прибытия: <a href='Moscow.html#vnukovo'>Внуково</a>.

Итак, вернёмся от перелётов к html. Атрибут href указывает путь к файлу. Указатель может быть абсолютным или относительным. Абсолютный указывает точное местонахождение объекта ссылки, а относительный - положение объекта относительно документа, содержащего ссылку на объект (якорь-источник).

Ещё один простой пример: Вася Пупкин проживает по адресу: г.Бобруйск, ул.Пушкина, д.359, кв.193. Это абсолютная ссылка на Васю Пупкина. Допустим, я проживаю в том же доме и подъезде, но этажом ниже. Я, являясь источником ссылки, могу сделать ее относительной:

Вася Пупкин живет в моём подъезде, в 193 квартире.

Если вы не знаете, где живу (нахожусь) я, вы не сможете определить местонахождение гражданина Пупкина. Поэтому относительные ссылки при некотором стечении обстоятельств могут оказаться письмом на деревню дедушке. Допустим,

Тем не менее относительные ссылки применяются при верстке сайта достаточно часто и мной в том числе. Почему? Потому что указать

href="images/fon.jpg"

намного быстрее, проще и короче чем

href="http://www.mysite.ru/images/fon.jpg"

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

<!-- Относительная ссылка со слешем -->
href="/images/fon.jpg"

<!-- в рамках одного домена будет равнозначна -->
href="http://www.mysite.ru/images/fon.jpg"

Не забывайте про полезный атрибут – title. C помощью него можно сделать всплывающую подсказку для гиперссылки. При наведении курсора на ссылку появляется подсказка со значением атрибута:

<a href="/" title="Nevor.ru - раздел о сайтостроении">Nevor.ru</a>

Результат: Nevor.ru

тег BASE

Теперь о том, как избежать некоторых стечений обстоятельств. Есть на этот случай один хороший тег контейнера <head> - <base>. C помощью этого тега указывается базовый url страницы (источника ссылки) и все относительные пути приплюсовываются к базовому, в результате чего всегда получаем абсолютный путь.

<!-- базовый url в "шапке" страницы: -->
<BASE href="http://www.mysite.ru/">

<!-- относительный url в тексте страницы: -->
<a href="images/fon.jpg">

<!-- результат: -->
href="http://www.mysite.ru/images/fon.jpg"

Однако, при этом якоряотносительных ссылок работать перестанут, потому что получится следующее:

<!-- файл code.html  лежит в папке /code 
базовый url: -->
<BASE href="http://www.mysite.ru/"> <!-- относительный url внутри code/code.html: --> <a href="#place"> <!-- результат: --> href="http://www.mysite.ru/#place" <!-- а должно быть: --> href="http://www.mysite.ru/code/code.html#place"

Так что тег base - это не панацея, а средство для решения конкретных задач. Так что старайтесь не использовать теги, если на то нет необходимости.

Относительная межуровневая адресация

Выше я привёл пример как с помощью слеша / указать ссылку на корень сайта:

<a href="/">ссылка на корень сайта</a>

Допустим, есть файл, расположенный по адресу: site.com/images/fon.jpg

Статья, из которой нужно на него сослаться, находится по адресу: site.com/article/my_text.html

Если просто сослаться относительно, то относительная ссылка должна иметь вид:

<a href="/images/fon.jpg">ссылка на fon.jpg</a>

Корень сайта – корневая папка, в которой находятся все его файлы, включая подпапки. Папки второго уровня – это все папки, которые можно видеть, открыв корневую. И так далее. Часто при описании файловой структуры сайта употребляют термины дерево и ветви.

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

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

<!-- Корень сайта site.com -->
site.com/images/bg.jpg
        |      /logo.jpg
        |
        /articles/my_text.html
                 |
                 |
                 /news/novosti.html

И если сослаться из одной корневой ветви (из файла novosti.html) в другую (на файл logo.jpg) можно только из корня сайта

<a href="/images/logo.jpg">Наш логотип</a>

то внутри ветви зачастую это можно сделать проще и короче, так как ветвьможет содержать очень много подпапок

href="/articles/archive/news/2013/may/vicrory_day.html"

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

/articles/archive/news/2013/may/vicrory_day.html
                      |
                      /2013/new_year.html

Относительная ссылка со страницы victory_day.html на страницу new_year.html будет выглядеть так:

href="../new_year.html"

Таким образом ссылка поднимается из каталога may в каталог 2013 и указывает в этом каталоге на файл new_year.html

Похожие статьи
Теги, атрибуты HTML

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

В пояснениях я буду приводить ссылки на спецификацию, а также на её перевод, о котором упоминал на странице HTML это... Упоминание о переводе А. Пирамидина имеется в официальной спецификации HTML, так что перевод можно считать качественным.

18 июня 2009 г.

Яндекс.Метрика