HTML: Работа со ссылками

Ссылки - это те элементы, которые делают из интернета интернет.
Нажимая на ссылку, мы можем перейти с одной страницы сайта на другую. Без ссылок интернет был бы просто набором страниц, никак не связанных друг с другом.

Ранее в первом уроке в атрибутах мы уже затрагивали ссылки.

Создание ссылки или гиперссылки начинается с тега <a>...</a> с обязательным атрибутом href, который задает URL-адрес веб-страницы.
<a href="https://vk.com/digitcenter">Указатель ссылки на сайт цифры</a> 
Адреса веб-страниц (URL)
Прежде, чем мы начнем создавать страницы с гиперссылками, кратко рассмотрим структуру адреса, который используется в атрибуте href.

У каждого документа есть собственный адрес, именуемый URL (Uniform Resource Locator) и видим мы их каждый день на уличных щитах, визитных карточках, по телевизору, в рекламе и т.д.

Из чего состоит URL-адрес?
Полный URL-адрес состоит из трех частей: протокола, имени сайта и пути к файлу.

1. Протокол: http или https
Сообщает серверу, что можно перейти в "режим веб".

2. Имя сайта: www.example.com
Имя, по которому веб-сайт сможет найти сервер. (тут не знаю как правильно описать не заумно)

3, 4. Пути к файлу
Содержит имя папки, в которой находится файл.

И тут мы подошли к самому главному.
Пути или ссылки бывают 2 видов: абсолютные и относительные. Давайте разбираться.
Абсолютные ссылки
Тут все просто — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
Проще всего запомнить так: если вы видите, что ссылка начинается с http:// или https:// - значит она абсолютная.

Например:
https://digit.center/
https://vk.com/
Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.
Относительные ссылки
Это ссылки, которые ведут на страницы вашего же сайта: с главной - на страницы разделов, со страницы разделов - на страницы товаров и т.д.

Если браузер не находит в ссылке символы "http://", то выполняет поиск документа на том же сервере. И относительный путь говорит браузеру, как добраться по ссылке до нужного файла, начиная с текущей позиции.

Рассмотрим создание ссылок на примере сайта с книгами со следующей структурой:
  • главная страница (index.html)
  • страница с информацией о сайте (about.html)
  • страница с контактной информацией (contacts.html)
  • список книг по разным предметам (файлы math.html, history.html, biology.html в каталоге books)
  • изображения, используемые на страницах (логотип logo.png и фон страниц background.png в каталоге images).
Если каталоги сайта представить в виде схемы, то в конечном счете она будет выглядеть как перевернутое дерево с корневым каталогом в вершине иерархии.
Ссылка на файл в той же папке
Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.

Например, нам нужна ссылка с главной страницы (index.html) на страницу с информацией о сайте (about.html).
Оба файла находятся в одном корневой директории. Поэтому указываем только имя файла.
Для создания ссылки из файла index.html на файл about.html нам потребуется следующий код:
<a href="about.html">О проекте</a>
Ссылка на файл в папке ниже текущей
Как быть, если файлы находятся в разных каталогах? Тогда нужно браузеру указать направление поиска.

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

В файле index.html нам необходимо создать ссылку на файл math.html в каталоге books.
Так мы сообщим браузеру, что в текущем каталоге (корневой директории) нужно найти каталог с именем books, а затем перейти к файлу math.html.
Как сделать? Перед именем файла через / пишем название папки.
<a href="books/math.html">Математика</a>
Ссылка на папку выше текущей
На этот раз нам нужно пойти в противоположном направлении и создать ссылку со страницы с книгами по математике (math.html) обратно на главную, расположенную на уровень выше.

Поскольку файл math.html нахо­дится в подкаталоге books, то для перехода к файлу index.html нам не­обходимо вернуться на один уровень назад к корневому каталогу. Этот путь укажет браузеру на необходимость подняться на один уровень и затем найти файл index.html
Для «подъёма» на одну папку используется синтаксис ../
Это равносильно тому, что вы бы сказали браузеру: «вернись на уровень выше и следуй по пути к указанному файлу».
Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.
<a href="../index.html">Главная страница</a>
Ссылка относительно корня сайта
Все пути к файлам, которые мы рассматривали до этого момента, строились относительно документа со ссылкой. Существует альтернативный способ записи пути: начиная с корневого, перечислять имена каталогов до тех пор, пока не будет достигнут файл, на который должен осуществляться переход по ссылке. Такой путь называется путем относительно корня сайта.

Для ссылки относительно корня используется / в начале пути к файлу и вызывает обращение к корневому каталогу.
Пример создания ссылки из файла math.html на главную страницу (index.html) можно упростить благодаря ссылки относительно корня сайта.
<а href="/index.html">Главная страница</а>
В указанной выше ссылке путь относительно корня сайта передает следующую команду: «Зайди в самый верхний каталог этого сайта, открой каталог найди в нем файл index.html.
В целом, ссылки относительно корня сайта более предпочтительны по причине их большей гибкости.
Однако, такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает, поскольку они обращаются к корню логического диска. Чтобы проверить работоспособность ссылок, придется выполнить загрузку сайта на удаленный сервер.
Якоря
Ссылки могут ссылаться не только на страницу, но ещё и на конкретное место на странице - например, на заголовок.
Такие ссылки называются якорными, а места, на которые они ссылаются - якорями.

Якорному элементу нужно прописать атрибут id c именем якоря, например:
<h1 id="anchor">Якорь</h1>
Теперь, чтобы сослаться на этот якорь, нужно использовать вот такую ссылку:
<a href="#anchor">Перейти к якорю</a>
При нажатии на ссылку произойдёт переход к нужному месту страницы, а в адресной строке к адресу страницы добавится адрес якоря #anchor

Якоря могут использоваться как в относительных ссылках, как в примере выше, так и в абсолютных, например: http://example.com/page#anchor
Что будет, если ошибиться
Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404.
Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.
Практика
1. Интересный факт
Создайте веб-страницу, результат которой показан на скриншоте ниже.
Адреса ссылок могут быть произвольны.
2. Все относительно
Создайте три файла с именами first.html, second.html и third.html.
В каждом из них должен быть заголовок вида «Страница 1» и ссылка с текстом «Перейти».

Причем ссылки должны быть замкнуты по схеме кольца, т.е. ссылка с документа first.html должна вести на second.html, с файла second.html на third.html., а файл third.html. опять ссылается на first.html.
3. Полезные ссылки
Создайте html и css файлы, результат которых показан на рисунке.
Изображение для фона можно взять здесь
Предыдущее занятие | Следующее занятие