Абсолютный адрес ссылки

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

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.

В примере 8.2 показано создание абсолютной ссылки на другой сайт.

Пример 8.2. Использование абсолютных ссылок

В данном примере ссылка вида Изучение HTML является абсолютной и ведет на главную страницу сайта htmlbook.ru.

При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл . Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html .

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

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 8.4).

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

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

2. Файлы размещаются в разных папках (рис. 8.5).

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

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 8.6).

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

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 8.7).

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

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

Ссылки относительно корня сайта

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

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Адреса в HTML

Абсолютный и относительный пути

Адреса в HTML могут указывать путь: на сайт, страницу сайта или файл расположенный на сайте. Обычно адрес HTML выступает в качестве значений у атрибутов, тега a (ссылки) или img (изображения):

Где в качестве имяСайта , выступает название сайта, например gabdrahimov.ru

Адреса в языке HTML бывают трёх видов:
1. Адрес сайта,
2. Абсолютный адрес (абсолютный путь к странице или файлу),
3. Относительный адрес (относительный путь к странице или файлу).

Адрес сайта

Адрес сайта в HTML это просто имя сайта c приставкой http:// , например:
http://ya.ru — Яндекс
http://google.ru — Гугл
http://vk.com — Вконтакте и т.д.

Абсолютный адрес

Абсолютный адрес — это абсолютный путь к странице или файлу. Абсолютный адрес начинается с адреса сайта, на котором находится страница или файл.

Примеры абсолютных адресов (абсолютных путей):

Точкой отсчета абсолютного адреса является адрес сайта, на котором расположена страница или файл.

Относительный адрес

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

Допустим в папке product находится страница list.html , её абсолютный адрес выглядит следующим образом:
http://имяСайта/product/list.html — страница list.html расположена в папке product

Есть еще одна страница, чей абсолютный адрес выглядит следующим образом:
http://имяСайта/about.html — страница about.html находится в корне (на одном уровне с главным файлом index.html) сайта.

На странице list.html нужно поставить ссылку, которая будет ссылаться на страницу about.html находящуюся на том же сайте. Сослаться на неё можно двумя способами:
1. http://имяСайта/about.html «> — используя абсолютный путь,
2. ../about.html «> — используя относительный путь.

Символ ../ означает, что нужно подняться на одну папку вверх (на один уровень),
Символ ../../ означает, что нужно подняться на две папки вверх (на два уровня).

Если страница list.html тоже будет находится в корне сайта:
http://имяСайта/list.html , то для того чтобы сослаться на страницу about.html , нужно будет в HTML-документе list.html прописать следующий код:
about.html «> — относительный путь.

Далее, если страница list.html будет находится в папке soft :
http://имСайта/product/soft/list.html , то для того чтобы сослаться на страницу about.html , нужно будет в HTML-документ файла list.html прописать следующий код:
../../about.html «> — т.е. два раза подняться вверх по папкам.

Чтобы сослаться на страницу online.html , которая находится по адресу:
http://имяСайта/service/online.html , нужно в HTML-документе файла list.html , который находится по адресу:
http://имяСайта/product/soft/list.html , прописать следующий код:
../../service/online.html «> — два раза подняться вверх по папкам, затем «зайти» в папку service и написать имя файла online.html

Точкой отсчета относительного адреса является то место, где находится ссылающаяся страница.

Также, в качестве точки отсчета относительного адреса может выступать корень сайта / , пример:
/about.html «>
/service/online.html «>

Разница между абсолютным и относительным путями

Рассмотрим различия между абсолютным и относительным путями:

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

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

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

Отдохнули? Ну что же, теперь давайте более подробно остановимся на вопросе адресов. Они бывают двух типов: относительные и абсолютные.

Абсолютные адреса

Абсолютные адреса состоят из таких данных, как: протокол, имя сервера и путь. Рассмотрим на примере адреса https://webshake.ru/html-training-course.

Протоколом в данном случае выступает https://.
Доменным именем является webshake.ru.
Путь – /html-training-course.

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

Относительные адреса

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

В таких адресах допустимо использование специальных символов, которые могут применяться при указании путей к файлам, расположенным на жестких дисках, а именно: . и ...

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

Относительные адреса могут начинаться и со слэша. Например: /html-training-course.

В данной ситуации браузер будет использовать протокол и адрес сайта, на котором пользователь находится в данный момент. Например, для сайта https://webshake.ru ссылка /html-training-course будет изменена браузером на ссылку https://webshake.ru/html-training-course.

Давайте рассмотрим на примерах:
Создадим в папке с нашей страничкой ещё один файл с именем book1.html и наполним её информацией о некоторой книге:

Посмотрим на результат в браузере:

Теперь, когда мы нажмём на получившуюся ссылку, откроется страница со списком книг.
Давайте дополним её, а именно — добавим ссылку на нашу новую страничку о книге.

Результат в браузере:

Ура! У нас получился простейший сайт, состоящий из двух страничек, которые ссылаются друг на друга. А если не получился — пишите в комментариях, вместе разберёмся.

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

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

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

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

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

Абсолютный и относительный путь в ссылках

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

В таком виде мы вводим урлы в поисковую строку браузера для получения доступа с объекту. При этом любой URL обязательно начинается с наименования протокола передачи данных и включает имя домена («http://site.ru/»). Именно в подобном виде путь до объекта (вебстраницы или файла) используется в качестве параметра атрибута href при создании абсолютной ссылки с помощью средств HTML для ее последующей вставки в контент заданной странички (документ):

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

Варианты относительных ссылок

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

Если же привлечь средства ХТМЛ, то можно создать ссылку относительно протокола:

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

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

На его основе таким же образом создается относительная гиперссылка:

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

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

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

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

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

А, скажем, относительная ссылка на статическую вебстраницу (которая не принадлежит ни одной рубрике, но входит в состав корневой папки «Goldbusinessnet.com») с любой другой странички в пределах одного проекта может выглядеть так:

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

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

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

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

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

Тогда в процессе создания относительной гиперссылки в содержании донора следует прописать дополнительно директорию, где находится акцептор:

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

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

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

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

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

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

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

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

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

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

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

Особенности относительных и абсолютных гиперссылок

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

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

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

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

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

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

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

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

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