Что такое абсолютная ссылка
Абсолютные и относительные ссылки
Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.
Абсолютные ссылки
Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.
Относительные ссылки
То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:
Предположим, мы загрузили страницу по такому адресу:
Во всех примерах ниже приведены относительная ссылка и полный путь, в который браузер расшифровывает ссылку.
Ссылка на файл в той же папке
Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.
Ссылка на файл в папке ниже текущей
Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.
Страница находится на две папки ниже текущей.
Ссылка относительно корня сайта
Файл на два уровня ниже корня сайта.
Ссылка на папку выше текущей
Комбинированная ссылка
Все приведённые примеры одной картинкой:
ID-ссылки (якорные ссылки)
Ставим якорную ссылку на той же странице:
Ставим якорную ссылку на другую страницу:
Пройдите интерактивный тренажёр по якорным ссылкам, чтобы узнать наверняка, как это делается.
Что будет, если ошибиться
Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.
Обратите внимание на текст ссылки
Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.
Не делайте плохо, делайте хорошо
Разберитесь в нюансах вёрстки с HTML Academy — знакомство с HTML и CSS бесплатное.
Использование относительных и абсолютных ссылок
По умолчанию ссылка на ячейку является относительной. Например, если вы ссылаетесь на ячейку A2 из ячейки C2, вы указываете адрес ячейки в том же ряду (2), но отстоящей на два столбца влево (C минус A). Формула с относительной ссылкой изменяется при копировании из одной ячейки в другую. Например, вы можете скопировать формулу =A2+B2 из ячейки C2 в C3, при этом формула в ячейке C3 сдвинется вниз на один ряд и превратится в =A3+B3.
Выделите ячейку со ссылкой на ячейку, которую нужно изменить.
В строка формул 
щелкните ссылку на ячейку, которую вы хотите изменить.
Для перемещения между сочетаниями используйте клавиши 
+T.
В следующей таблице огововодятся сведения о том, что происходит при копировании формулы в ячейке A1, содержаной ссылку. В частности, формула копируется на две ячейки вниз и на две ячейки справа, в ячейку C3.
Текущая ссылка (описание):
$A$1 (абсолютный столбец и абсолютная строка)
$A$1 (абсолютная ссылка)
A$1 (относительный столбец и абсолютная строка)
C$1 (смешанная ссылка)
$A1 (абсолютный столбец и относительная строка)
$A3 (смешанная ссылка)
A1 (относительный столбец и относительная строка)
Изменение типа ссылки: относительная, абсолютная, смешанная
По умолчанию ссылка на ячейку является относительной ссылкой, которая означает, что ссылка относительна к расположению ячейки. Например, если вы ссылаетесь на ячейку A2 из ячейки C2, вы фактически ссылаетесь на ячейку, которая находится на два столбца слева (C минус A) в одной строке (2). При копировании формулы, содержаной относительную ссылку на ячейку, эта ссылка в формуле изменится.
Например, при копировании формулы =B4*C4 из ячейки D4 в D5 формула в ячейке D5 корректируется на один столбец вправо и становится =B5*C5. Если вы хотите сохранить исходную ссылку на ячейку в этом примере при копировании, необходимо сделать ссылку на ячейку абсолютной, предшествуя столбцам (B и C) и строке (2) знаком доллара ($). Затем при копировании формулы =$B$4*$C$4 из D4 в D5 формула остается той же.
Чтобы изменить тип ссылки на ячейку, выполните следующее.
Выделите ячейку с формулой.
В строке формул строка формул 
выделите ссылку, которую нужно изменить.
Для переключения между типами ссылок нажмите клавишу F4.
В приведенной ниже таблице по сумме обновляется тип ссылки при копировании формулы, содержащей ссылку, на две ячейки вниз и на две ячейки справа.
$A$1 (абсолютный столбец и абсолютная строка)
$A$1 (абсолютная ссылка)
A$1 (относительный столбец и абсолютная строка)
C$1 (смешанная ссылка)
$A1 (абсолютный столбец и относительная строка)
$A3 (смешанная ссылка)
A1 (относительный столбец и относительная строка)
Абсолютные и относительные ссылки в HTML
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В продолжение статьи о создании гиперссылок рассмотрим, что они из себя представляют в абсолютном и относительном варианте.
В принципе, в той публикации досконально разобран механизм, позволяющий формировать линки (от английского слова «link», одно из значений которого интерпретируется как «ссылка») на базе URL-адреса в самом различном исполнении с помощью средств HTML с целью их размещения в веб-пространстве (включая и страницы сайтов) в качестве составляющей части контента.
Так как гиперссылка, которая неразрывно связана с гипертекстом (здесь определение hypertext), является частным случаем ссылки, то в ракурсе рассматриваемой нами темы эти термины можно считать тождественными. Поэтому в ходе повествования я буду применять оба этих понятия.
При использовании абсолютных и относительных линков, естественно, существуют свои нюансы, которые я сегодня постараюсь до вас донести в понятной и доступной форме.
Абсолютный и относительный путь в ссылках
Давайте, пойдем сначала. Основным отличительным признаком любой ссылки является наличие URL адреса, который чаще всего содержит абсолютный путь (полный) до страницы или файла:
В таком виде мы вводим урлы в поисковую строку браузера для получения доступа с объекту. При этом любой URL обязательно начинается с наименования протокола передачи данных и включает имя домена («http://site.ru/»). Именно в подобном виде путь до объекта (вебстраницы или файла) используется в качестве параметра атрибута href при создании абсолютной ссылки с помощью средств HTML для ее последующей вставки в контент заданной странички (документ):
Абсолютные гиперссылки можно теоретически использовать везде, но на практике их применяют чаще тогда, когда нужно сослаться на внешний веб-ресурс, а относительные более эффективны при переходах в пределах одного сайта, поскольку они короче и не загромождают HTML код.
Варианты относительных ссылок
Ежели представленный выше пример полного пути в URL-адресе немного модифицировать, убрав «http:», то как раз получится образец относительного пути:
Если же привлечь средства ХТМЛ, то можно создать ссылку относительно протокола:
Такой вариант вполне работает не только в пределах домена, но и на сторонних веб-страницах, причем, независимо от того, какой протокол (HTTP или HTTPS) установлен для конкретного сайта. Поэтому на практике данный вид относительных ссылкок с успехом можно применить, к примеру, в случае перевода веб-проекта на безопасный протокол HTTPS.
Пойдем далее и вдобавок к названию протокола уберем еще и двойной слеш вместе с доменным именем. Получится другая вариация относительного пути:
На его основе таким же образом создается относительная гиперссылка:
Возьмем для наглядности пример с файликом (file1.html). Такой линк будет работать только лишь в том случае, если файл расположен в папке (каталоге), которая, в свою очередь, находится в составе корневой директории вебсайта. То есть, в данном случае путь до файла (в составе URL, который служит параметром атрибута href) будет указан относительно корня веб-ресурса:
В соответствии с предоставленным выше скриншотом вы, полагаю, уже поняли следующее. Ежели файлик (в нашем примере file2.html) входит напрямую в состав корневой директории, то путь к нему относительно корня (site.ru) примет такой вид:
Тут самый первый слеш «/» заменяет корневую папку «site.ru/». То есть, при создании перехода на главную страницу сайта с любой его страницы можно использовать короткую конструкцию:
Тот же самый принцип работает и при проставлении линков с одной веб-страницы проекта на другую. Образцом может служить тот же блог WordPress, где есть главная страница, статические и привязанные к определенным рубрикам (категориям) вебстраницы записей.
Скажем, с абсолютно любой странички проекта можно проставить относительную ссылку на иную страницу с указанием рубрики. Возьмем для примера этот блог:
А, скажем, относительная ссылка на статическую вебстраницу (которая не принадлежит ни одной рубрике, но входит в состав корневой папки «Goldbusinessnet.com») с любой другой странички в пределах одного проекта может выглядеть так:
Итак, мы выяснили, что гиперлинки именно относительно корневой папки обычно и используются на практике, когда необходимо сослаться с одной страницы сайта на другую.
Теперь давайте рассмотрим еще несколько случаев создания линков относительно текущего веб-документа (файла или web-страницы), а не корня сайта. Здесь один из файлов будет донором (с которого проставлена ссылка), а другой акцептором (на который ведет гиперссылка).
1. Файлы расположены в одной папке:
В этом случае относительная ссылка будет содержать только лишь название документа, который является акцептором (обратите внимание, что знак слеша тут опущен, так как путь указывается не относительно корня, а вполне конкретной папки):
2. Файлы находятся в разных директориях, причем документ, на который необходимо сослаться, располагается внутри каталога, находящегося в одной папке, содержащей донор:
Тогда в процессе создания относительной гиперссылки в содержании донора следует прописать дополнительно директорию, где находится акцептор:
Если целевой файл, на который указывает ссылка, находится еще на уровень ниже относительно донорского документа в иерархической структуре (к примеру, располагается в catalog3, который вложен в catalog2), то путь будет таким:
Ну и так далее, в зависимости от количества вложенных друг в друга директорий.
3. Теперь разберем обратную ситуацию, когда документ-акцептор располагается на уровень (или несколько) выше донорского файла:
При таком раскладе перед наименованием файлика необходимо поставить слэш «/» и двоеточие, означающее, что акцептор расположен на один уровень выше:
Если документ, на который ссылаются, находится на целых два уровня выше (скажем, донорский документ пребывает в папке catalog3, которая вложена в catalog2), то HTML код относительной гиперссылки примет следующий вид:
Как вы, наверное, поняли, подобных уровней может быть сколько угодно много, все зависит от файловой структуры вашего веб-проекта. Чем больше уровней между акцептором и донором, тем большее количество двоеточий и слэшей необходимо указать.
4. Есть еще вариант, когда акцептор и донор расположены в разных папках одного уровня:
Для того, чтобы сформировать относительный гиперлинк, нужно перейти на один уровень выше (catalog), а в пути указать директорию документа, на который будем ссылаться:
5. Ну и теперь самый сложный случай. Это когда документ, содержащий относительную ссылочку, и файл, на который она ведет, располагаются в разных папках, причем директория с донором находится на один или несколько уровней выше папки с акцептором:
Если разница 1 уровень, то относительной ссылкой является такая:
Я привел только основные примеры относительных ссылок, на самом деле их гораздо больше. Но главное — понять суть алгоритма их создания, что, надеюсь, вам удалось. Тем более, что все другие вариации будут просто производными от выше указанных.
Особенности относительных и абсолютных гиперссылок
Ежели в качестве целевого объекта абсолютной или относительной ссылки указать не файл, а всю директорию, то в конце URL желательно прописывать слеш:
Тем самым вы указываете серверу, что необходимо открыть для просмотра весь каталог, а не конкретный файл. Если же опустить значок «/» и оформить гиперссылку вот так:
То серверный обработчик сначала начнет поиски файла «uploads», именно в таком виде (без расширения), а уже затем отыщет папку с таким именем. Посему, проставив сразу же слеш, вы сэкономите ресурсы сервера, на котором располагается сайт.
Также необходимо иметь ввиду, что в целях безопасности содержимое любого рабочего каталога сайта должно быть скрыто. Поэтому веб-сервер обычно сконфигурирован таким образом, чтобы воспрепятствовать отображению его файлов. Например, вместо этого может быть показан пустой индексный файл index.php либо index.html (в браузере это будет просто белая страница).
Я настоятельно рекомендую проверить, так ли обстоит дело на вашем сайте. Например, если у вас вебпроект под управлением Вордпресс, то изучите соответствующий материал, повествующий о базовых настройках защиты при использовании в том числе этого метода (правда, в современных версиях WP данная ситуация уже под контролем, но проверка не помешает).
В общем-то, принцип создания абсолютных и относительных ссылок действует и в отношении стандартных вебстраниц сайта. Но, поскольку львиная доля вебмастеров (особенно это касается владельцев полномасштабных веб-ресусов, а не простеньких дневников и одностраничников) использует для управления веб-ресурсом CMS, то здесь есть некоторые нюансы.
Что касается главной страницы, то абсолютная ссылка на нее включает доменное имя, которое является названием корневой папки в соответствии с файловой структурой сайта на сервере:
Образец относительного линка в отношении главной я уже приводил, но повторю еще раз:
Если вы желаете подробнее изучить нюансы применения адресов в относительных и абсолютных ссылках именно для всех страниц своего сайта, то почитайте соответствующий раздел статьи об урлах, где сможете, например, узнать, почему любой URL (со слешем или без в конце) является корректным в плане синтаксиса и полностью отвечает установленным стандартам.
Какие ссылки использовать: абсолютные или относительные?
Имеется в виду: какие адреса использовать для переходов внутри сайта? Допустим, мы хотим создать на домене site.ru с уже работающим сайтом другой подсайт, файлы которого будут находиться в папке shop. URL этого подсайта будет такой:
Почему мы усложнили задачу, будет ясно в конце данной статьи.
1. Абсолютные ссылки (absolute)
2. Относительные ссылки (relative)
При использовании относительных ссылок за точку отсчета каждый раз берется отправная страница.
Здесь можно сделать первый вывод. Хотя относительные адреса выглядят короче абсолютных, однако абсолютные адреса предпочтительнее, так как одну и ту же ссылку можно применять в неизменном виде на любой странице сайта, на какой бы глубине она не находилась.
Промежуточные варианты
3. Адрес относительно протокола (protocol-relative)
Google рекомендует переходить именно на адреса без указания протокола. Однако, неизвестно, как долго будет длиться переходный период, так как сейчас считается, что http:// и https:// — это разные сайты
4. Адрес относительно корневой папки домена (root-relative)
Это хороший выбор, если все страницы сайта находятся в пределах одного домена. При переносе сайта на другой домен, вам не придется делать массовую замену домена в ссылках.
5. Адрес относительно главной страницы сайта (base-relative)
Ко всем преимуществам предыдущего варианта адресов, здесь добавляется еще одно — теперь сайты можно безболезненно переносить не только на любой домен, но и в любую подпапку, так как название подпапки исчезло из href. Это удобно для разработки — вы собираете сайт в любой подпапке веб-сервера своего рабочего компьютера, и, когда, сайт готов, просто переносите файлы сайта на хостинг.
Остается только привыкнуть к тому что, хотя адреса и записаны, как относительные, ведут они себя как абсолютные. Особенно нужно помнить о якорях, так как привычная конструкция href=»#comments» теперь производит переход не в пределах текущей страницы, а переводит на главную страницу, так как впереди будет автоматически приписан URL главной страницы. Теперь впереди хеша нужно явно прописывать адрес текущей страницы: href=«t-shirts/t-shirt-life-is-good/#comments».
Что касается «настоящих» абсолютных ссылок (1, 3, 4), то они работают как обычно — тег base не оказывает на них никакого действия. Действие элемента base распространяется только на html-документ, но не касается относительных URL внутри css, js, svg и др. файлов.