Содержание

Абсолютные и относительные ссылки | htmlbook.ru

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.

В примере 8.2 показано создание абсолютной ссылки на другой сайт.

Пример 8.2. Использование абсолютных ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Абсолютный адрес</title>
 </head>
 <body>
  <p><a href="http://htmlbook.ru">Изучение HTML</a></p>
 </body>
</html>

В данном примере ссылка вида <a href=»http://htmlbook.ru»>Изучение HTML</a> является абсолютной и ведет на главную страницу сайта htmlbook.ru.

При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл. Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html.

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

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 8.4).

Рис. 8.4

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

<a href="Ссылаемый документ.html">Ссылка</a>

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

2. Файлы размещаются в разных папках (рис. 8.5).

Рис. 8.5

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.

<a href="../Ссылаемый документ.html">Ссылка</a>

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 8.6).

Рис. 8.6

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

<a href="../../Ссылаемый документ.html">Ссылка</a>

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 8.7).

Рис. 8.7

Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.

<a href="Папка/Ссылаемый документ.html">Ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Ссылка</a>

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/Папка/Имя файла» со слэшем вначале. Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Абсолютные и относительные ссылки. Шпаргалка — Блог HTML Academy

Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.

Абсолютные ссылки

Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.

Например:

https://htmlacademy.ru

https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2

Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.

Относительные ссылки

То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:

Предположим, мы загрузили страницу по такому адресу:

https://htmlacademy.ru/blog/frontend/html/index.html

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

Ссылка на файл в той же папке

1.html

https://htmlacademy.ru/blog/frontend/html/1.html

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

Ссылка на файл в папке ниже текущей

directory/3.html

https://htmlacademy.ru/blog/frontend/html/directory/3.html

Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.

dir1/dir2/5.html

https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html

Страница находится на две папки ниже текущей.

Ссылка относительно корня сайта

/2.html 

https://htmlacademy.ru/2.html

Файл расположен в корневой папке сайта. Для ссылки относительно корня используется /. Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.

/dir1/dir2/4.png

https://htmlacademy.ru/dir1/dir2/4.png

Файл на два уровня ниже корня сайта.

Ссылка на папку выше текущей

../6.html

https://htmlacademy.ru/blog/frontend/6.html

На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../.

../../7.html

https://htmlacademy.ru/blog/7.html

На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.

Комбинированная ссылка

../../../dir1/dir2/8.html

https://htmlacademy.ru/dir1/dir2/8.html

На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2.

Все приведённые примеры одной картинкой:

ID-ссылки (якорные ссылки)

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

Размечаем заголовок:

<article>Содержание первой главы</article>

Ставим якорную ссылку на той же странице:

<a href="#part1">Глава 1</a>

Ставим якорную ссылку на другую страницу:

<a href="/index.html#part1">Глава 1</a>

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

Что будет, если ошибиться

Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.

Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/.

Обратите внимание на текст ссылки

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

Не делайте плохо, делайте хорошо

Разберитесь в нюансах вёрстки с HTML Academy — знакомство с HTML и CSS бесплатное.

Начать учиться

Абсолютные и относительные ссылки (внешние и внутренние)

Все HTML ссылки делятся на внешние и внутренние. Внешние ссылки — это ссылки, ведущие с одного сайта на другой сайт или файл, расположенный на другом сайте. Внутренние ссылки — это ссылки, ссылающиеся с одной страницы сайта на другую страницу этого же сайта или на разделы этой же страницы.

Все внешние ссылки в атрибуте href тега <a> содержат абсолютный путь до документа на который они ссылаются. Внутренние ссылки, в свою очередь, могут содержать как абсолютный путь, так и относительный (в данном случае это зависит от ваших личных предпочтений).

Все ссылки можно также условно разделить на относительные и абсолютные. Относительные ссылки — это HTML ссылки, содержащие относительные пути, относительные ссылки могут быть только внутренними. Абсолютные ссылки — это ссылки, содержащие абсолютные пути, абсолютные ссылки могут быть как внешними так и внутренними.

Относительный путь

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

Части путиОписаниеПримеры значений
имя_файла Если в качестве значения атрибута указать только имя файла это значит, что нужный файл находится в той же папке, где и страница со ссылкой. «page.html«
каталог/ Если файл, к которому нужно указать путь, расположен в дочернем каталоге относительно файла с ссылкой, это означает, что нам надо спуститься на один уровень вниз (в дочернюю папку текущего каталога), в этом случае путь начинается с указания имени дочернего каталога, после его имени указывается прямой слэш «
/«, он служит для разделения частей пути, после него указывается имя нужного нам файла.

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

 «каталог/page.html«

«каталог1/каталог2/page.html«
../ Если нужно указать, что файл, на который вы ссылаетесь, находится в родительской папке, используйте символы
.. (две точки), они означают подняться на один уровень вверх (в родительскую папку текущего каталога). Далее мы указываем прямой слэш «/«, чтобы разделить части пути, и пишем имя нашего файла.

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

 «../page.html«

«../../page.html«

«../../../кат1/кат2/page.html» — поднимаемся из текущей папки на три каталога выше и уже из него спускаемся на два уровня ниже к требуемому файлу
/Относительный путь не обязательно всегда должен начинаться относительно текущего расположения страницы со ссылкой, он также может начинаться относительно корневого каталога сайта. К примеру, если нужный файл находится в корневом каталоге, путь может начинаться с символа «/«, после которого надо всего лишь указать имя нужного файла, который расположен в корневом каталоге.

Примечание: когда символ «/» указывается первым, это означает начало пути от корневого каталога.

«/page.html«

«/кат1/кат2/car.png«

Абсолютный путь

Абсолютный путь обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http://www.пример.ру — так выглядит абсолютный путь к конкретному веб-сайту. http:// — это протокол передачи данных, а www.пример.ру — имя сайта (домен).

Абсолютный путь можно использовать и на собственном сайте. Однако внутри сайта рекомендуется использовать в качестве значения ссылок относительный путь.

Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URL расшифровывается как Uniform Resource Locator (унифицированный адрес ресурса), проще говоря URL — это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет.

Пара примеров URL адресов:


"httр://www.puzzleweb.ru/"

"httр://www.puzzleweb.ru/html/all_tags.php"

С этой темой смотрят:

Абсолютные и относительные ссылки — памятка для начинающих

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

Абсолютная ссылка предполагает указание полного адреса страницы, на которую вы ссылаетесь. Пример абсолютной ссылки:

<a href = http://www.example.com/xyz.html>

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

<a href = “/xyz.html”>

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

  • Более быстрый способ

Работа c крупными сайтами становится значительно легче, если использовать относительные ссылки.

  • Промежуточная среда

Если вы создаете сайт на основе CMS, в которой используется промежуточная среда с отдельным уникальным доменом (будь то WordPress или SharePoint), то он будет целиком дублироваться в этой промежуточной среде. Применение относительных ссылок позволяет одному и тому же сайту существовать, как на промежуточном, так и на рабочем домене. Это не только упрощает написание кода для разработчиков, но и позволяет сэкономить уйму времени.

  • Быстрая загрузка

Страницы с относительными ссылками загружаются быстрее, чем c абсолютными URL. Хотя разница не будет заметной, она все же есть.

  • Защита от скачивания

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

  • Защита от дублирования контента

Абсолютные ссылки также помогают избежать проблемы дублированного контента. Представьте, что есть несколько версий главной страницы, проиндексированных в Google, без указания канонической (основной) версии сайта. Например:

http://www.example.com
http://example.com
https://www.example.com
https://example.com

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

  • Улучшенная стратегия внутренней перелинковки

При работе со ссылками всегда следует учитывать внутреннюю перелинковку. Если неправильно применить тег <base href>, и при этом все ссылки на сайте будут относительными, то это приведет к образованию несуществующих страниц с ошибкой 404.

Например: когда на странице http://www.example.com/category/xyz.html есть тег base href, который выглядит следующим образом:

<base href=”http://www.example.com/category/xyz.html”/>, а затем на страницах используются относительные внутренние ссылки (/category/abc.html). Когда Google будет сканировать подобные внутренние ссылки, это приведет к ошибке 404.

Этой ситуации можно избежать, если использовать абсолютные ссылки HTML.

  • Способствуют сканированию

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

Этого можно избежать за счет использования абсолютных ссылок, которые помогают поставить процесс сканирования на поток.

Убедитесь, что вы выбрали правильную стратегию, основанную на ваших потребностях в SEO-оптимизации. В большинстве случаев используются абсолютные ссылки, так как у этого формата больше плюсов, чем минусов. Однако бывают ситуации, в которых лучше использовать относительные ссылки.

Данная публикация является переводом статьи «What Is The Difference Between a Relative And an Absolute Url?» , подготовленная редакцией проекта.

абсолютные или относительные? / Хабр

Имеется в виду: какие адреса использовать для переходов внутри сайта? Допустим, мы хотим создать на домене site.ru с уже работающим сайтом другой подсайт, файлы которого будут находиться в папке shop. URL этого подсайта будет такой:
http://site.ru/shop

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

1. Абсолютные ссылки (absolute)

href="http://sites.ru/shop/" — ссылка на главную страницу магазина
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/" — cсылка на страницу товара

2. Относительные ссылки (relative)


При использовании относительных ссылок за точку отсчета каждый раз берется отправная страница.
href="t-shirts/t-shirt-life-is-good/" — ссылка с главной страницы на страницу товара
href="../../" — ссылка со страницы товара на главную страницу

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

Промежуточные варианты


Выше мы рассмотрели два крайних случая: чисто абсолютные и чисто относительные ссылки. Однако имеются и другие варианты ссылок. Прежде нужно сказать, что в этом мире всё относительно. Это касается и ссылок. Говоря о том, что ссылка абсолютная, нужно всегда указывать: относительно чего. Для краткости договоримся все промежуточные варианты ссылок, которые мы рассмотрим ниже, называть с помощью следующей конструкции «адрес относительно …», хотя по сути все они будут абсолютными. Первые два варианта ссылок (1 и 2) будем по-прежнему называть просто «абсолютными» и «относительными».

3. Адрес относительно протокола (protocol-relative)

href="//sites.ru/shop/" — главная страница магазина
href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/" — страница товара

Google рекомендует переходить именно на адреса без указания протокола. Однако, неизвестно, как долго будет длиться переходный период, так как сейчас считается, что http:// и https:// — это разные сайты

4. Адрес относительно корневой папки домена (root-relative)

href="/shop/" — главная страница магазина
href="/shop/t-shirts/t-shirt-life-is-good/" — страница товара

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

5. Адрес относительно главной страницы сайта (base-relative)


В HTML есть тег . Он задает базовый адрес, который будет автоматически добавляться ко всем относительным ссылкам и якорям. Ставить этот тег нужно в разделе . В качестве базового адреса мы укажем URL главной страницы:
<base href="http://sites.ru/shop/">
href="" — главная страница магазина
href="t-shirts/t-shirt-life-is-good/" — страница товара

Ко всем преимуществам предыдущего варианта адресов, здесь добавляется еще одно — теперь сайты можно безболезненно переносить не только на любой домен, но и в любую подпапку, так как название подпапки исчезло из href. Это удобно для разработки — вы собираете сайт в любой подпапке веб-сервера своего рабочего компьютера, и, когда, сайт готов, просто переносите файлы сайта на хостинг.

Остается только привыкнуть к тому что, хотя адреса и записаны, как относительные, ведут они себя как абсолютные. Особенно нужно помнить о якорях, так как привычная конструкция href=»#comments» теперь производит переход не в пределах текущей страницы, а переводит на главную страницу, так как впереди будет автоматически приписан URL главной страницы. Теперь впереди хеша нужно явно прописывать адрес текущей страницы: href=«t-shirts/t-shirt-life-is-good/#comments».

Что касается «настоящих» абсолютных ссылок (1, 3, 4), то они работают как обычно — тег base не оказывает на них никакого действия. Действие элемента base распространяется только на html-документ, но не касается относительных URL внутри css, js, svg и др. файлов.

Заключение


Какой вариант ссылок использовать, решать вам, так как в каждом случае нужно учитывать и другие факторы. Я для внутренних ссылок использую адреса относительно главной страницы сайта (5.base-relative). Для внешний ссылок и рассылок с сайта лучше использовать абсолютные ссылки (1.absolute).

Абсолютный и относительный url в HTML ссылках | 1

Абсолютный URL

Адрес ссылки может быть абсолютным, либо относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать доменное имя сайта (к примеру brainoteka.com). Относительные ссылки указываются относительно от корня сайта или текущего документа.

Так выглядит абсолютная ссылка на ресурс brainoteka.com

<a href="http://brainoteka.com">Обучающие курсы</a>

Ссылки относительно текущего документа (Относительный url)

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

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

Ссылки на файлы, расположенные в одной папке

В этом случае код будет следующий.

<a href="secondpage.html">Ссылка</a>

Файлы размещенные в разных папках (уровень вверх)

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки ставится две точки и слэш (/), как показано ниже.

<a href="../secondpage.html">Ссылка</a>

Две точки означают выйти из текущей папки на уровень выше.

Файлы размещаются в разных папках (2 уровня вверх)

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

<a href="../../secondpage.html">Ссылка</a>

Ну и по аналогии, на сколько уровней вверх нам будет необходимо перейти вверх, столько раз, данная конструкция и будет повторяться

Файлы размещаются в разных папках (Уровень вниз)

Теперь, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. Как изменится значение href в данном случае?

<a href="Site/secondpage.html">Ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Site/Folder/secondpage.html">Ссылка</a>

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/Папка/Имя файла» со слэшем вначале. Так, запись

<a href="/Content/">Контент</a>

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

Урок 4. Навигация, ссылки. Относительные и абсолютные пути.

Надеюсь, вы успешно справились с прошлым заданием и создали три странички с текстом. Оформили его с помощью тегов и запомнили их назначение. Что же, возникает резонный вопрос: «Как перемещаться между этими страничками?». Легко! Тут нам понадобятся ссылки.

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


<a href="https://myblaze.ru" target="_blank">Мой сайт</a>

Смотрите: тег «a», а у него атрибуты: «href» и «target», хотя это не все атрибуты, которые имеет данный тег, но на них я вам объясню принцип. Некоторые теги, как например, ссылка имеют атрибуты. При этом есть обязательные атрибуты и не обязательные. Конкретно в нашем случае обязательным является href, а target нет.
Но вернемся к самой ссылке. Насчет того, какие они бывают лучше почитать в соответствующей теме у меня на сайте: какие бывают ссылки. Но там я не рассказал подробно об относительных и абсолютных путях:


https://myblaze.ru/1.png - абсолютный путь
file://localhost/C:/1.png - абсолютный путь на локальном компьютере
../img/1.png – относительный путь

Вот вам и примеры. Абсолютный путь жестко задает адрес страницы или файла. Их использовать нежелательно, ведь если вы разрабатываете сайт на компьютере, а потом перенесете его на сервер, то все пути придется менять, представляете сколько мороки? Гораздо лучше использовать относительные пути, который работает следующим образом: есть рабочая директория в которой находится запущенный (открытый) файл. И все относительные пути уже начинаются именно от рабочей директории. Чтобы подняться вверх по каталогу нужно написать «..» как в примере выше. Если хотите остаться в этом каталоге про сразу пишите название файла или папки.

Ну и для понимания: пусть у нас есть папка с файлами, которая находится по следующему адресу C:\site и есть еще одна папка C:\site2. В первой папке лежат странички page1.html, page2.html, page3.html и папка с картинками img, а в другой папке, то есть site2 страницы page4.html и page5.html.
Соответственно открываем страницу page1.html из папки site как начальную и от нее пляшем:


page2.html – путь ко второй странице, она находится в том же каталоге что и первая.
page3.html – то же самое.
img/1.png – рисунок в папке с картинками.
../site2/page4.html – эта страница находится не в рабочей папке, следовательно, мы поднялись на каталог выше и зашли в папке site2 для доступа к 4 странице.
../site2/page5.html – то же самое.

Надеюсь стало чуть понятнее насчет относительный и абсолютных путей.

Вот, анкор ссылки – ее текст, на который можно нажимать. В href пишется путь, на который переходим. В target – параметры перехода, например, открывать в новом окне. В title подсказка для ссылки, всплывает при наведении. Есть еще много параметров ссылки, но они на данный момент нам не нужны, ведь главное сейчас, если вы не забыли, это связать три наши странички вместе между собой.
Для этого открывает в блокноте страницу и в разделе body в самом начале, чтобы ссылки были вверху страницы, добавляем ссылки:


<body>
<a href="page1.html">Жираф</a> | <a href="page2.html">Слон</a> | <a href="page3.html">Зебра</a>
…
Дальше идет уже наш текст о животном, который мы написали до этого, в прошлом уроке.

Не забудьте следующие моменты: вместо page1.html и 2 и 3 вписывайте названия своих страниц. Все файлы страниц должны лежать в одной папке, иначе используйте относительные или абсолютные пути для доступа к ним.

← Урок 3. Наполняем страницу | Содержание | Урок 5. Вставляем картинки →

абсолютных и относительных путей / ссылок | Программное обеспечение CoffeeCup

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

Конечно, все еще важно понимать, как работают относительные и абсолютные ссылки, так что читайте дальше…

Во-первых, как вы можете знать или не знать, вы должны использовать следующий код для создания ссылки в HTML:

Click Me

linkhere.html — это страница, на которую вы хотите создать ссылку, а Click Me — синяя подчеркнутая ссылка, отображаемая на странице.

В приведенном выше примере мы использовали относительный путь. Вы можете определить, является ли ссылка относительной, если путь не является полным адресом веб-сайта.(Полный адрес веб-сайта включает http: // www. ) Как вы уже догадались, абсолютный путь обеспечивает полный адрес веб-сайта. Вот несколько основных примеров относительных и абсолютных путей:

Относительные пути
  • index.html
  • /graphics/image.png
  • /help/articles/how-do-i-set-up-a-webpage.html

Абсолютные пути
  • http://www.mysite.com
  • http: // www.mysite.com/graphics/image.png
  • http://www.mysite.com/help/articles/how-do-i-set-up-a-webpage.html

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

Итак, когда пользователь щелкает относительную ссылку, как их браузер узнает, куда их взять? Ну, он ищет расположение файла относительно на странице, на которой появляется ссылка. (Отсюда и название!) Вернемся к нашему первому примеру:

Click Me

Эта ссылка указывает на имя файла без указания пути. Это означает, что linkhere.html находится в той же папке, что и страница, на которой появляется эта ссылка.Если бы оба файла находились в корневом каталоге веб-сайта http://www.website.com , фактический адрес веб-сайта, на который будет перенаправлен пользователь, будет http://www.website.com/linkhere.html . . Если бы оба файла находились в подпапке корневого каталога с именем files , пользователь попадет на http://www.website.com/files/linkhere.html .

Как насчет другого примера? Допустим, у нас в домене http://www.website.com есть подпапка изображений .Внутри папки изображений находится файл с именем pictures.html . Полный путь к этой странице будет:

"http://www.website.com/pictures/pictures.html"

Все еще с нами? Хорошо. Допустим, в этом файле pictures.html есть ссылка:

Дополнительные изображения

Если кто-то нажмет на это, как вы думаете, куда он их приведет? Если вы сказали http://www.website.com/pictures/morepictures.html , вы правы! Вы, наверное, знаете, почему он взял их туда: потому что оба файла сохранены в подпапке изображений .

А что, если бы мы хотели использовать относительную ссылку для отображения страницы в другой папке? Если вы хотите создать ссылку на файл в подпапке текущей папки, укажите путь к этому файлу, например:

Прочтите о моем отпуске на Таити.

В этом примере вы указываете браузеру поискать в текущей папке ( изображений, ) подпапку ( tahiti-vacation ), содержащую файл, в который вы хотите перенаправить пользователя ( tahiti.html ). Вы можете ссылаться на любое количество вложенных папок, используя этот метод.

Что делать, если вы хотите создать ссылку на файл в папке над текущей папкой? Вы должны указать браузеру переместиться на одну папку вверх в вашей относительной ссылке, поставив две точки и косую черту ( ../ ) перед именем файла или путем:

Читать истории

Теперь поговорим об абсолютных путях. Как мы упоминали ранее, абсолютные пути предоставляют полный адрес веб-сайта, по которому вы хотите, чтобы пользователь перешел. Абсолютная ссылка будет выглядеть так:

Щелкните здесь, чтобы перейти на страницу CoffeeCup Software.

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

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

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

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

Самый простой способ объяснить, что такое каждый вид ссылки, — просто показать вам:

Абсолютная ссылка:

page.html «> Ссылка

Проще говоря, относительная ссылка относится к текущей странице. В приведенном выше примере он находится рядом с текущей страницей (подумайте: в той же папке).Если файл будет перемещен с того места, где он находится, ссылка может оборваться (вероятно, так и будет). Используя абсолютные ссылки, вы даете странице точный полный адрес (URL).

Вот еще одна относительная ссылка:

../folder/page.html «> Ссылка

Это означает, что перейдите на одну папку вверх и найдите файл в этой папке.

Другой:

Почему нужно использовать одно или другое?

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

При использовании Joomla еще одним преимуществом относительных ссылок является то, что если страница должна быть защищенной (SSL / «https» вместо «http»), то вам не нужно переходить и менять все ссылки или ссылки на изображения на эту страницу.Просто это происходит автоматически.

Какой способ лучше? Что ж, мы, вероятно, сказали бы, что использование относительных ссылок — лучший выбор.

Что еще нужно подумать

Имена страниц чувствительны к регистру. В доменных именах регистр не учитывается. (Кроме того, адреса электронной почты не чувствительны к регистру).

Эти двое перенесут вас в одно и то же место:

https: // www. yourdomain .com / page.html

https: // www. YourDomain .com / page.html

Эти двое не приведут вас в одно и то же место:

https: // www.yourdomain.com/ page.html

https://www.yourdomain.com/ Page.html

Помните, что текст, который вы используете в ссылке, помогает в SEO. Связывание слов «щелкните здесь» со страницей «О нас» сообщает Google, что вы собираетесь «щелкнуть здесь», и это не имеет смысла. Лучше использовать текст ссылки «о нас» — например:

Не хорошо:

Узнайте больше о нашей компании, folder/page.html «> нашей компании .

Ссылки на изображения

На этой странице мы показывали абсолютные и относительные ссылки со ссылками (гипертекстом), но то же самое и с изображениями. Например:

Абсолютное:

https://www.yourdomain.com/image.jpg «>

Относительное:

изображение.jpg «>

В большинстве систем управления контентом вы не увидите код, пока не войдете в представление кода, поэтому вы не увидите этого много. Это просто к сведению.

Понимание разницы между относительным и абсолютным путями

Обновлено 26 апреля 2017 г. в 11:24

Business Catalyst Объявление об окончании срока службы — узнайте больше.
В этой статье содержится основная информация о работе с родственниками и.абсолютные пути ссылок и описывает, когда уместно использовать каждый тип пути при размещении ссылок на контент на веб-страницах.

Связывание с относительными и абсолютными ссылками

Ссылка является абсолютной ссылкой, если весь URL-адрес и имя файла могут быть вставлены в поле адреса браузера для поиска определенной страницы в Интернете. Абсолютный ссылка указывает полный URL-адрес; протокол (http: //) должен присутствовать в дополнение к имени домена сайта, и часто вложенная папка или конкретное имя файла также включены.

Это пример ссылки на абсолютный URL:

  поисковая система Google

URL-адрес в приведенной выше ссылке может быть загружен независимо от текущей страницы, отображаемой в браузере.

Примечание. Важно указать протокол (в данном случае http: //). Даже если ваши ссылки могут работать на вашем компьютере без http: //, всегда включайте его в любом случае, чтобы создать правильно сформированный HTML-код.

Относительная ссылка указывает имя файла, на который будет сделана ссылка, только в том случае, если он связан с текущим документом.

Например, если все файлы на вашем веб-сайте содержатся в одном каталоге (или папке), и вы хотите установить ссылку со страницы page1.html на page2.html, код на странице page1.html будет выглядеть так:

  Перейти на страницу 2

Эта ссылка будет действительна только в том же каталоге, в котором хранится page2.html.

Браузер получает запрос на новую страницу, просматривает текущий каталог (папку) текущей страницы и находит файл с именем page2.html для отображения.

Но если вы вставили page2.html в браузер, вы не найдете страницу, созданную по относительной ссылке:

http://my_domain_name.com/page2.html

(Это пример создания абсолютной ссылки, а не просто ссылки на отдельный файл на сайте).

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

Относительные ссылки и пути к ним могут быть более сложными, чем просто указание имени файла на веб-странице.Например, представьте, что page1.html находится в корневой каталог (или основная папка), а page2.html находится в подкаталоге с именем folder2. В этом случае ссылка со страницы page1.html на page2.html будет выглядеть как это:

  Перейти на страницу 2

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

Помните, что имена папок и файлов в URL-адресах чувствительны к регистру.Файлы index.htm и Index.htm — это два разных файла. Однако доменные имена не чувствительны к регистру; ввод www.google.com приведет к переходу на ту же страницу, что и WWW.GOOGLE.com.

А теперь представьте, что вы хотите сделать обратную ссылку на page1.html из page2.html в другой папке. Код для ссылки на файл в каталоге над каталогом в котором находится текущий файл, выглядит так:

  перейти на первую страницу

Каждый раз, когда вы хотите перейти на уровень выше в иерархии папок, вы добавляете две точки и косую черту (../).

Это означает, что браузер должен перейти к следующему уровню папки, а затем найти веб-страницу с соответствующим именем файла.

Теперь предположим, что структура папок вашего веб-сайта содержит корневой каталог, который содержит папку с именем folder2; а в папке2 есть еще одна папка (или каталог) с именем folder3, как показано ниже:

Чтобы связать страницу с именем page3.html, которая находится в папке3, со страницей page1.html (в корневом каталоге), путь должен выглядеть следующим образом:

  Перейти на страницу 1.

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

Давайте посмотрим на другой пример. Теперь представьте, что корневой каталог содержит две папки: одну с именем folder2 и одну с именем вложенной папки.

Чтобы создать ссылку со страницы page2.html в папке2 на newpage.html в подпапке, необходимо сначала перейти на один уровень вверх в корневой каталог, а затем на один уровень вниз. во вложенную папку. Код для перемещения вверх на один уровень папки и последующего перехода вниз к другой папке выглядит следующим образом:

 Ссылка на новую страницу.

Ситуации, когда следует использовать абсолютные ссылки (и когда использовать относительные ссылки)

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

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

Используйте относительные ссылки при переходе на другие страницы вашего собственного веб-сайта. И используйте цель по умолчанию (self), чтобы ссылки всегда загружались в существующий страница браузера. Посетителей раздражает, если они открывают много окон при посещении одного и того же сайта, поэтому обычно вы всегда заменяете текущий страница сайта с другой страницей сайта.

Общие сведения о домашней странице сайта (также известной как стартовая страница)

При использовании консоли администратора для создания веб-страниц вы можете указать домашнюю (начальную) страницу. Выберите «Веб-сайт»> «Веб-страницы», выберите имя страницы из списка. страниц и выберите на боковой панели параметр Установить в качестве начальной страницы.

Стартовой страницей может быть любая веб-страница вашего веб-сайта. Это самая первая страница, которая отображается для посетителей, если они не укажут страницу при наборе текста. в URL-адресе вашего сайта, например: http: // my_domain_name.com.

Рекомендуется сохранить домашнюю страницу на корневом уровне сайта и назвать ее index.htm или index.html.

Браузеры настроены так, чтобы всегда искать страницу индекса на каждом уровне папки. Например, если вы ссылаетесь на имя папки вашего сайта без явного указав веб-страницу, браузер автоматически загрузит файл с именем index.htm или index.html (если этот файл существует в папке). если ты введите http://my_domain_name.com/folder/, тогда система попытается отобразить веб-страницуhttp: // yourcompany.com / folder / index.htm или http://yourcompany.com/folder/index.html.

При связывании с папками путь должен заканчиваться косой чертой (/), иначе система попытается загрузить веб-страницу с именем папка, например:

http://yourcompany.com/folder.

абсолютных или относительных ссылок?

«GoogleGuy» на самом деле сказал: «Абсолютные ссылки имеют меньше шансов ошибиться [когда Google индексирует вашу страницу]. Даже если это не должно иметь значения, я рекомендую абсолютные ссылки.”

Что на самом деле?
К сожалению, мы сталкиваемся с тем, что люди часто очищают контент с веб-сайта, а затем размещают его на своем собственном сайте. Так что, если ваш веб-сайт собираются соскабливать, вы можете попытаться получить обратную ссылку на свой сайт. Вы можете добиться этого только с помощью абсолютного пути!

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

Другой сценарий: если кто-то ссылается на ваш сайт, используя yoursite.com, а не www.yoursite.com, поисковая система перейдет по ссылке и начнет сканирование. Если вы используете абсолютные ссылки, поисковая система просканирует ваш сайт и увидит только страницы как www.yoursite.com/index.html. Если вы используете относительные ссылки, поисковая система может сканировать ваш сайт как ваш сайт.com / index.html, что, вероятно, не то, что вы хотите.

Несомненно, большинство ваших ссылок с других сайтов будут ссылаться на www.yoursite.com, а не на yoursite.com. Если поисковая система по какой-то причине (а это действительно происходит) решит проиндексировать ваш сайт с помощью yoursite.com, а не www.yoursite.com, вы можете внезапно потерять все рейтинги в своей поисковой системе, потому что версия вашего сайта без www. индексируется, а версия www — нет.

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

Как веб-разработчик и SEO, я могу рекомендовать только абсолютные ссылки и по следующим причинам:

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

Относительный путь в HTML — qaru

Вы говорите, что ваш веб-сайт находится в http: // localhost / mywebsite , и допустим, что ваше изображение находится внутри подпапки с именем pictures / :

.

Абсолютный путь

Если вы используете абсолютный путь , / будет указывать на корень сайта , а не на корень документа: localhost в вашем случае. Вот почему вам необходимо указать папку с вашим документом, чтобы получить доступ к папке изображений:

  "/ mywebsite / pictures / picture.png "

И это будет то же самое, что:

  "http: //localhost/mywebsite/pictures/picture.png"

Относительный путь

Относительный путь всегда равен относительно корня документа , поэтому, если ваш html — на том же уровне каталога, вам нужно будет начать путь непосредственно с каталога вашего изображения название:

  "pictures / picture.png"

Но есть и другие перки с относительными путями:

точка-косая черта (./ )

Точка ( . ) указывает на тот же каталог, а косая черта ( / ) дает к нему доступ :

Так это:

  "pictures / picture.png"

Будет так же:

  "./pictures/picture.png"

Двойная точка-косая черта ( ../ )

В данном случае двойная точка ( .. ) указывает на верхний каталог и аналогично, косая черта ( / ) дает вам доступ к нему. Итак, если вы хотите получить доступ к изображению, которое находится в каталоге на один уровень выше текущего каталога, в котором находится ваш документ, ваш URL-адрес будет выглядеть так:

  "../picture.png"

Вы можете играть с ними сколько угодно, небольшой пример:

Допустим, вы находитесь в каталоге A и хотите получить доступ к каталогу X .

  - корень
   | - а
      | - А
   | - б
   | - х
      | - X

Ваш URL-адрес будет выглядеть либо:

Абсолютный путь 

  "/x/X/picture.png"

или:

Относительный путь 

  "./../x/X/picture.png"

html — Использование относительных ссылок в Blogger

Blogger имеет тег <$ BlogURL $>

<$ BlogURL $> указывает на URL вашего блога.

Использование: хорошее значение для ссылки «домой» или ссылки «назад к текущему» в шаблоне архива, например

главная

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

Итак, вы можете сделать

Ваш URL

Blogger создает относительные ссылки (например, являются относительными, ссылки типа являются абсолютными ссылки) немного сложнее, чем обычно, потому что большинство людей хранить свои архивы в каталоге, отличном от их главной страницы. Если вы ссылаетесь на «images / mypic.jpg» в сообщении, тогда, когда это сообщение в архиве ссылка будет указывать на «архивы / изображения / mypic.jpg» и, следовательно, не найти. То же самое произойдет, если вы поместите относительную ссылку в ваш основной шаблон, потому что страницы архива также создаются из ваш основной шаблон.Не бойтесь, есть два простых решения.

Исправление первое — использовать тег «base href», чтобы браузер запускал каждый относительный URL-адрес с путем к вашему основному каталогу. В вашем основном шаблона, в разделе включите тег 900 14. Если у вас есть отдельный стиль страницы индекса архива архивов, включите базовый href в раздел вашего архива шаблон тоже. В следующий раз, когда вы опубликуете или опубликуете и опубликуете, все ваши относительные ссылки будут начинаться с каталога, в котором у вас есть главная страница, независимо от того, находятся ли они в этом каталоге или в ваших архивах каталог.Только не забудьте изменить URL-адрес блога в своем настройки, если вы перемещаете свой блог!

Второе исправление - использование корневых путей сервера, а не относительных пути: корневой путь сервера начинается с косой черты и перечисляет все каталоги из корневого каталога сервера. Например, если ваша главная страница была www.example.com/index.html , а ваши архивы в www.example.com/archives/archive.html , затем корневую ссылку на архивы будут иметь вид , а серверная ссылка на изображение в www.example.com/images/ будет выглядеть например . Однако, если ваша главная страница находится в www.freehost.com/bunch22/~username/blog/blogger.html , серверный ссылка будет начинаться с / bunch22 / ~ username / blog / и с использованием базового тега href будет намного проще (как только вы к этому привыкнете).

Источник

Абсолютные, относительные и корневые ссылки

Моя новая книга Sams Teach Yourself Microsoft Expression Web 3 за 24 часа близится к завершению (вчера вечером только что закончил финальный обзор первых 10 глав).Книга представляет собой переработку оригинала для новой версии Expression Web, и в процессе переписывания я также добавил несколько новых материалов, чтобы помочь читателям лучше понять иногда сбивающий с толку и загадочный мир веб-кода. Эти дополнения в основном были вызваны вопросами и комментариями читателей, как в случае с приведенным ниже отрывком о синтаксисе гиперссылок.

Я выбрал этот отрывок, потому что он актуален не только для людей, использующих Expression Web 3, но и для всех, кто что-либо делает в сети.Когда я начинал в этой области, я часто не понимал, почему существует три разных типа гиперссылок и как и когда их использовать. Что ж, вот простое объяснение с примерами:

Абсолютные, относительные и корневые гиперссылки - объяснение

При создании гиперссылок в Expression Web 3 вы заметите, что синтаксис адреса ссылки в представлении «Код» изменяется в зависимости от того, на что вы ссылаетесь. На самом деле существует три разных способа написания адреса гиперссылки, и все они используются для разных целей:

Абсолютные гиперссылки

Абсолютные гиперссылки - это полные адреса, содержащие все элементы URL.Они всегда начинаются с некоторой версии http: //, за которой следует имя домена (например, www.designisphilosophy.com) и, возможно, страница / папка. Абсолютные гиперссылки используются при переходе на страницы за пределами текущего сайта, которые имеют другое доменное имя.

Относительные гиперссылки

Относительные гиперссылки - это адреса, относящиеся к текущему домену или местоположению. Они содержат только имя целевой страницы с префиксом любых необходимых перемещений папок (например, default.html). Браузер видит, что это относительная гиперссылка, и добавляет домен и расположение папки текущей страницы в начало ссылки, чтобы завершить ее. Если вы используете относительные гиперссылки и хотите перейти со страницы, хранящейся в одной папке, на страницу, хранящуюся в другой папке, вы добавляете префиксы папок к гиперссылке. Например, относительная ссылка со страницы в папке 1 на страницу в папке 2 будет выглядеть так: ../Folder 2 / page.html, где ../ сообщает браузеру, что вы хотите выйти из текущей папки в новый.Когда вы создаете гиперссылки между страницами в Expression Web 3, они всегда вставляются как относительные ссылки, чтобы приложение могло легко обновлять их, если вы решите перемещать файлы.

No related posts.