Ссылки можно поделить на две категории:
ссылки на внешние ресурсы — создаются с помощью тега и используются для расширения возможностей текущего документа при обработке браузером;
гиперссылки — ссылки на другие ресурсы, которые пользователь может посетить или загрузить.

Как сделать гиперссылки на сайте

1. Структура ссылки

Гиперссылки создаются с помощью парного тега . Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.

Обязательным параметром тега является атрибут href , который задает URl-адрес веб-страницы.

указатель ссылки

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

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

Метод доступа://имя сервера:порт/путь

Метод доступа , или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:

file обеспечивает чтение файла с локального диска:

File:/gallery/pictures/summer.html

http предоставляет доступ к веб-странице по протоколу HTTP:

Http://site.ru/

https - специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)

Https://site.ru/

ftp осуществляет запрос к FTP-серверу на получение файла:

Ftp://pgu/directory/library

mailto запускает сеанс почтовой связи с указанным адресатом и хостом:

Mailto: [email protected]

Имя сервера описывает полное имя машины в сети, например, site.ru . Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.

Номер порта ТСР , на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
21 — FTP
23 — Telnet
70 — Gopher
80 — HTTP

Путь содержит имя папки, в которой находится файл.

2. Абсолютный и относительный путь

Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.

Рис. 1. Пример структуры папок

2.1. Абсолютный путь

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
1) протокол, например, http (опционально);
2) домен (доменное имя или IP-адрес компьютера);
3) папка (имя папки, указывающей путь к файлу);
4) файл (имя файла).

Существует два вида записи абсолютного пути — с указанием протокола и без него:

Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Если файл находится в корневой папке, то путь к файлу будет следующим:

Http://site.ru/index.html

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

Http://site.ru/

Обычно в качестве индексного файла выступает документ с именем index.html . Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

2.2. Относительный путь

Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http:// , он выполняет поиск указанного документа на том же сервере.

Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу);
2) файл (имя файла).

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

Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.

3. Якоря

Якоря , или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега с разницей в том, что атрибут href содержит имя указателя — так называемый якорь , а не URl-адрес. Перед именем указателя всегда ставится знак # .

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

Из этой статьи мы узнаем:

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

Пути к файлам на сервере

Абсолютный путь для сервера - это полный путь от корня до скрипта. Узнать полный путь скрипта можно с помощью "волшебной" константы __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 .

Всегда используйте абсолютные пути к файлам. Так вы избежите большинства возможных проблем с навигацией.

При разработке сайта часто приходится прописывать пути к файлам, ссылки на документы, страницы.
В книгах по компьютерным технологиям можно часто встретить употребление терминов абсолютного и относительного пути к файлам. Часто автор не разъясняет, что означает тот или иной путь. Читатель, соответственно, путается, когда автор в последствии говорит об использовании абсолютного и(или) относительного пути.
Допустим, у Вас есть сайт и Вам нужно создать гиперссылку(ссылку) на одну из страниц сайта. Здесь нужно выбрать какой использовать тип пути: относительный или абсолютный.

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

Так как большую часть своего времени я уделяю 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 . Но такой директории там не существует, из за чего собственно и возникает проблема.
Становится ясным, что использовать путь относительно документа здесь нельзя.
Конечно здесь можно использовать абсолютный путь. О плюсах и минусах данного подхода я говорил выше.
В общем говоря, это одна из ситуаций, когда нужно использовать путь относительно корня сайта. При использовании пути относительно корня сайта, ссылка будет всегда начинаться с корневого каталога(корня сайта). Такой тип пути позволит использовать код для вставки, например изображения, независимо от иерархии сайта, и его директорий.
Использование пути относительно корня сайта в вышеприведённом примере, позволит избежать проблем, со вставкой изображения. Потому как независимо от того где будет использовать такой тип пути, он всегда найдет указанный в нем файл.
Путь относительно корня сайта, очень похож на путь относительно документа. Для того что бы создать путь относительно корня сайта, нужно добавить символ / в начало пути.

Теперь изображение будет корректно вставляться на любой из страниц сайта.

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

Любая 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 комментариев

В статье приведены кусочки кода. Полную версию можно взять тут — 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 — подробнее в книге «