Что такое url адреса, чем отличаются абсолютные и относительные ссылки для сайта

1.5. HTML-ссылки

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

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

  • Содержание:
  • 1. Структура ссылки
  • 2. Абсолютный и относительный путь
  • 3. Якорь
  • 4. Как сделать изображение-ссылку
  • 5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
  • 6. Атрибуты ссылок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
1) протокол, например, http (опционально);
2) домен (доменное имя или IP-адрес компьютера);
3) папка (имя папки, указывающей путь к файлу);
4) файл (имя файла).

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

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

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

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

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

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

Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу);
2) файл (имя файла).

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

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

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

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

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

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

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

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

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

Что такое url адреса, чем отличаются абсолютные и относительные ссылки для сайта

Сегодня мы отойдем немного в сторону от линкбилдинга, но все также поговорим о ссылках.

Мы часто с талкиваемся с тем, что на сайтах доступны различные виды ссылок для доступа к одной странице и это наносит урон как результату нашей работы, так и в целом бизнесу клиента. Мы не стали придумывать ничего нового, а просто предлагаем вам ознакомиться с хорошим видео на эту тему и нашим переводом статьи Should I Use Relative or Absolute URLs, которая дает ответы на большинство беспокоящих нас вопросов.

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

Давайте обсудим относительные и абсолютные URL без философии

Привет всем. Меня зовут Рут Барр Риди. Вы меня можете знать по разным проектам со времен, когда еще я была руководителем SEO в Moz.

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

В любое время ваш сайт может иметь несколько различных конфигураций, которые могут стать причиной дублированния контента. У вас может быть такой формат URL сайта — http://www.example.com . Это довольно стандартный формат.

Один домен для вас — 4ре домена для гугл

Но одна из главных проблем дублированного контента, которые мы видим, это когда url без www (example.com) не перенаправляет нас на домен www.example.com и наоборот, также когда https версия вашего сайта не редиректит на http версию и наоборот. Что это может значить, при условии, что все эти сценарии случились, если все 4 конфигурации ссылок не работают в канонической версии? Это значит, что по сути, вы можете иметь все 4 версии вашего сайта в Интернете. Это может (и не может) быть проблемой.

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

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

Есть ещё несколько причин, которые мы рассмотрим позже, но в принципе дублирование контента это плохо.

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

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

Как выглядят относительные и абсолютные ссылки

В абсолютной ссылке, вы используете весь веб-адрес страницы, на которую вы ссылаетесь. Вы полностью прописываете домен, всё составляющие урла — полный адрес страницы. Это абсолютный url.

Тем не менее, при верстке и программировании сайта довольно распространенная практика, когда внутренние ссылки прописываются относительными ссылками.

Относительная ссылка — это просто страница. В основном она дает понять вашему браузеру следующее: «Хорошо, эта ссылка указывает на страницу, на том же домене на котором мы уже находимся».

Преимущества использования относительных ссылок

Намного легче и быстрее запрограммировать

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

Разработка на стейдже

Ещё одна причина, по которой лучше использовать относительные ссылки, это системы управления контентом. К примеру, вместо example.com вы будете использовать стейдж на домене examplestaging.com. Весь сайт будет размещен на этом домене для разработчиков. Использование относительных ссылок вместо абсолютных означает, что у вас один и тот же сайт сможет корректно работать, как на стейдже, так и на основном домене, при этому вам не нужно будет каждый раз исправлять все урлы, чтобы выкатить апдейт на основной домен. И это гораздо эффективней для команды веб-разработчиков. Это одна из главных причин, чтобы использовать именно этот вид ссылок.

Читать еще:  Ндс — что это такое, откуда он взялся и как посчитать ндс со ставкой 18 (20) % от любой суммы с учетом налоговых вычетов

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

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

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

Более весомые причины, чтобы использовать абсолютные ссылки

Скраперы (парсеры сайтов)

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

Предотвращение проблем дублированного контента

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

Но в любом случае можно зайти на ваш сайт и если все ваши ссылки относительные, гугл робот может сканировать и индексировать ваш домен используя любой из 4х доступных форматов. Даже если на сайте абсолютные ссылки, если Google бот зайдет на сайт с www и перейдет на другую страницу по ссылке без www — google расценит это как переход на совсем другой домен и на эту страницу не будет передан внутренний вес сайта. Если вы не разберетесь с этой проблемой, то у вас условно все также остается 4ре разных сайта.

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

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

Это одна из причин.

Лимит краулера

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

Ваш дублированный контент = $ потери для гугл

Когда мы говорим о лимите краулера, в основном, каждый раз это, когда Google сканирует ваш сайт, то есть определенная конечная глубина, которую он хочет проработать. Это определенное число ссылок, которые он будет сканировать, а затем он решит: «Все, я сделал». Это основано на нескольких моментах. Авторитетность вашего сайта — один из них. Ваш фактический PageRank, не тот PageRank, который отображается в тулбаре, а то насколько ваш сайт хорош в глазах гугл в целом, как часть интернет пространства. А также на сколько ваш сайт комплексно развит, как часто он обновляется, эти все параметры влияют на частоту и глубину сканировать вашего сайта гуглом.

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

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

Таким образом, имея четыре версии сайта, каждая из которых полностью доступна для сканирования, потому что вы используете относительные ссылки и вы никак не решили вопрос с дубликатами, — это означает, что гугл должен тратить в 4ре раза больше денег для того, чтобы полностью просканировать и понять ваш сайт. Чем дальше, тем реже и реже он будет заходить на ваш для сканирования, особенно, если у вас не крупный и трастовый проект. Если у вас маленький сайт, если вы только начинаете развиваться, если вы только получили немного внешних ссылок, то через время вы заметите, что частоста краулинга значительно уменьшилась, и это плохо. Нам ведь не это нужно. Мы ведь хотим, чтобы гугл постоянно возвращался и сканировал наши новые страницы. Они ведь так прекрасны! Загнать в индек, получить ТОПы — вот, что нам нужно!

Так что вот пару советов о том, что нам стоило бы делать.

Несколько способов, чтобы решить проблемы относительных и абсолютных ссылок

Исправьте то, что происходит на стороне сервера вашего сайта

Вы должны убедиться, что среди 4х версий вашего сайта вы выбрали одну, как основную. Как по мне, то абсолютно неважно какую версию вы выберете. Вы должны обязательно выбрать одну из них в качестве основной — с www, без-www, https или http. С моей точки зрения, самое главное, чтобы одна версия была основной, а остальные редиректили на нее.

С точки зрения SEO, есть предпосылки полагать, да и Google, безусловно, говорит об этом, что https немного лучше, чем http. С точки зрения длины урла, я бы не хотела использовать www, потому что это на самом деле ничего не дает. Он просто делает ваши ссылки на четыре символа длиннее. Если вы не знаете какой из них выбрать, я бы выбрала https, без www. Но какой бы вы не выбирали, на самом деле самое главное, чтобы все из них приводили к основной версии. Вы можете сделать это единожды на стороне сервера и это достаточно простая задача для ваших разработчиков.

Исправьте ваши внутренние ссылки

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

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

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

Иногда ваша команда разработчиков может сказать: «Нет, мы не будем это делать. Мы не собираемся заново программировать все навигационные элементы. Это не самое продуктивное использование нашего времени», и иногда они правы. Команда разработчиков имеет более важные дела. Это нормально.

Канонизируйте их

Если вы не можете исправить внутренние ссылки или у вас не получится это сделать в ближайшее время, временным решением или “костылем” может быть канонизация этих страниц. Аналогично тому, как вы настраиваете сервер для использования одной основной версии сайта, внедрите тег rel=canonical на все дублирующие страницы вашего сайта. Это поможет решить вопрос дубликатов. Канонический тег показывает поисковому роботу, какую страницу нужно использовать, как основную.

Более подробно об использовании этого тега можно прочесть в блоге Сергея Кокшарова — https://devaka.ru/articles/link-rel-canonical

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

В завершении

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

Читать еще:  Appcoins — зарабатываем в интернете с телефона через мобильное приложение

Абсолютный и относительный путь к файлам

Категории блога

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

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

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

Оглавление

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

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

Если указывать ссылку на католог, например http://yourdomain.ua/web/ то будет загружаться(отображаться) индексный файл. Это правило применимо в основном к статическим сайтам. Так как при использовании языка программирования можно создать внутренний роутинг. Индексный файл обычно представляет из себя файл с именем index.php, index.html, index.phtml, index.shtml. Для того что бы использовать другой индексный файл, нужно создать в нужной директории файл с именем .htaccess, и в нем прописать некоторую директиву. Изменение и создание файла .htaccess, как и роутинг с помощью языка программирования, выходит за рамки этой статьи.

В основном абсолютный путь используется, тогда, когда нужно сослаться на другой сайт. Иными словами если Вы хотите отправить посетителя на другой сайт, то нужно использовать абсолютный путь. Хотя, такой путь можно использовать и на собственном сайте. Но многие придерживаются того, что ссылки внутри сайта должны быть относительными.
Использование абсолютного пути может повлечь за собой некоторые проблемы. Например при переносе сайта с локальной машины на сервер(это в том случае, если вы использовали на локальной машине адреса в виде http://localhost/sitename.ua/…). Трудности могут возникнуть, тогда, когда появится необходимость в смене домена(имени сайта). Хотя, все эти трудности решаемы, но на них придётся потратить некоторое количество времени.
Когда есть минусы, значит должны быть и плюсы. Возьмём к примеру такую ситуацию, как кража контента с вашего сайта. На практике я уже не раз убедился в том, что текст воруют целиком, при этом не оставляя обратной ссылки на оригинал. Так вот, при использовании абсолютных путей, можно получить обратные ссылки с сайта, на котором находится сворованный контент. Но это только в том случае если у Вас внутренняя перелинковка осуществлялась с использованием абсолютных путей. Хотя это не всегда работает, но я уже не раз замечал появление ссылок с чужих сайтов, на которых был расположен мой контент.

Немного отступив от темы хочу вкратце рассказать про то что такое URL.

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

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

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

Путь относительно документа

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

Предположим, что каждое изображение в каталоге images нужно вставить в соответствующие страницы home.html, products.html, contact.html. Для того что бы вставить изображение к примеру на страницу «home.html», нужно прописать путь, где расположено изображение. Если использовать путь относительно документа, то нужно будет прописать в коде страницы следующее:

Этот код для вставки изображения на страницу — неполный. Так как он не содержит нескольких важных атрибутов, таких как ширина, высота и др. Атрибут src, здесь служит для указания пути к файлу. Здесь опущены все остальные атрибуты, так как они сейчас не столь важны. Главное сейчас, что бы Вы имели представление о том, как выглядит путь относительно документа.
При использовании путей относительно документа отсутствует часть абсолютного пути. Часть абсолютного пути, здесь усекается, как для текущего документа(страницы), так и для связанного. Здесь используется только та часть пути, которая всегда меняется.
Напомню ещё раз про то, что при использовании пути относительно документа, нужно учитывать исходное расположение файлов.

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

Для того, что бы вставить изображение в файл products.html нужно вернуться в корневую директорию. После чего, можно использовать уже известный путь, о котором говорилось чуть выше.

Как видно из приведённого выше кода, к пути теперь добавилось следующее: ../. Как раз эта последовательность символов ../ и служит для перехода на одну директорию(уровень) выше в иерархии каталогов. Путь в вышеприведённом коде можно прочесть так: «Перейти на один каталог выше(назад), зайти в директорию images и взять от туда файл products.png«.
Если ../ означает переход на одну директорию(уровень) выше в иерархии каталогов, то символ / обозначает переход на один уровень ниже.
Последовательность символов ../ можно использовать в пути неоднократно. Например, если файл products.html переместить в три директории вложенные в друг друга, то нужно будет использовать следующий код:

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

Путь относительно корня сайта

Вы наверное уже поняли что пути относительно документа используются очень часто. Но при их использовании существует одна проблема. Которая заключается в том, что при смене структуры директорий, пути придется менять.
Но такая проблема решаема при использовании путей относительно корня сайта. Где путь указывается от корневой директории до документа.
Все пути относительно корня сайта начинаются со знака /. Только здесь, в отличии от путей относительно документа этот знак используется для указания корневой директории. Потому, что он используется в начале пути.
Путь относительно корня сайта позволяет перемещать некоторые файлы, без ущерба для ссылок. Этот тип пути Вы сможете использовать только на web-сервере в интернете, или на web-сервере расположенном на локальной машине.

В качестве web-сервера на локальной машине может выступать — XAMPP. Который позволит у себя на компьютере создать среду для созданию сайтов и их предварительного тестирования.

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

Например, /images/products.png обозначает, что файл products.png находится в папке images, которая расположена в корневом каталоге.

Самый простой способ определить корневой относительный путь — взять абсолютный и отбросить http:// и имя хоста.

Пример
Иногда бывает нужно, что бы информацию одной страницы использовали другие страницы сайта. Часто это делается для того что бы сократить количество повторяемого кода на каждой странице. Допустим есть файл _contact.html, который содержит информацию о телефонных номерах, e-mail и содержит изображение contact.png. (Пускай это будет небольшая таблица, которая будет располагаться на каждой странице сайта.)

Следующий код предназначен для вставки изображения «contact.png».

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

Я надеюсь, что Вы уже знаете какой тип пути использовался в вышеприведённом коде. Если нет, тогда посмотрите приведённое выше определение пути относительно документа.
Теперь, когда посетитель зайдет на такие страницы сайта как home.html, contact.ntml, он увидит прекрасно отображаемую страницу. В каждую из которых вставлен файл _contact.html, в который, в свою очередь, вставлено изображение contact.png.
Другими словами зайдя, к примеру, на страницу home.html, происходит следующее: «Выполняется код основной страницы home.html. Затем вставляется и исполняется код страницы _contact.html. Код страницы _contact.html, говорит что нужно перейти в директорию images и взять от туда изображение contact.png«.
Если опустить сам код для вставки, то все работает отлично. Но вот если запустить страницу products.html, то произойдет ошибка. Так как код будет пытаться найти директорию images и файл contact.png в директории products. Но такой директории там не существует, из за чего собственно и возникает проблема.
Становится ясным, что использовать путь относительно документа здесь нельзя.
Конечно здесь можно использовать абсолютный путь. О плюсах и минусах данного подхода я говорил выше.
В общем говоря, это одна из ситуаций, когда нужно использовать путь относительно корня сайта. При использовании пути относительно корня сайта, ссылка будет всегда начинаться с корневого каталога(корня сайта). Такой тип пути позволит использовать код для вставки, например изображения, независимо от иерархии сайта, и его директорий.
Использование пути относительно корня сайта в вышеприведённом примере, позволит избежать проблем, со вставкой изображения. Потому как независимо от того где будет использовать такой тип пути, он всегда найдет указанный в нем файл.
Путь относительно корня сайта, очень похож на путь относительно документа. Для того что бы создать путь относительно корня сайта, нужно добавить символ / в начало пути.

Читать еще:  Как анализировать рынок форекс с помощью индикаторов

Теперь изображение будет корректно вставляться на любой из страниц сайта.

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

Что такое url адреса, чем отличаются абсолютные и относительные ссылки для сайта

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

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

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

*Наведите курсор мыши для приостановки прокрутки.

Анатомия URL и относительные адреса

Наиболее часто используемая схема URL — это http схема. Схема http используется для поиска документов, которые находятся на веб-серверах.

Веб-сервер правильнее называть HTTP-сервером. HTTP — это HyperText Transfer Protocol (Протокол Передачи Гипертекста), специально разработанный для передачи документов по сети Интернет. Он используется для передачи практически любых документов, которые мы загружаем при использовании браузера.

URL со схемой http можно разбить на подчасти, как показано ниже:

1. http

Первая часть — имя схемы, об этом мы уже говорили (см. Структура HTML-документа, понятие URI и URL). Затем идет двоеточие и два слэша (//).

2. WebReference.com

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

Компьютеры в Интернет имеют цифровые адреса, называемые IP-адресами. IP-адрес — это несколько групп чисел в диапазоне от 0 до 255. Например, IP-адрес компьютера, на котором запущен HTTP-сервер сайта WebReference.com, следующий:

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

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

Так была создана система, названная DNS (Domain Name Service или Domain Name System — Система / Сервис Доменных Имен). Назначение DNS — трансформировать имена компьютеров в IP-адреса. В этом случае компьютеры имеют имена, которые легко запомнить пользователям.

Такие адреса называются FQDN (Fully Qualified Domain Name — Полностью Определенное Доменное Имя, или просто Доменное Имя). Доменное Имя компьютера может быть использовано где угодно в сети для того, чтобы однозначно идентифицировать компьютер и перевести его имя в IP-адрес.

Например, доменное имя сайта codeharmony.ruwww.codeharmony.ru. По сути, это просто псевдоним; компьютер может иметь более одного доменного имени, каждое из которых указывает на один и тот же IP-адрес.

Можно, например, получить доступ к моему сайту, используя имя codeharmony.ru, а не www.codeharmony.ru, потому что это тоже алиас (псевдоним) того же самого компьютера.

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

Заметьте, что доменные имена не чувствительны к регистру. www.codeharmony.ru — это то же самое, что и WWW.CODEHARMONY.RU и www.CodeHarmony.ru. Обычно доменные имена пишутся в нижнем регистре, но это не значит, что это единственный способ.

3. :80

Третяя часть URL, которая не является обязательной — это номер порта. Компьютеры имеют определенное количество так называемых портов. Смысл порта в том, что через него происходят взаимодействия определенного рода. Один поддерживает HTTP-взаимодействия, другой — передачу почты и т.п.

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

4. html/tutorial2/2.html

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

/
/html/
/html/tutorial2/2.html
/html

В первом случае мы ссылаемся на корневую директорию. Второй вариант — ссылка на директорию /html/. Третий пример — ссылка на документ 2.html в папке /html/tutorial2/. Наконец, четвертый пример — ссылка на документ html в корневой директории, а не на папку /html/. Это так, потому что в четвертом примере нет в конце слэша.

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

Важно отметить такой момент: путь не имеет ничего общего с форматом возвращаемого документа. В случае с WebReference.com все вышеприведенные примеры вернут HTML-документ.

Также, «расширение» в конце третьего примера (часть .html) не обязательно означает тип документа, как это бывает на операционных системах семейства Windows. Документ http://WebReference.com/cgi-bin/suggest.cgi имеет расширение .cgi, но является при этом HTML-документом.

5. ?query

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

Только что мы рассмотрели синтаксис URL-адресов со схемой http. Вы, вероятно, уже видели подобные адреса сотни раз, бороздя просторы сети; теперь Вы знаете, как они устроены. Ну а сейчас давайте рассмотрим понятие Относительных URL-адресов.

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

URL-адреса, как Вы уже знаете, нужны для того, чтобы указать местоположение чего-то. Зачастую путь до «чего-то» может быть очень длинным, поэтому есть возможность для сокращения длины адресов, используя так называемые относительные адреса.

Все URL-адреса, которые мы рассматривали до этого были абсолютными. Они идентифицируют ресурсы независимо от их контекста. URL-адрес http://WebReference.com/html/ идентифицирует конкретную директорию в не зависимости от того, напечатали ли вы данный адрес в адресной строке, написали на клочке бумаги для своего друга, либо просто вспомнили «в голове».

Относительные же URL-адреса — это способ идентификации ресурса с учетом его контекста.

Вот простая аналогия.

Представьте, что Вы в гостях на Дне Рождения у друга и кто-то спрашивает Вас, где живет какой-то из Ваших знакомых. Вы, вероятно, ответите, что-то вроде: «А вот — через дорогу в 7 доме.» Едва ли Вы скажете: «В России, в г. Москва, в районе Таком-то, на улице Такой-то, в доме номер 7.» В данном случае такой ответ был бы избыточен.

Относительные URL-адреса — что-то вроде этого. Они похожи на объяснения, типа: «вниз по переулку, потом налево, через два квартала по правой стороне.» Они имеют смысл только, если используются в определенном контексте. И этот контекст называется Base URL (Базовый URL).

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

Ссылка на основную публикацию
Adblock
detector