Ссылки на другие страницы вашего сайта

<a>

При создании ссылок на другие страницы вашего сайта нет необходимости указывать в URL-адресе его доменное имя.

Вместо этого вы можете воспользоваться сокращенным вариантом, называемым также относительным URL- адресом.

Если все страницы сайта находятся в одной и той же папке, то значением атрибута href должно быть лишь имя файла страницы.

Если страницы вашего сайта распределены по разным папкам, то вам придется воспользоваться несколько более сложным синтаксисом для указания местоположения нужной страницы относительно текущей.

Вы прочитаете об этом более подробно далее в главе.

Если вы взглянете на код для загрузки примеров страниц для каждой из глав, то увидите, что на странице index.html помещены ссылки с указанием относительных URL-адресов.

АБСОЛЮТНЫЕ URL-АДРЕСА

Аббревиатура URL расшифровывается как Uniform resource locator (единый указатель ресурсов).

У каждой веб-страницы есть свой собственный URL, представляющий собой веб-адрес, вводимый в браузере.

Абсолютный URL-адрес начинается с доменного имени сайта, после которого также может быть указан путь к конкретной странице.

Если адрес страницы не указан, то по умолчанию откроется главная страница.

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

<p>Обзоры кинофильмов:
    <ul>
        <li><a href="https://www.kinopoisk.ru">Кинопоиск</a></li>
        <li><a href="https://www.megacritic.ru">Мегакритик</a></li>
        <li><a href="https://kinoblog.org">Киноблог</a></li>
        <li><a href="https://televesti.ru">Телевести.Ру</a></li>
    </ul>
</p>

Результат

ОТНОСИТЕЛЬНЫЕ URL-АДРЕСА

Для создания ссылок на вашего сайта вы можете использовать относительные URL-адреса.

Они представляют собой другую версию абсолютных: нет необходимости указывать доменное имя сайта.

Далее главе вы поближе познакомитесь сотносительными так как существует несколько полезных сокращений, с помощью которых вы сможете создавать ссылки на страницы вашего сайта.

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

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

<p>
    <ul>
        <li><a href="index.html">На главную</a></li>
        <li><a href="about-us.html">О нас</a></li>
        <li><a href="movies.html">Фильмы</a></li>
        <li><a href="contact.html">Обратная связь</a></li>
    </ul>
</p>

Результат

---

Ссылка на определенную часть страницы

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

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

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

В этом примере вы можете видеть элементы <h1> и <h2>, которым был присвоен атрибут id для идентификации разделов страницы. Значение атрибута id должно начинаться с латинской буквы или знака подчеркивания (но не с цифры или любого другого символа).

Кроме того, на одной странице несколько элементов не могут иметь одинаковое значение атрибута id. Для создания ссылки на элемент с установленным значением атрибута id вам нужно воспользоваться элементом <а>, значение атрибута href которого должно начинаться с символа «#», после которого следует указать значение атрибута id нужного вам элемента.

В примере ссылка <a href="#top"> ссылается на элемент <h1>, находящийся в верхней части страницы, атрибуту id которого присвоено значение top.

Код

<h1 id="top">Термины, используемые при съемке фильмов</h1>
<a href="#zoom">Трансфокация</a><br />
<a href="#interlude">Интерлюдия</a><br />
<a href="#prologue">Пролог</a><br/>
<h2 id="zoom">Трансфокация</h2>
<p>Плавный наезд на объект съемки 
или отъезд от него камерой.</p>
<h2 id="interlude">Интерлюдия</h2>
<p>Короткая вводная сцена или последовательность сцен, 
появляющаяся в фильме, но не обязательно
связанная с основным сюжетом.</p>
<h2 id="prologue">Пролог</h2>
<p>Речь, введение или короткая сцена, 
предшествующая основному действию сюжета фильма; антоним эпилогу.</p>
<p><a href="#top">Наверх</a></p>

Результат

Предыдущая страницаСледующая страница