Почему не работает относительная ссылка html

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

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

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

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

В данном примере ссылка вида Изучение HTML является абсолютной и ведет на главную страницу сайта htmlbook.ru.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Интересный вопрос про относительные ссылки

Использую на сайте паттерн MVC, соответственно mod_rewritом все запросы перенаправляю на index.php, при этом URLы имеют вид

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

но только если URL будут такими:

при этом с таким URL

что бы работали относительные ссылки нужно спускаться на один каталог ниже т.е.

Хотелось бы разобраться почему так, ведь все запросы идут на index.php в котором и подключаются остальные файлы. P.S. Мне не нужны «обходные» пути решения проблемы, хочется именно разобраться почему так работает.

В дополнение для более четкой картины логика приложения: Запросы направляются на index.php, в зависимости от URL маршрутизатором загружаем нужный контроллер. Для www.site.ru/razdel используем controller + action1 который подключает основной шаблон + шаблон для конкретного раздела Для www.site.ru/razdel/podrazdel (раздел идентичен первому примеру) подключаем тот же controller + action2 который подключает основной шаблон + шаблон для конкретного подраздела.

Похоже не поняли вопрос, объясню в другом формате: Заходим на site.ru или на site.ru/razdel При использовании относительных ссылок все работает правильно: Например загрузка css используем ссылку href=»css/style.css» , получаем:

Заходим на site.ru/razdel/podrazdel Используем ссылку href=»css/style.css» , получаем:

Но такого пути нету, нужен как в первом варианте:

Вопрос в том, почему он начинает путь с razdel а не с корневой директории? Код htaccess:

Источник

Ссылка на каталог HTML не работает, если каталог не с самого начала

Моя проблема в том, что у меня есть куча файлов HTML, но в простом случае у меня есть папка public_html / pages + index.html / в папке страниц находится dmca.html .

Поэтому, когда я хочу найти файл с помощью href = » pages / dmca.html «, он не работает, а с другой стороны, когда я использую » ../../public_html/pages /dmca.html «с самого начала он работает, нормально это или что-то не так, поэтому я могу использовать только простой способ, как я упоминал выше (ссылка)

2 ответа

Вы должны посмотреть, где находится файл .html в иерархии. Если вы находитесь в dmca.html и у вас есть href на этой странице для second.html, вам нужно будет вернуться назад в каталог страниц, а затем перейти к файлу: ../second.html

Теперь, если вы находитесь в index.html и у вас есть ссылка href на dmca.html, вам нужно будет вернуться на один уровень назад, войти в каталог страниц и выбрать файл .html. Это будет примерно так: ../pages/dmca.html

Если я неправильно объяснил или неправильно понял вопрос, сообщите мне.

Что происходит, если я правильно понимаю проблему, заключается в том, что вы находитесь в index.html и хотите href dmca.html, но маршрут, который вы используете pages/dmca.html , не работает, но если вы используете < >, значит, работает. И я думаю, вы спрашиваете, почему это происходит.

Что ж, когда вы используете pages/dmca.html , вы говорите: найдите подкаталог с именем ‘pages’ и перейдите к файлу внутри него с именем dmca.html. Это было бы правильно, если бы у вас была такая иерархия:

Но index.html — это файл, поэтому он не может содержать подкаталоги. Вот почему вам нужно подняться на один уровень вверх по иерархии, а затем, когда вы окажетесь в public_html /, вы можете выбрать загрузку index.html или перейти в подкаталог public_html / pages и выбрать из него файл.

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

Посмотрите мои каталоги. У меня есть папка htdocs, внутри у меня есть файлы .png, index.html и папка с названием «prova», внутри папки «prova» у меня есть index2. Как видите, это тот же случай, что и ваш. У меня есть href на index.html, в котором написано href=»prova/index2.html» , и он мне подходит. На самом деле то, что я сказал тебе утром, неверно. Мне жаль :/ Потому что, если я напишу ../prova/inedx2.html , произойдет то, что папка «htdocs» будет удалена из URL. Остается как: «PortàtilHP_antic_pare / prova / index2.html». Вы можете видеть, что папка между «PortàtilHP_antic_pare» и «prova», которая должна быть «htdocs», исчезла.

Так что теперь мне интересно, чем мой ответ был для вас полезен. Думаю, я неправильно это понял, и почему-то мой ответ заставил вас изменить то, что каким-то образом сработало.

Источник

Какие ссылки использовать: абсолютные или относительные?

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

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

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

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

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

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

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

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

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

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

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

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

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

В HTML есть тег . Он задает базовый адрес, который будет автоматически добавляться ко всем относительным ссылкам и якорям. Ставить этот тег нужно в разделе . В качестве базового адреса мы укажем URL главной страницы:

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

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

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

Источник

1.5. HTML-ссылки

Ссылки можно поделить на две категории:

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

Как сделать гиперссылки на сайте

1. Структура ссылки

Гиперссылки создаются с помощью элемента . Внутрь помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.

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

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:

file обеспечивает чтение файла с локального диска:

http предоставляет доступ к веб-странице по протоколу HTTP:

https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS):

ftp осуществляет запрос к FTP-серверу на получение файла:

mailto запускает сеанс почтовой связи с указанным адресатом и хостом:

Имя сервера описывает полное имя машины в сети, например, site.ru . Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.

Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:

Путь содержит имя папки, в которой находится файл.

2. Абсолютный и относительный путь

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

Рис. 1. Пример структуры папок

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

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:

• протокол, например, http (опционально);
• домен (доменное имя или IP-адрес компьютера);
• папка (имя папки, указывающей путь к файлу);
• файл (имя файла).

Существует два вида записи абсолютного пути — с указанием протокола (полный) и без него:

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

Если файл находится в корневой папке, то путь к файлу будет следующим:

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

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

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

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

Относительный путь содержит следующие компоненты:

• папка (имя папки, указывающей путь к файлу);
• файл (имя файла).

Путь для относительных ссылок имеет три специальных обозначения:

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

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

3. Якоря

Якоря, или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи элемента с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак # .

Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:

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

4. Как сделать изображение-ссылку

Чтобы сделать кликабельное изображение, необходимо поместить элемент внутрь элемента . Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target=»_blank» для ссылки.

Рис. 2. Изображение-ссылка

5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты

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

Источник