Html относительные ссылки: Абсолютные и относительные ссылки в HTML | Создание сайтов и заработок в сети – Абсолютные и относительные ссылки html

Leave a Comment / Html / By /

Пути в HTML. Абсолютные и относительные ссылки в 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 .

seodon.ru | Учебник HTML — Cсылки и их разновидности

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Тег <A> или как сделать ссылки в HTML?

Ссылки создаются при помощи тега <A>…</A>, он относится к уже хорошо известному вам типу — это обычный встроенный (уровня строки)

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

Чтобы ссылка заработала, в теге <A> необходимо указать адрес документа, к которому она ведет. Это делается с помощью атрибута href, значением которого является URL — уникальный адрес каждого документа в интернете (как адрес вашей квартиры). Подобный адрес вы всегда видите в адресной строке браузера, например: http://seodon.ru/. Обратите внимание, что в интернет-адресах используются прямые слеши (/), а не обратные (\), как в Windows. Чтобы ссылку было видно на странице — внутри элемента <A> надо написать какой-нибудь текст.

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

Пример создания ссылок в HTML

<!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=Windows-1251">
<title>Ссылки в HTML</title>
</head>
<body>
<p><a href="http://seodon.ru/" title="Сеодон.ру">Главная страница</a></p>
<div>
 <a href="http://seodon.ru/html/"><em>Учебник HTML</em></a>
</div>
</body>
</html>

Результат в браузере

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

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

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

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

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

Как правило, все файлы сайта располагают в разных тематических папках. Как называть эти папки, впрочем, как и сами файлы, дело ваше, но обычно в названии присутствует суть содержимого. Например, папки с изображениями называют «image», «img», «pictures», «kartinki» и т.д. Самое главное всегда пишите названия папок и файлов (в том числе и HTML-страниц) строчными буквами.

Чтобы нам разобраться с относительными ссылками, давайте сделаем следующее: создайте папку «mysite», внутри нее создайте папки «1» и «2», а в них еще по одной папке, соответственно «1-1» и «2-2». В каждой папке создайте по одной HTML-странице, их названия должны соответствовать названиям папок, в которых они расположены: 1.html, 1-1.html и т.д., а в корневой папке сделайте два файла mysite1.html и mysite2.html

Файловая структура для обучения созданию ссылок.

Если исходный файл и тот на который ссылаются, находятся в одной папке, то в атрибуте href тега <A> указывается только имя файла.

Ссылка из файла mysite1.html на mysite2.html

<a href="mysite2.html">mysite2.html</a>

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

Ссылки из mysite1.html на 1.html и 2-2.html

<a href="1/1.html">1.html</a>
<a href="2/2-2/2-2.html">2-2.html</a>

Если оба файла находятся в разных папках, то сначала перед адресом указывается одна или несколько команд выхода из папки — «../» (две точки и прямой слеш), чтобы выйти в общую для обоих файлов папку. А затем все так же, как в предыдущем примере.

Ссылки из 1-1.html на 1.html и 2.html

<a href="../1.html">1.html</a>
<a href="../../2/2.html">2.html</a>

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

Ссылки из любого файла на 2.html (только для сервера)

<a href="/2/2.html">2.html</a>

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

Ссылки посещенные, непосещенные, активные и под курсором

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

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

Как открыть страницу по ссылке в новом окне?

По умолчанию все браузеры открывают новые страницы в том же окне, но при помощи атрибута target тега <A> можно сделать так, чтобы документы открывались в новом окне. Но есть одно «НО». Этого атрибута нет в текущей версии HTML 4.01 и нет ему аналога в CSS. А все потому, что разработчики языка решили, что открытие новых окон без желания пользователя — это плохо, а если он захочет, то сможет сам открыть страницу в новом окне, кликнув по ссылке правой кнопкой мышки и выбрав нужный пункт меню.

Плохо это или хорошо — мнения расходятся, но факт в том, что в HTML 5 target вновь появится, поэтому я все же покажу вам, как делается открытие в новом окне. Смотрим пример.

Пример открытия страницы в новом окне.

<a href="page.html" target="_blank">page.html</a>

Именно так, _blank, со знаком подчеркивания в начале.

Домашнее задание.

  1. Из файла 2.html создайте три ссылки: на 2-2.html, 1-1.html и mysite2.html
  2. Создайте в файле mysite2.html ссылку на главную страницу Сеодон.ру, выделите ее жирным курсивом и пусть она открывается в новом окне.
  3. В том же mysite2.html напишите три ссылки на страницы: mysite1.html, 1-1.html и 2.html

Посмотреть результат → Посмотреть ответ

Ссылки в HTML | Учебные курсы

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

Такая часть HTML как «Гипертекст» определяет, какой вид ссылок мы используем: гипертекстовые ссылки (или гиперссылки).

В HTML ссылки — это строчные элементы, написанные с помощью тега <a>.

Атрибут href (hypertext reference) используется для определения цели ссылки (куда вы переходите при щелчке по ней).

<p>
  Чтобы найти что-либо, посетите <a href="http://www.google.com">Google</a>.
</p>

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

Есть три вида цели, которые вы можете определить:

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

Ссылки с якорем

Ссылки с якорем предназначены для навигации в пределах одной страницы. Предваряя значение атрибута href с #, вы можете настроить переход к элементу HTML с определённым атрибутом id.

Например, <a href=»#footer»> будет переходить к <div> в том же HTML-документе. Такой тип href часто используется, чтобы вернуться обратно к верхней части страницы.

Относительные адреса

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

Но по отношению к чему? Ну, относительно текущей страницы.

Давайте используем простой пример, в котором папка my-first-website содержит два файла HTML.

В home.html вы хотите определить ссылку на contact.html. Поскольку эти два файла находятся в одной папке, вы можете просто написать в home.html:

<p>
  Перейти на <a href="contact.html">страницу контактов</a>.
</p>

На реальном сайте процесс аналогичен.

Скажем, у вас есть сайт с именем http://ireallylovecats.com, на котором у вас есть две веб-страницы: index.html и gallery.html:

В index.html вы могли бы написать следующую ссылку:

<p>
  Посетите <a href="gallery.html">галерею</a>!
</p>

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

Абсолютные адреса

Если вы хотите поделиться с другом своей галереей кошек, то не можете просто отправить gallery.html, так как этот относительный адрес работает только для HTML-документов, которые находятся на том же компьютере или домене.

Вам нужен полный адрес вашего HTML-документа: http://ireallylovecats.com/gallery.html.

Этот URL может быть разбит на три части:

  • протокол http://
  • домен ireallylovecats.com
  • путь к файлу gallery.html

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

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

В файле http://ireallylovecats.com/gallery.html, вы могли бы написать:

<p>
  Найти другие изображения кошек в моём <a href="https://twitter.com/ireallylovecats">Твиттере</a>!
</p>

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

Допустим, вы хотите связать первую страницу со второй. Наиболее прямой подход заключается в использовании абсолютного адреса. Таким образом, вы добавляете <a href=»http://ireallylovecats.com/gallery.html»>Перейти на вторую страницу</a> в файл index.html.

Поскольку эти два файла находятся в той же папке, вы можете использовать относительный адрес с помощью <a href=»first-blog-post.html»>. Это полезно, если вы решите переместить папку: ваши ссылки не будут нарушены, так как цели ссылок относительны друг к другу, до тех пор, как вы перемещаете оба файла одновременно и держите их в одной папке. Этот относительный подход особенно полезен при переключении доменов.

относительные ссылки в html — CodeRoad

Я искал полное окончательное объяснение абсолютных и относительных связей в HTML.

  1. <a href="http://www.example.com/page.html">link page</a>
  2. <a href="//page2.html">link page</a>
  3. <a href="/page3.html">link page</a>
  4. <a href="./page4.html">link page</a>
  5. <a href="../page5.html">link page</a>

Итак в приведенном выше списке,

  1. это абсолютная связь
  2. имеет отношение к корню сайта либо с http, либо с https
  3. это относительно корня сайта?
  4. есть ли в текущем каталоге?
  5. есть ли там каталог?
html absolute relative Поделиться Источник phaseform     08 сентября 2015 в 14:29

2 Ответа


1

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

  1. Да, здесь нет никакого толкования. Это ссылка без SSL (https)
  2. Да. Он автоматически переключается на http, если пользователь посещает веб-сайт в http, и https, если пользователь посещает веб-сайт в https.
  3. Да. Он ссылается на //domain/thelink.ext
  4. Да. Как и в операционной системе, ./ -это текущий каталог. Много раз вы должны указать это, чтобы убедиться, что является текущим.
  5. Да. Как и в операционной системе, ../ изменяется на родительский каталог. Вы можете сделать вложенность и ../../../ будет означать, что до 3 родительских каталогов.

Поделиться Marcos Pérez Gude     08 сентября 2015 в 14:34


1

  1. Как вы уже сказали, абсолютная ссылка для незащищенного соединения (http://)
  2. Только связывает вас с http://page2.html или https://page2.html в зависимости от текущего протокола
  3. Да, связывает вас с URL/page.html
  4. Да, то же самое, что и ссылка — > текущий каталог
  5. Да

Поделиться Kevin Kendzia     08 сентября 2015 в 14:36

Похожие вопросы:


Есть ли способ заставить редактор DotNetNuke HTML создавать относительные ссылки вместо абсолютных ссылок?

Я попытался добавить атрибут LinksUseRelativeUrls к соответствующему элементу в web.config, но это не помешало редактору HTML DotNetNuke вставлять абсолютные ссылки всякий раз, когда вы ссылаетесь…


Что определяет все не относительные связи?

Я ищу способ отличить относительные и не относительные ссылки на странице html. Что определяет все не относительные связи? Я ищу какое-то регулярное выражение. например, все ли не относительные…


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

Я хочу извлечь только относительные URL-адреса из страницы html; кто-то предложил это : find_re = re.compile(r’\bhref\s*=\s*([^]*|\'[^\’]*\’|[^\'<>=\s]+)’, re.IGNORECASE) но это возвращение :…


HTML относительные ссылки на различные домены

У меня есть быстрый секс: Когда вы кодируете / разрабатываете темы, как вы связываетесь с различными файлами в своем коде html/css? Пример: Мы в нашей фирме используем в основном <base…


Относительные связи с htaccess

Как я могу преобразовать все ссылки в пределах html в относительные ссылки с помощью .htaccess? Например: От http://www.mydomain.com/info.html до /info.html


<h:outputStylesheet> и относительные ссылки

У меня есть настройка проекта JSF в типичном режиме: myproject |— src/main/webapps | |— resources | | |— css | | | |— 3rdparty.css | | | | | |— fonts | | | | | |— myspecialfont.woff | | А…


Относительные ссылки в html?

Хорошо, я чувствую себя совершенно глупо, публикуя это. Я не уверен, что это классифицируется как вопрос программирования, но его достаточно близко. В моем веб-приложении одна страница использует…


Adobe AEM относительные ссылки

Как вы делаете относительные ссылки в компоненте текстового редактора? Adobe AEM не любит, когда я использую относительные ссылки на внешние страницы по умолчанию. Он удаляет их и показывает символ…


CakePHP относительные ссылки с префиксом маршрутизации

Я использую CakePHP 1.3 и имею некоторые проблемы с префиксной маршрутизацией. Я настроил маршруты так: Router::connect( ‘/listing/*’, array( ‘controller’ => ‘dsc_dates’, ‘action’ =>…


Относительные ссылки автоматически получают сеанс ID

Поскольку сеанс ID вставляется в текущий URL, относительные ссылки также автоматически получают сеанс ID. Другими словами, если пользователь в настоящее время находится на Page1.aspx и нажимает…


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *