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

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

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

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

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

• – это способ обращения к ресурсу; в большинстве случаев имеется в виду , который представляет собой набор правил, позволяющий осуществлять соединение и обмен данными между двумя и более включёнными в сеть устройствами; указанный в URL тип сетевого протокола отделяется от хоста комбинацией символов :// ; примерами сетевых протоколов могут служить:
  • (от англ. File Transfer Protocol – протокол передачи файлов) – стандартный протокол, предназначенный для передачи файлов по TCP -сетям; FTP -протокол часто используется для загрузки сетевых страниц и других документов с компьютера разработчика на сервер хостинг-провайдера;
  • (от англ. HyperText Transfer Protocol – протокол передачи гипертекста) – протокол прикладного уровня, который до недавнего времени использовался в интернете для обмена информацией с веб-сайтами;
  • (от англ. HyperText Transfer Protocol Secure) – повсеместно использующееся в настоящее время расширение протокола HTTP , поддерживающее шифрование данных;
  • и ряд других сетевых протоколов;

  Для большей наглядности, приведем в качестве примеров абсолютных путей почти реальные 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

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

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

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

  

  html.okpython.net Copyright © 2016-2023.

  Источник

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

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

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

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

        
  Изучение HTML
    

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

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

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

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

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

  

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

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

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

  

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

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

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

  

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

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

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

  

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

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

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

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

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

  Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

  Популярные рецепты

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

  Популярные задачи

  • TEX
  • Отступы между блоков
  • Андроид в тени
  • Ссылка как кнопка
  • Вложенные списки
  • Форма регистрации
  • Объединение ячеек таблицы
  • Обязательные поля формы
  • Цвет и фон в таблице
  • Асуанская плотина
  • Батарейка
  • Заголовки

  Источник

  Читайте также:  Информатика язык питон 9 класс