Абсолютные и относительные ссылки — Блог 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
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:/.
Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.
абсолютные или относительные? / Хабр
Имеется в виду: какие адреса использовать для переходов внутри сайта? Допустим, мы хотим создать на домене 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 есть тег <base>. Он задает базовый адрес, который будет автоматически добавляться ко всем относительным ссылкам и якорям. Ставить этот тег нужно в разделе <head>. В качестве базового адреса мы укажем 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 и др. файлов.
Заключение
Какой вариант ссылок использовать, решать вам, так как в каждом случае нужно учитывать и другие факторы.
Абсолютные, относительные и корневые ссылки
Категории
Учебники по моей книге
Моя новая книга Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours близится к завершению (только вчера вечером закончила окончательный обзор первых 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, они всегда вставляются как относительные ссылки, чтобы приложение могло легко обновлять их, если вы решите перемещать файлы. Однако, если вы перемещаете файлы на своем компьютере вне программы Expression Web, гиперссылки разрываются.
Корневые гиперссылки
Корневые гиперссылки — это подмножество относительных гиперссылок, в которых предполагается, что все ссылки начинаются с корневой папки (доменного имени) сайта.
Они отличаются от относительных гиперссылок тем, что перед адресом стоит косая черта (например, /default.html). Браузер применяет только домен к началу этой ссылки. Относительные корневые гиперссылки используются вместо относительных на больших сайтах, на которых есть вероятность, что файлы будут перемещены без использования приложения, такого как Expression Web 3, для их обновления. Поскольку они относятся к корню сайта, а не к текущему местоположению страницы, на которой они размещены, они работают независимо от того, где находится файл, пока они остаются в правильном домене.
Мортен Рэнд-Хендриксен — штатный автор LinkedIn Learning и lynda.com, специализирующийся на WordPress, веб-дизайне и разработке, а также инструктор в Университете искусства и дизайна Эмили Карр. Он популярный спикер и преподаватель по всем вопросам дизайна, веб-стандартов и открытого исходного кода. Как владелец и веб-руководитель Pink & Yellow Media, цифровой медиа-компании в бутик-стиле в Бернаби, Британская Колумбия, Канада, он создал веб-решения на основе WordPress для многонациональных компаний, политических партий, банков, а также малого бизнеса и блоггеров.
. Он также вносит свой вклад в местное сообщество WordPress, организуя Meetups и WordCamps.
Просмотреть архив →
Все об относительных и абсолютных ссылках
Ссылки — это строительный блок Интернета, позволяющий соединять все: все страницы вашего сайта, ваш сайт с другим сайтом, поисковую систему с вашим сайтом. Их легко сделать, но есть несколько разных типов, о которых вы должны знать, которые работают немного по-другому. Независимо от типа ссылки, при нажатии на которые вы переходите в другое пространство.
В предыдущем уроке мы видели, как связать файлы HTML и CSS вместе, теперь мы будем опираться на это и посмотрим, как мы можем соединить несколько файлов HTML. После последнего урока у нас должен быть файл HTML (называемый index.html), который выглядит следующим образом:
<голова>Это название моей страницы. <тело>Это элемент заголовка 1
Привет, это простой абзац.
Примечание: С этого момента вместо того, чтобы перечислять весь файл (это будет довольно долго), я просто буду ссылаться на ту часть файла, которую мы изменяем.
Шаг 1
Найдите на своей странице элементы h2 и p и добавьте в абзац дополнительный код ссылки:
Это элемент заголовка 1
Привет, мир, это простой абзац. Ссылка на Google
На странице должно выглядеть так:
Рисунок 1: Снимок экрана примера страницы указателя
Это код простой ссылки на Google. Это должно выглядеть знакомо — мы использовали этот пример в руководстве по обзору HTML для объяснения атрибутов. Давайте рассмотрим части ссылки:
Этот элемент a имеет атрибут href , где имя — href , а значение — http://www.google.com.
Абсолютные ссылки
Обратите внимание, что в приведенном выше примере значением атрибута является вся ссылка на Google, включая http://.
Хотя многие современные браузеры не требуют, чтобы вы на самом деле вводили это, и не отображают его, когда вы кодируете ссылки на внешние веб-сайты, вы должны включать ссылку полностью или 9 символов.0071 абсолютное местоположение ссылки . Этот тип ссылки является наиболее специфическим типом ссылки, который мы можем использовать, и обычно он используется для доступа к страницам за пределами нашего собственного веб-сайта.
Относительные ссылки
Напротив, относительная ссылка не указывает весь адрес, она указывает только имя файла и местоположение файла, на который мы ссылаемся относительно текущей веб-страницы, на которой мы находимся. Обычно мы используем относительные ссылки при переходе на другие страницы создаваемых нами веб-сайтов.
Но прежде чем мы сможем написать ссылку на другую веб-страницу на нашем сайте, нам нужно создать еще одну веб-страницу.
Шаг 2
Поскольку наша существующая HTML-страница хорошо настроена и мы не хотим начинать с нуля, давайте создадим копию нашего индексного файла.
Я просто собираюсь продублировать свой файл index.html и переименовать его в about.html , чтобы теперь у меня было три файла в папке моего веб-сайта, как показано ниже.
Рисунок 2: Снимок экрана с файлами в папке нашего веб-сайта
Теперь нам нужно быть осторожными с тем, какой HTML-файл мы редактируем, так как у нас есть два очень похожих файла.
Шаг 3
Откройте новый файл about .html в редакторе. Код точно такой же, как и в файле index.html (очевидно), потому что мы просто сделали дубликат файла. Давайте просто изменим несколько вещей, чтобы мы знали, какую страницу мы просматриваем. Я внесу эти изменения:
<голова>Это название моей страницы. <тело>О странице
Здесь я в конечном итоге напишу немного информации о себе!
Примечание: ссылка на ранее созданный файл style.
css все еще находится в разделе
Шаг 4
Хорошо, все готово. Теперь мы хотим создать кликабельные ссылки между нашими двумя страницами. Итак, на моем о файле .html , я собираюсь добавить относительную ссылку в свой файл index.html, как показано ниже:
Ссылка на домашнюю страницуО странице
Здесь я когда-нибудь напишу немного информации о себе!
Шаг 5
И чтобы мы могли перемещаться между страницами, я собираюсь открыть файл index .html в моем редакторе кода и добавить ссылку на мою страницу «О нас», как таковую:
html">Ссылка на страницу "О нас"
Это элемент заголовка 1
Привет, мир, это простой абзац. Ссылка на Google
Взгляните на примеры страниц, чтобы увидеть, как это работает. Нажмите, чтобы открыть пример страницы указателя в новой вкладке.
Навигация по строительной площадке
Эта серия постов предназначена для объединения воедино, чтобы вы могли создать свой собственный веб-сайт, а самой основной функцией всех веб-сайтов является навигация для доступа ко всем страницам. Мы начнем строить это прямо сейчас.
Шаг 6
Давайте продолжим и создадим еще одну страницу, повторив шаг 2, но на этот раз назвав получившуюся страницу contact.html .
Шаг 7
Еще до того, как я открою эту новую страницу, я собираюсь отредактировать ссылку на моей странице index.html — на этот раз добавлю ссылки на две другие страницы. Итак, откройте index .html и замените исходный код ссылки следующим:
html">Главная О нас Контакт
Я добавил три ссылки — по одной на каждую из моих страниц. Стоит отметить, что первая ссылка на страницу index.html мне особо не нужна, так как мы уже на этой странице. Но для единообразия на моих страницах я пока оставлю его там. В результате страница должна выглядеть примерно так, как показано на скриншоте ниже:
.Рисунок 3: Снимок экрана измененной домашней страницы
Шаг 8
Теперь вы возьмете этот точный код и добавите его в то же самое место в двух других файлах, заменив ранее написанные ссылки, а также убедившись, что он вставлен в нужное место на странице — под открытием. тег body и над нашим элементом h2.
Полученный веб-сайт должен выглядеть и работать так же, как пример веб-сайта, который вы можете просмотреть здесь (нажмите на ссылку и обратите внимание на изменение URL-адреса в адресной строке вашего браузера — вы должны увидеть имена файлов, которые вы только что создали).
Или вы можете скачать заархивированную папку со всеми файлами сайта здесь.
Специальные ссылки
Анкерные ссылки
Таким образом, мы просто ссылались на разные страницы нашего сайта с помощью относительных ссылок, а ранее мы делали ссылку на внешнюю веб-страницу (Google), используя абсолютную ссылку. Обе эти ссылки ведут нас на разные веб-страницы. Но что, если мы хотим создать ссылку на другое место на странице, на которой мы уже находимся? Это немного сложнее, но мы можем сделать это, используя якорную ссылку. Я расскажу об этом в другом уроке, после того как мы узнаем немного больше о структуре наших страниц и добавим на них больше контента.
Открытие ссылок в новых вкладках или окнах
В какой-то момент вам может понадобиться открыть определенные ссылки в новых вкладках или окнах браузера, особенно если вы включаете ссылки на внешний ресурс, которого нет на вашем собственном сайте. Это также довольно просто: просто добавьте целевой атрибут к тегу ссылки, как показано ниже, со значением _blank .
Ссылка на Google (открывается в новой вкладке)
Должен отметить, что открытие ссылок в новой вкладке — спорный вопрос. (Да, эти ссылки открываются в новых вкладках. Да, я думаю, что это вполне приемлемая практика — вы должны прочитать раздел комментариев по этой второй ссылке выше, если вам интересно мнение других.)
Открытие ссылки электронной почты
Вы также можете создать ссылку для открытия нового почтового сообщения. На этот раз значение атрибута href меняется: мы добавляем mailto: перед адресом ссылки.
[email protected]
Вам также следует подумать о том, как вы используете этот тип ссылок, поскольку в наши дни многие люди используют службы электронной почты на основе браузера (например, Gmail) для отправки электронных писем. Для этих людей ссылка может не открывать новое почтовое окно, поэтому видимым содержанием вашей ссылки должен быть адрес электронной почты, а не что-то вроде «напишите мне по электронной почте».