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

Относительные адреса

В относительных адресах отсутствует большая часть информации, которая есть в абсолютных. То есть, речь идет об отсутствии протоколов и серверов. Что же касается пути, то он начинается не со слэша. Приведем примеры таких адресов, чтобы было понятней.

Код доступен только после покупки курса HTML для начинающих.

В таких адресах допустимо использование специальных символов, которые могут применяться при указании путей к файлам, расположенным на жестких дисках, а именно: . и ...

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

https://webshake.ru/post/696 – 697 – https://webshake.ru/post/697
https://webshake.ru/post/696 – ../../contacts – http://webshake.ru/contacts

Давайте рассмотрим на примере:
Создадим в папке с нашей страничкой ещё один файл с именем book1.html и наполним её информацией о некоторой книге:

Код доступен только после покупки курса HTML для начинающих.

Посмотрим на результат в браузере:
Абсолютные ссылки

Теперь, когда мы нажмём на получившуюся ссылку, откроется страница со списком книг.
Давайте дополним её, а именно - добавим ссылку на нашу новую страничку о книге.

Код доступен только после покупки курса HTML для начинающих.

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

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

Читайте также
Комментарии


Hunter
Hunter

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

ivashkevich
ivashkevich

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

Hunter
Hunter

Спасибо

Julia0603
Julia0603

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

ivashkevich
ivashkevich

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

ImmortalPsych
ImmortalPsych

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

ivashkevich
ivashkevich

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

ImmortalPsych
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
ivashkevich

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

nastasya95
nastasya95

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

ivashkevich
ivashkevich

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

/link.html
levenetslev
levenetslev

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