02.03.2017   3316
Абсолютные и относительные ссылки в HTML

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

Всем привет! Итак, у нас есть общее представление о ссылках. Сейчас я попрошу Вас включить мозг и не включать режим овоща. Лучше перед этим уроком немного отдохнуть, так как тема для большинства людей является сложной. Если что-то будет непонятно - спрашивайте в комментариях.

Отдохнули? Ну что же, теперь давайте более подробно остановимся на вопросе адресов. Они бывают двух типов: относительные и абсолютные.

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

Абсолютные адреса состоят из таких данных, как: протокол, имя сервера и путь. Рассмотрим на примере адреса https://webshake.ru/html-training-course.

Протоколом в данном случае выступает https://.
Доменным именем является webshake.ru.
Путь – /html-training-course.

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

Абсолютные адреса могут записаться и более кратко. Например: /html-training-course.

В данной ситуации браузер будет использовать протокол и сервер страницы, на которой пользователь находится в данный момент. Например, для сайта 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

Давайте рассмотрим на примере:
Создадим в папке с нашей страничкой ещё один файл с именем 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>
<h1>Совершенный код</h1>
<h2>Описание</h2>
<h3>От издателя</h3>
<p style="width:700px">Более 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>
<h1>Книги для программистов</h1>
<h2>Совершенный код</h2>
<p>
    Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию.<br> 
    Сейчас эта книга полностью обновлена с учетом современных тенденций и технологий<br>
    и дополнена <strong>сотнями новых примеров</strong>, иллюстрирующих искусство и науку программирования.
    <br>
    Книга подойдёт для:
    <ul>
        <li>Начинающих</li>
        <li>Середнячков</li>
        <li>Опытных</li>
    </ul>
    <a href="book1.html">[подробнее]</a>
</p>
<hr>
<h2>Колобок</h2>
<p>
    Небольшая сказка про мучное изделие с большими амбициями
    <br>
    Преимущества этой книги:
    <ol>
        <li>она читается быстрее первой</li>
        <li>она дешевле первой</li>
    </ol>
</p>
</body>
</html>

Результат в браузере:

Ура! У нас получился простейший сайт, состоящий из двух страничек, которые ссылаются друг на друга. А если не получился - пишите в комментариях, вместе разберёмся.

Домашнее задание
Для просмотра нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

КОММЕНТАРИИ

Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности