Абсолютный и относительный путь в веб-программировании

• Абсолютные ссылки. Понятие URL
• Относительные ссылки

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

Абсолютный или полный адрес (путь, ссылка) начинается с указания протокола передачи данных и содержит имя сайта. Например, абсолютными являются адреса http://localhost/test/index.html и https://html.okpython.net, где первый адрес указывает абсолютный путь к корневой папке сайта на локальном сервере, а второй – в сети Интернет.

Следует отметить, что стандартизированным способом записи адреса ресурса в сети Интернет является URL (от англ. Uniform Resource Locator – единый указатель ресурса), который как раз и представляет собой абсолютный адрес, позволяющий не только однозначно находить в Интернете нужную страницу, но и обмениваться с сервером информацией при помощи GET-запросов. В общем случае URL можно схематично представить в виде:
<схема>://<логин>:<пароль>@<хост>:<порт>/<url-путь>?<параметры_get-запроса>#<якорь>, где

• схема – это способ обращения к ресурсу; в большинстве случаев имеется в виду сетевой протокол, который представляет собой набор правил, позволяющий осуществлять соединение и обмен данными между двумя и более включёнными в сеть устройствами; указанный в URL тип сетевого протокола отделяется от хоста комбинацией символов ://; примерами сетевых протоколов могут служить:
  • ftp (от англ. File Transfer Protocol – протокол передачи файлов) – стандартный протокол, предназначенный для передачи файлов по TCP-сетям; FTP-протокол часто используется для загрузки сетевых страниц и других документов с компьютера разработчика на сервер хостинг-провайдера;
  • http (от англ. HyperText Transfer Protocol – протокол передачи гипертекста) – протокол прикладного уровня, который до недавнего времени использовался в интернете для обмена информацией с веб-сайтами;
  • https (от англ. HyperText Transfer Protocol Secure) – повсеместно использующееся в настоящее время расширение протокола HTTP, поддерживающее шифрование данных;
  • и ряд других сетевых протоколов;
• логин – имя пользователя, используемое для доступа к ресурсу;
• пароль – соответствующий логину пароль, который отделяется от логина двоеточием;
• хост (от англ. host – принимающий гостей) – полностью прописанное доменное имя хоста в системе DNS или IP-адрес хоста в форме четырёх групп целых десятичных чисел в интервале от 0 до 255, разделённых точками; например, в качестве доменного имени можно взять имя нашего сайта html.okpython.net, а примерами IP-адресов могут служить сетевой адрес роутера 192.168.1.1 или мой текущий адрес в сети Интернет 93.84.33.158; в случае использования в адресе пары «логин:пароль» после пароля должна присутствовать собачка @;
• порт – используется для определения процесса-получателя пакета в пределах одного хоста и представляет собой натуральное число, которое пишется через двоеточие после хоста; например, протокол HTTP использует стандартный порт 80, а HTTPS – 443; отметим, что браузеры стандартные порты обычно не показывают;
• url-путь – уточняющая информация о месте нахождения ресурса (зависит от протокола); например, для привычного нам протокола HTTPS путь к страничке с данной статьей на сайте имеет вид «/articles/articles_general/absoljutnyj_i_otnositelnyj_put.html»;
• параметры – строка GET-запроса с передаваемыми на сервер параметрами, которая отделяется от пути символом вопроса ?; сами параметры записываются парами в виде «имя=значение», а пары отделяются друг от друга символом амперсанда &, например, «?name=Ivan&lastName=Ivanov»;
• якорь – идентификатор «якоря», к которому будет прокручена открываемая веб-страница; якорь отделяется от остального содержимого адреса символом хэша #.

Для большей наглядности, приведем в качестве примеров абсолютных путей почти реальные url-адреса:

https://site.name/files/php/reg.php?name=Ivan&lastName=Ivanov;
https://site.name/html/html_uchebnik/chto_takoe_html.html

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

Относительный адрес (путь, ссылка) ведет свой отсчет относительно корня сайта или текущего каталога, в котором находится данный веб-документ. Рассмотрим принцип построения относительных адресов.

Пусть наша гиперссылка находится в документе, расположенном на сервере по адресу https://site.name/site/doc_1/doc_2/ ... /doc_n/web_page.html, где doc_n – папка n-го уровня вложенности. В этом случае папка doc_n, в которой находится наш документ с гиперссылкой, автоматически принимается за основу, относительно которой и строится вся адресация. Итак:

• Если нужно, чтобы ссылка вела на целевой документ new_page.html, расположенный в той же папке doc_n, что и наш исходный документ с гиперссылкой, то в качестве значения атрибута href ссылки нужно просто задать имя целевого документа: href="new_page.html".
• Для перехода к целевому документу new_page.html, расположенному в папке https://site.name/doc_1/doc_2/ ... /doc_n/doc_n_1/ ... doc_n_k/, значение атрибута href ссылки должно включать только папки, вложенные в doc_n, и, конечно же, имя целевого документа: href="doc_n_1/ ... doc_n_k/new_page.html". Таким образом, мы указываем браузеру, что он должен зайти в папку doc_n_1, расположенную в папке doc_n с исходным документом, в котором прописана гиперссылка, затем в папку doc_n_2 и так далее, пока не попадет в папку doc_n_k с находящимся там целевым документом, который он и должен открыть.
• Чтобы попасть в папку на уровень выше исходной, используется специальная комбинация символов ../. Для перехода на n уровней вверх нужно записать комбинацию ../ n раз подряд. Так в нашем случае, чтобы перейти по ссылке к целевому документу https://site.name/doc_1/doc_2/ ... /doc_n-3/new_page.html атрибут href ссылки должен иметь значение "../../../new_page.html". Тем самым мы сообщаем браузеру, что он должен подняться в папку doc_n-1, затем doc_n-2 и doc_n-3, после чего открыть находящийся там целевой документ new_page.html.
• Если же необходимо не просто подняться на несколько уровней вверх, но и зайти там в папку (или несколько вложенных папок), для получения доступа к целевому документу, то в значении атрибута href ссылки сперва нужно прописать требуемое количество уровней поднятия вверх при помощи символов «../», а затем дописать путь из полученной папки к целевому документу. Например, если целевой документ расположен в папке new_doc и адресный путь к нему имеет вид https://site.name/doc_1/doc_2/ ... /doc_n-3/new_doc/new_page.html, то атрибут href ссылки должен иметь значение "../../../new_doc/new_page.html". Т.е. мы указываем браузеру, что он должен подняться на три уровня вверх относительно исходной папки doc_n, в которой находится документ с гиперссылкой, а затем зайти в папку new_doc и открыть целевой документ new_page.html

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

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

Если необходимо начать отсчет относительного пути от корня сайта, в начале пути следует прописать слеш /. Например, ссылка <a href="/index.html">Домой</a> указывает на документ, который находится в корневой папке сайта (а не в текущей!). Следует иметь в виду, что отсчет от корня сайта работает только под управлением реального веб-сервера. На локальном сервере, например, Xampp, отсчет нужно начинать с имени корневой папки.