Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.
В примере 8.2 показано создание абсолютной ссылки на другой сайт.
Пример 8.2. Использование абсолютных ссылок
Изучение HTML
При указании в качестве ссылки каталога сайта (например, http://сайт/css/), отображается индексный файл . Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html .
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Ссылки относительно текущего документа
При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.
1. Файлы располагаются в одной папке (рис. 8.4).
Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре.
2. Файлы размещаются в разных папках (рис. 8.5).
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.
Две точки в данном случае означают выйти из текущей папки на уровень выше.
3. Файлы размещаются в разных папках (рис. 8.6).
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.
Ссылка
Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках (рис. 8.7).
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку - в папке. В этом случае путь к файлу будет следующий.
Ссылка
Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
Ссылка
Ссылки относительно корня сайта
Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем вначале. Так, запись Курсы означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.
Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.
твой сайт существует в как бы в двух измерениях.
Реальном и виртуальном.
Для всех посетителей - это виртуальный веб-сервер. Который отличается, в числе прочего, тем, что на нем НЕ СУЩЕСТВУЕТ ФАЙЛОВ. если ты пишешь %20" target="_blank">http://site.ru/file.html
- это не файл. Это URI, виртуальный адрес. Никакого файла с именем file.html на сервере может вообще не быть. Это все виртуальные адреса, а не файлы.
И браузер работает именно с адресами.
Для разработчика же сайт - это программа, выполняющаяся на совершенно конкретном реальном компьютере. С совершенно конкретным жестким диском, каталогами и файлами. И скрипт, работая со своими данными, подгружая другие скрипты, работает именно с реальными ФАЙЛАМИ, на физическом ДИСКЕ.
Вот в этом различии и кроются трудности, с которыми часто сталкиваются новички.
Теряют файлы, путают ссылки с файлами, обращаются к локальным файлам по протоколу HTTP, или инклюдят файлы от корня веб-сервера.
А всего-то надо четко понимать две вещи:
1. Различать корень веб-сервера, как его видит браузер, и корень файловой системы на диске.
2. Отличие относительных путей от абсолютных.
Начнем со второго.
Это очень просто. Если путь указывается от корня системы, то это путь абсолютный. Это как почтовый адрес в реальной жизни - откуда бы ты не шел, но по точному адресу ты всегда точно найдешь нужное место.
примеры абсолютных путей:
/var/www/site/forum/index.php
/img/frame.gif
с:\windows\command.com
В юникс-системах и на веб сайтах корень обозначается косой чертой - "/".
Это важно. Это не просто палочка, а самостоятельный АДРЕС, путь.
В адресе %20" target="_blank">http://www.site.ru/
последняя косая черта - не для красоты! Она обозначает вполне конкретный адрес - начало сайта.
На диске в юникс системах так же можно набрать "cd /" и ты попадешь в корневой каталог.
В виндоус системах файловая система разбивается по дискам, поэтому, в абсолютном адресе надо указывать имя диска. Абсолютного корня всей файловой системы в виндоус нет, у каждого диска - свой. Например, C:\ E:\
поэтому, даже если путь в виндоус начинается с косой черты, то это не абсолютный путь, а относительный. Относительно текущего диска. А абсолютный начинается с буквы.
Если в начале пути корень не указать, то этот путь будет относительным, и он достаивается от текущего положения. В реальной жизни это напоминает дорогу к винному магазину - "два квартала налево и там все время прямо". Дойти по такому пути можно только из конкретной точки. Из другой ты попадешь уже в совсем другое место.
Самый простой пример относительного пути - это просто имя файла.
Если файл находится в том же каталоге, с которым работает программа - она его найдет, добавив текущий путь к имени файла.
примеры относительных путей:
file.php
(фал лежит в той же папке)
./file.php
(фал лежит в той же папке. такая запись иногда требуется в некоторых юникс системах)
images/picture.jpg
(файл лежит в капке images, которая находится в текущей)
../file.php
(файл лежит в папке, которая расположена на один уровень выше от текущей)
../../file.php
(файл лежит в папке, которая расположена на два уровня выше от текущей)
И операционная система, и браузер, встретив относительный путь, достраивают его до абсолютного. но каждый - по-своему.
Теперь перейдём к первому пункту.
Различие корня веб-сервера, как его видит браузер, и корень файловой системы на диске.
В общем-то, из предыдущих объяснений уже все должно быть понятно.
На диске путь к файлу скрипта может быть таким:
/var/www/site/forum/index.php
В то же время, виртуальный адрес этого скрипта при просмотре через браузер, будет:
%20" target="_blank">http://www.site.ru/forum/index.php
На этом примере легко увидеть, где пересекаются два измерения: у этих двух адресов есть общая часть - /forum/index.php
- и она-то и служит причиной путаницы.
Для браузера это самый полный путь, который только может быть. Он начинается от корня сайта.
Для скрипта же, исполняющегося на сервере - это всего лишь ЧАСТЬ пути.
для скрипта путь /forum/index.php
окажется несуществующим - в корне диска нет каталога forum!
чтобы получить полный путь для того, что на сайте выглядит, как /forum/index.php
, надо приставить слева к нему путь к папке, которая считается корневаой для всего веб сервера.
в нашем примере - это
/var/www/site
Этот путь задается в кофигурации веб-сервера и именно он содержится в системной переменной PHP $_SERVER
[
"DOCUMENT_ROOT"
]
В виртуальном же сервере - том, который видит пользователь - наоборот, нет никакого диска. Есть корень сайта. То есть, для того, чтобы любая ссылка гарантированно работала, независимо от того, из какого места сайта она вызывается, она должна быть абсолютной.
Если у вас на сайте есть, допустим, два раздела:
%20" target="_blank">http://www.site.ru/about/info.php
и
%20" target="_blank">http://www.site.ru/job/vacancy.php
то, если в файле info.php
сделать ссылку просто на vacancy.php
, то браузер ее не найдет - он будет искать адрес %20," target="_blank">http://www.site.ru/about/vacancy.php
, достраивая путь от текущего каталога.
Поэтому надо писать полный путь от корня сайта - /job/vacancy.php
Всё это касается, естественно, не только тегов
но и
и любых других, где используются ссылки на другие файлы.
Ссылки на локальные адреса следует писать без указания протокола и домена - только путь от корня сайта - /job/vacancy.php . Ссылки же на другие сайты следует писать полностью - %20." target="_blank">http://www.site1.ru/job/vacancy.php .
PHP предоставляет множество средств для работы с файлами, каталогами и URL-ами.
Константа __FILE__ содержит имя текущего исполняемого файла.
В отличие от PHP_SELF она содержит имя файла, исполяющегося в данный момент.
очень полезной представляется конструкция dirname
(__FILE__
)
, на которую желательно заменить все вызовы файлов, лежащих в том же каталоге, что и вызывающий скрипт. Например:
require
dirname
(__FILE__
).
"/init.php"
функция dirname()
, наряду с basename()
является одними из наиболее употребительных для работы с файлами и каталогами.
Примечание:
При проблемах с путями при переносе скриптов с виндоус на юникс систему, в первую очередь обращайте внимание на регистр букв. На юникс-серверах регистр букв в имени файла имеет значение, File.txt и file.txt - это два разных файла, а под виндоус - один и тот же. Лучше всего писать имя файла всегда точно, соблюдая регистр.
В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src . Папки — «absolute_path_lvl_1» и все вложенные.
Путь может быть абсолютный и относительный.
Абсолютный путь
Абсолютный путь — это путь от корневой папки к файлу.Путь состоит из всех папок, которые нам надо просмотреть, разделенных через слеш. Посмотрим на примере:
/absolute_path_lvl_1/level_2.1/level_3.1/Kevin.png
Абсолютный путь к файлу
Относительный путь
Относительный путь — это ссылка, указывающая на другие страницы вашего сайта относительно веб-страницы, на которой эта ссылка уже находится.Если опускаем вниз по папкам, разделяем также через «/». Если надо подняться на уровень выше, пишем «..»
1. Самый простой пример относительного пути - это просто имя файла. если файл лежит рядом, просто указываем его имя
Hello.png
Относительный путь, файл рядом
2. Поднимаемся на папку выше
../Kevin_lvl_2.png
Относительный путь 2
3. Пример посложнее, из Diff_paths.html к картинке с Кевином
../level_2.1/level_3.1/Kevin.png
Относительный путь 3
Чем отличаются абсолютный и относительный пути
Это очень просто. Если путь указывается от корня системы, то это путь абсолютный. Это как почтовый адрес в реальной жизни - откуда бы ты не шел, но по точному адресу ты всегда точно найдешь нужное место.Если в начале пути корень не указать, то этот путь будет относительным, и он достраивается от текущего положения. В реальной жизни это напоминает дорогу к винному магазину - "два квартала налево и там все время прямо". Дойти по такому пути можно только из конкретной точки. Из другой ты попадешь уже в совсем другое место.
В файле absolute_path_lvl_1 / level_2.2 / Diff_paths.html можно посмотреть пример HTML страницы с разными путями к файлам.
Вот пример абсолютного и относительного пути для одного и того же файла с Кевином.
D:/hgprojects → сюда у меня выкачан проект «html-and-css-learn». У вас может быть другой путь
PS — подробнее в книге «
Несложно обратиться к файлу, который находится в той же папке, что и наш скрипт. Но когда дело доходит до работы с файлами в разных папках - у новичков начинает ехать крыша.
Из этой статьи мы узнаем:
- - что такое абсолютный и относительный путь к файлу,
- - чем они отличаются для сервера и браузера,
- - какие ошибки совершают новички при построении путей к файлам и как их избежать.
Пути к файлам на сервере
Абсолютный путь для сервера - это полный путь от корня до скрипта. Узнать полный путь скрипта можно с помощью "волшебной" константы __FILE__ :
В зависимости от операционной системы результат может различаться:
D:\OpenServer\domains\сайт\index.php - для OpenServer на Windows
/var/www/сайт/index.php - для UNIX
Разумеется, функция include() и её аналоги могут подключить файл по его абсолютному пути:
Относительный путь для сервера - это путь от папки, в которой находится текущий скрипт. Представим, что на нашем сайте лежат 2 скрипта: index.php и config.php . Тогда подключить второй из первого можно с помощью как абсолютного, так и относительного пути:
Пока что всё просто. Но если мы решим подключить файл, который сам подключает какой-то другой файл, ситуация станет немного сложней. Представим, что у нас появилась папка scripts со скриптами script1.php и script2.php , структура для наглядности:
Index.php scripts script1.php script2.php
Содержимое файлов будет таким:
Запустите в браузере файл index.php. Если всё сделано правильно, то отобразится надпись Подключение удалось . А теперь попробуйте перенести файл script2.php в корень сайта, на один уровень с index.php .
Ничего не изменилось, сайт по-прежнему показывает Подключение удалось . Как так получилось? Дело в том, что PHP пытается найти файл и в папке подключающего, и в папке подключаемого скрипта. Как вы понимаете, при наличии двух файлов в разных папках можно случайно подключить не тот скрипт и поломать сайт.
Навигация по относительным путям.
Заметьте, что относительные пути никогда не начинаются со слеша / . Если слеш в начале есть, PHP посчитает путь абсолютным.
folder1/folder2/folder3/script1.php - поиск файла в подпапке
../index.php - переход на одну папку вверх
../../../index.php - переход на 3 папки вверх
Как указывать путь к файлу на сервере?
Забудьте про относительные пути. Всегда указывайте только абсолютные пути к файлам. Радикально, да? Не волнуйтесь, PHP-сообщество придумало 2 простых (есть ещё и непростые:)) способа указать полный путь... не указывая полный путь.
Первый способ - использование функции dirname() . Она принимает путь к файлу и возвращает путь без имени файла, т.е. папку, в которой файл лежит. Совместив __FILE__ и dirname() мы можем получить папку текущего скрипта:
Теперь мы точно знаем, что будет подключен файл script2.php , находящийся в той же папке, что и текущий скрипт.
Второй способ - использование констант. Он используется во многих популярных CMS и выглядит следующим образом:
Создаётся константа DIR_ROOT , в которой мы будем хранить полный путь к корневой папке сайта. Также по желанию можно создать множество констант со ссылками на часто используемые папки. В include() передаём константу и относительно неё добавляется путь к нужному файлу.
Пути к файлам в браузере
Браузер не имеет доступа к жёсткому диску вашего сервера. Его "область видимости" начинается с корневой папки сайта. Поэтому абсолютный и относительный путь для сервера и для браузера выглядят абсолютно по-разному.
Абсолютный путь к файлу в браузере начинается со слеша / , например /images/logo.jpg . Этот путь означает, что файл расположен по адресу site.ru/images/logo.jpg .
Относительный путь к файлу выглядит точно также, но без слеша / в начале, например images/logo.jpg .
Частая ошибка новичков - использование относительного пути вместо абсолютного. Представим, что логотип сайта находится по адресу site.ru/images/logo.jpg . Попробуем его подключить по относительному пути:
Вроде бы всё хорошо и работает. Но так будет до тех пор, пока пользователь не перейдёт в какую-нибудь папку, например site.ru/products/15/ . Как вы догадываетесь, браузер будет пытаться загрузить лого по адресу site.ru/products/15/images/logo.jpg .
Всегда используйте абсолютные пути к файлам. Так вы избежите большинства возможных проблем с навигацией.
Надеюсь, вы успешно справились с прошлым заданием и создали три странички с текстом. Оформили его с помощью тегов и запомнили их назначение. Что же, возникает резонный вопрос: «Как перемещаться между этими страничками?». Легко! Тут нам понадобятся ссылки.
Ссылка это элемент страницы, который по сути своей представляет собой обычный текст, но он активный! То есть при нажатии на этот текст происходит перенаправление посетителя на другую страницу. Неправда ли, это как раз то, что мы искали! Так давайте скорее научимся использовать ссылки, вот вам пример:
Мой сайт
Смотрите: тег «a», а у него атрибуты: «href» и «target», хотя это не все атрибуты, которые имеет данный тег, но на них я вам объясню принцип. Некоторые теги, как например, ссылка имеют атрибуты. При этом есть обязательные атрибуты и не обязательные. Конкретно в нашем случае обязательным является href, а target нет.
Но вернемся к самой ссылке. Насчет того, какие они бывают лучше почитать в соответствующей теме у меня на сайте: какие бывают ссылки. Но там я не рассказал подробно об относительных и абсолютных путях:
Https://сайт/1.png - абсолютный путь file://localhost/C:/1.png - абсолютный путь на локальном компьютере../img/1.png – относительный путь
Вот вам и примеры. Абсолютный путь жестко задает адрес страницы или файла. Их использовать нежелательно, ведь если вы разрабатываете сайт на компьютере, а потом перенесете его на сервер, то все пути придется менять, представляете сколько мороки? Гораздо лучше использовать относительные пути, который работает следующим образом: есть рабочая директория в которой находится запущенный (открытый) файл. И все относительные пути уже начинаются именно от рабочей директории. Чтобы подняться вверх по каталогу нужно написать «..» как в примере выше. Если хотите остаться в этом каталоге про сразу пишите название файла или папки.
Ну и для понимания: пусть у нас есть папка с файлами, которая находится по следующему адресу C:\site и есть еще одна папка C:\site2. В первой папке лежат странички page1.html, page2.html, page3.html и папка с картинками img, а в другой папке, то есть site2 страницы page4.html и page5.html.
Соответственно открываем страницу page1.html из папки site как начальную и от нее пляшем:
Page2.html – путь ко второй странице, она находится в том же каталоге что и первая. page3.html – то же самое. img/1.png – рисунок в папке с картинками. ../site2/page4.html – эта страница находится не в рабочей папке, следовательно, мы поднялись на каталог выше и зашли в папке site2 для доступа к 4 странице. ../site2/page5.html – то же самое.
Надеюсь стало чуть понятнее насчет относительный и абсолютных путей.
Вот, анкор ссылки – ее текст, на который можно нажимать. В href пишется путь, на который переходим. В target – параметры перехода, например, открывать в новом окне. В title подсказка для ссылки, всплывает при наведении. Есть еще много параметров ссылки, но они на данный момент нам не нужны, ведь главное сейчас, если вы не забыли, это связать три наши странички вместе между собой.
Для этого открывает в блокноте страницу и в разделе body в самом начале, чтобы ссылки были вверху страницы, добавляем ссылки:
Жираф | Слон | Зебра … Дальше идет уже наш текст о животном, который мы написали до этого, в прошлом уроке.
Не забудьте следующие моменты: вместо page1.html и 2 и 3 вписывайте названия своих страниц. Все файлы страниц должны лежать в одной папке, иначе используйте относительные или абсолютные пути для доступа к ним.
