Абсолютные и относительные ссылки в html-документе, актуальные не только для файловой структуры сайта, но и для файлов на жестком диске компьютера.
Ссылки в html-документе могут содержать абсолютные или относительные адреса (пути к файлам). Если адрес заканчивается папкой, браузер откроет файл index.html (или index.php), расположенный в этой папке.
Абсолютные ссылки
Абсолютные ссылки содержат абсолютные адреса, представляющие из себя полный путь к ресурсу (файлу). Абсолютные интернет-адреса могут быть внутренними или внешними, они должны начинаться с указания протокола (https://) и содержать имя сайта.
Пример абсолютной ссылки на эту статью:
|
1 |
<a href="https://vremya-ne-zhdet.ru/html/absolyutnyye-i-otnositelnyye-ssylki/">HTML. Абсолютные и относительные ссылки</a> |
Соответственно, полный путь:
|
1 |
https://vremya-ne-zhdet.ru/html/absolyutnyye-i-otnositelnyye-ssylki/ |
Пример полного пути к файлу на жестком диске:
|
1 |
C:\Users\Evgeniy\Downloads\Test\test.html |
При открытии файла с жесткого диска в браузере, обратные слеши в адресной строке автоматически заменяются на обычные:
|
1 |
file:///C:/Users/Evgeniy/Downloads/Test/test.html |
Относительные ссылки
Относительные ссылки ведут отсчет от корневой папки сайта или от текущего документа. Если файл находится в корне сайта, для создания относительной ссылки на него, в относительном пути перед ним следует указать слеш:
|
1 |
/style.css |
Далее, для рассмотрения различных вариантов относительных ссылок, воспользуемся следующей схемой:
Текущим документом будет файл test.html, а файлом, к которому будет вести относительная ссылка, — style.css. Фактически, мы будем подключать к html-документу внешний файл каскадных таблиц стилей.
1. Оба файла (test.html и style.css) расположены в любой одной папке. В этом случае, в относительной ссылке указывается только наименование файла стилей:
|
1 |
<link rel="stylesheet" href="style.css"> |
2. Файл test.html расположен в «Папка 1», а файл style.css в «Папка 5»:
|
1 |
<link rel="stylesheet" href="Папка 2/Папка 5/style.css"> |
Если тестируемые файлы расположены на локальном диске, слеш в адресе html-ссылки все-равно можно ставить обычный.
3. Файл test.html расположен в «Папка 4», а файл style.css в «Папка 1»:
|
1 |
<link rel="stylesheet" href="../../style.css"> |
Для перехода в родительскую папку (на один уровень вверх) используются две точки: (..).
4. Файл test.html расположен в «Папка 6», а файл style.css в «Папка 5»:
|
1 |
<link rel="stylesheet" href="../../Папка 2/Папка 5/style.css"> |