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

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

Ссылки позволяют открывать веб ресурс на просмотр, выполнение каких-то действия или подгрузки ресурсов, например, картинок, css стилей и js скриптов. Все эти ситуации требуют указания адреса ресурса, т.е. ссылки на него. Они, в свою очередь могут быть абсолютными и относительными.

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

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

С абсолютными ссылками все просто – они должны начинаться с протокола http:// (https://), далее должно идти название домена сайта (ваш-сайт.ru) и сама ссылка. Пример: http://ваш-сайт.ru/index.html. Если речь идет о подключении ресурса, то ссылка может выглядеть так: <link href=”http://ваш-сайт.ru/css/default.css” rel=”stylesheet” type=”text/css”>.

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

Если ссылка идет без домена, например: <a href=”o-nas.html” >О нас</a>, то она откроется относительно того файла, где была запущена. Относительные ссылки ведут отсчет от корня сайта или текущего документа. Вариантов указания относительных ссылок может быть великое множество. Рассмотрим основные.

Предположим у нас есть такая древовидная структура документов:

корень сайта (public_html)
– css (папка)
– style.css (файл стилей)
– fon.jpg (файл картинки)
index.html (главный файл сайта)

В index.html мы подключим css относительной ссылкой:
<link href=”/css/style.css” rel=”stylesheet” type=”text/css”>

А style.css нам нужно подключить фон (fon.jpg). Это можно сделать двумя способами:
background: url(“/css/fon.jpg”); (относительный путь от корня сайта)
background: url(“fon.jpg”); (относительный путь от директории файла style.css)

Также есть и другие варианты работы с относительными путями. Например:
href=”../css/style.css” – здесь ../ поднимает нас на папку выше, если написать ../../ – то поднимет на 2 папки выше относительно текущего документа

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

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии