Чат PHP-разработчиков
Абсолютные и относительные ссылки в 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>

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

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • добавьте ещё одну страничку на свой сайт
  • проставьте ссылки на страничках для переключения между ними
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (22)


Hunter

как мне сделать также как и на образце

ivashkevich

Вам нужно создать 2 странички - book1.html и index.html. В них положить приведенные примеры. Всё :)

Hunter

Спасибо

Julia0603

а почему вместо div используются теги p для образования блоков с информацией? насколько я помню статью - код с душком - это не правильно и далеко не эталонно в качестве примера...как и большое кол-во br в разметке...

ivashkevich

Привет! В данном курсе нет блочной верстки, поэтому о div-ах здесь нет речи.
Что касается тега p - именно его нужно использовать для разбиения текста на абзацы, независимо от того, используются div-ы или нет.
div-ы нужны для разбиения на функциональные блоки. Например, для отделения текста статьи от сайдбара. Но их не стоит использовать для разбиения на абзацы.

ImmortalPsych

Сделал свой двухстраничный сайтик, скинул себе в вк сообщением, попытался открыть через устройство, на котором нет файлов формата .html (они есть только на компе), не открывается... Скинул файлики .html на телефон, открываются браузером.
Вывод: до сих пор я учился делать локальные сайты. Думаю, в продолжении узнаю, как делать общедоступные:)

ivashkevich

Да, впереди вас ждёт урок о том, как выложить сайт в интернет =)

ImmortalPsych

А так вот он, мой сайт на данный момент. Информацию, ясное дело, я брал с других сайтов.

1 страница:

<!DOCTYPE=html>
<html>
<head>
    <meta charset="utf-8">
    <title>Как выбрать смартфон?</title>
    <meta name="keywords" content="смартфоны, информационные технологии, ит, айти, ай ти, it, 2018, технологии" >
    <meta name="description" content="Жизнь современного человека невозможно представить без мобильного устройства – с тех пор, как мобильный интернет получил широкое распространение, пользователи стали проводить перед экраном <b>смартфона</b> еще больше времени, чем за компьютером. Однако, как правило, о гаджетах мы знаем столько же, сколько о наших организмах – чуть больше, чем <i>ничего</i>.">
</head>
<body>
<h1>Как выбрать смартфон? Руководство по покупке: 5 вещей, которые нужно знать:</h1>
    <ol>
        <h2><li>Выберите подходящую операционную систему (ОС)</li></h2>
        <h2><li>Выбираем размер смартфона: фаблет или не фаблет?</li></h2>
        <h2><li>Обращайте внимание на эти характеристики</li></h2>
            <ul>
                <h3><li>Процессор</li></h3>
                <h3><li>Оперативная память (RAM / Random Access Memory)</li></h3>
                <h3><li>Объём встроенной памяти и  её расширение</li></h3>
                <h3><li>Экран</li></h3>         
            </ul>
        <h2><li>Фотокамера в смартфоне (не придавайте слишком большое значение количеству мегапикселей)</li></h2>
        <h2><li>Проверьте выносливость аккумулятора</li></h2>
    </ol>
<h1>Разобрались? <a href="Рейтинг лучших.html">Тогда перейдём к 5 лучшим смартфонам 2018 года в соотношении цена/качество!</a></h1>
</body>
</html>

2 страница:

<!DOCTYPE=html>
<head>
    <meta charset="utf-8">
    <title>Рейтинг смартфонов 2018 года</title>
    <meta name="keywords" content="смартфоны, информационные технологии, ит, айти, ай ти, it, 2018, технологии, топ смартфонов, цена/качество">
</head>
<body>
<pre>                                                       <a href="Смартфоны.html">Вернуться назад</a></pre>
<h1>Рейтинг смартфонов 2018 цена/качество и их характеристики:</h1>
    <ol>
        <h2><li>OnePlus 5T</li><h2>
            <ul>
                <li>Диагональ экрана: 6 дюймов</li>
                <br><li>Разрешение: 2160х1080</li>
                <br><li>Вес: 162 г</li>
                <br><li>Количество SIM-карт: 2</li>
                <br><li>Процессор: Qualcomm Snapdragon 835</li>
                <br><li>Объем памяти: 64 Гб</li>
                <br><li>Объем ОЗУ: 6 Гб</li>
                <br><li>Емкость аккумулятора: 3300 мАч</li>
                <br><li>Основная камера: двойная 16/20 МП</li>
                <br><li>Поддержка карт памяти: нет</li>
                <br><li>Поддержка сетей 4G: есть</li>       
            </ul>
        <h2><li>Samsung Galaxy Note 8 64GB</li><h2>
            <ul>
                <li>Диагональ экрана: 6,3 дюйма</li>
                <br><li>Разрешение: 2960×1440</li>
                <br><li>Вес: 195 г</li>
                <br><li>Количество SIM-карт: 2</li>
                <br><li>Процессор: Exynos 9 Octa 8895</li>
                <br><li>Объем памяти: 64 Гб</li>
                <br><li>Объем ОЗУ: 6 Гб</li>
                <br><li>Емкость аккумулятора: 3300 мАч</li>
                <br><li>Основная камера: двойная 12/12 МП</li>
                <br><li>Поддержка карт памяти: есть</li>
                <br><li>Поддержка сетей 4G: есть</li>   
            </ul>
        <h2><li>Google Pixel 2</li><h2>
            <ul>
                <li>Диагональ экрана: 5 дюймов</li>
                <br><li>Разрешение: 1920×1080</li>
                <br><li>Вес: 143 г</li>
                <br><li>Количество SIM-карт: 1</li>
                <br><li>Процессор: Qualcomm Snapdragon 835</li>
                <br><li>Объем памяти: 64 Гб</li>
                <br><li>Объем ОЗУ: 4 Гб</li>
                <br><li>Емкость аккумулятора: 2700 мАч</li>
                <br><li>Основная камера: двойная 12 МП</li>
                <br><li>Поддержка карт памяти: нет</li>
                <br><li>Поддержка сетей 4G: есть</li>       
            </ul>
        <h2><li>Honor 9 Lite</li><h2>
            <ul>
                <li>Диагональ экрана: 5,65 дюйма</li>
                <br><li>Разрешение: 2160×1080</li>
                <br><li>Вес: 149 г</li>
                <br><li>Количество SIM-карт: 2</li>
                <br><li>Процессор: HiSilicon Kirin 659</li>
                <br><li>Объем памяти: 32 Гб</li>
                <br><li>Объем ОЗУ: 3 Гб</li>
                <br><li>Емкость аккумулятора: 3000 мАч</li>
                <br><li>Камера: 13/2 МП</li>
                <br><li>Поддержка карт памяти: есть</li>
                <br><li>Поддержка сетей 4G: есть</li>       
            </ul>
        <h2><li>iPhone X</li><h2>
            <ul>
                <li>Диагональ экрана: 5,8 дюйма</li>
                <br><li>Разрешение: 2436×1125</li>
                <br><li>Вес: 174 г</li>
                <br><li>Количество SIM-карт: 1</li>
                <br><li>Процессор: Apple A11 Bionic</li>
                <br><li>Объем памяти: 256 Гб</li>
                <br><li>Объем ОЗУ: 3 Гб</li>
                <br><li>Емкость аккумулятора: 2716 мАч</li>
                <br><li>Основная камера: двойная 12/12 МП</li>
                <br><li>Поддержка карт памяти: нет</li>
                <br><li>Поддержка сетей 4G: есть</li>   
            </ul>
    </ol>
<h1>Ну вот и всё, выбор за вами!</h1>
</body>
</html>

!!!НЕ ЗАБУДЬТЕ СИНХРОНИЗИРОВАТЬ НАЗВАНИЯ ФАЙЛОВ И ССЫЛОК В КОДАХ!!!

ivashkevich

Отлично! Но не забывайте, что на странице должен быть только один h1 заголовок. Это очень важно для SEO.

nastasya95

Я правильно понимаю, что для создания сайтов используем относительные ссылки (короткие) формата <a href="index.html">Вернуться к списку книг</a> ?
или и абсолютные можно использовать ?

ivashkevich

Как правило абсолютные, начиная со слеша:

/link.html
levenetslev

Орнул с "небольшая сказка про мучное изделие с большими амбициями"

Summers

На этом задании реально пришлось немного поработать. Зато как же потом отлегло, когда всё получилось :)

ivashkevich

Это отлично!

kekspeks

Я не понимаю, либо я делаю все неправильно, либо я сверхразум?
Как-то мне это просто дается, все работает. И логика понятна с первого раза.

Хотя еще есть третий варик: Артем - отлично объясняет)))

ivashkevich

HTML - это просто, всё норм)

olga-ok

Здравствуйте. Создала ссылки друг на друга на двух файлах - они не открываются... Пишет, что файл не найден, перемещен или удален. Перед этим удалила все предыдущие из прошлых уроков. Зря удалила?

ivashkevich

Здравствуйте. Ну ссылки должны вести на существующие файлы. Раз не открываются, значит нужно их создать.

Liynar

Не совсем понялпро . и .. Где на жестком диске иммено надо искать эти точки?
И откуда взялись
post/1
./frontend
../post/1
и с постом 696 697 к сожалению тоже не очень разобрался(

ivashkevich

. - это текущая папка
.. - это папка на уровень выше (та, в которой лежит текущая)

Что именно непонятно про посты?

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований