Пути в HTML. Абсолютные и относительные ссылки в html-ссылках.
В этой главе мы с вами поговорим ссылках-путях которые мы прописываем в атрибут HREF.
Все что на данный момент знаем так это только шаблон:
<A href="index.html">анкор</a>
Для новичков этих знаний достаточно, для профи который берется за большой проект нет!!! Ведь в больших проектах существуют разделы, в которые нужно переходить и выходить... И тогда возникают вопросы как это сделать и как это сделать правильно?
Чтобы было проще учиться давайте создадим трех страничный сайт-визитку. Так как наш файл index.html не представляет для нас пока ни какой ценности мы его отредактируем и задействуем:
<html> <head> <title>Создание сайтов</title> </head> <body> <A href="delo.html" >Наше предложение</a><br> <A href="kontakt.html" >Наши контакты</a> </body> </html>
Далее создадим файл delo.html, в котором расскажем о наших услугах:
<html> <head> <title>Наши услуги</title> </head> <body> <A href="index.html" >Главная страница</a><br> <A href="kontakt.html" >Наши контакты</a> </body> </html>
А так-же создадим файл kontakt.html, для контактов с нами:
<html> <head> <title>Обратная связь</title> </head> <body> <A href="index.html" >Главная страница</a><br> <A href="delo.html" >Наше предложение</a> </body> </html>
А теперь просмотрим(откроется в новой вкладке) что у нас получилось.
Этими примерами я хотел показать что все работает. Но, одно большое НО, мы обращаемся напрямую к файлам но а путей не видно...
Это и есть относительный путь, т.е. путь относительно ссылающегося файла, а самого пути не видно, потому что все наши файлы лежат в в одном каталоге(папке).
Давайте в нашей учебной папке(my_site) создадим еще одну папку с именем razdel и уже в ней создадим новый файл с именем index.html . Как-же в этом случае поставить ссылку с наших файлов которые мы создали выше?
<A href="razdel/index.html" >раздел</a>
А если в папке razdel созтать папку podrazdel то путь уже будет с корневой папки:
<A href="razdel/podrazdel/index.html" >подраздел</a>
а с папки razdel
<A href="podrazdel/index.html" >подраздел</a>
Обратите внимание на то что разделителем между папками и/или файлами является "прямой сплеш"(косая черта).
Входить в папки мы научились, теперь посмотрим как выходить:
Чтобы выйти с папки podrazdel в razdel, нужно в путь добавить ../, этот набор символов говорит браузеру что запрашиваемый файл лежит на один уровень выше:
<A href="../index.html" >Вернуться в раздел</a>
Чтобы вернуться на 2 уровня эту комбинацию пишем дважды:
<A href="../../index.html" >вернуться в корень сайта</a>
Теперь предлагаю посмотреть на абсолютные пути. Абсолютный путь это путь файлов включающий в себя имя сайта и протокол(http или https). Представим что наша папка my_site и есть корень сайта, а имя сайта my_site.ru , в этом случае абсолютный путь будет:
http://my_site.ru или http://my_site.ru/ или http://my_site.ru/index.html
Тогда как абсолютный путь к папке razdel
http://my_site.ru/razdel или http://my_site.ru/razdel/ или http://my_site.ru/razdel/index.html
Какие пути лучше использовать? Абсолютные!!! Но есть вероятность наделать ошибок, т.к эти ссылки указывают на конкретный сайт и локально(без сервера) мы эти ошибки устранить не сможем...
И еще раз об главной странице, не ставте ссылку my_site.ru, потому что браузер все равно перенаправит на my_site.ru/ , т.е происходит редирект(перенаправленние), а поисковые системы не очень любят редирект.
Так-же ни когда не ставте ссылку my_site.ru/index.html, т.к. это дубль для my_site.ru/ и сточки зрения поисковых систем это две разных страницы, и в данном случае идет дублирование контента, а это не уважается поисковиками. Так что правильная ссылка для абсолютных это: my_site.ru/, а для относительных из одной папки: / или спуски: ../. И еще если вы будете использовать абсолютные пути то вам нужно определиться как писать адрес( с www или без), здесь тоже все просто, если у вас персональный(выделенный) сервер то без, а если вы арендуете только часть сервера то с www .