Относительные и абсолютные ссылки в html: Абсолютные и относительные ссылки в HTML

абсолютные или относительные? / Хабр

Имеется в виду: какие адреса использовать для переходов внутри сайта? Допустим, мы хотим создать на домене site.ru с уже работающим сайтом другой подсайт, файлы которого будут находиться в папке shop. URL этого подсайта будет такой:

http://site.ru/shop

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

1. Абсолютные ссылки (absolute)

href="http://sites.ru/shop/" — ссылка на главную страницу магазина
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/" — cсылка на страницу товара

2. Относительные ссылки (relative)

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

href="t-shirts/t-shirt-life-is-good/" — ссылка с главной страницы на страницу товара
href="../../" — ссылка со страницы товара на главную страницу

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

Промежуточные варианты

Выше мы рассмотрели два крайних случая: чисто абсолютные и чисто относительные ссылки. Однако имеются и другие варианты ссылок. Прежде нужно сказать, что в этом мире всё относительно. Это касается и ссылок. Говоря о том, что ссылка абсолютная, нужно всегда указывать: относительно чего. Для краткости договоримся все промежуточные варианты ссылок, которые мы рассмотрим ниже, называть с помощью следующей конструкции «адрес относительно …», хотя по сути все они будут абсолютными. Первые два варианта ссылок (1 и 2) будем по-прежнему называть просто «абсолютными» и «относительными».

3. Адрес относительно протокола (protocol-relative)

href="//sites.ru/shop/" — главная страница магазина
href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/" — страница товара

Google рекомендует переходить именно на адреса без указания протокола. Однако, неизвестно, как долго будет длиться переходный период, так как сейчас считается, что http:// и https:// — это разные сайты

4. Адрес относительно корневой папки домена (root-relative)

href="/shop/" — главная страница магазина
href="/shop/t-shirts/t-shirt-life-is-good/" — страница товара

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

5. Адрес относительно главной страницы сайта (base-relative)

В HTML есть тег . Он задает базовый адрес, который будет автоматически добавляться ко всем относительным ссылкам и якорям. Ставить этот тег нужно в разделе . В качестве базового адреса мы укажем URL главной страницы:

<base href="http://sites.ru/shop/">
href="" — главная страница магазина
href="t-shirts/t-shirt-life-is-good/" — страница товара

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

Остается только привыкнуть к тому что, хотя адреса и записаны, как относительные, ведут они себя как абсолютные. Особенно нужно помнить о якорях, так как привычная конструкция href=»#comments» теперь производит переход не в пределах текущей страницы, а переводит на главную страницу, так как впереди будет автоматически приписан URL главной страницы. Теперь впереди хеша нужно явно прописывать адрес текущей страницы: href=«t-shirts/t-shirt-life-is-good/#comments».

Что касается «настоящих» абсолютных ссылок (1, 3, 4), то они работают как обычно — тег base не оказывает на них никакого действия. Действие элемента base распространяется только на html-документ, но не касается относительных URL внутри css, js, svg и др. файлов.

Заключение

Какой вариант ссылок использовать, решать вам, так как в каждом случае нужно учитывать и другие факторы. Я для внутренних ссылок использую адреса относительно главной страницы сайта (5.base-relative). Для внешний ссылок и рассылок с сайта лучше использовать абсолютные ссылки (1.absolute).

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

Я искал полное окончательное объяснение абсолютных и относительных связей в HTML.

1. <a href="http://www.example.com/page.html">link page</a>
2. <a href="//page2.html">link page</a>
3. <a href="/page3.html">link page</a>
4. <a href="./page4.html">link page</a>
5. <a href="../page5.html">link page</a>

Так что в приведенном выше списке,

1. это абсолютная связь
2. относится к корню сайта либо с http, либо с https
3. это относительно корня сайта?
4. находится ли он в текущем каталоге?
5. есть ли там каталог?

html

url

path

relative-path

absolute-path

Поделиться

Источник

phaseform    

08 сентября 2015 в 14:29

2 ответа

1

Это не HTML. Это абсолютные или относительные пути во всех аспектах операционной системы.

1. Да, нет никакого толкования. Является ли ссылка без SSL (https)
2. Да. Он автоматически переключается на http, если пользователь посещает веб-сайт в http, и https, если пользователь посещает веб-сайт в https.
3. Да. Он ссылается на //domain/thelink.ext
4. Да. Как и в операционной системе, ./ — это текущий каталог. Много раз вы должны указать это, чтобы убедиться, что это текущий.
5. Да. Как и в операционной системе, ../ изменяется на родительский каталог. Вы можете сделать вложенность, и ../../../ будет означать, что до 3 родительских каталогов.

Поделиться

Marcos Pérez Gude    

08 сентября 2015 в 14:34

1

1. Как вы сказали, абсолютная ссылка для небезопасного соединения (http://)
2. Только связывает вас с http://page2.html или https://page2.html в зависимости от текущего протокола
3. Да, связывает вас с URL/page.html
4. Да, то же, что и ссылка -> Текущий каталог
5. Да

Поделиться

Kevin Kendzia    

08 сентября 2015 в 14:36

Похожие вопросы:

Замените относительные URL-адреса в html на абсолютные URL-адреса

Я очищаю внешнюю веб-страницу, чтобы сохранить ее в файле, но иногда этот файл содержит относительные URL-адреса, которые я не могу просмотреть, потому что эти файлы не будут найдены. Я хочу…

Замените относительные URL-адреса на абсолютные

У меня есть html источник страницы в виде строки со мной: <html> <head> <link rel=stylesheet type=text/css href=/css/all.css /> </head> <body> <a…

Относительные ссылки автоматически получают сеанс ID

Поскольку сеанс ID вставляется в текущий URL, относительные ссылки также автоматически получают сеанс ID. Другими словами, если пользователь в данный момент находится на Page1.aspx и нажимает…

абсолютные и относительные связи?

При создании ссылок для an html на основе email, насколько важно использовать абсолютные ссылки? Кроме того, каковы преимущества использования относительных ссылок в целом?

Как изменить относительные пути на абсолютные пути в WordPress?

Мне нужно изменить относительные пути на абсолютные пути на моей странице WordPress. Мои ссылки на изображения разбиты на подстраницах. Например мне нужно переодеться ../url/image.png к…

Как преобразовать относительные ссылки в Atom feed в абсолютные с помощью XSL?

Я вытягиваю атомную подачу из слияния . Некоторые ссылки и изображения относятся к домену ( / ), поэтому, когда я потребляю ленту на другом веб-сайте, изображения и ссылки нарушаются. Можно ли…

Есть ли способ заставить редактор DotNetNuke HTML создавать относительные ссылки вместо абсолютных?

Я попытался добавить атрибут LinksUseRelativeUrls к соответствующему элементу в web.\'<>=\s]+)’, re.IGNORECASE) но оно возвращается :…

Относительные и абсолютные ссылки, якоря

Относительные ссылки

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

путь/документ.html

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

×Базовый URL
Должен быть определен в документе при помощи тега <base>.

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

Основной документ — ссылающийся документ в котором находится ссылка

Цель ссылки — запрашиваемый документ

Текущая папка — где расположен основной документ

Вложенная папка — внутри текущей

Соседняя папка — вместе с текущей,  располагается в общей родительской

Родительская папка — внешняя по отношению к текущей 

<!-- HTML. Код в файле основной-документ.html -->
 
<!-- Вариант 1. Цель в том же текущем каталоге -->
<a href="цель-1.html">Цель-1</a>
 
<!-- Вариант 2. Цель во вложенной папке -->
<a href="вложенная/цель-2.html">Цель-2</a>
 
<!-- Вариант 3.Цель в соседней папке -->
<a href="../соседняя/цель-3.html">Цель-3</a>
 
<!-- Вариант 4. Цель во внешней папке -->
<a href="../цель-4.html">Цель-4</a>

Бывают и более сложные варианты с большим числом уровней вложенности.

Можно сформулировать несколько простых правил:

Если цель ссылки находится в том же каталоге что и основной документ,
путь = цель

Если цель находится в другой папке текущего каталога (вложенной),
путь = имя_каталога/цель

Имя внешнего (по отношению к текущему) каталога не указывается, а в начале пути ставится 2 точки и слэш — ../ и далее путь

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

Если запрашиваемый документ находится на другом сервере, то необходимо указывать абсолютный URL

http://сервер/путь/документ.html

URL типа http

Самый обычный URL, наиболее часто применяемый в качестве цели гиперссылки. Выглядеть может вот так:

http://www.site-name.com

В общем виде данный тип имеет следующий формат: http://сервер:порт/путь

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

Сервер — компьютерная система, хранящая и выдающая по внешнему запросу веб-ресурс и обладающая уникальным IP-адресом. Имя состоит из нескольких частей, включая собственное имя сервера и последовательность доменных имен, отделенных друг от друга точками.

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

URL типа file

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

 file://сервер/путь

File-сервер, как и http-сервер, должен быть доменным именем или IP-адресом компьютера, содержащего скачиваемый файл. Отличие — протокол соединения не указывается. Файловый сервер может быть неквалифицированным, но уникальным именем компьютера в личной сети, или устройством хранения информации.
Путь к запрашиваемому файлу на указанном сервере может различаться в зависимости от операционной системы на сервере

Примеры

<!--- Если файл на диске D локального компьютера: --->
 
<a href="file://D:\путь\имя_файла.html">ссылка для Windows-систем</a>
<a href="file://D:/путь/имя_файла.html">ссылка для Unix-систем</a>
 
<!--- На сервере локального компьютера пользователя: --->
 
<a href="file://localhost/home/document.html">Документ</a>
 
<!--- На удаленном сервере server-name.com: --->
 
<a href="file://server-name.com/document.html">Документ</a>

URL для mailto

<!--- Заставляет отправлять сообщение указанному адресату: --->
 
<a hrеf="mailtо:fоg@fоgnsnow.ru">письмо мне</a>
 
<!--- Можно указать несколько получателей с адресами через запятую --->
<!--- Установка темы сообщения: --->
 
<a hrеf="mailto:fоg@fоgnsnow.ru?subject=Test mailto">письмо мне + тема</a>
 
<!--- Можно установить адрес и тему для копии. --->

URL типа ftp

Указатель ресурса типа ftp используется для получения документов с FTP-серверов. В общем виде выглядит так:

ftp://пользователь:пароль@сервер:порт/путь;тип=код_типа

FTP (Fail Transfer Protocol) — служба, требующая аутентификации. Значит для получения документа с сервера, вы должны быть зарегистрированным пользователем и знать пароль.
Многие FTP-серверы дают ограниченный доступ к своему содержимому всем желающим под логином — anonymous или quest, а порой и без всякого логина (подразумевается по умолчанию)

×

Никогда!
Не помещайте ftp URL с именем пользователя и паролем ни в какой документ! 
Браузер сам предложит вам их ввести после соединения с сервером

Сервер и порт указываются по тем же правилам, что и в http URL (если порт не указан, то по умолчанию назначается порт 21)

Путь — последовательность каталогов, разделенных символом наклонной черты, ведущей к запрашиваемому файлу.
Код_типа передачи — по умолчанию файлы передаются как двоичные. Если указать type=
d — название каталога
a — файл содержащий ASCII-текст
остальное смотрите в справочнике…

Примеры

<!--- Анонимный доступ к файлу file_1 на сервере --->
 
<a href="ftp://www.site-name.ru/my_files/file_1"></a>
 
<!--- Пользователь fog запрашивает оглавление каталога ctl_name --->
<!--- будет выдан запрос с предложением ввести пароль --->
 
<a hrеf="ftp://name@sitе-name.com/ctl_name;type=d"></a>
 
<!--- Пользователь user с паролем myPswd запрашивает файл file_2 --->
<!--- файл должен быть интерпретирован как ASCII-текст --->
 
<a hrеf="ftp://user:mуPswd@sitе-name.com/file_2;type=a"></a>

Ссылки внутри одной страницы

Обычно такие ссылки называют якорями.

Для создания ссылки на определенный фрагмент на той же странице нужно выполнить два действия:

1. Создать фрагмент, который будет служить целью для гиперссылки
2. Создать ссылку на этот фрагмент

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

После этого создается сама ссылка, у которой атрибуту href задается значение идентификатора фрагмента после знака решетки (#)

Пример:

<!--HTML. Создание фрагмента -->
<h4>Атрибуты ссылки</h4>
...
<!-- Создание ссылки на фрагмент -->
<a href="#Atribut_link">Фрагмент "Атрибуты ссылки"</a>

Если бы фрагмент, созданный выше, находился на другой странице, например somepage.html, то адрес этой страницы должен быть включен в URL перед знаком #

<a href="somepage.html#Atribut_link">Фрагмент на другой странице</a>

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

При использовании абсолютного URL, адрес формируется аналогично:

<a href="http://site-name.com/somepage.html#Atribut_link">
  Абсолютная ссылка на фрагмент
</a>

Веб-разработка. Абсолютные и относительные адреса.

При разработке веб-страниц очень часто приходиться сталкиваться с задачей указания адреса к тому или иному месту в сети Интернет или файлу.

Адреса нужно указывать:

+ Когда вы даете ссылки на что-либо;

+ Когда вставляете изображения;

+ Указываете в качестве фона какое-либо изображение;

и.т.д.

Есть 2 основных способа, как вы можете указать адрес на веб-страницах:

Способ 1. Абсолютный адрес.

Способ 2. Относительный адрес.

Каждый из этих способов имеет свои достоинства и недостатки и каждый из них можно использовать в своей ситуации.

Если вы хотите научиться основам веб-разработки, мои курсы на эту тему здесь.

Относительные адреса:

Исходя из названия путь или адрес здесь указывается относительно какого-то места. Это действительно так.

Чтобы понять, как это работает, давайте рассмотрим несколько примеров.

1) Структура следующая. Имеем 2 веб-страницы формата html, которые находятся в одной папке.

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

Например, ссылка с файла file1.html на файл file2.html будет выглядеть просто:

<a href="file2.html">Ссылка</a>

2) Следующая ситуация.

Имеем 2 файла html:

file1.html находится в папке folder1, а file2.html находится на уровень ниже.

Чтобы создать ссылку в файле file1.html на файл file2.html, нужно написать следующий код:

<a href="../file2.html">Ссылка</a>

Оператор ../ означает, что происходит обращение на уровень ниже.

3) Теперь обратная ситуация.

Нужно создать ссылку в файле file2.html на файл file1.html.

Для этого используем следующий код:

<a href="folder1/file1.html">Ссылка</a>

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

Использовать относительные адреса возможно в том случае, если файлы расположены на одном сайте.

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

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

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

В интернет абсолютный адрес представляет собой url и полный путь относительно домена сайта (его корня) до того места, где лежит файл.

Предположим, что файл лежит в папке folder1, которая лежит в корне сайта site1.ru.

Абсолютный адрес до этого файла будет следующий:

http://site1.ru/folder1/file.html

Наверняка вам не раз уже приходилось видеть адреса в таком виде.

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

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

Урок 4. Навигация, ссылки. Относительные и абсолютные пути.

Надеюсь, вы успешно справились с прошлым заданием и создали три странички с текстом. Оформили его с помощью тегов и запомнили их назначение. Что же, возникает резонный вопрос: «Как перемещаться между этими страничками?». Легко! Тут нам понадобятся ссылки.

Ссылка это элемент страницы, который по сути своей представляет собой обычный текст, но он активный! То есть при нажатии на этот текст происходит перенаправление посетителя на другую страницу. Неправда ли, это как раз то, что мы искали! Так давайте скорее научимся использовать ссылки, вот вам пример:

<a href="https://myblaze.ru" target="_blank">Мой сайт</a>

Смотрите: тег «a», а у него атрибуты: «href» и «target», хотя это не все атрибуты, которые имеет данный тег, но на них я вам объясню принцип. Некоторые теги, как например, ссылка имеют атрибуты. При этом есть обязательные атрибуты и не обязательные. Конкретно в нашем случае обязательным является href, а target нет.
Но вернемся к самой ссылке. Насчет того, какие они бывают лучше почитать в соответствующей теме у меня на сайте: какие бывают ссылки. Но там я не рассказал подробно об относительных и абсолютных путях:

https://myblaze.ru/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 в самом начале, чтобы ссылки были вверху страницы, добавляем ссылки:

<body>
<a href="page1.html">Жираф</a> | <a href="page2.html">Слон</a> | <a href="page3.html">Зебра</a>
…
Дальше идет уже наш текст о животном, который мы написали до этого, в прошлом уроке.

Не забудьте следующие моменты: вместо page1.html и 2 и 3 вписывайте названия своих страниц. Все файлы страниц должны лежать в одной папке, иначе используйте относительные или абсолютные пути для доступа к ним.

← Урок 3. Наполняем страницу | Содержание | Урок 5. Вставляем картинки →

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

Автор admin Просмотров 1.9к. Обновлено 17 октября 2019

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

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

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

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

Для этого мы можем использовать два режима:

• указать абсолютный путь
• указать относительный путь

HTML веб-ссылка: Абсолютные пути

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

<a href="https://gospodaretsva.com/css/index.html">сайт</a>

Ссылка указывает абсолютный путь и ссылается на конкретный каталог. В этом случае:

Для упрощения можно также сказать, что абсолютная ссылка — это URL, который мы обычно находим в адресной строке.

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

HTML-ссылка с относительными путями

Однако часто это относится к документам, расположенным в рамках проекта (или сайта), и — при разработке на нашем компьютере (т.е. «локально») — возможно, у нас еще нет веб-адреса, и мы не знаем, как настроить пути. Тогда полезно понять, как работают относительные пути.

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

<a href="страница.html">
ссылка на страницу в том же каталоге, что и текущая страница
</a>

Давайте теперь окажемся в такой ситуации:

То есть со страницы index.html мы хотим сослаться на файл interna.html, который находится в каталоге interna, который, в свою очередь, находится внутри каталога prima.

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

<a href="prima/interna/interna.html">Посетите внутреннюю страницу</a>

Теперь давайте посмотрим на противоположный пример: с внутренней страницы мы хотим сослаться на страницу ( index.html) выше двух уровней:

<a href="../../index.html">Посетите внутреннюю страницу</a>

Как можно видеть, следующие общие правила применяются к относительным путям :

1. Чтобы сослаться на файл, который находится в том же каталоге, просто свяжите имя файла:

<a href="paginaDaLinkare.html">ссылка на страницу</a>

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

<a href="prima/interna/interna.html">Посетите внутреннюю страницу</a>

Чтобы вернуться на уровень, просто используйте обозначение: ../файл.html

<a href="../../index.html">Посетите внутреннюю страницу</a>

Благодаря этим устройствам мы можем легко перемещаться между каталогами проекта или сайта: чтобы взять другой пример, вы можете вернуться на один уровень выше относительно местоположения файла, выбрать другую папку, а затем выбрать другой файл следующим образом:

../другаяПапка/файл.html

Href: index.html

Если проект находится на сервере Unix (но синтаксис также работает в системах Windows, если они не локальные), эта запись не должна вас удивлять: символ ‘/‘, помещенный в начале адреса, указывает на главный каталог сайт, иначе называемый root . Поэтому это <a href="/css/index.html"> еще один способ выражения абсолютных путей на своем сайте.

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

https://gospodaretsva.com/css/index.html

просто укажите каталог:

https://gospodaretsva.com/css/

Имя файла рекомендации

Как известно, существует два семейства операционных систем: Windows и Unix (Linux). Эти две операционные системы используют разные способы управления файлами, поэтому необходимо выполнить несколько шагов:

1. Желательно не оставлять пустые пробелы в именах файлов (пустые пробелы не всегда правильно интерпретируются), лучше устранить эту необходимость с помощью «подчеркивания» (то есть «_»). Например:mio_file.html
2. Прописные и строчные буквы могут иметь значение (в среде Unix они часто делают это), поэтому лучше проверить, как пишутся файлы

Абсолютные и относительные ссылки. Пути в HTML. Абсолютные и относительные ссылки в html-ссылках

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

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

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

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

Изучение HTML

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

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

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

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

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

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

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

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

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

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

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

Ссылка

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

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

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

Ссылка

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

Ссылка

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

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

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

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

Все HTML ссылки делятся на внешние и внутренние. Внешние ссылки
— это ссылки, ведущие с одного сайта на другой сайт или файл, расположенный на другом сайте. Внутренние ссылки
— это ссылки, ссылающиеся с одной страницы сайта на другую страницу этого же сайта или на разделы этой же страницы.

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

Все ссылки можно также условно разделить на относительные и абсолютные. Относительные ссылки
— это HTML ссылки, содержащие относительные пути, относительные ссылки могут быть только внутренними. Абсолютные ссылки
— это ссылки, содержащие абсолютные пути, абсолютные ссылки могут быть как внешними так и внутренними.

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

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

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

Абсолютный путь
обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http://www.пример.ру — так выглядит абсолютный путь к конкретному веб-сайту. http:// — это протокол передачи данных, а www.пример.ру — имя сайта (домен).

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

Теперь давайте рассмотрим, что такое URL
-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URL
расшифровывается как U
niform R
esource L
ocator (унифицированный адрес ресурса), проще говоря URL — это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет.

твой сайт существует в как бы в двух измерениях.
Реальном и виртуальном.

Для всех посетителей — это виртуальный веб-сервер. Который отличается, в числе прочего, тем, что на нем НЕ СУЩЕСТВУЕТ ФАЙЛОВ. если ты пишешь %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 — это два разных файла, а под виндоус — один и тот же. Лучше всего писать имя файла всегда точно, соблюдая регистр.

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

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

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

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

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

Пути к HTML-файлам

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Примеры путей к файлам

Путь	Описание
	Файл «picture.jpg» находится в той же папке, что и текущая страница.
	Файл «picture.jpg» находится в папке изображений в текущей папке
	Файл «picture.jpg» находится в папке изображений в корне текущего веб-сайта.
	Файл «picture.jpg» находится в папке на один уровень выше текущей папки

Пути к HTML-файлам

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Пути к файлам используются при связывании с внешними файлами, например:

• Интернет-страницы
• Изображения
• Таблицы стилей
• Скрипты Java

Абсолютные пути к файлам

Абсолютный путь к файлу — это полный URL-адрес файла:

Пример

Попробуйте сами »

Тег объясняется в главе: Изображения HTML.

Относительные пути к файлам

Относительный путь к файлу указывает на файл относительно текущей страницы.

В следующем примере путь к файлу указывает на файл в папке изображений, расположенной
в корне текущей сети:

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

В следующем примере путь к файлу указывает на файл в папке изображений, расположенной в
папка на один уровень выше текущей папки:

Лучшая практика

Рекомендуется использовать относительные пути к файлам (если возможно).

При использовании относительных путей к файлам ваши веб-страницы не будут привязаны к текущему
базовый URL. Все ссылки будут работать как на вашем собственном компьютере (localhost), так и на
ваше текущее общественное достояние и ваши будущие общедоступные домены.

Абсолютные ссылки, относительные ссылки и ID-ссылки ← Sabe.io

Ссылки или гиперссылки в Интернете являются основной формой навигации . Без них Интернет, каким мы его знаем, был бы совсем другим.

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

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

Назначение вашему тегу привязки назначения осуществляется путем присвоения значения атрибуту href .

 






 Ищите в Интернете! 

 Google 
 


 

Так выглядит ссылка.

В нашем случае, поскольку мы предоставили прямую ссылку на домашнюю страницу Google, нажатие на ссылку приведет нас именно туда.

Относительные ссылки

Абсолютные ссылки — это круто, но что, если вы просто хотите создать ссылку на файл в той же странице / каталоге / папке? Здесь в игру вступают относительных ссылки .

Например, если у вас есть два файла в одном каталоге / папке, index.html и food.html, вы можете связать index.html с food.html, выполнив примерно следующее:

 
 Это ссылка на food.html! 

 

Имейте в виду, что значение внутри атрибута href не обязательно должно указывать на файл HTML. Он может указывать на любой файл.

Если вы хотите, чтобы ваша относительная ссылка была относительной к корню вместо текущей папки / каталога, начните ссылку с /.

Также важно знать, что если вы хотите, чтобы ваши ссылки открывали новую вкладку , присвойте ему целевой атрибут со значением _blank , например:

 
 Эта ссылка откроется в новой вкладке. 

 

ID ссылки

Еще одно популярное использование тега привязки — присвоение атрибуту href значения идентификатора другого элемента на странице.

Щелчок по этой ссылке заставит ваш браузер прокрутить до этого элемента на странице .Это полезно для пропуска больших разделов вашей страницы.

Вот пример:

 







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

 Кукурузные хлопья 



 

Если вы сделаете окно браузера достаточно маленьким по вертикали, вы увидите, что оно работает.

В нашем следующем уроке сделайте свою страницу красивой, добавив к ним изображений и SVG-графику !

Оставьте отзыв на этой странице!

Абсолютный и относительный путь HTML (внешние и внутренние ссылки)

Все ссылки HTML делятся на внешние и внутренние. Внешние ссылки — это ссылки, которые ведут с одного сайта на другой сайт или файл, расположенный на другом сайте. Внутренние ссылки — это ссылки, которые ведут с одной страницы сайта на другую страницу того же сайта или на разделы той же страницы.

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

Все ссылки также можно условно разделить на относительные и абсолютные. Относительные ссылки — это HTML-ссылки, содержащие относительные пути, относительные ссылки могут быть только внутренними. Абсолютные ссылки — это ссылки, содержащие абсолютные пути, абсолютные ссылки могут быть как внешними, так и внутренними.

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

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

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

Абсолютный путь обычно используется для указания пути к файлу, который находится на другом сетевом ресурсе.Это полный URL-адрес файла или страницы. В абсолютном пути сначала указывается протокол, а затем имя домена (имя сайта). Например: http://www.example.com — так выглядит абсолютный путь к определенному сайту. http: // — протокол передачи данных, а www.example.com — имя сайта (домена).

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

Теперь давайте посмотрим, что такое URL . Каждая веб-страница в Интернете имеет свой уникальный адрес, здесь он называется URL-адресом. Аббревиатура URL расшифровывается как U niform R esource L ocator, проще говоря, URL является указателем ресурса. Этот способ записи адреса стандартизирован в Интернете.

Пара примеров URL:

"httр: //www.puzzleweb.ru/"

"httр: // www.Puzzleweb.ru/html/all_tags.php "
 

Все об относительных и абсолютных ссылках

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

В прошлом уроке мы увидели, как связать файлы HTML и CSS вместе, теперь мы будем опираться на это и посмотрим, как мы можем соединить несколько файлов HTML.После последнего урока у нас должен быть HTML-файл (с именем index.html), который выглядит так:

 

 
  
  
 
 
  
 Это элемент заголовка 1 
  
 Привет, мир, это простой абзац. 
 
 

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

Шаг 1

Найдите на своей странице элементы h2 и p и добавьте дополнительный код ссылки в абзаце:

 
 Это элемент заголовка 1 
 Привет, мир, это простой абзац.  Ссылка на Google  
 

На странице должно выглядеть так:

Рисунок 1: Снимок экрана примера индексной страницы

Это код простой ссылки на Google.Это должно показаться знакомым — мы использовали этот пример в учебнике HTML Overview для объяснения атрибутов. Давайте рассмотрим части ссылки:

Этот элемент a имеет атрибут href , имя которого — href, а значение — http://www.google.com.

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

Обратите внимание, что в приведенном выше примере значением атрибута является всей ссылки на Google, включая http: //. Хотя многие современные браузеры не требуют, чтобы вы вводили это на самом деле и не отображают его, когда вы кодируете ссылки на внешние веб-сайты, вы должны включать всю ссылку полностью или абсолютное расположение ссылки .Этот тип ссылки является наиболее конкретным типом ссылки, который мы можем использовать, и обычно он используется для доступа к страницам за пределами нашего собственного веб-сайта.

Относительные ссылки

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

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

Шаг 2

Поскольку наша существующая HTML-страница прекрасно настроена, и мы не хотим начинать с нуля, давайте создадим копию нашего индексного файла. Я просто собираюсь продублировать мой файл index.html и переименовать его в about.html , чтобы теперь у меня в папке веб-сайта было три файла, как показано ниже.

Рисунок 2: Скриншот файлов в папке нашего веб-сайта

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

Шаг 3

Откройте в редакторе новый файл about .html. Код точно такой же, как и у файла index.html (очевидно), потому что мы просто создали дубликат файла. Давайте просто изменим кое-что, чтобы мы знали, какую страницу просматриваем. Внесу следующие изменения:

 

 
  
  
 
 
  
 О странице 
  
 Здесь я напишу кое-что обо мне! 
 
 

Примечание: ссылка на ранее созданный стиль .css все еще находится в разделе нашего файла. Это означает, что и этот файл about .html, и наш файл index .html связаны с одним и тем же файлом CSS, поэтому любые изменения, внесенные в файл CSS, повлияют на оба файла HTML. На самом деле это хорошо. Мы выясним, почему, в следующих уроках.

Шаг 4

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

  Ссылка на главную страницу 
 О странице 
 Здесь я напишу кое-что обо мне! 
 

Шаг 5

И чтобы мы могли переключаться между страницами, я собираюсь открыть свой файл index .html в своем редакторе кода и добавить ссылку на мою страницу о себе, как таковую:

  Ссылка на страницу "О программе" 
 Это элемент заголовка 1 
 Привет, мир, это простой абзац. Ссылка на Google  
 

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

Навигация по строительной площадке

Эти серии сообщений предназначены для объединения, чтобы вы могли создать свой собственный веб-сайт, и самая основная функция всех веб-сайтов — это навигация для доступа ко всем страницам. Мы начнем строить это прямо сейчас.

Шаг 6

Давайте сделаем еще одну страницу, повторив шаг 2, но на этот раз позвонив получившейся странице contact.html .

Шаг 7

Прежде чем я открою эту новую страницу, я собираюсь отредактировать ссылку на моей странице index.html — на этот раз добавив ссылки на две другие страницы. Итак, откройте index .html и замените исходный код ссылки следующим:

  На главную 
 О компании 
 Связаться  

Я добавил три ссылки — по одной для каждой из моих страниц. Стоит отметить, что мне не особо нужна первая ссылка на индекс.html, поскольку мы уже на ней. Но для единообразия на моих страницах я пока оставлю это там. В результате страница должна выглядеть примерно так, как на скриншоте ниже:

Рисунок 3: Снимок экрана измененной домашней страницы

Шаг 8

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

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

Или вы можете скачать здесь заархивированную папку со всеми файлами сайта.

Специальные ссылки

Анкерные звенья

Итак, мы просто ссылались на разные страницы нашего сайта с относительными ссылками, и, естественно, мы делали ссылку на внешнюю веб-страницу (Google), используя абсолютную ссылку.Обе эти ссылки ведут на разные веб-страницы. Но что, если мы хотим создать ссылку на другое место на странице, на которой мы уже открыты? Это немного сложнее, но мы можем сделать это с помощью якорной ссылки. Я расскажу об этом в другом руководстве, после того как мы узнаем немного больше о структуре наших страниц и добавим на них больше контента.

Открытие ссылок в новых вкладках или окнах

В какой-то момент вам может потребоваться открыть определенные ссылки в новых вкладках или окнах браузера, особенно если вы включаете ссылки на внешний ресурс, который находится не на вашем собственном сайте.Это тоже довольно просто: просто добавьте целевой атрибут в свой тег ссылки, как показано ниже, со значением _blank.

  Ссылка на Google (открывается в новой вкладке)  

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

Открытие ссылки на электронную почту

Вы также можете создать ссылку, чтобы открыть новое почтовое сообщение. На этот раз значение атрибута href изменяется: мы добавляем mailto: перед адресом ссылки.

  [email protected]  

Вам также следует подумать о том, как вы используете этот тип ссылки, поскольку в наши дни многие люди используют почтовые службы на основе браузера (например, Gmail) для отправки электронных писем. Для этих людей ссылка может не открывать новое почтовое окно, поэтому видимым содержанием вашей ссылки должен быть адрес электронной почты, а не что-то вроде «напишите мне».Вы можете включить это перед ссылкой, как показано ниже (вы можете попробовать ссылку на почту, она работает).

Напишите Алексу по адресу [email protected]

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

Обертывание

Хорошо, теперь ваша коллекция кода начинает действовать немного больше как веб-сайт.Давайте начнем украшать его с помощью CSS в следующем уроке серии …

Ссылки для поиска и устранения неисправностей

Устранение неполадок относительных и абсолютных ссылок

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

На более глубоком уровне это проблема относительных по сравнению с абсолютными ссылками.

Относительные ссылки относятся к файлам в том же относительном местоположении.
Эти ссылки часто представляют собой просто имя файла (если файл находится в том же каталоге)
или комбинация имени каталога / имени файла:

Если у вас есть отдельная папка для
ваш класс 377 внутри вашей папки public_html, ссылка из вашего файла index.html
ваш файл 377.html будет выглядеть так (если вы используете код
Посмотреть в Composer):

и обратную ссылку из файла 377.html на файл index.html .
будет выглядеть так:

Отель «../»
просто означает «перейти на один каталог вверх».

Если все ваши файлы в одном
папку, ссылка должна быть такой:

и
обратная ссылка будет

Все они считаются родственниками
ссылки .

Для небольших сайтов можно хранить файлы в одной папке,
но по мере роста вашего сайта вам, вероятно, понадобится отдельная папка / каталоги
для каждого класса или каждого года. Использование графического редактора
относительные ссылки обычно предполагаются, если вы используете кнопку Insert Link
и выберите . Выберите файл , но иногда URL-адрес файла будет
начать с буквы диска:

Это абсолютный URL и будет
не работает.Либо проверьте, что URL-адрес относится к области расположения файла ,
или отредактируйте URL-адрес, чтобы удалить букву диска.

Абсолютные ссылки относятся к файлам по их полным URL-адресам, включая
префикс . Они используются, когда вы ссылаетесь на страницу за пределами
твой сайт. Например, ссылка на домашнюю страницу GMU будет выглядеть так:

Абсолютная ссылка на
файл на жестком диске будет выглядеть так

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

Преимущество относительной ссылки — транспортабельность: пока файлы
находятся в тех же относительных местоположениях, ссылки будут работать. Вы можете переместить весь
веб-сайтах, просто переместив каталог public_html в другой
server, а относительные ссылки останутся нетронутыми.Но если вы переместите файл в
в новом относительном местоположении эти ссылки разорвутся. Например, если у вас был
изображения в вашем каталоге public_html , но затем решили
переместите все свои изображения в новый каталог изображений , ссылки
к тем изображениям сломается. Вам нужно будет обновить каждую из них.

Та же самая проблема является причиной многих битых изображений на веб-страницах.
Взгляните на исходный код ( View -> Page Source) или
Щелкните правой кнопкой мыши поврежденное изображение и проверьте его свойства . Если
путь к изображению или содержит букву диска (пример: ), изображение появится только при доступе к странице на вашем компьютере,
поскольку вы случайно связались с локальной копией, а не с удаленной
файл на сервере.

Хранение файлов в одинаковых относительных местоположениях — это проблема сайта
поддержание.

Dean Taciuch
Отделение английского языка GMU

Это произведение находится под лицензией Creative
Лицензия Commons.

Общие сведения о ссылках — Dreamweaver CS6: Отсутствующее руководство [Книга]

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

За кадром простой тег HTML, называемый тегом привязки
() заставляет работать каждую ссылку.Ссылки бывают трех
ароматы: абсолютные, относительные к документу и
родственник по корню . Типы ссылок в действии демонстрируют примеры каждого из
упражняться.

Когда люди хотят отправить вам письмо, они просят ваше
адрес. Предположим, это 123 Main St., Smithville, NY 12001, USA. Нет
независимо от того, где в стране ваши друзья, если они пишут
123 Main St., Smithville, NY 12001, USA на
конверт и отправьте его по почте, их письма дойдут до вас.Это потому что
ваш адрес уникален.

Точно так же каждая веб-страница имеет уникальный адрес, называемый
URL (большинство людей произносят это «вы-эль») или
Единый указатель ресурсов. Если вы откроете веб-браузер и наберете http://www.cafesoylentgreen.com/events/index.html
в адресную строку, на страницу событий Cafe Soylent Green
открывается.

Этот URL представляет собой абсолютную ссылку — это
полный, уникальный адрес для одной страницы.Абсолютные ссылки всегда
начинаются с http: // , а абсолютная ссылка ведет
на одну и ту же целевую страницу, независимо от того, какую страницу веб-сайта вы разместите
эта ссылка включена — абсолютная ссылка на веб-странице может вызывать другую страницу
на том же сайте или на странице на другом сайте. Вы будете использовать
абсолютные ссылки каждый раз, когда вы ссылаетесь на веб-страницу за пределами
ваш собственный сайт — это только способ
веб-браузер может переходить со страницы вашего сайта на страницу за пределами
твой сайт.Однако, если вы хотите вызвать страницу
внутри вашего сайта, есть другой способ написать
ссылку (описанную далее), которая позволяет просматривать ваши страницы без
подключение к Интернету прямо на вашем рабочем столе — подвиг,
невозможно с абсолютными ссылками.

Итог: используйте абсолютные ссылки, если хотите создать ссылку на
страница на другом сайте.

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

Когда вас спросят, где вы живете, вы могли бы сказать: «Я живу в
123 Main St., Smithville, NY 12001, USA », но ваши соседи
вероятно, вы думаете, что вам нужна психиатрическая помощь. Вместо этого вы бы сказали
что-то вроде: «Просто перейди через улицу, и вот ты где». Из
конечно, вы не можете использовать эти инструкции в качестве почтового адреса,
и они не имели бы смысла для соседа, жившего семь
дома вниз.Эти указания помогают только соседям напрямую
через дорогу от их дома к вашему.

Если вы хотите создать ссылку с одной веб-страницы на другую
на том же веб-сайте вы используете аналогичное сокращение, называемое
ссылка на документ . По сути,
ссылка, относящаяся к документу — например, направления, которые вы дали своему
сосед — сообщает браузеру, где найти страницу.
относительно относительно вашего текущего местоположения, в данном случае
относительно текущей веб-страницы.Если две страницы находятся в
к той же папке, например, путь такой же простой, как «Перейти на эту страницу
вон там.» В этом случае ссылка — это просто имя файла.
вы хотите разместить ссылку, например, на: index.html . Ты можешь уйти
от всего этого http://www.your_site.com/ бизнеса, потому что ты
уже на этом сайте и в этом каталоге.

Ссылки, относящиеся к документу, могут быть привередливыми, потому что
они полностью зависят от местоположения страницы, содержащей
связь.Если вы переместите эту страницу в другую часть своего сайта — подача
например, в другой папке — ссылка работать не будет (это как
хотя ваши соседи переехали через город — они не могли перейти
улица, чтобы добраться до вашего дома больше). Вот почему работа с
ссылки, относящиеся к документу, традиционно были одними из самых
хлопотные хлопоты для веб-дизайнеров, даже если такая ссылка
идеально подходит для перехода с одной страницы на другую в том же
сайт.

К счастью, Dreamweaver позволяет работать с документами, относящимися к
ссылки настолько легкие, что вы можете забыть, о чем идет речь. В
Dreamweaver, всякий раз, когда вы сохраняете страницу, имеющую относительный документ
ссылку на папку, отличную от исходной папки страницы —
маневр, который обычно разрушает все ссылки на
страница — Dreamweaver незаметно переписывает ссылок, чтобы
они все еще работают. Еще лучше, используя управление сайтом программы
инструментов, вы можете бесцеремонно реорганизовать свой сайт, не боясь
файлы и папки, не нарушая тонких связей между
файлы вашего сайта.(Вы узнаете об управлении сайтом Dreamweaver
подробно рассматриваются в Части 4 этого
книга.)

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

Представьте, что вы работаете в большом офисном здании. Скажите, что вам нужно получить
в офис коллеги в том же здании, поэтому позвоните ей, чтобы
направления. Она может не знать точного направления от вашего офиса.
ей, но она может рассказать вам, как выйти из здания
вход в ее офис. Поскольку вы оба знаете, где находится здание
входная дверь есть, эти направления работают хорошо.Фактически, она может дать
одинаковые направления ко всем остальным в здании, и поскольку все они
знать, где вход, они тоже найдут ее офис.
Думайте о офисном здании как о своем участке, а его входную дверь — как о
корень вашего сайта. Корневые ссылки всегда
начинаются с косой черты (/). Эта косая черта заменяет
корневая папка — входная дверь — вашего сайта. Та же корневая относительная ссылка
всегда ведет на одну и ту же страницу, независимо от того, где она находится на вашем
Веб-сайт.

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

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

У корневых ссылок есть один серьезный недостаток: они не работают при тестировании.
их на вашем собственном компьютере. Если вы просматриваете веб-страницу на своем
жесткий диск компьютера, нажатие на ссылку, относящуюся к корневому каталогу, в браузере либо не работает
или выдает только ошибку «Файл не найден».Корневые ссылки работают
только если страницы, на которых они есть, находятся на веб-сервере. Это
потому что технология, лежащая в основе веб-серверов, понимает
ссылки, а на вашем персональном компьютере нет.

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

Примечание

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

Чтобы включить эту функцию, перейдите в Edit → Preferences.
(Dreamweaver → Настройки), нажмите «Предварительный просмотр в браузере»
категории и установите флажок «Предварительный просмотр с использованием временного файла».За кулисами Dreamweaver тайно переписывает корень-родственник
ссылки как относительно документа ссылок всякий раз, когда
создает временный файл. Если вы видите на своем сайте файлы со странным
такие имена, как TMP2zlc3mvs10.htm, это временные файлы
Dreamweaver создает. Не стесняйтесь удалять их.

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

Примечание

У вас могут возникнуть проблемы с корневыми ссылками, если
сайт, над которым вы работаете, находится в папке внутри сети
корневая папка сервера. Например, ваш приятель дает вам место
на своем веб-сервере. Он говорит, что вы можете поместить свой сайт в папку
называется my_friend , поэтому ваш URL
http: // www.my_buddy.com/my_friend/. В этом случае ваши веб-страницы
не сидят в корне сайта — они в папке
внутри корень. Таким образом, относительная корневая ссылка на
ваша домашняя страница будет /my_friend/index.html. Dreamweaver умеет
справиться с подобной ситуацией, но только если вы предоставите правильный
URL вашего сайта — http: //www.my_buddy.com/my_friend/ — когда вы его установите
вверх (см. Рисунок 4-1).

Рисунок 4-1. При настройке сайта в Dreamweaver вы можете определить
URL-адрес сайта, даже если он находится в подпапке в корне
папка — это фактический адрес сайта в Интернете.Разверните
список параметров дополнительных настроек слева от настройки сайта
щелкните категорию Local Info, а затем введите полный веб-адрес.
адрес вашего сайта в поле URL-адрес. Вы также можете сказать
Dreamweaver, какой тип ссылки — ссылка на документ или на сайт
root-relative — следует использовать при создании ссылки на другую страницу
на вашем сайте (обведено). Вы всегда можете вернуться в это окно, чтобы
измените этот параметр: выберите «Сайт» → «Управление сайтами», выберите свой сайт,
а затем щелкните «Изменить».

Рисунок 4-2
показывает веб-сайт так, как он отображается на жестком диске: папки, заполненные
HTML-документы и графика. Вот некоторые ссылки, которые вы
могут найти на этих страницах и как они могут работать.

Рисунок 4-2. Вот несколько примеров ссылок на фиктивный веб-сайт.
расположен по адресу http://www.nationalexasperator.com. Три
стрелки показывают связи между исходной страницей (где каждый
начинается стрелка) и страницу, на которую она указывает (где каждая стрелка
заканчивается).

Ссылка с домашней страницы (Index.html) на страницу контактов
(Contact.html)

Большинство веб-сайтов называют домашнюю страницу
index.html или index.htm .
Вы можете перейти с этой страницы на
contact.html страница, обозначенная номером 1
на рисунке 4-2 — с использованием любого из
три типа ссылок:

• Абсолютный адрес ссылки :
  http: //www.nationalexasperator.com / contact.html.
  Что это означает: перейдите на сайт http://www.nationalexasperator.com и загрузите
  страница contact.html .

• Ссылка на документ
  адрес : contact.html . Что это
  означает: искать в той же папке, что и текущая страница, и
  скачать страницу contact.html .

• Корневая относительная ссылка
  адрес : / контакт.html . Что это
  означает: перейдите в папку верхнего уровня этого сайта и загрузите
  contact.html .

Совет

Если вы можете написать абсолютный URL-адрес, вы можете легко написать
относительный к корню URL. Просто снимите
http: // и имя веб-сервера. в
пример выше, удалив http://www.nationalexasperator.com в
абсолютный адрес оставляет / контакт.html —
путь относительно корня.

Ссылка со страницы гороскопов на страницу Рыб

А теперь представьте, что вы создали веб-страницу, на которую хотите перейти по ссылке.
страницу в подпапке вашего сайта. Вот как вы могли бы использовать каждый из
три типа ссылок для открытия документа, вложенного во вложенную папку (в этом
Например, вложенная папка «2005»), обозначенная номером 2
на рис. 4-2:

• Абсолютный адрес канала :
  http: // www.nationalexasperator.com/horoscopes/2005/pisces.html.
  Что это означает: перейдите на сайт http://www.nationalexasperator.com, посмотрите в
  папка гороскопы , затем загляните в
  папка 2005 , а затем скачать страницу
  pisces.html .

• Ссылка на документ
  адрес : 2005 / pisces.html . Какие
  это означает: с текущей страницы загляните в папку
  2005 и скачать страницу
  рыб.html .

• Корневая относительная ссылка
  адрес :
  /horoscopes/2005/pisces.html . Что это
  означает: перейдите в папку верхнего уровня этого сайта, посмотрите в
  папка гороскопы , затем загляните в
  папка 2005 , а затем скачать страницу
  pisces.html .

Ссылка со страницы Скорпиона на страницу гороскопов

Теперь предположим, что вы создаете веб-страницу, которая
вложенная папка, и вы хотите, чтобы она ссылалась на документ за пределами
эта папка, как и ссылка с меткой 3 на рисунке 4-2:

• Абсолютный адрес ссылки :
  http: // www.nationalexasperator.com/horoscopes/horoscopes.html.
  Что это означает: перейдите на сайт http://www.nationalexasperator.com, посмотрите в
  папку гороскопы , и скачать страницу
  horoscopes.html .

• Ссылка на документ
  адрес : ../horoscopes.html .
  Что это означает: подняться на один уровень выше текущего
  папку — и загрузите страницу
  гороскопов.html . В адресах веб-сайтов
  косая черта / представляет папку или каталог. Две точки (..)
  означает: «Перейти на один уровень вверх» в папку,
  содержит текущую папку. Итак, чтобы связать
  на страницу, которая находится на два уровня выше, например, чтобы перейти по ссылке с
  scorpio.html на главную страницу
  ( index.html ) — вы должны использовать
  .. / дважды, вот так:
  ../../index.html .

• Корневая относительная ссылка
  адрес :
  /horoscopes/horoscopes.html . Что это
  означает: перейдите в папку верхнего уровня этого сайта, посмотрите в
  папку гороскопы , и скачать страницу
  horoscopes.html .

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

Абсолютные и относительные ссылки пути в HTML

Привет, ребята,

Вы, должно быть, хорошо знакомы со ссылками на веб-страницы, верно? Ага! А кто нет?

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

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

Ссылки в HTML: сложная концепция

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

Многие разработчики, которые учатся кодировать HTML, с трудом понимают его на начальном этапе кодирования HTML , поскольку концепция ссылок пути в HTML довольно сложна. Если вы тоже один из таких борющихся разработчиков, то мы здесь, чтобы помочь вам!

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

Общие сведения о ссылках абсолютного и относительного пути

Ссылки абсолютного пути — это пути, которые содержат точное местоположение к сайту, который содержит целевой документ.

Например, абсолютный путь будет состоять из имени домена как части ссылки на другой веб-сайт, на котором представлены элементы веб-страницы. В HTML мы используем следующий синтаксис для записи ссылки с абсолютным путем:

  абсолютный путь  

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

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

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

Вот почему мы рекомендуем вам использовать относительный путь ссылки для локальных ресурсов HTML.

Ссылки относительного пути:

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

Также, в отличие от абсолютных путей, ссылки относительного пути не требуют полного URL-адреса для связывания, и в зависимости от различных сценариев правило синтаксиса для ссылок относительного пути может отличаться. Давайте посмотрим на некоторые из них, перечисленные ниже:

Стандартный синтаксис для ссылки относительного пути в HTML :

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

Для ссылок в том же каталоге :

 Имя файла 

Для ссылок в подкаталогах

 Подфайл / имя файла 

Для ссылок до одной каталог

 ../filename 

Разница между ссылками абсолютного и относительного пути в HTML

Чтобы более кратко понять разницу между ссылками абсолютного и относительного пути, давайте посмотрим на приведенную ниже таблицу, в которой перечислены все точки, которые делают абсолютный путь, отличный от ссылок относительного пути:

Резюме :

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

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

Надеюсь, это помогло вам развеять сомнения относительно использования абсолютных и относительных ссылок на пути в HTML.

Чтобы узнать больше о связывании элементов в HTML, вы также можете изучить HTML в Интернете с помощью некоторых из лучших руководств по HTML для начинающих.