Это 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 :: Гиперссылки

Для создания гиперссылок в HTML используется элемент «a» , который формируется парным тегом (от англ. anchor – якорь). Все, что находится внутри элемента «a» является гиперссылкой.

(от англ. hyperlink – гиперссылка) – это часть гипертекстового документа, которая ссылается на другие элементы в самом документе (текст, изображение и т.д.) или другие объекты вне данного документа (другой документ, видеофайл и т.д.).

Атрибут href гиперссылки

Чтобы указать адрес объекта, на который будет совершен переход по ссылке, используется атрибут href . В качестве значения он принимает абсолютный или относительный адрес документа. Примерами абсолютных адресов могут служить https://www.google.com или https://yandex.ru . Абсолютные адреса действительны в любом месте, независимо от сайта, на котором расположена ссылка. А вот относительные адреса формируются относительно текущей папки документа, в котором прописана данная ссылка, или корня сайта. Примеры относительных адресов мы рассмотрим в конце пункта.

Напомним, что в случае использования сборки Xampp для размещения создаваемых в ходе изучения веб-страниц на локальном сервере, их нужно помещать в папку /xampp/htdocs . А еще лучше создать в htdocs отдельную рабочую папку, например, test , и уже в ней сохранять тестируемые страницы. Тогда абсолютный адрес, например, для страницы page_1.html будет иметь вид http://localhost/test/page_1.html . Указывать нужно именно http://localhost/. , а не фактическое расположение файла на компьютере, иначе могут возникнуть проблемы с отображением страницы.

Атрибут target гиперссылки

По умолчанию, при переходе по ссылке браузер открывает документ в текущем окне или фрейме. Чтобы изменить такое поведение браузера, используется атрибут target , который в качестве значения принимает одно из зарезервированных значений «_self | _blank | _parent | _top» или имя целевого окна или фрейма, которое устанавливается их атрибутом name . Если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне. Значение «_self» установлено по умолчанию. Если использовать значение «_blank» , то браузер откроет документ в новом окне или фрейме; если «_parent» – в родительском фрейме, а в случае отсутствия такового, в текущем окне; если «_top» – в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как «_self» .

Атрибут download гиперссылки

В HTML 5 был введен еще один полезный атрибут download, который не принимает значений, а служит индикатором того, что браузер не совершит переход по ссылке, а предложит закачать файл, указанный в атрибуте href в качестве значения.

Также в элементе «a» могут использоваться атрибуты rel , hreflang и type . Мы их использовать скорее всего не будем. Однако, если информация о них все таки понадобится, то можно обратиться к нашему справочнику здесь.

Рассмотрим применение гиперссылок на примере №1 .

        
Посмотреть спецификацию HTML 5 можно здесь. 
Страница откроется в новом окне.
 
 А скачать учебный минисайт по адресации можно здесь.  

Пример №1. Использование гиперссылок

Использование гиперссылок для создания якорей на странице

Элемент «a» может использоваться и в качестве гиперссылки для перехода внутри страницы. Для этого в нужном месте документа необходимо создать (от англ. anchor), т.е. закладку, и указать ее в качестве цели в гиперссылке. Создается якорь при помощи пустого элемента «a» , в открывающем теге которого указывается атрибут id. В качестве якоря можно также использовать и требуемый элемент разметки, к которому в дальнейшем будет вести внутренняя гиперссылка. Для этого нужно просто указать в нем атрибут id. Далее в атрибуте href самой гиперссылки в качестве значения указывается символ решетки # и значение атрибута id якоря. Чтобы стало понятнее, рассмотрим все на примере №2 .

         
Посмотреть таблицу атрибутов HTML 5 можно 
на официальном сайте здесь. 
Страница откроется в новом окне и будет 
прокручена до таблицы с атрибутами.
 
Перейти к первому абзацу можно здесь.  

Пример №2. Использование внутренних гиперссылок

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

Относительные гиперссылки и построение относительной адресации

В заключение пункта рассмотрим принцип построения относительных адресов. Пусть наша гиперссылка находится в документе, расположенном на сервере по адресу https://site.name/ doc_1/ doc_2/ . /doc_n/ web_page.html , где doc_n – папка n -го уровня вложенности. В этом случае папка doc_n , в которой находится наш документ с гиперссылкой, автоматически принимается за основу, относительно которой и строится вся адресация. Итак:

• Если нужно, чтобы ссылка вела на целевой документ new_page.html , расположенный в той же папке doc_n , что и наш исходный документ с гиперссылкой, то в качестве значения атрибута href ссылки нужно просто задать имя целевого документа: href=»new_page.html» .
• Для перехода к целевому документу new_page.html , расположенному в папке https://site.name/ doc_1/ doc_2/ . /doc_n/ doc_n_1/ . doc_n_k/ , значение атрибута href ссылки должно включать только папки, вложенные в doc_n , и, конечно же, имя целевого документа: href . Таким образом, мы указываем браузеру, что он должен зайти в папку doc_n_1 , расположенную в папке doc_n с исходным документом, в котором прописана гиперссылка, затем в папку doc_n_2 и так далее, пока не попадет в папку doc_n_k с находящимся там целевым документом, который он и должен открыть.
• Чтобы попасть в папку на уровень выше исходной, используется специальная комбинация символов ../ . Для перехода на n уровней вверх нужно записать комбинацию ../ n раз подряд. Так в нашем случае, чтобы перейти по ссылке к целевому документу https://site.name/ doc_1/ doc_2/ . /doc_n-3/ new_page.html атрибут href ссылки должен иметь значение «../../../new_page.html» . Тем самым мы сообщаем браузеру, что он должен подняться в папку doc_n-1 , затем doc_n-2 и doc_n-3 , после чего открыть находящийся там целевой документ new_page.html .
• Если же необходимо не просто подняться на несколько уровней вверх, но и зайти там в папку (или несколько вложенных папок), для получения доступа к целевому документу, то в значении атрибута href ссылки сперва нужно прописать требуемое количество уровней поднятия вверх при помощи символов ../ , а затем дописать путь из полученной папки к целевому документу. Например, если целевой документ расположен в папке new_doc и адресный путь к нему имеет вид https://site.name/ doc_1/ doc_2/ . /doc_n-3/new_doc/ new_page.html , то атрибут href ссылки должен иметь значение «../../../new_doc/new_page.html» . Т.е. мы указываем браузеру, что он должен подняться на три уровня вверх относительно исходной папки doc_n , в которой находится документ с гиперссылкой, а затем зайти в папку new_doc и открыть целевой документ new_page.html

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

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

Если необходимо начать отсчет относительного пути от корня сайта, в начале пути следует прописать слеш / . Например, ссылка Домой указывает на документ, который находится в корневой папке сайта (а не в текущей!). Следует иметь в виду, что отсчет от корня сайта работает только под управлением реального веб-сервера. На локальном сервере, например, Xampp , отсчет нужно начинать с имени корневой папки.

Быстрый переход к другим страницам

html.okpython.net Copyright © 2016-2023.

Источник