Абсолютные и относительные ссылки в HTML

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Предлагаю на ваш суд публикацию об абсолютных и относительных ссылках, которая является логическим продолжением материала о создании гиперссылок в интернете и их разнообразных видах.

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

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

Все гиперссылки, создаваемые средствами HTML, можно классифицировать по тем или иным признакам. Чем же отличается абсолютная ссылка от относительной? Прежде всего, по виду URL адреса, выступающего в качестве обязательного атрибута href тега a.

Урл в абсолютной гиперссылке обязательно начинается с наименования протокола передачи данных (для примера мы будем использовать HTTP, поскольку он наиболее распространен и применяется на большинстве сайтов) и включает имя домена (что означает этот термин?).

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

<a href="http://site.ru/catalog1/file1.html">анкор</a>

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

Если представленный выше пример абсолютной гиперссылки немного модифицировать, убрав «http://» и доменное имя, то как раз получится образец относительной ссылки:

<a href="/catalog1/file1.html">анкор</a>

Но такой линк будет работать лишь в том случае, если файл расположен в папке (каталоге), который, в свою очередь, находится в корневой директории веб-ресурса. То есть, в данном случае путь до файла (в составе URL, который служит параметром атрибута href) будет указан относительно корня сайта:

В соответствии с предоставленным выше скриншотом вы, полагаю, уже поняли следующее. Если файл (в нашем примере file2.html) входит напрямую в состав корневой папки, то путь к нему относительно корня (site.ru) примет такой вид:

<a href="/file2.html">анкор</a>

Здесь самый первый слеш «/» заменяет название корневой директории «site.ru/». То есть, при создании перехода на главную страницу сайта с любой его вебстраницы можно вполне использовать вот такую короткую конструкцию:

<a href="/">анкор</a>

Гиперлинки именно относительно корневой папки обычно используются на практике, когда необходимо сослаться с одной страницы сайта на другую.

Теперь давайте рассмотрим еще несколько случаев создания линков относительно текущего документа (не корня сайта). Во всех случаях требуется указывать значение атрибута href, недаром он считается обязательным. Здесь один из файлов будет донором (с которого проставлена ссылка), а другой акцептором (на который ведет гиперссылка).

1. Файлы расположены в одной папке:

В таком случае относительная ссылка будет содержать только наименование документа, являющегося акцептором (обратите внимание, что знак слеша здесь опущен, поскольку путь указывается не относительно корня, а вполне конкретной папки):

<a href="file2.html">анкор</a>

2. Файлы находятся в разных директориях, причем документ, на который нужно сослаться, располагается внутри каталога, находящегося в одной папке, содержащей донор:

Тогда при создании относительной гиперссылки следует дополнительно прописать название директории с акцептором:

<a href="catalog2/file2.html">анкор</a>

Ежели целевой файл, на который указывает ссылка, находится еще на уровень ниже относительно донорского документа в иерархической структуре (например, расположен в catalog3, который вложен в catalog2), то путь будет таким:

<a href="catalog2/catalog3/file3.html">текстовый фрагмент</a>

Ну и так далее, в зависимости от количества вложенных друг в друга директорий.

3. Теперь разберем обратную ситуацию, когда документ-акцептор располагается на уровень (или несколько) выше донорского файла:

При таком раскладе перед именем файлика необходимо поставить слэш «/» и двоеточие, означающее, что акцептор расположен на один уровень выше:

<a href="../file1.html">анкор</a>

Если документ, на который ссылаются, находится на два уровня выше (скажем, донорский документ пребывает в папке catalog3, которая вложена в catalog2), то HTML код относительной гиперссылки примет следующий вид:

<a href="../../file1.html">анкорный текст</a>

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

4. Есть еще вариант, когда акцептор и донор расположены в разных папках одного уровня:

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

<a href="../catalog1/file1.html">анкорный текст</a>

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

Если разница 1 уровень, то относительной ссылкой является такая:

<a href="../../catalog1/file1.html">анкорный текст</a>

Я привел только основные примеры относительных ссылок, на самом деле их гораздо больше. Но главное — понять суть алгоритма их создания, что, надеюсь, вам удалось. Тем более, что все другие вариации будут просто производными от выше указанных.

Ежели в качестве целевого объекта абсолютной или относительной ссылки указать не файл, а всю директорию, то в конце URL желательно прописывать слеш:

<a href="http://site.ru/wp-content/uploads/">text</a>
<a href="/wp-content/uploads/">anchor</a>

Тем самым вы указываете серверу, что необходимо открыть для просмотра весь каталог, а не конкретный файл. Если же опустить значок «/» и оформить гиперссылку вот так:

<a href="http://site.ru/wp-content/uploads">text</a>
<a href="/wp-content/uploads">anchor</a>

То серверный обработчик сначала начнет поиски файла «uploads», именно в таком виде (без расширения), а уже затем отыщет папку с таким именем. Посему, проставив сразу же слеш, вы сэкономите ресурсы сервера, на котором располагается сайт.

Также необходимо иметь ввиду, что в целях безопасности содержимое любого рабочего каталога сайта должно быть скрыто. Поэтому сервер обычно сконфигурирован таким образом, чтобы воспрепятствовать отображению его файлов. Например, вместо этого может быть показан пустой индексный файл index.php либо index.html (в браузере это будет просто белая страница).

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

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

Что касается главной страницы, то абсолютная ссылка на нее включает имя домена, которое является названием корневой папки в соответствии с файловой структурой сайта на сервере:

<a href="http://goldbusinessnet.com/">Home</a>

Образец относительного линка в отношении главной я уже приводил, но повторю еще раз:

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

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Уроки HTML

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.