Что такое абсолютные и относительные ссылки
На начальном этапе в сфере сайтостроения важно ознакомиться с техническими терминами, дабы в будущем избежать путаницы и возможных проблем. Сегодня в кратком обзоре рассмотрим понимание абсолютных ссылок и относительных.
Абсолютные ссылки – это полный путь к необходимому объекту, включая протокол http:// или https:// и доменное имя сайта. Пример – http://site.ru/images/img.png
Подобного формата ссылки чаще всего используются для перехода на сторонние ресурсы. Также могут применяться и для внутренних переходов по исходному ресурсу. Это никаким образом не навредит сайту. Но для протокола https рекомендуется именно относительный формат (пример ниже).
Относительные ссылки – это те ссылки, которые ведут от корня сайта и исключают из пути доменное имя или же только один протокол.
Пример ссылки вне зависимости от домена — /images/img.png
Пример ссылки вне зависимости от протокола — //site.ru/images/img.png
Такой формат ссылок выглядит более лаконичным и, что более весомо, при смене домена не нужно будет возиться, чтобы менять внутренние пути к файлам.
Правильные относительные ссылки
В таблицах CSS мы всегда, кроме редких случаев, используем относительные адреса к нужным объектам. Пусть это будет корень темы или самого сайта, но именно относительный путь. И это делается по той простой причине, что не нужно будет переписывать при переезде и сам код выходит намного короче.
И точно таким же подходом можно писать адрес в обычных ссылках, но на этот раз учтем возможность, что нужный нам файл находится в папке или подпапке, а исходный файл, который ссылается на них, находится вне этих папок.
Рассмотрим несколько примеров самых обычных расположений файлов. Дальше можно будет просто опираться на схему и указывать путь в более сложное нахождение объектов.
<a href="../Ссылаемый объект.obc">Анкор ссылки</a>
Пояснение:
для примера у нас есть главная папка. В этой папке содержится еще одна папка и в ней находится исходный документ – html файл. В этом файле есть ссылка, которая должна вести на объект, который находится в самой первой папки, она же главная папка. Таким образом, путь к объекту должен начинать с двоеточия и слэша../. По сути, две точки означают что нужно выйти из текущей папки на одну ступень выше.Дальше уже можно по логике прописывать правильный путь. То есть если две папки, то дважды такая конструкция и т.д. Еще пару примеров для полной ясности.
<a href="../../Ссылаемый объект.obc">Анкор ссылки</a>
<a href="Папка-2/Папка-3/Ссылаемый объект.obc">Анкор ссылки</a>
Абсолютные и относительные ссылки (внешние и внутренние)
Все HTML ссылки делятся на внешние и внутренние. Внешние ссылки — это ссылки, ведущие с одного сайта на другой сайт или файл, расположенный на другом сайте. Внутренние ссылки — это ссылки, ссылающиеся с одной страницы сайта на другую страницу этого же сайта или на разделы этой же страницы.
Все внешние ссылки в атрибуте href тега <a> содержат абсолютный путь до документа на который они ссылаются. Внутренние ссылки, в свою очередь, могут содержать как абсолютный путь, так и относительный (в данном случае это зависит от ваших личных предпочтений).
Все ссылки можно также условно разделить на относительные и абсолютные. Относительные ссылки — это HTML ссылки, содержащие относительные пути, относительные ссылки могут быть только внутренними. Абсолютные ссылки — это ссылки, содержащие абсолютные пути, абсолютные ссылки могут быть как внешними так и внутренними.
Относительный путь
Относительный путь означает, что указание пути на нужный файл или страницу вашего сайта начинается относительно каталога, в котором расположена страница со ссылкой, либо относительно корневого каталога сайта. Рассмотрим части, из которых может состоять относительный путь:
| Части пути | Описание | Примеры значений |
|---|---|---|
| имя_файла | Если в качестве значения атрибута указать только имя файла это значит, что нужный файл находится в той же папке, где и страница со ссылкой. | «page.html« |
| каталог/ | Если файл, к которому нужно указать путь, расположен в дочернем каталоге относительно файла с ссылкой, это означает, что нам надо спуститься на один уровень вниз (в дочернюю папку текущего каталога), в этом случае путь начинается с указания имени дочернего каталога, после его имени указывается прямой слэш «/«, он служит для разделения частей пути, после него указывается имя нужного нам файла.
Примечание: опуститься можно ровно на столько папок вниз, сколько вы их создали. К примеру, если вы создали папку на 10 уровней ниже корневой, то можете указать путь, который приведет вас вниз на 10 папок. Однако, если у вас так много уровней, это, скорее всего, означает, что организация вашего сайта излишне неудобно составлена. |
«каталог/page.html«« |
| ../ | Если нужно указать, что файл, на который вы ссылаетесь, находится в родительской папке, используйте символы .. (две точки), они означают подняться на один уровень вверх (в родительскую папку текущего каталога). Далее мы указываем прямой слэш «/«, чтобы разделить части пути, и пишем имя нашего файла.
Примечание: символы |
«../page.html«« « |
| / | Относительный путь не обязательно всегда должен начинаться относительно текущего расположения страницы со ссылкой, он также может начинаться относительно корневого каталога сайта. К примеру, если нужный файл находится в корневом каталоге, путь может начинаться с символа «/«, после которого надо всего лишь указать имя нужного файла, который расположен в корневом каталоге.Примечание: когда символ « | «/page.html«« |
Абсолютный путь
Абсолютный путь обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http:// — это протокол передачи данных, а www.пример.ру — имя сайта (домен).
Абсолютный путь можно использовать и на собственном сайте. Однако внутри сайта рекомендуется использовать в качестве значения ссылок относительный путь.
Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URL расшифровывается как Uniform Resource Locator (унифицированный адрес ресурса), проще говоря URL — это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет.
Пара примеров URL адресов:
"httр://www.puzzleweb.ru/" "httр://www.puzzleweb.ru/html/all_tags.php"
С этой темой смотрят:
Абсолютные и относительные ссылки в Excel
Абсолютные и относительные ссылки в Excel используются при создании формул, которые ссылаются на другую ячейку или диапазон. Если в формуле Excel используется знак доллара ($) в ссылках на ячейку, то многих пользователей Excel это путает. Но этот знак имеет простое объяснение – он обозначает, следует ли изменять или нет ссылку, когда формула копируется в другие ячейки, и в свою очередь информирует пользователя, что данная ссылка является абсолютной ссылкой. В данной статье мы подробно рассмотрим, как использовать данную возможность, чем отличаются относительные ссылки от абсолютных ссылок, и что такое смешанные ссылки.
Когда вы разберетесь в различии между
Все вы, вероятно, видели знак доллара ($) в формулах Excel и задавались вопросом, что это такое. Действительно, вы можете ссылаться на одну и ту же ячейку четырьмя различными способами, например A1, $A$1, $A1 и A$1.
Если вам нужно написать формулу для одной ячейки, в которой необходимо сослаться на другую ячейку, то вы можете использовать любой тип ссылки и получить корректную формулу в любом случае. Но если вы намерены скопировать формулу в другие ячейки, выбор соответствующего типа ссылки ячейки имеет решающее значение. Поэтому необходимо потратить несколько минут на изучение того, когда использовать абсолютные, относительные и смешанные ссылки в Excel.
Что такое ссылка на ячейку?
Проще говоря, ссылка на ячейку в Excel является адресом ячейки. Он сообщает MS Excel, где искать значение, которое вы хотите использовать в формуле.
Например, если вы введете простую формулу =A1 в ячейку C1, Excel вытащит значение из ячейки A1 в C1:
Абсолютные и относительные ссылки в Excel – Ссылка на ячейку в Excel
Как уже упоминалось, если вы пишете формулу для одной ячейки, то вы можете использовать любой ссылочный тип, со знаком доллара(смешанная или абсолютная ссылка) или без него (относительная ссылка), результат будет таким же:
Абсолютные и относительные ссылки в Excel – Использование $ в формулах Excel
Но если вы хотите переместить или скопировать формулу на листе, очень важно, чтобы вы выбрали правильный ссылочный тип, чтобы формула правильно копировалась в другие ячейки. В следующих пунктах приведены подробные объяснения и примеры формул для каждого ссылочного типа ячейки.
Относительная ссылка в Excel
Относительная ссылка – это обычная ссылка, которая содержит в себе букву (столбец) и номер (строка) без знака $, например, D14, G5, A3 и т.п. Основная особенность относительных ссылок заключается в том, что при копировании (заполнении) ячеек в электронной таблице, формулы, которые в них находятся, меняют адрес ячеек относительно нового места. По умолчанию все ссылки в Excel являются относительными ссылками. В следующем примере показано, как работают относительные ссылки.
Предположим, что у вас есть следующая формула в ячейке B1:
= A1*10
Если вы скопируете эту формулу в другую строку в том же столбце, например, в ячейку B2, формула будет корректироваться для строки 2 (A2*10), потому что Excel предполагает, что вы хотите умножить значение в каждой строке столбца А на 10.
Абсолютные и относительные ссылки в Excel – Относительная ссылка в Excel
Если вы копируете формулу с относительной ссылкой на ячейку в другой столбец в той же строке, Excel соответственно изменит ссылку на столбец:
Абсолютные и относительные ссылки в Excel – Копирование формулы с относительной ссылкой в другой столбец
При перемещении или копировании формулы с относительной ссылкой на ячейку в другую строку и другой столбец, ссылка изменится как на столбец так и на строку:
Абсолютные и относительные ссылки в Excel – Копирование формулы с относительной ссылкой в другой столбец и другую строку
Как вы видите, использование относительных ссылок на ячейки в формулах Excel является очень удобным способом выполнения одних и тех же вычислений на всем рабочем листе. Чтобы лучше проиллюстрировать это, давайте рассмотрим конкретный пример относительной ссылки.
Пример относительных ссылок в Excel
Пусть у нас есть электронная таблица, в которой отражены наименование, цена, количество и стоимость товаров.
Абсолютные и относительные ссылки в Excel – Исходные данные
Нам нужно рассчитать стоимость для каждого товара. В ячейке D2 введем формулу, в которой перемножим цену товара А и количество проданных единиц. Формула в ячейке D2 ссылается на ячейку B2 и C2, которые являются относительными ссылками. При перетаскивании маркера заполнения вниз на ячейки, которые необходимо заполнить, формула автоматически изменяется.
Абсолютные и относительные ссылки в Excel – Относительные ссылки
Ниже представлены расчеты с наглядными формулами относительных ссылок.
Абсолютные и относительные ссылки в Excel – Относительные ссылки (режим формул)
Таким образом,относительная ссылка в Excel — это ссылка на ячейку, когда при копировании и переносе формул в другое место, в формулах меняется адрес ячеек относительно нового места.
Абсолютная ссылка в Excel
Абсолютные ссылки используются в противоположной ситуации, то есть когда ссылка на ячейку должна остаться неизменной при заполнении или копировании ячеек. Абсолютная ссылка обозначается знаком $ в координатах строки и столбца, например $A$1.
Знак доллара фиксирует ссылку на данную ячейку, так что она остается неизменной независимо от того, куда смещается формула. Другими словами, использование $ в ссылках ячейках позволяет скопировать формулу в Excel без изменения ссылок.
Абсолютные и относительные ссылки в Excel – Абсолютная ссылка в Excel
Например, если у вас есть значение 10 в ячейке A1, и вы используете абсолютную ссылку на ячейку ($A$1), формула = $A$1+5 всегда будет возвращать число 15, независимо от того, в какие ячейки копируется формула. С другой стороны, если вы пишете ту же формулу с относительной ссылкой на ячейку (A1), а затем скопируете ее в другие ячейки в столбце, для каждой строки будет вычисляться другое значение. Следующее изображение демонстрирует разницу абсолютных и относительных ссылок в MS Excel:
Абсолютные и относительные ссылки в Excel – Разница между абсолютными и относительными ссылками в Excel
В реальной жизни вы очень редко будете использовать только абсолютные ссылки в формулах Excel. Тем не менее, существует множество задач, требующих использования как абсолютных ссылок, так и относительных ссылок, как показано в следующем примере.
Пример использования абсолютной и относительных ссылок в Excel
Пусть в рассматриваемой выше электронной таблице необходимо дополнительно рассчитать десятипроцентную скидку. В ячейке Е2 вводим формулу =D2*(1-$H$1). Ссылка на ячейку $H$1 является абсолютной ссылкой на ячейку, и она не будет изменяться при заполнении других ячеек.
Абсолютные и относительные ссылки в Excel – Абсолютная ссылка
Для того чтобы сделать абсолютную ссылку из относительной ссылки, выделите ее в формуле и несколько раз нажмите клавишу F4 пока не появиться нужное сочетание. Все возможные варианты будут появляться по циклу:
Абсолютные и относительные ссылки в Excel – Переключение между относительной, абсолютной ссылкой и смешанными ссылками
Или вы можете сделать абсолютную ссылку, введя символ $ вручную с клавиатуры.
Если вы используете Excel for Mac, то для преобразования относительной в абсолютную ссылку или в смешанные ссылки используйте сочетание клавиш COMMAND+T.
Абсолютные и относительные ссылки в Excel – Абсолютная ссылка (режим формул)
Таким образом в отличии от относительных ссылок, абсолютные ссылки не изменяются при копировании или заполнении. Абсолютные ссылки используются, когда нужно сохранить неизменными строку и столбец ячеек.
Смешанные ссылки в Excel
Смешанные ссылки используют, когда необходимо закрепить адрес ячейки только по строке или только по столбцу. Смешанные ссылки могут быть абсолютными по столбцу и относительными по строке (например, $A1), или относительными по столбцу и абсолютными по строке (например, A$1).
Как вы помните, абсолютная ссылка в Excel содержит 2 знака доллара ($), которые блокируют как столбец, так и строку. В смешанной ссылке фиксируется только одна координата (абсолютная), а другая (относительная) изменяется в зависимости от относительного положения строки или столбца:
- Абсолютный столбец и относительная строка, например $A1. Когда формула со смешанной ссылкой копируется в другие ячейки, знак $ перед буквой столбца блокирует ссылку на указанный столбец, чтобы он никогда не менялся. Ссылка относительной строки, без знака доллара, изменяется в зависимости от строки, в которую копируется формула.
- Относительный столбец и абсолютная строка, например A$1. В этой смешанной ссылке ссылка на строку не изменится, а ссылка на столбец будет меняться.
Абсолютные и относительные ссылки в Excel – Смешанные ссылки
Ниже вы представлен пример использования обоих типов смешанных ссылок.
Пример смешанных ссылок в Excel
Если нам нужно узнать какая будет стоимость с учетом 10%, 25% и 30% скидки, то в ячейку Е3 вводим формулу =$D3*(1-E$2), фиксируя таким образом столбец D (стоимость) и строку 2 (скидку). В данной формуле используются две смешанные ссылки:
$D3 — Абсолютный столбец и относительная строка
E$2 — Относительный столбец и абсолютная строка
Абсолютные и относительные ссылки в Excel – Пример использования смешанных ссылок
Заполняем ячейки по столбцам и по строкам. В режиме формул расчеты со смешанными ссылками будут выглядеть так:
Абсолютные и относительные ссылки в Excel – Пример использования смешанных ссылок (режим формул)
При заполнении диапазона E3:G6 такая формула со смешанными ссылками дает соответствующие значения в каждой ячейке.
Таким образом, абсолютная ссылка на ячейку при копировании или перемещении формулы не изменяется, а относительная ссылка автоматически перенастраивается на новую ячейку. В смешанной ссылке адрес ячейки закрепляют только либо по строке, либо по столбцу. Надеюсь, теперь вы в полной мере разобрались, что такое относительные и абсолютные ссылки на ячейки, а формула Excel с знаками $ больше не является для вас загадкой.
Абсолютные и относительные ссылки в Excel
Автор Влад Каманин На чтение 5 мин.
В Excel существует два типа ссылок: абсолютные и относительные. Эти ссылки ведут себя по-разному при копировании и заполнении ячеек. Относительные ссылки изменяются когда вы копируете формулу из одной ячейки в другую, а абсолютные ссылки, напротив, не меняются вне зависимости от того, куда бы вы их ни скопировали.
Относительные ссылки в Excel
По умолчанию, все ссылки в Excel относительные. Когда вы копируете ссылку из одной ячейки в другую, она автоматически изменяется относительно позиции столбца и строки новой ячейки к ячейке, из которой вы скопировали ссылку. Например, если вы скопируете формулу =A1+B1 из строки 1 в строку 2, то формула изменится на =A2+B2. Относительные ссылки полезны в том случае, когда нам нужно повторить один и тот же расчет на несколько столбцов и строк.
Как создать и скопировать формулу с относительными ссылками
На примере ниже мы хотим создать формулу, которая поможет в калькуляции итогового счета за заказ в ресторане. Мы хотим в колонке “Итог” рассчитать сумму к оплате за каждое блюдо, в зависимости от его стоимости за единицу и количества. Для этого, мы создадим одну формулу с относительной ссылкой и скопируем ее на все строки таблицы. Для этого проделаем следующие шаги:
- Выделим первую ячейку, в столбце “Итог” в которой будет создана наша формула:
- Вставим в ячейку D2 формулу, которая перемножает цену за блюдо и количество: =B2*C2.
- Нажмите клавишу “Enter” на клавиатуре. Формула произведет расчет и его результат вы увидите в ячейке D2.
- Зажав левую клавишу мыши, протяните ячейку D2 за правый нижний угол по всему диапазону ячеек D3:D12. Таким образом, вы скопируете формулу из ячейки D2 и перенесете ее на каждую ячейку диапазона.
- Для того, чтобы удостовериться, что формулы скопированы правильно, дважды кликните на любой ячейке диапазона, в котором была протянута формула и вы увидите формулу перемножения ячеек.
Абсолютные ссылки в Excel
Часто, при расчетах нам нужно, чтобы при копировании формул, ссылки на ячейки не изменялись. В отличие от относительных ссылок, абсолютные позволяют зафиксировать при расчетах ячейки в определенных строках и столбцах, что делает процесс вычисления в таблицах более простым и эффективным.
Для создания абсолютной ссылки используется знак доллара “$”. С его помощью вы можете зафиксировать от изменений столбец, строку или всех вместе:
$A$2 – столбец и строка не изменяются при копировании формулы;
A$2 – при копировании формулы не меняется только строка;
$A2 – столбец не изменяется при копировании формулы.
Используя абсолютные ссылки в Excel, вы можете быстро изменять настройки фиксации столбца и строки, с помощью клавиши F4. Для этого нужно дважды кликнуть на ячейку с формулой, затем, левой клавишей мыши поставить курсор на значение ячейки и с помощью клавиши F4 настроить фиксацию строки и столбца.
Как создать и скопировать формулу с абсолютными ссылками
В нашем примере мы будем использовать в ячейке E1 – 18% как значение НДС для расчета налога на товары в колонке D. Для правильного расчета нам потребуется использовать абсолютную ссылку $E$1 в нашей формуле, так как нам важно, чтобы стоимость каждого товара перемножалась на ставку НДС, указанную в ячейке E1. Ниже рассмотрим как мы, будем это делать:
- Выделим ячейку, в которую мы хотим вставить формулу для расчета налога. В нашем примере это ячейка D3.
- Напишем формулу, рассчитывающую сумму налога для каждого товара, с учетом его стоимости и количества =(B3*C3)*$E$1.
- Протянем полученную формулу на все ячейки в диапазоне D4:D13.
- Дважды кликните на любой ячейке из диапазона D4:D13 и убедитесь, что формула сработала корректно. Важно убедиться, что вы правильно указали ссылку на ячейку $E$1 в абсолютном формате.
Как создать ссылки на другие листы в Excel
Зачастую, нам в расчетах требуется задействовать данные с разных листов файла Excel. Для этого, при создании ссылки на ячейку из другого листа нужно использовать название листа и восклицательного знака на конце (!). Например, если вы хотите создать ссылку на ячейку A1 на листе Sheet1, то ссылка на эту ячейку будет выглядеть так:
=Sheet1!A1
ВАЖНО! Если в название листа, на ячейку с которого вы ссылаетесь есть пробелы, то название этого листа в ссылке должно быть заключено в кавычки (‘ ‘). Например, если название вашего листа Бюджет Финал, то ссылка на ячейку A1 будет выглядеть так:
‘Бюджет Финал’!A1
На примере ниже, мы хотим добавить в таблицу ссылку на ячейку, в которой уже произведены вычисления между двумя листами Excel файла. Это позволит нам использовать одно и то же значение на двух разных листах без перезаписи формулы или копирования данных между рабочими листами. Для этого проделаем следующие шаги:
- Выберем ячейку, на которую мы хотим сослаться и обратим внимание на название листа. В нашем случае это ячейка E14 на вкладке “Меню”:
- Перейдем на лист и выберем ячейку, в которой мы хотим поставить ссылку. В нашем примере это ячейка B2.
- В ячейке B2 введем формулу, ссылающуюся на ячейку E14 с листа “Меню”: =Меню!E14
- Нажмем клавишу “Enter” на клавиатуре и увидим в ячейке B2 значение ячейки E14 с листа “Меню”.
Если, в дальнейшем, вы переименуете лист, на который вы ссылались, то система автоматически обновит формулу.
Абсолютные и относительные ссылки | htmlbook.ru
Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.
В примере 8.2 показано создание абсолютной ссылки на другой сайт.
Пример 8.2. Использование абсолютных ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Абсолютный адрес</title>
</head>
<body>
<p><a href="http://htmlbook.ru">Изучение HTML</a></p>
</body>
</html>В данном примере ссылка вида <a href=»http://htmlbook.ru»>Изучение HTML</a> является абсолютной и ведет на главную страницу сайта htmlbook.ru.
При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл. Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html.
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Ссылки относительно текущего документа
При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.
1. Файлы располагаются в одной папке (рис. 8.4).
Рис. 8.4
Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.
<a href="Ссылаемый документ.html">Ссылка</a>Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре.
2. Файлы размещаются в разных папках (рис. 8.5).
Рис. 8.5
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.
<a href="../Ссылаемый документ.html">Ссылка</a>Две точки в данном случае означают выйти из текущей папки на уровень выше.
3. Файлы размещаются в разных папках (рис. 8.6).
Рис. 8.6
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.
<a href="../../Ссылаемый документ.html">Ссылка</a>Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках (рис. 8.7).
Рис. 8.7
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.
<a href="Папка/Ссылаемый документ.html">Ссылка</a>Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
<a href="Папка 1/Папка 2/Ссылаемый документ.html">Ссылка</a>Ссылки относительно корня сайта
Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/Папка/Имя файла» со слэшем вначале. Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.
Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.
Абсолютные и относительные ссылки в HTML
Всем привет! Итак, у нас есть общее представление о ссылках. Сейчас я попрошу Вас включить мозг и не включать режим овоща. Лучше перед этим уроком немного отдохнуть, так как тема для большинства людей является сложной. Если что-то будет непонятно — спрашивайте в комментариях.
Отдохнули? Ну что же, теперь давайте более подробно остановимся на вопросе адресов. Они бывают двух типов: относительные и абсолютные.
Абсолютные адреса
Абсолютные адреса состоят из таких данных, как: протокол, имя сервера и путь. Рассмотрим на примере адреса https://webshake.ru/html-training-course.
Протоколом в данном случае выступает https://.
Доменным именем является webshake.ru.
Путь – /html-training-course.
Преимущество абсолютного адреса заключается в том, что он указывает точное местоположение документа. Поэтому браузер имеет возможность запросить открытие документа, который находится по конкретному пути, на конкретном сервере и с определенным протоколом.
Относительные адреса
В относительных адресах отсутствует большая часть информации, которая есть в абсолютных. То есть, речь идет об отсутствии протоколов и серверов. Что же касается пути, то он начинается не со слэша. Приведем примеры таких адресов, чтобы было понятней.
post/1
./frontend
../post/1В таких адресах допустимо использование специальных символов, которые могут применяться при указании путей к файлам, расположенным на жестких дисках, а именно: . и ...
Когда браузер сталкивается с относительным адресом, он меняет его на абсолютный, чтобы открыть соответствующую информацию. В таких ситуациях задействуется адрес страницы, на которой в настоящий момент находится пользователь. Приведем несколько примеров таких преобразований, указав текущий адрес, расположенный в ссылке и тот, в какой он преобразуется.
https://webshake.ru/post/696 – 697 – https://webshake.ru/post/697
https://webshake.ru/post/696 – ../../contacts – http://webshake.ru/contacts
Относительные адреса могут начинаться и со слэша. Например: /html-training-course.
В данной ситуации браузер будет использовать протокол и адрес сайта, на котором пользователь находится в данный момент. Например, для сайта https://webshake.ru ссылка /html-training-course будет изменена браузером на ссылку https://webshake.ru/html-training-course.
Давайте рассмотрим на примерах:
Создадим в папке с нашей страничкой ещё один файл с именем book1.html и наполним её информацией о некоторой книге:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Совершенный код - Книги для программистов</title>
<meta name="keywords" content="совершенный код, Стив Макконел, паттерны, книги, программирование, литература, обучение, разработка">
<meta name="description" content="Книга \"совершенный код\" Стива Макконела - лучшая книга для программистов по результатам опроса пользователей StackOverflow">
</head>
<body>
<a href="index.html">Вернуться к списку книг</a>
<h2>Совершенный код</h2>
<h3>Описание</h3>
<h4>От издателя</h4>
<p>Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию.
Сейчас эта книга полностью обновлена с учетом современных тенденций и технологий и дополнена сотнями новых примеров, иллюстрирующих искусство и науку программирования. Опираясь на академические исследования, с одной стороны, и практический опыт коммерческих разработок ПО - с другой, автор синтезировал из самых эффективных методик и наиболее эффективных принципов ясное прагматичное руководство. Каков бы ни был ваш профессиональный уровень, с какими бы средствами разработками вы ни работали, какова бы ни была сложность вашего проекта, в этой книге вы найдете нужную информацию, она заставит вас размышлять и поможет создать совершенный код.
Книга состоит из 35 глав, предметного указателя и библиографии.
</p>
</body>
</html>Посмотрим на результат в браузере:
Теперь, когда мы нажмём на получившуюся ссылку, откроется страница со списком книг.
Давайте дополним её, а именно — добавим ссылку на нашу новую страничку о книге.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Книги для программистов</title>
<meta name="keywords" content="книги, программирование, литература, обучение, разработка">
<meta name="description" content="На этой странице Вы сможете познакомиться с лучшими книгами по программированию.">
</head>
<body>
<h2>Книги для программистов</h2>
<h3>Совершенный код</h3>
<p>
Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию.<br>
Сейчас эта книга полностью обновлена с учетом современных тенденций и технологий<br>
и дополнена <strong>сотнями новых примеров</strong>, иллюстрирующих искусство и науку программирования.
<br>
Книга подойдёт для:
<ul>
<li>Начинающих</li>
<li>Середнячков</li>
<li>Опытных</li>
</ul>
<a href="book1.html">[подробнее]</a>
</p>
<hr>
<h3>Колобок</h3>
<p>
Небольшая сказка про мучное изделие с большими амбициями
<br>
Преимущества этой книги:
<ol>
<li>она читается быстрее первой</li>
<li>она дешевле первой</li>
</ol>
</p>
</body>
</html>Результат в браузере:
Ура! У нас получился простейший сайт, состоящий из двух страничек, которые ссылаются друг на друга. А если не получился — пишите в комментариях, вместе разберёмся.
Учимся понимать разницу между относительными и абсолютными ссылками
При выборе основной структуры URL доступны два варианта: относительные и абсолютные ссылки. Если выбрать неподходящий тип ссылок, то это в значительной степени усложнит процесс сканирования сайта поисковыми роботами и негативно скажется на его продвижении:
Абсолютная ссылка предполагает указание полного адреса страницы, на которую вы ссылаетесь. Пример абсолютной ссылки:
<a href = http://www.example.com/xyz.html>
В относительной ссылке не требуется указывать полный URL. Относительная ссылка предполагает, что страница, на которую вы ссылаетесь, находится на том же сайте. Пример относительной ссылки выглядит следующим образом:
<a href = “/xyz.html”>
Прежде, чем выяснить, какая из ссылок является абсолютной, разберемся с положительными сторонами использования относительных URL.
- Более быстрый способ
Работа c крупными сайтами становится значительно легче, если использовать относительные ссылки.
- Промежуточная среда
Если вы создаете сайт на основе CMS, в которой используется промежуточная среда с отдельным уникальным доменом (будь то WordPress или SharePoint), то он будет целиком дублироваться в этой промежуточной среде. Применение относительных ссылок позволяет одному и тому же сайту существовать, как на промежуточном, так и на рабочем домене. Это не только упрощает написание кода для разработчиков, но и позволяет сэкономить уйму времени.
- Быстрая загрузка
Страницы с относительными ссылками загружаются быстрее, чем c абсолютными URL. Хотя разница не будет заметной, она все же есть.
- Защита от скачивания
Абсолютные ссылки значительно усложняют процесс скачивания информации с сайта при помощи специальных программ. Если все внутренние ссылки на сайте будут относительными, то любая специализированная программа без труда скопирует сайт целиком, что позволит загрузить его на новый домен.
- Защита от дублирования контента
Абсолютные ссылки также помогают избежать проблемы дублированного контента. Представьте, что есть несколько версий главной страницы, проиндексированных в Google, без указания канонической (основной) версии сайта. Например:
http://www.example.com http://example.com https://www.example.com https://example.com
По мнению Google, это четыре разных сайта, и по всем четырем ссылкам поисковый робот будет заходить как на новый сайт. В данном случае, если все ссылки будут относительными, то робот проиндексирует весь сайт по нескольким разным URL, а это приведет к проблемам с дублированным контентом.
- Улучшенная стратегия внутренней перелинковки
При работе со ссылками всегда следует учитывать внутреннюю перелинковку. Если неправильно применить тег <base href>, и при этом все ссылки на сайте будут относительными, то это приведет к образованию несуществующих страниц с ошибкой 404.
Например: когда на странице http://www.example.com/category/xyz.html есть тег base href, который выглядит следующим образом:
<base href=”http://www.example.com/category/xyz.html”/>, а затем на страницах используются относительные внутренние ссылки (/category/abc.html). Когда Google будет сканировать подобные внутренние ссылки, это приведет к ошибке 404.
Этой ситуации можно избежать, если использовать абсолютные ссылки HTML.
- Способствуют сканированию
Поисковые роботы Google переходят по внутренним ссылкам, чтобы глубже изучить сайт. Этот процесс имеет некоторые ограничения по количеству URL, которые будут просканированы. Учитывая этот факт, если у вас будет миллион страниц, и робот будет часто натыкаться на ошибки, он, скорее всего, прекратит сканирование сайта.
Этого можно избежать за счет использования абсолютных ссылок, которые помогают поставить процесс сканирования на поток.
Убедитесь, что вы выбрали правильную стратегию, основанную на ваших потребностях в SEO-оптимизации. В большинстве случаев используются абсолютные ссылки, так как у этого формата больше плюсов, чем минусов. Однако бывают ситуации, в которых лучше использовать относительные ссылки.
Данная публикация представляет собой перевод статьи «What Is The Difference Between a Relative And an Absolute Url?» , подготовленной дружной командой проекта Интернет-технологии.ру