Гиперссылки

Что такое гиперссылки:

Ваш сайт может состоять из нескольких страниц, а может даже из 1000 страниц!
Наша задача дать пользователю возможность переходить с одной страницы на другую. Для этого используются гиперссылки, в простонародье - ссылки.

Как разместить ссылку:

Гиперссылки задаются с помощью тега <a>
Страница на которую следует перейти указывается в атрибуте href

<a href="https://vozhzhaev.ru/"> Перейти на сайт Vozhzhaev.ru </a>

Относительные и абсолютные пути

Путь (англ. path) — набор символов, показывающий расположение файла в файловой системе, адрес каталога.

Выполните действия:

  1. Создайте на рабочем столе папку с названием public_html
  2. Создайте в этой папке файлы index.html и page.html
  3. В файл index.html запишите код:
    <!doctype html> <html lang="ru"> <head> <title>Это index.html</title> </head> <body> <h1>Это страница index.html</h1> <a href="page.html">Ссылка на страницу page.html</a> </body> </html>
  4. В файл page.html запишите код:
    <!doctype html> <html lang="ru"> <head> <title>Это page.html</title> </head> <body> <h1>Это страница index.html</h1> <a href="index.html">Ссылка на страницу index.html</a> </body> </html>
  5. Открыв файл index.html в браузере, вы увидите заголовок, а ниже ссылку на страницу page.html.
    Кликните по ней для перехода на страницу page.html.
    После перехода на страницу page.html, вы увидите заголовок, а ниже ссылку на страницу index.html
  6. Поздравляю, теперь вы можете гулять между двумя страницами совего сайта

Сейчас у вас имеется вот такая структура:

структура сайта

Папка public_html для наших фалов является корневой директорией. Относительно этой папки мы задаём путь к файлу, причём этут папку в пути указывать не нужно. Так как файлы index.html и page.html находятся в одной и той же директории мы указываем только название файла в атрибуте href.

Теперь посмотрите на вот эту структуру:

структура сайта

Если вы захотите реализовать переход со страницы index.html на article1.html, то вам нужно будет указать такой путь: "blog/article1.html".

<a href="blog/article1.html"> Перейти на article1.html </a>

Таким образом вы приказываете браузеру спуститься в папку(поддиректорию) blog , и перейти к файлу article1.html

Если вы захотите реализовать переход со страницы article1.html на index.html, то вам нужно будет указать такой путь: "../index.html".

<a href="../index.html"> Перейти на index.html </a>

Таким образом вы приказываете браузеру подняться во внешнюю папку(родительскую директорию) ../, и перейти к файлу index.html

Посмотрите ещё один пример: ссылка со страницы article1.html на article2.html

<a href="article2.html"> Перейти на index.html </a>

Здесь мы указываем только название файла, так как оба файла находятся в одной и той же директории.

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

Теперь давайте откроем файл index.html и взглянем на адресную строку браузера, вот мой пример:

структура сайта

Здесь мы видим полный путь к файлу, начиная от диска C:/ заканчивая файлом index.html, такой путь называется абсолютный. В интернете абсолютные пути начинаются с протокола, например https://vozhzhaev.ru/education/courses/html/What_is_HTML, это полный путь к странице.

<a href="https://vozhzhaev.ru/learn/html/what_is_html"> Что такое HTML </a>

Какие пути использовать?

Всегда используйте относительные пути!
Вы можете делать сайт у себя на компьютере используя абсолютные ссылки, тогда пути будут начинаться с диска на котором расположен ваш сайт, например у меня это диск C:/.
Но когда я захочу показать сайт всему миру и загружу его на сервер ссылки перестанут работать, потому что никакого диска C:/ и уж темболее папки Desktop как у меня на компьютере на сервере нет.
Ещё одна проблема возникнет когда вы хотите сменить адрес сайта. Если я буду использовать такие ссылки https://vozhzhaev.ru/education/courses/html/What_is_HTML, то после смены адреса сайта, например на vozhzhaev.org ссылки так же перестанут работать, так как будут ссылаться на старый, неактуальный адрес.

Зачем тогда нужны абсолютные пути?
Когда мы хотим обратиться на другой ресурс в интернете мы используем абсолютный путь. Например когда указываем ссылку на другой сайт.


Комментарии

Добавить комментарий

Чтобы оставить комменатрий необходимо Авторизоваться