Даже довольно опытные разработчики частенько путаются с абсолютными путями в CSS.
Абсолютные пути
С абсолютными всё просто. Работают они одинаково как в CSS, так и в HTML..jpg будет указывать на http://сайт/img/miimage.jpg какая бы страница не была открыта у пользователя.
Относительные пути в HTML
Относительные пути, если на странице нет тега base , отсчитываются относительно текущего пути страницы..zip">test будет указывать на http://сайт/blog/post/test.zip .
< head > < base href = " http://сайт/ " /> < body > < a href = " test.zip " > test
Относительные пути в CSS
В CSS относительный путь отсчитывается не от пути страницы, а от пути к самому CSS.
Например, для файла http://сайт/css/test.css
body { background: url (" test . png ") ; }
браузер будет пытаться подгрузить картинку по адресу http://сайт/css/test.png .
Комментарии RSS
Странно, что эти "начинающие разработчики" никогда не читают документацию и не пробуют разобраться самостоятельно перед тем, как спросить. Надеюсь, что большинство из них хотя бы сначала спрашивают у поисковых систем.
Иногда уже просто достают с одинаковыми вопросами. Я на одном форуме веду раздел про программирование, так вот большинство новоприбывших (думаю, не меньше 60-80%) не пробуют написать свои программки на Pascal до того, как лезть на форуме. Видимо, эти люди никогда сами думать не пробовали. И ладно бы спрашивали про какие-нибудь частные случаи, так ведь спрашивают даже реализации популярных алгоримтов вроде нахождения наибольшего общего делителя.
Но такие люди тоже нужны, иначе на чьем фоне хорошо смотрелись бы профессионалы? ;)
Еще бы про./ написать, раз уж про такие азы написано.
Что лучше использовать: тег base или же абсолютные ссылки (с хостом сайта)?. IE к примеру добавляет содержимое тега base к ссылке с анкором (#foo старен http://site.com#foo).
Ekstazi , так это то же, что и без./ . Или это было про всякие.. ?
Костег , от ситуации зависит.
Про всякие..
Просто и понятно, может продолжая тему сделаете пару постов "как сделать пути на пхп посредством глобального массива"
По опыту знаю, что лучше прописывать base. Иначе могут начаться танцы с браузерами.
Ну мои эксперименты показали что тег влияет только на ссылки вида ./index.html и index.html . А вот /index.html ведет к корню сайта который задается другими методами...
Не хочу говорить плохо про умников плохо отзывающихся о новичках. Но не смотря на тонны причитанного остается один вопрос (и вероятно именно он и беспокоит всех новичков). Возможно ли прописать путь для той же картинки, если страница и картинка находятся в разных папках. Т.е. нужен абсолютный путь, а использовать его нет смысла, так как все это добро в localhost. Но зато есть острая необходимость просмотра на другом компе, а localhost уже другой. Тащишь ты всю эту неподъемную ношу на флешке в отвисающем от груза кармане, а в итоге ни одной картинки, ни страницы кроме стартовой ни видать. Лупает новичек глазенками, мол как же так я неделями не спал, а где же? А только на родном компе, или вываливай все страницы в одну папку даже если их аграх/ количество - так выходит? Или все таки есть способ?
новичек , в абсолютном пути не обязательно указывать имя хоста. Достаточно начать его с / .
Создаю регистрацию.В файле index.php ссылка на регистрацию Регистрация Но на сайте при нажатии на Регистрация сайт не видит файла и не отображает формы.Я пробовал Регистрация Регистрация Путь к файлу проходит через следущие файлы на сервере domains/stroy-master.in.ua/public_html/wp-content/themes/stroy-master/
Любая web-страница, картинка, видео и т. д. это в первую очередь файл, имеющий свой абсолютный или относительный путь (адрес). Сам файл в сети Интернет находится на компьютере, который называется сервер . Таким образом, следует учесть способы представления файла на сервере и в сети Интернет. В данной статье мне бы хотелось прояснить перечисленные моменты и внести ясность в затронутый вопрос. Попробуем?
Абсолютный путь (адрес)
Что такое абсолютный путь к файлу?
Абсолютный путь или адрес - это полный путь или адрес, относительно домашней папки на сервере или доменного имени в сети Интернет .
Говоря «домашняя папка » я подразумеваю начало выделенного хостинг-провайдером пространства. Например, если речь идёт о локальном сервере, на операционной системе Windows, в качестве домашней папки будет выступать сам диск, т. е. C:/ . В тоже время, зачастую хостинг-провайдер выделяет пользователю лишь определенное виртуальное (условное) пространство, для которого в качестве домашней папки выступает определенная папка, зачастую называемая /home .
Говоря «доменное имя » я подразумеваю URL-адрес, который начинается с упоминания протокола, например: http://sitename.ru/ . В сети Интернет, именно он является домашней папкой для каждого из представленных ресурсов.
Как узнать абсолютный путь на сервере в PHP?
Если с URL-адресом всё более-менее понятно, то вот с домашней папкой на сервере дело обстоит несколько сложнее. В конце концов, у каждого провайдера есть свои заморочки и это следует учесть.
А начну я с того, что абсолютный путь на сервере обычно определяется относительно места нахождения скрипта, в котором это происходит. Например, файл config.php находится в корневой папке сайта и нам нужно узнать абсолютный путь к нему.
Уточню, говоря «корневая папка » я подразумеваю папку на сервере, выделенную для сайта. Именно она служит отправной точкой URL-адреса относительно доменного имени.
Для этого можно использовать константу __FILE__ , которая содержит полный путь и имя текущего файла, в котором она вызывается. Для того же чтобы получить только полный путь и убрать имя текущего файла, можно использовать функцию dirname() , которая возвращает родительский каталог указанного пути. Например:
$abspath = dirname(__FILE__) ."/";
В PHP 5.3 и новее, можно уже использовать константу __DIR__ :
$abspath = __DIR__
Таким образом очень удобно подключать в дальнейшем файл config.php и использовать полученный в нем абсолютный путь переменной $abspath как отправную точку. Например, предположим, что скрипт test.php находится в папке: path/ - а нужный файл data.txt в папке: data/ . В этом случае вызов может иметь вид:
Include_once("../config.php"); $fh = fopen($abspath ."/2013/12/data/data.txt", "r");
Обратите внимание, что подключение файла config.php я произвел с использование относительного пути, но об этом чуть позже.
Относительный путь (адрес)
Что такое относительный путь к файлу?
Относительный путь или адрес — это путь или адрес относительно места нахождения файла, в котором производится обращение к другому файлу.
Любая файловая система представляет собой строгую иерархию родительских и дочерних папок и файлов. Например: C:\folder\file.php – здесь папка folder\ является дочерней для диска C:\ и родительской для файла file.php .
Для наглядности давайте рассмотрим следующую иерархию:
- file1.php
- folder\
- file.php
- subfolder\
- file3.php
Чтобы из файла C:\folder\file.php обратиться к файлу C:\file2.php , нам нужно выйти из текущей папки folder\ , т.е. подняться на один уровень выше. Для этого можно использовать, папку (я бы даже сказал псевдо-папку) родительского каталога , представляющую собой две точки (..) . Другими словами, мы получим путь: ..\file2.php - относительно файла file.php .
Чтобы из файла C:\folder\file.php обратиться с файлу C:\folder\subfolder\file3.php , нам нужно войти в подпапку subfolder\ , т.е. опуститься на один уровень ниже. Так мы получим путь: subfolder\file3.php - относительно файла file.php .
Давайте усложним задачу и обратимся из файла C:\folder\subfolder\file3.php к файлу C:\file2.php . Относительный путь будет иметь вид: ..\..\file2.php - мы поднялись на два уровня выше. Выполнить обратное, т.е из файла C:\file2.php обратимся к файлу C:\folder\subfolder\file3.php . Относительный путь будет иметь вид: folder\subfolder\file3.php - мы опустимся на два уровня ниже.
Преимущества и недостатки относительного пути (адреса)
Очевидно, что относительный путь не содержит домашней папки и родительских папок. Таким образом, конечный адрес получается короче. Более того, в случае необходимости переезда с одного домена на другой не возникнет необходимости прописывать новый абсолютный адрес.
С другой стороны, в случае цитирования контента сайта, на другом ресурсе, с теми же картинками, в которых прописан относительный путь, мы получим ошибку, т.к. на стороннем ресурсе отсутствуют папки и файлы сайта. Так получится в случае просмотра страницы в кэше поисковых систем. Опять же, используя относительный путь можно легко допустить ошибку, которая выльется в проблему индексации сайта.
Подводя итог, следует отметить, что использование относительного пути или адреса желательно свести к минимуму и использовать абсолютные пути и адреса.
Заключение
В своей статье я постарался рассмотреть фундаментальный вопрос, связанный с абсолютными и относительными путями (адресами) к файлам и папкам. По сути, если вы работаете на компьютере, то уже априори имеете представление о файловой системе, но без учета некоторых нюансов, достаточно сложно сдвинуться с мертвой точки и затронуть ряд вопрос, которые неизбежно относятся к правильности адресации. На этом у меня всё. Спасибо за внимание. Удачи!
| в 8:00 | Изменить сообщение | 5 комментариев |
При разработке сайта часто приходится прописывать пути к файлам, ссылки на документы, страницы.
В книгах по компьютерным технологиям можно часто встретить употребление терминов абсолютного и относительного пути к файлам. Часто автор не разъясняет, что означает тот или иной путь. Читатель, соответственно, путается, когда автор в последствии говорит об использовании абсолютного и(или) относительного пути.
Допустим, у Вас есть сайт и Вам нужно создать гиперссылку(ссылку) на одну из страниц сайта. Здесь нужно выбрать какой использовать тип пути: относительный или абсолютный.
Очень важно понимать, где какой путь нужно и лучше использовать. Абсолютный путь можно указать только одним способом. А вот относительный в отличии от абсолютного имеет несколько вариантов использования.
Подробнее о том как и где используется абсолютный и относительный путь к файлам
, я попытаюсь вам сегодня рассказать.
Так как большую часть своего времени я уделяю web-технологиям, то примеры буду приводить относящиеся к созданию сайтов.
Абсолютный путь
Когда ссылка представляет из себя полный URL файла или страницы, это и есть абсолютный путь . При этом в адресе должен присутствовать используемый протокол. Например, http://www.сайт — это абсолютный путь к конкретному веб-сайту. В данном случае абсолютный путь к главной странице моего блога. Где протоколом является http , а www.сайт доменом(именем).
Если указывать ссылку на католог, например http://yourdomain.ua/web/ то будет загружаться(отображаться) индексный файл. Это правило применимо в основном к статическим сайтам. Так как при использовании языка программирования можно создать внутренний роутинг. Индексный файл обычно представляет из себя файл с именем index.php, index.html, index.phtml, index.shtml . Для того что бы использовать другой индексный файл, нужно создать в нужной директории файл с именем.htaccess, и в нем прописать некоторую директиву. Изменение и создание файла.htaccess, как и роутинг с помощью языка программирования, выходит за рамки этой статьи.
В основном абсолютный путь используется, тогда, когда нужно сослаться на другой сайт. Иными словами если Вы хотите отправить посетителя на другой сайт, то нужно использовать абсолютный путь. Хотя, такой путь можно использовать и на собственном сайте. Но многие придерживаются того, что ссылки внутри сайта должны быть относительными.
Использование абсолютного пути может повлечь за собой некоторые проблемы. Например при переносе сайта с локальной машины на сервер(это в том случае, если вы использовали на локальной машине адреса в виде http://localhost/sitename.ua/…). Трудности могут возникнуть, тогда, когда появится необходимость в смене домена(имени сайта). Хотя, все эти трудности решаемы, но на них придётся потратить некоторое количество времени.
Когда есть минусы, значит должны быть и плюсы. Возьмём к примеру такую ситуацию, как кража контента с вашего сайта. На практике я уже не раз убедился в том, что текст воруют целиком, при этом не оставляя обратной ссылки на оригинал. Так вот, при использовании абсолютных путей, можно получить обратные ссылки с сайта, на котором находится сворованный контент. Но это только в том случае если у Вас внутренняя перелинковка осуществлялась с использованием абсолютных путей. Хотя это не всегда работает, но я уже не раз замечал появление ссылок с чужих сайтов, на которых был расположен мой контент.
Немного отступив от темы хочу вкратце рассказать про то что такое URL .
Каждая веб-страница или документ в сети Интернет имеет собственный уникальный адрес, который и называется URL .
URL — единообразный локатор (определитель местонахождения) ресурса. Расшифровывается URL как Uniform Resource Locator(унифицированный адрес ресурса). Можно так же встретить и такую расшифровку как Universal Resource Locator(универсальный локатор ресурса). Этот способ записи адреса стандартизирован в сети Интернет. Более общая и широкая система идентификации ресурсов URI постепенно заменяет термин URL.
URI - это символьная строка, которая идентифицирует какой-либо ресурс: документ, файл, и т.д. Конечно, здесь подразумеваются ресурсы сети Интернет.
Относительный путь
Часто относительные пути используются гораздо чаще чем абсолютные пути. В основном относительный путь указывается тогда, когда Вам нужно отправить посетителя на другую страницу Вашего сайта, или вставить объект (например изображение) на одной из страниц. При этом использование относительно пути вполне оправдано. В зависимости от структуры сайта, зависит то, какую форму относительного пути нужно использовать. Существует два вида относительного пути: путь относительно документа, путь относительно корня сайта.
Путь относительно документа
Именно путь относительно документа
используется чаще всего. Такие ссылки ещё называются локальными. В основном такой путь используется тогда, когда текущий и связанный документ(страница) находятся в одной директории. Если переместить документ в другую директорию, то путь(ссылку) придётся менять. Хотя можно ссылаться и на документы(страницы) из других директорий. Для этого путь прописывается от текущего документа до целевого документа(страницы). При этом путь относительно документа должен задаваться в зависимости от структуры директорий.
Возьмём к примеру простейшую структуру статического сайта.
Предположим, что каждое изображение в каталоге images нужно вставить в соответствующие страницы home.html , products.html , contact.htm l. Для того что бы вставить изображение к примеру на страницу «home.html», нужно прописать путь, где расположено изображение. Если использовать путь относительно документа, то нужно будет прописать в коде страницы следующее:
|
Этот код для вставки изображения на страницу — неполный. Так как он не содержит нескольких важных атрибутов, таких как ширина, высота и др. Атрибут src
, здесь служит для указания пути к файлу. Здесь опущены все остальные атрибуты, так как они сейчас не столь важны. Главное сейчас, что бы Вы имели представление о том, как выглядит путь относительно документа.
При использовании путей относительно документа отсутствует часть абсолютного пути. Часть абсолютного пути, здесь усекается, как для текущего документа(страницы), так и для связанного. Здесь используется только та часть пути, которая всегда меняется.
Напомню ещё раз про то, что при использовании пути относительно документа, нужно учитывать исходное расположение файлов.
Представим ситуацию, когда страница products.html , будет располагаться не в корневой директории сайта(как это было в предыдущем примере), а в подкаталоге. Теперь необходимо вставить изображение, в файл products.html , который находится, глубже чем корневая директория сайта.
Для того, что бы вставить изображение в файл products.html нужно вернуться в корневую директорию. После чего, можно использовать уже известный путь, о котором говорилось чуть выше.
|
Как видно из приведённого выше кода, к пути теперь добавилось следующее: ../
. Как раз эта последовательность символов ../
и служит для перехода на одну директорию(уровень) выше в иерархии каталогов. Путь в вышеприведённом коде можно прочесть так: «Перейти на один каталог выше(назад), зайти в директорию images
и взять от туда файл products.png
«.
Если ../
означает переход на одну директорию(уровень) выше в иерархии каталогов, то символ /
обозначает переход на один уровень ниже.
Последовательность символов ../
можно использовать в пути неоднократно. Например, если файл products.html
переместить в три директории вложенные в друг друга, то нужно будет использовать следующий код:
|
Как видно из предыдущих примеров, использование путей относительно документа во многих случаях оправдано. Такой вид пути часто применяется в практике, и его можно применить практически в любой ситуации. Как я уже говорил выше, существует ещё путь относительно корня сайта, о котором собственно и пойдет речь ниже.
Путь относительно корня сайта
Вы наверное уже поняли что пути относительно документа используются очень часто. Но при их использовании существует одна проблема. Которая заключается в том, что при смене структуры директорий, пути придется менять.
Но такая проблема решаема при использовании путей относительно корня сайта
. Где путь указывается от корневой директории до документа.
Все пути относительно корня сайта начинаются со знака /
. Только здесь, в отличии от путей относительно документа этот знак используется для указания корневой директории. Потому, что он используется в начале пути.
Путь относительно корня сайта позволяет перемещать некоторые файлы, без ущерба для ссылок. Этот тип пути Вы сможете использовать только на web-сервере в интернете, или на web-сервере расположенном на локальной машине.
В качестве web-сервера на локальной машине может выступать — . Который позволит у себя на компьютере создать среду для созданию сайтов и их предварительного тестирования.
Корневой относительный путь не содержит ни протокола http, ни доменного имени. И как я уже говорил начинается с указания символа / , который указывает на корневую директорию. В этой директории обычно располагается индексный файл главной страницы.
Например, /images/products.png обозначает, что файл products.png находится в папке images , которая расположена в корневом каталоге.
Самый простой способ определить корневой относительный путь — взять абсолютный и отбросить http:// и имя хоста.
Пример
Иногда бывает нужно, что бы информацию одной страницы использовали другие страницы сайта. Часто это делается для того что бы сократить количество повторяемого кода на каждой странице. Допустим есть файл _contact.html
, который содержит информацию о телефонных номерах, e-mail и содержит изображение contact.png
. (Пускай это будет небольшая таблица, которая будет располагаться на каждой странице сайта.)
Следующий код предназначен для вставки изображения «contact.png».
|
Код, который необходим для вставки одного файла в другой, выходит за рамки этой статьи. Здесь все зависит от используемого языка программирования.
Я надеюсь, что Вы уже знаете какой тип пути использовался в вышеприведённом коде. Если нет, тогда посмотрите приведённое выше определение пути относительно документа.
Теперь, когда посетитель зайдет на такие страницы сайта как home.html
, contact.ntml
, он увидит прекрасно отображаемую страницу. В каждую из которых вставлен файл _contact.html
, в который, в свою очередь, вставлено изображение contact.png
.
Другими словами зайдя, к примеру, на страницу home.html
, происходит следующее: «Выполняется код основной страницы home.html
. Затем вставляется и исполняется код страницы _contact.html
. Код страницы _contact.html
, говорит что нужно перейти в директорию images
и взять от туда изображение contact.png
«.
Если опустить сам код для вставки, то все работает отлично. Но вот если запустить страницу products.html
, то произойдет ошибка. Так как код будет пытаться найти директорию images
и файл contact.png
в директории products
. Но такой директории там не существует, из за чего собственно и возникает проблема.
Становится ясным, что использовать путь относительно документа здесь нельзя.
Конечно здесь можно использовать абсолютный путь. О плюсах и минусах данного подхода я говорил выше.
В общем говоря, это одна из ситуаций, когда нужно использовать путь относительно корня сайта. При использовании пути относительно корня сайта, ссылка будет всегда начинаться с корневого каталога(корня сайта). Такой тип пути позволит использовать код для вставки, например изображения, независимо от иерархии сайта, и его директорий.
Использование пути относительно корня сайта в вышеприведённом примере, позволит избежать проблем, со вставкой изображения. Потому как независимо от того где будет использовать такой тип пути, он всегда найдет указанный в нем файл.
Путь относительно корня сайта, очень похож на путь относительно документа. Для того что бы создать путь относительно корня сайта, нужно добавить символ /
в начало пути.
|
Теперь изображение будет корректно вставляться на любой из страниц сайта.
Надеюсь я немного помог Вам разобраться в том какие пути существуют, и в том когда и где они используются. Теперь можно использовать все типы пути по прямому их назначению.
В этой главе мы с вами поговорим ссылках-путях которые мы прописываем в атрибут HREF
.
Все что на данный момент знаем так это только шаблон:
анкор
Для новичков этих знаний достаточно, для профи который берется за большой проект нет!!!
Ведь в больших проектах существуют разделы, в которые нужно переходить и выходить... И тогда возникают вопросы как это сделать и как это сделать правильно?
Чтобы было проще учиться давайте создадим трех страничный сайт-визитку. Так как наш файл index.html не представляет для нас пока ни какой ценности мы его отредактируем и задействуем:
Наши контакты
Далее создадим файл delo.html , в котором расскажем о наших услугах:
Наши контакты
А так-же создадим файл kontakt.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
.