Относительные адреса html примеры

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

Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.

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

Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.

https://htmlacademy.ru https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2 

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

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

То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:

Предположим, мы загрузили страницу по такому адресу:

https://htmlacademy.ru/blog/frontend/html/index.html 

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

Ссылка на файл в той же папке

1.html https://htmlacademy.ru/blog/frontend/html/1.html 

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

Ссылка на файл в папке ниже текущей

directory/3.html https://htmlacademy.ru/blog/frontend/html/directory/3.html 

Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.

dir1/dir2/5.html https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html 

Страница находится на две папки ниже текущей.

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

/2.html https://htmlacademy.ru/2.html 

Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.

/dir1/dir2/4.png https://htmlacademy.ru/dir1/dir2/4.png 

Файл на два уровня ниже корня сайта.

Ссылка на папку выше текущей

../6.html https://htmlacademy.ru/blog/frontend/6.html 

На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .

../../7.html https://htmlacademy.ru/blog/7.html 

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

Комбинированная ссылка

../../../dir1/dir2/8.html https://htmlacademy.ru/dir1/dir2/8.html 

На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .

Все приведённые примеры одной картинкой:

ID-ссылки (якорные ссылки)

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

Ставим якорную ссылку на той же странице:

Ставим якорную ссылку на другую страницу:

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

Что будет, если ошибиться

Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.

Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .

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

Ссылки—сила:

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Адреса в HTML

Адреса в HTML
Относительный и абсолютный путь

Адреса в HTML могут указывать путь: на сайт, страницу сайта или файл расположенный на сайте. Обычно адрес HTML выступает в качестве значений у атрибутов, тега a (ссылки) или img (изображения):

— адрес сайта,
— адрес страницы сайта,
— адрес файла изображения расположеного на сайте.

Где в качестве имяСайта , выступает название сайта, например gabdrahimov.ru

Адреса в языке HTML бывают трёх видов:
1. Адрес сайта,
2. Абсолютный адрес (абсолютный путь к странице или файлу),
3. Относительный адрес (относительный путь к странице или файлу).

Адрес сайта

Адрес сайта в HTML это просто имя сайта c приставкой http:// , например:
http://ya.ru — Яндекс
http://google.ru — Гугл
http://vk.com — Вконтакте и т.д.

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

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

Примеры абсолютных адресов (абсолютных путей):

• — абсолютный адрес страницы about.html , сайта имяСайта
• — абсолютный адрес страницы online.html , находящейся в папке service , сайта имяСайта
• — абсолютный адрес страницы editor.html , находящейся в папке soft , сама папка soft находится в папке product , сайта имяСайта

Точкой отсчета абсолютного адреса является адрес сайта, на котором расположена страница или файл.

то веб-сервер постарается открыть файл index.html расположенный в папке catalog , если данного файла нет, то обычно появляется ошибка 404 . —>

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

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

Допустим в папке product находится страница list.html , её абсолютный адрес выглядит следующим образом:
http://имяСайта/product/list.html — страница list.html расположена в папке product

Есть еще одна страница, чей абсолютный адрес выглядит следующим образом:
http://имяСайта/about.html — страница about.html находится в корне (на одном уровне с главным файлом index.html) сайта.

На странице list.html нужно поставить ссылку, которая будет ссылаться на страницу about.html находящуюся на том же сайте. Сослаться на неё можно двумя способами:
1. — используя абсолютный путь,
2. — используя относительный путь.

Символ ../ означает, что нужно подняться на одну папку вверх (на один уровень),
Символ ../../ означает, что нужно подняться на две папки вверх (на два уровня).

Если страница list.html тоже будет находится в корне сайта:
http://имяСайта/list.html , то для того чтобы сослаться на страницу about.html , нужно будет в HTML-документе list.html прописать следующий код:
— относительный путь.

Далее, если страница list.html будет находится в папке soft :
http://имСайта/product/soft/list.html , то для того чтобы сослаться на страницу about.html , нужно будет в HTML-документ файла list.html прописать следующий код:
— т.е. два раза подняться вверх по папкам.

Чтобы сослаться на страницу online.html , которая находится по адресу:
http://имяСайта/service/online.html , нужно в HTML-документе файла list.html , который находится по адресу:
http://имяСайта/product/soft/list.html , прописать следующий код:
— два раза подняться вверх по папкам, затем «зайти» в папку service и написать имя файла online.html

Точкой отсчета относительного адреса является то место, где находится ссылающаяся страница.

Также, в качестве точки отсчета относительного адреса может выступать корень сайта / , пример:

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

Рассмотрим различия между абсолютным и относительным путями:

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

Источник

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

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

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

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 главной страницы:

 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).

Источник