URL

Как найти что-то по адресу, но только в интернете.

Время чтения: 5 мин

Кратко

Секция статьи "Кратко"

URL — это уникальный адрес ресурса в интернете (по англ. Uniform Resource Locator). С его помощью можно найти веб-сайт, картинку, файл и не только.

Как понять

Секция статьи "Как понять"

В интернете приходится много искать. Чтобы человек не испытывал сложностей, существует URL — общепринятая последовательность символов, которая определяет расположение ресурса в сети, а также способ получить к нему доступ.

Вводим ссылочку — находим информацию 😼

Как пишется

Секция статьи "Как пишется"

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

        
          
          https://doka.guide/tools/url
          https://doka.guide/tools/url

        
        
          
        
      

Она ведёт на текущую статью в разделе «инструменты» Доки и состоит из нескольких частей.

Схема

Секция статьи "Схема"

https — это протокол (или схема), он нужен для правильного обмена данными между сервером и клиентом. http тоже протокол, но он без шифрования и не обеспечивает надёжную защиту данных. За схемой следует : — это разделитель.

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

        
          
          <a href="mailto:hi@doka.guide">Напиши Дока Догу</a>
          <a href="mailto:hi@doka.guide">Напиши Дока Догу</a>

        
        
          
        
      

Authority часть

Секция статьи "Authority часть"

После разделителя : следует часть, названная «authority» (как это перевести на русский до конца не понятно 🤖). Она начинается двойной косой чертой // и содержит чаще всего хост, но может включать также информацию о пользователе или порт.

Её структура следующая: authority = [ userinfo "@" ] host [ ":" port ]

Информация о пользователе

Секция статьи "Информация о пользователе"

«authority» часть может содержать информацию о пользователе:

        
          
          http://admin:123@www.dostup-ko-vsey-zhizni.com/login
          http://www.dostup-ko-vsey-zhizni.com/login

        
        
          
        
      

В таком случае admin это логин, 123 пароль, @ разделитель, а @www.example.com имя хоста. Авторизация пройдёт автоматически, потому что браузер возьмёт всю информацию из ссылки.

Доменное имя

Секция статьи "Доменное имя"

С помощью доменного имени или имени хоста doka.guide мы указываем, на какой ресурс хотим попасть. Это понятная человеку форма записи, а на самом деле всё работает немного иначе.

У каждого сайта есть IP-адрес (или адреса), например, 95.213.159.118. Чтобы людям не пришлось страдать, запоминая набор цифр вроде телефонного номера нового друга, существуют DNS (по англ. Domain Name Service).

DNS — это сервисы, которые связывают IP-адреса с понятными людям названиями, словно приложение телефонной книги на смартфоне соединяет номер телефона и имя человека. Спрашиваем doka.guide, но на самом деле запрашиваем IP-адрес Доки.

Жмём «позвонить Игорю», а «под капотом» набираем его номер.

Порт

Секция статьи "Порт"

Ещё после доменного имени может встретиться порт, служащий техническим параметром. Стандартные порты 80 для протокола HTTP и 443 для HTTPS размещать в ссылке не принято:

        
          
          https://doka.guide:443/tools/url
          https://doka.guide:443/tools/url

        
        
          
        
      

Ведёт туда же, что и:

        
          
          https://doka.guide/tools/url
          https://doka.guide/tools/url

        
        
          
        
      

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

Внутри сайта

Секция статьи "Внутри сайта"

tools/url — это путь до ресурса внутри веб-сайта. Мы как бы говорим: сначала перейди на сайт doka.guide, а там ищи страничку tools, после чего перейди на страничку url (здесь вы читаете эту статью).

Динамические URL генерируются скриптами в ответ на запросы пользователя и содержат параметры для изменения содержимого страницы. Ссылка ниже получится, если ввести в поисковике Доки слово «привет».

        
          
          https://doka.guide/search/?query=привет
          https://doka.guide/search/?query=привет

        
        
          
        
      

Параметры начинаются после знака ? и разделяются знаком &. Следующая ссылка формируется в ответ на поиск в Доке с включёнными фильтрами:

        
          
          https://doka.guide/search/?query=привет&category=html&category=js&category=recipes
          https://doka.guide/search/?query=привет&category=html&category=js&category=recipes

        
        
          
        
      

Знаки & разделяют пары ключ-значение по типу ?ключ=значение&ключ2=значение2. В ссылке выше это, например, category=html, что означает фильтрацию статей в поиске по ключу html.

URL также может содержать якорь. Он ведёт в некоторое место на текущей странице. Вот так выглядит ссылка на главу «Кратко» в начале:

        
          
          https://doka.guide/tools/url/#kratko
          https://doka.guide/tools/url/#kratko

        
        
          
        
      

Относительные ссылки

Секция статьи "Относительные ссылки"

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

        
          
          tools/url
          tools/url

        
        
          
        
      

Если создать на главной странице Доки ссылку выше и кликнуть по ней, браузер превратит её в https://doka.guide/tools/url, потому что мы уже находимся на https://doka.guide.

Косая черта / в начале пути покажет браузеру, что ссылка строится относительно корня сервера. А чтобы подняться на уровень выше, нужно использовать конструкцию ..:

        
          
          https://doka.guide/people/../
          https://doka.guide/people/../

        
        
          
        
      

Это будет значить то же, что и:

        
          
          https://doka.guide
          https://doka.guide

        
        
          
        
      

На практике

Секция статьи "На практике"

Алексей Никитченко советует

Секция статьи "Алексей Никитченко советует"

🛠 На одном домене несколько серверов могут обрабатывать каждый своё: кто-то электронную почту, кто-то файлы, кто-то сайт. Поэтому можно встретить URL с доменом третьего уровня, для почты ссылка с ним выглядит так:

        
          
          mail.google.com
          mail.google.com

        
        
          
        
      

А для сайта так:

        
          
          www.doka.guide
          www.doka.guide

        
        
          
        
      

www расшифровывается как «World Wide Web», но сегодня уже не обязательно добавлять www к доменному имени, так как для большинства адресов настроен редирект на www версию или наоборот c www версии на обычную.

🛠 В JS есть удобный объект URLSearchParams для создания поисковых ссылок. С его помощью можно настраивать и удобно вставлять в HTML пары ключ-значение для нужного запроса.

🛠 Быстро создать ссылку можно с помощью конструктора URL(), например:

        
          
          let url = new URL('https://doka.guide')
          let url = new URL('https://doka.guide')