Это index.html

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

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

1. Создайте на рабочем столе папку с названием public_html
2. Создайте в этой папке файлы index.html и page.html
3. В файл index.html запишите код:

Это страница index.html

Ссылка на страницу page.html

Это страница index.html

Ссылка на страницу index.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

Давайте для примера сделаем ссылку на гугл. Для этого нужно открыть этот сайт в браузере, скопировать адрес страницы из адресной строки и вставить в атрибут href ссылки:

Сделайте на вашей странице ссылку на сайт code.mu, ссылку на яндекс и ссылку на ютуб.

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

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

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

Для страниц своего сайта следует практиковать другой подход. Изучим его на примере. Пусть в корневой папке вашего сайта расположен файл index.html и файл page.html . Свяжем эти файлы ссылками. Для этого в атрибуте href ссылок следует просто написать имена этих файлов (с их расширением). Давайте сделаем это.

На странице index.html сделаем ссылку на страницу page.html :

страница index

ссылка на page

А на странице page.html сделаем ссылку на страницу index.html :

страница page

ссылка на index

Сделайте три HTML страницы в корне вашего сайта. Назовите их 1.html , 2.html , 3.html . Свяжите эти страницы ссылками друг с другом.

Сделайте также страницу index.html . Разместите на ней ссылки на страницы 1.html , 2.html , 3.html .

Модифицируйте предыдущую задачу так, чтобы ссылки располагались в списке ul .

Источник

Ссылки в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой. и не дают уснуть вовремя 🙂

Ссылки бывают разные, но чаще всего встречаются такие:

• с одного сайта на другой
• с одной страницы на другую в рамках того же сайта
• в пределах одной страницы — с одной её части на другую
• ссылки, которые запускают почтовую программу и позволяют отправить письмо на определенный адрес.

Ссылка создаётся с помощью тега (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href . Сам адрес пишется в кавычках. Между тегами указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа «Жми сюда».