MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Изучаем URLы и их структуру

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

Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет что это такое и опиывает структуру. 

Предварительно: Вам нужно узнать как работает интернет, что такое Веб сервер and что лежит в основе веб ссылок .
Цель: Вы узнаете, что такое URL и как они работают в вебе.

Введение

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

URL обозначает Uniform Resource Locator. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведет на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведет на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.

Активное обучение

There is no active learning available yet. Please, consider contributing.

Подробная информация

Основы: анатомия URL

Вот несколько примеров URL:

https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

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

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

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
Protocol
http:// это протокол. Он отображает, какой протокол браузер должен использовать. Обычно это HTTP-протокол или его безопасная версия - HTTPS. Интернет требует эти 2 протокола, но браузеры часто могут использовать и другие протоколы, например mailto: (чтобы открыть почтовый клиент) или ftp: для запуска передачи файлов, так что не стоит удивляться, если вы вдруг увидите другие протоколы.
Domaine Name
www.example.com это доменное имя. Оно означает, какой веб-сервер должен быть запрошен. В качестве альтернативы может быть использован и IP-адрес, но это делается редко, поскольку запоминать IP сложнее, и это не популярно в интернете.
Port
:80 это порт. Он отображает технический параметр, используемый для доступа к ресурсам на веб-сервере. Обычно подразумевается, что веб-сервер использует стандартные порты HTTP-протокола (80 для HTTP и 443 для HTTPS) для доступа к своим ресурсам. В любом случае, порт - это факультативная составная часть URL.
Path to the file
/path/to/myfile.html это адрес ресурса на веб-сервере. В прошлом, адрес отображал местоположение реального файла в реальной директории на веб-сервере. В наши дни это чаще всего абстракция, позволяющая обрабатывать адреса и отображать тот или иной контент из баз данных.
Parameters
?key1=value1&key2=value2 это дополнительные параметры, которые браузер сообщает веб-серверу. Эти параметры - список пар ключ/значение, которые разделены символом &. Веб-сервер может использовать эти параметры для исполнения дополнительных команд перед тем как отдать ресурс. Каждый веб-сервер имеет свои собственные правила обработки этих параметров и узнать их можно, только спросив владельца сервера.
Anchor
#SomewhereInTheDocument это якорь на другую часть того же самого ресурса. Якорь представляет собой вид "закладки" внутри ресурса, которая переадресовывает браузер на "заложенную" часть ресурса. В HTML-документе, например, браузер может переместиться в точку, где установлен якорь; в видео- или аудио-документе браузер может перейти к времени, на которое ссылается якорь. Важно отметить, что часть URL после #, которая также известна как идентификатор фрагмента, никогда не посылается на сервер вместе с запросом.

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

Вам стоит представлять URL как обычный почтовый адрес: протокол обозначает почтовый транспорт, который вы собираетесь использовать,доменное имя - это город, порт - это почтовый индекс; адрес - это номер дома;параметры представляют собой дополнительную информацию, как, например, номер квартиры; и, наконец, якорь представляет собой конкретного получателя, которому вы адресуете своё письмо.

Как использовать URL

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

Язык HTMLкоторый будет обсуждать позже — позволяет активно использовать URL для:

  • создания ссылок на другие документы с помощью тега <a>;
  • связывания документа с его дополнительными файлами, например с помощью тегов <link> или <script>;
  • отображения медиа-элементов, например изображений (с помощью тега <img>), видео (с помощью тега <video>), звуков и музыки (с помощью тега <audio>) и так далее;
  • отображения других HTML-документов внутри текущего с помощью тега <iframe>.

Другие технологии, такие как CSS или JavaScript, также активно используют URL, так что это реально основа веба.

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

Все, что мы изучали выше - это абсолютные URL. Но так же существуют и относительные URL. Изучим это.

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

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

Разберем это на примерах.

Примеры абсолютных URL

Полный URL (такой же, как обсуждали в начале статьи)
https://developer.mozilla.org/en-US/docs/Learn
Скрыт протокол
//developer.mozilla.org/en-US/docs/Learn

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

Скрыт домен
/en-US/docs/Learn

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

Примеры относительных URL

Для лучшего понимания следующих примеров, давайте договоримся, что мы обращаемся к URL из документа, который опубликован по адресу: https://developer.mozilla.org/en-US/docs/Learn

Дочерние ресурсы
Skills/Infrastructure/Understanding_URLs
Поскольку URL не начинается с  /, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs
Назад по дереву папок
../CSS/display

В этом случае, мы используем команду ../  — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, который может быть упрощен до вида: https://developer.mozilla.org/en-US/docs/CSS/display

Семантические URL

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

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

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

Следующие шаги

Метки документа и участники

 Внесли вклад в эту страницу: vladislavukhov, lerniri
 Обновлялась последний раз: vladislavukhov,