В данном уроке мы объясним новичкам, что такое абсолютный и относительный путь к файлу, а также в каком случае какой из них лучше использовать. Если вы уже знакомы с данной темой, вы можете переходить к следующему уроку.
Итак, начнем с определения самого термина «путь»:
Путь (англ. path) - набор символов, показывающий расположение файла в файловой системе, адрес каталога.
Википедия
Если говорить о сайтах, то путь - это то же, что и ссылка. Ссылки могут быть абсолютными и относительными. Рассмотрим оба варианта более подробно.
https://www.google.com/images/branding/googlelogo.png
Абсолютный путь можно использовать в CSS. Например, чтобы задать рисунок в качестве фона, вы можете взять абсолютный URL к файлу с изображением И указать его в таблице стилей:
Background-image: url(http://www.example.com/img/bg.png);
С относительным адресом всё намного интереснее - он может отсчитываться как от корня сайта, так и от текущего документа. Корневой относительный путь - это путь, который указывает на расположение файла относительно корневого каталога сайта. В этом случае адрес не содержит ни протокола, ни имени домена, и начинается со знака слэша / , который указывает на корневую папку. Выглядит этот адрес так:
Background-image: url(/img/bg.png);
Как легко определить корневой относительный адрес? Просто возьмите абсолютную ссылку и уберите из нее протокол и название домена, оставив слэш и все символы, которые идут дальше.
Относительный путь к файлу от документа
- это путь к файлу относительно текущего документа. Такой адрес зависит от расположения файла, в котором он записан. Так, когда относительная ссылка указывается в таблице стилей, она рассчитывает путь к файлу, отталкиваясь от таблицы стилей, а не от текущей веб-страницы либо корневой папки. Приведем несколько примеров.
Если наша таблица стилей style.css и файл с фоновым рисунком bg.png находятся в одной папке (не обязательно корневой), то относительный путь от таблицы до рисунка будет выглядеть так:
Background-image: url(bg.png); /* вы просто пишете имя файла */
Если таблица стилей находится в корне, а рисунок - в папке img , относительная ссылка будет таковой:
Background-image: url(img/bg.png); /* слэш в начале не нужен */
Если таблица стилей находится в папке, а рисунок соседствует с этой папкой, то относительный путь будет таким:
Background-image: url(../bg.png); /* две точки - подняться на один уровень */
Если таблица стилей находится в двух папках, а рисунок соседствует с первой папкой, то относительный путь будет следующий:
Background-image: url(../../bg.png); /* поднимаемся на два уровня */
Две точки и слэш в начале относительного пути означают подъем на один уровень вверх. В зависимости от количества уровней (каталогов), на которые нужно подняться, необходимо прописать нужное количество точек со слэшом. К примеру, если таблица стилей лежит не в двух, а в четырех папках, запись, соответственно, будет следующей:
Background-image: url(../../../../bg.png);
В том случае, когда рисунок спрятан в папку img , а таблица стилей - в папку css , вам понадобится выйти из папки css и зайти в папку img . Вот так:
Background-image: url(../img/bg.png);
Если папок несколько, необходимо также прописать их. Изменим предыдущий пример: представим, что в папке img есть еще одна папка backgrounds , в которой лежит наш рисунок. Относительный путь будет таким:
Background-image: url(../img/backgrounds/bg.png);
Абсолютный адрес ссылки понадобится использовать, если файл, на который вы ссылаетесь, находится на другом сайте. В пределах одного сайта абсолютный путь практически не используется (хоть он и будет работать). Это связано с несколькими моментами: во-первых, такие ссылки могут быть весьма громоздкими, а во-вторых, если имя домена изменится, то возникнет проблема - все ссылки будут вести на старый домен, что может повлечь за собой множество ошибок и битых ссылок.
Корневой относительный путь будет работать на веб-сервере, но он бесполезен при разработке на локальном компьютере. Но преимущество этого типа ссылок в том, что вы можете перемещать свою таблицу стилей в любую папку сайта и не бояться, что адреса фоновых изображений станут нерабочими.
Относительный путь от документа - наилучший вариант при веб-разработке на локальной машине без использования сервера. В браузере вы сможете нормально просматривать веб-страницы, хранящиеся на вашем компьютере, и адреса файлов будут работать. Они будут работать и на живом сайте, но с одним условием - если не перемещать таблицу стилей в другое место (иначе придется корректировать пути).
Попробуйте потренироваться в использовании относительных путей как на локальном компьютере, так и на веб-сервере. Понимание того, как это работает, непременно пригодится вам в любом проекте.
Далее в учебнике: свойство background-repeat - управление повтором фонового изображения.
1) Создать в виде поддомена страницу.
2) Прописать абсолютный путь в конфиге в config.php , то есть:
Core::$ROOT = $_SERVER["DOCUMENT_ROOT"];
getimagesize(Core::$ROOT."/photo/img1.jpg"); // используем абсолютный путь, который можно модифицировать
Теперь можно без угрызения совести привязать весь сайт на Core::$ROOT, и если случайным образом необходимо поменять путь до подключаемого файла, то можно переопределить значение Core::$ROOT;
DOCUMENT_ROOT не единственный вариант получить корневой путь сайта. Давайте взглянем в мануал: "Директория корня документов, в которой выполняется текущий скрипт, в точности та, которая указана в конфигурационном файле сервера." . Это значит, что в случаях, если в конфигурационном файле будет некорректно написан путь, то весь сайт не будет работать. Что делать? Можно писать админам и владельцам хостинга, на котором размещается сервер с надеждой, что они исправят свои недочёты. Или искать стабильную альтернативу, которой является __DIR__ , это абсолютный путь к данному файлу, где запущен код файлу. Допустим файл конфигурации у нас лежит в папке config, и чтобы используя __DIR__ не возвращаться каждый раз на 1 папку наверх записью __DIR__"/../" мы смело можем __DIR__ записать в свою переменную, примером ниже я записал в свойство класса (урок №24, кто не дошел используйте обычную переменную):
Core::$ROOT = __DIR__; // Или же для старых PHP - dirname(__FILE__);
Так же хотелось напомнить кое-что интересное и важное. Согласно безопасности веб-сервер запрещает перемещение по директориям выше корня сайта. То есть сайт находится по следующему пути: /home/school/public_html/schoolphp , но прочитать содержание папок /home, или /home/school будет недоступно.
Может ли PHP пользоваться путями HTML ? Да, в специальных функциях, для примера:
file_get_contets("http://сайт");
Zend2, продукт от разработчиков PHP, один из самых сложных FrameWork на данный момент использует так же относительные пути с отличным синтаксисом от моего, то есть "папка/файл".
Форум IPB.3 использует dirname(__FILE__).
В этой главе мы с вами поговорим ссылках-путях которые мы прописываем в атрибут HREF
.
Все что на данный момент знаем так это только шаблон:
анкор
Для новичков этих знаний достаточно, для профи который берется за большой проект нет!!!
Ведь в больших проектах существуют разделы, в которые нужно переходить и выходить... И тогда возникают вопросы как это сделать и как это сделать правильно?
Чтобы было проще учиться давайте создадим трех страничный сайт-визитку. Так как наш файл index.html не представляет для нас пока ни какой ценности мы его отредактируем и задействуем:
Этими примерами я хотел показать что все работает. Но, одно большое НО
, мы обращаемся напрямую к файлам но а путей
не видно...
Это и есть относительный путь
, т.е. путь относительно ссылающегося файла, а самого пути не видно, потому
что все наши файлы лежат в в одном каталоге(папке).
Давайте в нашей учебной папке(my_site) создадим еще одну папку с именем
razdel
и уже в ней создадим новый файл с именем index.html
. Как-же в этом случае поставить ссылку с наших файлов которые мы создали выше?
razdel/
index.html" >раздел
А если в папке razdel
созтать папку podrazdel
то путь уже будет с корневой папки:
razdel/podrazdel/
index.html" >подраздел
а с папки razdel
podrazdel/
index.html" >подраздел
Обратите внимание на то что разделителем между папками и/или файлами является "прямой сплеш"(косая черта).
Входить в папки мы научились, теперь посмотрим как выходить:
Чтобы выйти с папки podrazdel в razdel, нужно в путь добавить ../
, этот набор символов
говорит браузеру что запрашиваемый файл лежит на один уровень выше:
../index.html
" >Вернуться в раздел
Чтобы вернуться на 2 уровня эту комбинацию пишем дважды:
../../
index.html" >вернуться в корень сайта
Теперь предлагаю посмотреть на абсолютные пути. Абсолютный путь
это путь файлов включающий в себя имя сайта и протокол(http или https).
Представим что наша папка my_site
и есть корень сайта, а имя сайта my_site.ru , в этом случае абсолютный путь будет:
http://my_site.ru
или http://my_site.ru/
или http://my_site.ru/index.html
Тогда как абсолютный путь к папке razdel
http://my_site.ru/razdel
или http://my_site.ru/razdel/
или http://my_site.ru/razdel/index.html
Какие пути лучше использовать? Абсолютные!!! Но есть вероятность наделать ошибок, т.к эти ссылки указывают на конкретный сайт и локально(без сервера) мы эти ошибки устранить не сможем...
И еще раз об главной странице, не ставте ссылку my_site.ru, потому что браузер все равно перенаправит на my_site.ru/ ,
т.е происходит редирект(перенаправленние), а поисковые системы не очень любят редирект.
Так-же ни когда не ставте ссылку my_site.ru/index.html, т.к. это дубль для my_site.ru/ и сточки зрения поисковых систем это две разных страницы, и
в данном случае идет дублирование контента, а это не уважается поисковиками. Так что правильная ссылка для абсолютных это: my_site.ru/, а
для относительных из одной папки: /
или спуски: ../
. И еще если вы будете использовать абсолютные пути то вам нужно определиться
как писать адрес(с www или без), здесь тоже все просто, если у вас персональный(выделенный) сервер то без, а если вы арендуете только часть сервера то с www
.
Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.
В примере 8.2 показано создание абсолютной ссылки на другой сайт.
Пример 8.2. Использование абсолютных ссылок
Изучение HTML
При указании в качестве ссылки каталога сайта (например, http://сайт/css/), отображается индексный файл . Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html .
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.
1. Файлы располагаются в одной папке (рис. 8.4).
Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре.
2. Файлы размещаются в разных папках (рис. 8.5).
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.
Две точки в данном случае означают выйти из текущей папки на уровень выше.
3. Файлы размещаются в разных папках (рис. 8.6).
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.
Ссылка
Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках (рис. 8.7).
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку - в папке. В этом случае путь к файлу будет следующий.
Ссылка
Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
Ссылка
Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем вначале. Так, запись Курсы означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.
Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.
11.01.07 44.5KКак вы знаете, в параметре href тега () необходимо указывать путь к файлу, на который делается ссылка.
Многие пишут что-то вроде http://somesite.ru/catalog/doc.html. Да, никто не спорит, это работает. Но есть одно "но". Рассмотрим на примере.
Пусть ваш сайт размещался, например, на каком-то бесплатном хостинге и его адрес был следующий: http://fsite.freehosting.ru.
На сервере лежит порядка 100 документов. И вот вы решили перенести свой сайт на другой домен,
пусть это будет платный хостинг в зоне ru: http://site.ru. Что же, везде теперь менять http://fsite.freehosting.ru на http://site.ru?
Да, благодаря таким редакторам как homesite, это возможно. Но это не выход.
Предположим, что прежде чем заливать страницу на сервер, вы проверяете ее работоспособность
на своем домашнем сервере apache (тем, кто еще не знает что такое "домашний сервер" — сюда(Установка и настройка сервера apache), и вместо http://localhost надо везде будет писать http://site.ru. Согласитесь это, по крайней мере, неудобно.
Выход состоит в том, что бы, при указывании пути к файлу, учитывать не его положение на сайте, а его положение на сервере.
Возьмем, к примеру, файл doc.html, который находится по адресу: http://somesite.ru/catalog/doc.html. На сервере, как известно, находится папка www. Как мы видим из адреса, в этой папке находится папка catalog, и уже в ней находится файл doc.html.
Если, при указывании пути к файлу, перед адресом поставить /, то это будет аналогично следующему: корневая_директория_на_севере/www/путь к файлу.
То есть, http://somesite.ru/catalog/doc.html аналогично следующему: /catalog/doc.html.
Итак, когда перед адресом стоит /, то это означает, что "отсчет" начинается с директории www.
Теперь вместо http://localhost/index.html из любого документа можно писать /index.html.
А вот что бы добраться до директории cgi надо писать так: /cgi-bin/путь к файлу.
Пути, созданные способами, описанными выше, называется абсолютными, т.к указывается абсолютный (полный) путь к файлу на сервере.
Существуют также относительные пути, которые указываются относительно самого документа, откуда идет ссылка.
Например, если в doc.html создать ссылку newcat/new.html, то это подразумевает, что файл new.html находится в каталоге newcat, который, в свою очередь, находится в том же каталоге, что и файл doc.html. Как видите, этот путь указан относительно файла doc.html. Где бы этот файл не находился, путь newcat/new.html будет всегда справедлив, если файл doc.html и каталог newcat будут находиться на одном уровне (т.е. в одном каталоге).
Также относительно какого-то документа можно подняться на директорию вверх. Для этого необходимо написать../.
Например, есть каталог big, в нем находятся два каталога: primary и secondary. В каталоге primary лежит, уже знакомый нам файл doc.html; а в каталоге secondary находится файл new.html. Для того, чтобы из файла doc.html сделать ссылку на файл new.html, то нужно написать../secondary/new.html. А вот если каталог big находится в каталоге www, то путь к файлу new.html можно было указать и так: /big/secondary/new.html