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

Ссылки позволяют открывать веб ресурс на просмотр, выполнение каких-то действия или подгрузки ресурсов, например, картинок, 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 папки выше относительно текущего документа

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Введите капчу: