# Сети и интернет: клиент-сервер, адреса, протоколы и путь запроса<no value>

## В этом уроке

Урок состоит из нескольких коротких глав — в том же порядке, что и в презентации:

1. **Глава 1** — компьютерные сети, LAN, интернет, клиент и сервер
2. **Глава 2** — IP-адрес, порт, домен и DNS
3. **Глава 3** — запрос, ответ и протоколы: HTTP, HTTPS, TCP и UDP
4. **Глава 4** — что происходит с момента ввода адреса до показа сайта

## Глава 1: Компьютерные сети, LAN, интернет, клиент и сервер

### Что мы изучим?

- Что такое **компьютерная сеть**.
- **LAN** (локальная сеть) и **интернет**.
- **Маршрутизатор** (router) — устройство, которое соединяет сети.
- Модель **клиент-сервер** — основу каждого сайта, приложения и сервера, которые мы построим в темах бэкенда и баз данных.

### Зачем это нужно?

Каждое современное приложение общается с сетью: WhatsApp, сайты, игры, а в темах бэкенда и баз данных — и сервер, который вы напишете. Бэкенд-разработчики пишут именно **серверную** часть. Фронтенд-разработчики пишут **клиентскую** часть. Без понимания этой модели нельзя понять, что делает ваш код.

### Объяснение с основ

#### Что такое сеть?

**Компьютерная сеть** — два или более устройства, соединённые так, чтобы они могли **передавать информацию** между собой. Соединение может быть по кабелю (Ethernet), по воздуху (Wi-Fi) или по оптоволокну.

Зачем соединять компьютеры?

- **Обмен информацией** — сообщения, файлы, сайты.
- **Совместное использование ресурсов** — один принтер на весь офис, одно интернет-подключение на весь дом.
- **Разделение работы** — информация хранится в одном месте (на сервере), и все обращаются к ней.

#### LAN — локальная сеть

**LAN** (Local Area Network) — **локальная** сеть: устройства дома, в офисе или в классе. У вас дома в LAN входят компьютер, телефон, умный телевизор и принтер — все подключены к одному **маршрутизатору**.

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

#### Интернет — сеть сетей

**Интернет** — это **сеть сетей**: миллионы локальных сетей по всему миру, соединённые друг с другом через интернет-провайдеров (ISP) и подводные кабели между континентами.

#### Маршрутизатор — ворота между сетями

**Маршрутизатор** (router) — устройство, которое соединяет вашу LAN с интернетом. Он знает, должен ли пакет информации остаться дома (например, от компьютера к принтеру) или уйти наружу (например, на сайт).

```text
          Your home (LAN)
   ┌──────────────────────────┐
   │ Laptop   Phone   Printer │
   │    \       |       /     │
   │         Router ──────────┼───► ISP ───► Internet ───► Google's network
   └──────────────────────────┘                           (another LAN)
```

{{< box "analogy" "Аналогия: почта" >}}
**LAN** — квартира с несколькими жильцами, которые передают друг другу записки из рук в руки. **Маршрутизатор** — почтовый ящик у входа в дом: письмо соседям по квартире остаётся внутри, письмо в другой город уходит на почту. **Интернет** — вся мировая почтовая система: отделения, грузовики, самолёты, соединяющие все дома в мире.
{{< /box >}}

#### Модель клиент-сервер

Почти всё общение в сети следует одной модели:

- **Клиент** (client) — программа, которая **начинает** общение и отправляет **запрос**. «Дай мне главную страницу», «сохрани это сообщение».
- **Сервер** (server) — программа, которая **ждёт** запросов, обрабатывает их и возвращает **ответ**.

| | Клиент | Сервер |
|---|---|---|
| Кто начинает? | **Он** | Ждёт обращения |
| Сколько их? | Много клиентов | Обычно один сервер (или несколько) обслуживает всех |
| Примеры | Браузер, мобильное приложение, `curl` | Веб-сервер, сервер базы данных, почтовый сервер |
| Время работы | Запускается, когда нужно, и закрывается | Работает всё время (24/7) |

**Очень важно:** клиент и сервер — это **роли программ**, а не виды компьютеров. Один и тот же ноутбук может одновременно запускать браузер (клиент) и сервер FastAPI (сервер). В темах бэкенда и баз данных именно так вы и будете делать: сервер и клиент будут работать на одном компьютере.

{{< box "analogy" "Аналогия: ресторан" >}}
**Клиент** — посетитель: делает заказ (запрос) и получает блюдо (ответ). **Сервер** — кухня: ждёт заказов, готовит и отдаёт. Одна кухня обслуживает многих посетителей, и она открыта, даже когда никто не заказывает.
{{< /box >}}

### Запрос и ответ — пример

Когда вы заходите на сайт, браузер — **клиент**, а сайт — **сервер**:

```text
Browser (Client)                  Server (example.com)
   │                                   │
   │ ──── Request: GET /  ──────────►  │
   │                                   │  finds the page
   │ ◄──── Response: 200 + HTML  ────  │
   ▼                                   │
shows the page
```

1. Браузер **начинает** — отправляет запрос: «дай мне главную страницу».
2. Сервер, который всегда **ждёт** запросов, находит страницу.
3. Сервер возвращает **ответ**: код успеха (`200`) и содержимое страницы.
4. Браузер **показывает** полученное.

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

### Типичная ошибка

**Ошибка: «сервер — это огромный компьютер в комнате с кондиционером», значит, «на ноутбуке сервер не запустить».**

- Сервер — это **программа, которая ждёт запросов**, а не особый вид компьютера.
- Любой ноутбук может запустить серверную программу. Позже на курсе вы запустите сервер на своём компьютере.
- Один и тот же компьютер может быть **клиентом и сервером одновременно**: ваш браузер (клиент) может обратиться к серверу, работающему на том же ноутбуке.
- В серверных комнатах просто работает много таких серверных программ на мощных компьютерах, которые всегда включены.

**Вторая ошибка:** думать, что сайт «находится в браузере». Браузер только **запрашивает и показывает**. Сам сайт — файлы и логика — находится на сервере.

### Итоги

- **Сеть** = соединённые устройства, которые передают информацию. **LAN** = локальная сеть. **Интернет** = сеть сетей.
- **Маршрутизатор** соединяет LAN с интернетом и решает, что остаётся внутри, а что уходит наружу.
- **Клиент** начинает запрос. **Сервер** ждёт, обрабатывает его и возвращает ответ.
- Клиент и сервер — **роли программ**. Один и тот же компьютер и даже одна и та же программа могут выполнять обе роли.
- Каждая страница, которую вы открываете, — это **запрос** от клиента и **ответ** от сервера.

<!-- docs:start — generated by scripts/intro6/site_docs.py; edit the links there -->

### Официальная документация

- [MDN — How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work)
- [MDN Glossary — Server](https://developer.mozilla.org/en-US/docs/Glossary/Server)

<!-- docs:end -->

## Глава 2: IP-адрес, порт, домен и DNS

### Что мы изучим?

Три вопроса, на которые должно ответить каждое сообщение в сети:

1. **На какой компьютер?** — **IP-адрес**.
2. **Какой программе на этом компьютере?** — **порт**.
3. **Как узнать адрес, если я помню только имя?** — **домен** и **DNS**.

### Зачем это нужно?

- В темах бэкенда и баз данных вы запустите сервер на `http://127.0.0.1:8000`. Сегодня вы поймёте каждую часть этого адреса.
- Ошибки вроде `Address already in use` (порт занят) или `Name or service not known` (DNS не сработал) — обычное дело в работе бэкенда.
- Когда вы подключаете приложение к базе данных, нужно указать ему **host** и **port**.

### Объяснение с основ

#### IP-адрес — адрес компьютера

**IP-адрес** (Internet Protocol address) — **числовой адрес**, который идентифицирует устройство в сети. Без адреса ему нельзя отправить информацию — точно как письмо без адреса.

Распространённый формат, **IPv4**, — четыре числа от 0 до 255, разделённые точками:

```text
192.168.1.23
 │   │  │  │
 └───┴──┴──┴── four numbers, each 0–255
```

Есть и **IPv6** — более новый и длинный формат (`2001:db8::1`), появившийся потому, что адресов IPv4 не хватило для всех устройств в мире. Принцип тот же.

#### Три вида адресов, которые стоит знать

| Вид | Пример | Что это |
|---|---|---|
| **Частный IP** | `192.168.x.x`, `10.x.x.x` | Адрес **внутри LAN**. Его выдаёт маршрутизатор. Один и тот же адрес может встречаться в тысячах разных домов. |
| **Публичный IP** | `84.229.15.7` | Адрес дома/офиса **в интернете**. Все устройства дома выходят через него, через маршрутизатор. |
| **localhost / loopback** | `127.0.0.1` | **«Этот самый компьютер»**. Данные, отправленные туда, никогда не покидают компьютер. |

{{< box "analogy" "Аналогия: офисное здание" >}}
**Публичный IP** = уличный адрес здания («улица Герцля, 10»). **Частный IP** = номер офиса внутри здания («комната 23»). В каждом здании есть «комната 23», поэтому снаружи этого недостаточно, но внутри это точный идентификатор. **localhost** = «моя собственная комната»: отправляя туда, я отправляю самому себе.
{{< /box >}}

#### Порт — дверь к нужной программе

IP-адрес доставляет информацию **до компьютера**. Но сетью на компьютере пользуются многие программы: браузер, Spotify, Zoom, сервер, который вы написали. Как информация попадает **к нужной программе**?

**Порт** (port) — **число от 0 до 65535**, которое идентифицирует определённую программу на компьютере. Сервер «**слушает**» определённый порт, и каждый запрос, пришедший на этот порт, передаётся ему.

```text
IP   = which building    →  192.168.1.23
Port = which apartment   →  8000
Full address             →  192.168.1.23:8000
```

Известные порты:

| Порт | Использование |
|---|---|
| `80` | HTTP — сайты (без шифрования) |
| `443` | HTTPS — сайты (с шифрованием) |
| `22` | SSH — удалённый вход на сервер |
| `5432` | PostgreSQL — база данных |
| `8000` / `8080` | Распространены для серверов разработки (как наш в темах бэкенда и баз данных) |

**Важное правило:** на каждом порту (на каждом адресе) в любой момент может слушать только **одна программа**.

#### Домен и DNS — имена вместо чисел

Люди не запоминают `142.250.75.14`. Мы запоминаем `google.com`.

- **Домен** (domain) — **читаемое имя**, которое обозначает адрес: `google.com`, `ynet.co.il`.
- **DNS** (Domain Name System) — **«телефонная книга интернета»**: мировая система серверов, которая переводит домен в IP-адрес.

Структура домена (читается **справа налево**, от общего к частному):

```text
   www   .   ynet   .   co   .   il
    │         │          │        │
subdomain   name      second    TLD (top-level domain: country/type)
```

**Что происходит при переводе DNS (кратко):**

1. Компьютер проверяет, не знает ли он уже ответ (**кэш** — память предыдущих ответов).
2. Если нет, он спрашивает **DNS-сервер**, который у него настроен (обычно сервер интернет-провайдера или `8.8.8.8` от Google).
3. DNS-сервер находит ответ (при необходимости спрашивая другие серверы в иерархии) и возвращает IP-адрес.
4. Только **после** этого компьютер отправляет сам запрос на полученный адрес.

### Поиск DNS — шаг за шагом

```text
You type:     example.com
     │  "What is the IP of example.com?"
     ▼
DNS server:   93.184.215.14
     │
     ▼
Browser connects to 93.184.215.14:443
```

1. Вы набираете **имя** — `example.com`.
2. Компьютер спрашивает **DNS**-сервер: «какой IP у этого имени?» (сначала он проверяет, не сохранён ли ответ с прошлого раза — **кэш**).
3. Возвращается **IP-адрес**.
4. Только теперь браузер подключается — к **IP** и **порту** (443 для HTTPS).

Несколько примеров ответов:

```text
google.com              ->  142.250.75.14
localhost               ->  127.0.0.1
no-such-domain-123.com  ->  lookup failed
```

- `localhost` всегда переводится в `127.0.0.1` — сам компьютер.
- Для несуществующего имени DNS не находит адреса, и браузер показывает ошибку ещё **до** попытки подключения.

### Типичная ошибка

**Ошибка: запуск второго сервера на уже занятом порту.**

```text
Program A listens on port 8000   -> OK
Program B tries port 8000        -> ERROR

Address already in use
```

**Почему?** Слушать порт в любой момент может только **одна** программа. Первая программа «заняла» 8000.

**Исправление:** остановить первую программу или запустить вторую на другом порту, например 8001.

{{< box "warn" "Особенно в теме бэкенда" >}}
«Я закрыл окно терминала, а сервер всё ещё держит порт»: иногда процесс продолжает работать в фоне. Найдите его (`Get-Process python` / `ps aux | grep python`) и остановите по PID — точно так, как мы учили в теме о компьютере и операционной системе.
{{< /box >}}

**Вторая ошибка:** путать `localhost` с IP в LAN. `127.0.0.1` доступен **только с того же компьютера**. Если друг попытается открыть со своего телефона `127.0.0.1:8000`, он попадёт на **свой собственный телефон**.

### Итоги

- **IP** идентифицирует **компьютер** в сети. Частный (`192.168.x.x`) — внутри LAN, публичный — в интернете.
- **`127.0.0.1` / localhost** = этот самый компьютер. С других компьютеров недоступен.
- **Порт** идентифицирует **программу** внутри компьютера. На каждом порту слушает только одна программа. 80 = HTTP, 443 = HTTPS.
- **Домен** — читаемое имя. **DNS** переводит его в IP **до** отправки запроса.
- Полный адрес: `protocol://host:port/path`, например `http://127.0.0.1:8000/students`.

<!-- docs:start — generated by scripts/intro6/site_docs.py; edit the links there -->

### Официальная документация

- [MDN Glossary — IP Address](https://developer.mozilla.org/en-US/docs/Glossary/IP_Address)
- [MDN Glossary — Port](https://developer.mozilla.org/en-US/docs/Glossary/Port)
- [MDN Glossary — DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS)

<!-- docs:end -->

## Глава 3: Запрос, ответ и протоколы: HTTP, HTTPS, TCP и UDP

### Что мы изучим?

- Что такое **протокол**.
- **Запрос** и **ответ**: что отправляется и что возвращается.
- **HTTP** и **HTTPS**: язык веба.
- **TCP** и **UDP**: как переносится сама информация.

### Зачем это нужно?

Вся тема бэкенда построена на HTTP: вы напишете сервер, который получает **запросы** и возвращает **ответы**, и будете выбирать **метод** (GET/POST/PUT/DELETE) и **код состояния** (200, 404...). Сегодня мы посмотрим, как это выглядит «изнутри». Когда вы это поймёте, FastAPI будет выглядеть как сокращение, а не как магия.

### Объяснение с основ

#### Что такое протокол?

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

{{< box "analogy" "Аналогия: телефонный звонок" >}}
Телефонный звонок — это «протокол»: вы звоните, другая сторона отвечает «алло», вы говорите, кто звонит, передаёте сообщение и говорите «пока». Если кто-то ответит и заговорит на незнакомом вам языке, соединение работает, а общение — нет.
{{< /box >}}

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

```text
HTTP / HTTPS   ← WHAT we say      (application: "give me /index.html")
TCP  / UDP     ← HOW it travels   (transport: reliable or fast)
IP             ← WHERE it goes    (addressing: 93.184.215.14)
Wi-Fi/Ethernet ← the physical link
```

#### Запрос и ответ

Всё общение по HTTP — это пара:

- **Запрос** (request) — клиент отправляет: **что** он хочет и **где**.
- **Ответ** (response) — сервер возвращает: **удалось ли**, и **содержимое**.

Начинает всегда клиент. HTTP-сервер ничего не отправляет по собственной инициативе.

#### HTTP — HyperText Transfer Protocol

HTTP — **текстовый** протокол: запрос и ответ — это действительно текст, который можно прочитать.

**Структура запроса:**

```text
GET /index.html HTTP/1.1          ← request line: METHOD  PATH  VERSION
Host: example.com                 ← headers: extra info, "Name: value"
User-Agent: Mozilla/5.0
Accept: text/html
                                  ← empty line = end of headers
(body — empty for GET)            ← body: data we send (used in POST/PUT)
```

| Часть | Объяснение |
|---|---|
| **Метод** | **Что** мы хотим сделать. `GET` = получить. `POST` = создать. `PUT` = обновить. `DELETE` = удалить. |
| **Путь** | **Какой ресурс**: `/`, `/students`, `/students/7`. |
| **Заголовки** (headers) | Сопровождающая информация: какой сайт (`Host`), кто отправляет, какой формат принимается. |
| **Тело** (body) | Сами данные, например данные нового студента в POST. |

**Структура ответа:**

```text
HTTP/1.1 200 OK                   ← status line: VERSION  STATUS CODE  REASON
Content-Type: text/html           ← headers
Content-Length: 1256
                                  ← empty line
<!doctype html><html>...          ← body: the content itself
```

**Коды состояния** по первой цифре:

| Диапазон | Значение | Примеры |
|---|---|---|
| `2xx` | Успех | `200 OK`, `201 Created` |
| `3xx` | Перенаправление в другое место | `301 Moved Permanently` |
| `4xx` | Ошибся **клиент** | `400 Bad Request`, `404 Not Found` |
| `5xx` | Сбой **сервера** | `500 Internal Server Error` |

#### HTTPS — защищённый HTTP

В обычном HTTP текст идёт по сети **в открытом виде**. Любой, кто находится на пути (например, в публичном Wi-Fi), может прочитать пароли и номера кредитных карт.

**HTTPS** = HTTP + **шифрование** (с помощью протокола **TLS**). Он добавляет две вещи:

1. **Шифрование** — только сервер и клиент могут прочитать содержимое.
2. **Проверку подлинности** — **цифровой сертификат** доказывает, что вы действительно общаетесь с `bank.co.il`, а не с самозванцем.

HTTP внутри шифрования точно такой же. Порт: HTTP = `80`, HTTPS = `443`. Значок замка 🔒 в браузере говорит, что соединение — HTTPS.

#### TCP и UDP — как перемещается информация

Информация в сети делится на маленькие **пакеты**. IP доставляет каждый пакет на нужный адрес, но пакеты могут теряться или приходить не по порядку. Здесь вступают TCP и UDP:

| | **TCP** | **UDP** |
|---|---|---|
| Надёжность | **Гарантирована**: потерянный пакет отправляется снова | **Не гарантирована**: что потерялось, то потерялось |
| Порядок | Приходит **в правильном порядке** | Может прийти в другом порядке |
| Соединение | Открывает **соединение** перед отправкой (рукопожатие) | Отправляет сразу, без соединения |
| Скорость | Медленнее (из-за проверок) | **Быстро** |
| Использование | Сайты (HTTP/HTTPS), почта, передача файлов, базы данных | Видеозвонки, онлайн-игры, DNS, прямые трансляции |

{{< box "analogy" "Аналогия" >}}
**TCP** = заказное письмо: есть подтверждение доставки, а если письмо потерялось, его отправляют снова. Надёжно, но требует времени. **UDP** = выкрикнуть сообщение в мегафон: быстро, но если кто-то пропустил слово, никто его не повторит. В видеозвонке лучше потерять один кадр, чем чтобы звонок замер, пока его отправляют заново.
{{< /box >}}

**HTTP работает поверх TCP.** Когда браузер запрашивает страницу, сначала открывается TCP-соединение с сервером (на порт 80 или 443), и только потом внутри него отправляется текст запроса.

### Распространённые коды ответа

Каждый HTTP-ответ начинается с **кода состояния** — трёхзначного числа, которое говорит, что произошло. Первая цифра указывает «семейство»:

| Код | Значение | Пример |
|---|---|---|
| **200 OK** | Запрос выполнен успешно | Страница загрузилась |
| **301** | Адрес переехал в другое место | Сайт, переехавший на новый адрес |
| **404 Not Found** | Путь не существует | Опечатка в адресе |
| **500 Internal Server Error** | Ошибка на стороне сервера | Код сервера упал |

- `2xx` — успех. `3xx` — перенаправление. `4xx` — ошибка **клиента**. `5xx` — ошибка **сервера**.

### Типичная ошибка

**Ошибка: думать, что 404 значит «интернет не работает» или «сервер упал».**

- `404` — **корректный ответ сервера**: «я получил запрос, но по этому пути у меня нет ресурса». Сервер **работает отлично**. Проблема в запросе, то есть в пути.
- Если сервер вообще **недоступен**, никакого кода состояния вы не получите. Вы получите ошибку соединения, например `Connection refused` или `timed out`.
- `500` = сервер получил запрос и **упал** при его обработке. В теме бэкенда, когда вы видите 500, баг — в коде вашего сервера.

| Что вы получили | Где проблема |
|---|---|
| `200` | Проблемы нет |
| `404` | Неверный путь (сторона клиента) |
| `500` | Баг в коде сервера (сторона сервера) |
| Connection refused | Никакой сервер не слушает этот адрес/порт |

**Вторая ошибка: думать, что HTTPS «скрывает», какой сайт вы открываете.** Шифрование защищает **содержимое** — пароли, формы, саму страницу, — но домен, к которому вы подключаетесь, по-прежнему виден в сети.

### Итоги

- **Протокол** = согласованные правила общения. Есть уровни: HTTP (что мы говорим), TCP/UDP (как это перемещается), IP (куда).
- **HTTP-запрос** = метод + путь + заголовки + тело. **HTTP-ответ** = код состояния + заголовки + тело.
- Коды состояния: `2xx` успех, `4xx` ошибка клиента, `5xx` ошибка сервера.
- **HTTPS** = HTTP + шифрование и проверка подлинности (TLS). Порт 443.
- **TCP** надёжный и упорядоченный (сайты, файлы). **UDP** быстрый и без гарантий (видео, игры, DNS).

<!-- docs:start — generated by scripts/intro6/site_docs.py; edit the links there -->

### Официальная документация

- [MDN — Overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Overview)
- [MDN Glossary — HTTPS](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS)
- [MDN Glossary — TCP](https://developer.mozilla.org/en-US/docs/Glossary/TCP)
- [MDN Glossary — UDP](https://developer.mozilla.org/en-US/docs/Glossary/UDP)

<!-- docs:end -->

## Глава 4: Что происходит с момента ввода адреса до показа сайта

### Что мы изучим?

Это классический вопрос собеседования: **«Что происходит, когда вы набираете `https://www.example.com/about` в браузере и нажимаете Enter?»** В этой главе мы построим полный ответ шаг за шагом и свяжем все сегодняшние понятия: URL, DNS, IP, порт, TCP, HTTPS, запрос, ответ.

### Зачем это нужно?

- Это самый частый вопрос на собеседованиях для джунов. Он проверяет, видите ли вы «общую картину».
- Когда сайт «не работает», тот, кто знает шаги, знает, **где** искать: DNS? соединение? сервер? содержимое?
- В темах бэкенда и баз данных вы напишете **шаг 6** — обработку на сервере. Хорошо понимать, что происходит до и после него.

### Объяснение с основ

#### Шаг 0 — разбор URL

**URL** (Uniform Resource Locator) — «полный адрес» ресурса в интернете:

```text
https://www.example.com:443/about?lang=he
└─┬─┘   └──────┬──────┘ └┬┘ └─┬─┘ └──┬──┘
protocol     domain     port  path   query
```

| Часть | Значение |
|---|---|
| **Протокол (scheme)** | `https`: на каком протоколе говорить. |
| **Домен (host)** | `www.example.com`: какой сервер. Будет переведён в IP. |
| **Порт** | `443`: обычно не пишется. `https` = 443, `http` = 80. |
| **Путь** (path) | `/about`: какой ресурс внутри сервера. |
| **Параметры запроса** (query) | `?lang=he`: дополнительные параметры в формате `key=value`. Несколько параметров соединяются через `&`. |

#### Восемь шагов

**1. Браузер разбирает URL** — он понимает, что протокол HTTPS (значит, порт 443), домен `www.example.com`, а путь `/about`.

**2. Поиск DNS — имя → IP-адрес.** Браузеру нужен IP, а не имя. Он проверяет по порядку: кэш браузера, кэш операционной системы, а если ответа нет — спрашивает DNS-сервер. Он получает, например, `93.184.215.14`.

**3. TCP-соединение — тройное рукопожатие.** Браузер открывает TCP-соединение с адресом `93.184.215.14:443`. Соединение открывается «рукопожатием» из трёх сообщений:

```text
Client ──── SYN ────────►  Server     "Can we talk?"
Client ◄─── SYN-ACK ─────  Server     "Yes, can you hear me?"
Client ──── ACK ────────►  Server     "Yes. Let's start."
```

**4. Рукопожатие TLS — шифрование.** Поскольку это HTTPS: сервер отправляет **сертификат**, браузер проверяет, что он подлинный и принадлежит `www.example.com`, и обе стороны договариваются о ключе шифрования. Дальше всё зашифровано. (С `http://` этого шага нет.)

**5. Отправка HTTP-запроса:**

```text
GET /about?lang=he HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 ...
Accept: text/html
```

**6. Сервер обрабатывает запрос.** Серверная программа получает запрос, понимает, что запрошено (`GET /about`), и готовит ответ. Иногда это просто готовый файл, а иногда много работы: выполнение кода, запрос к **базе данных**, построение HTML. **Именно эту часть вы будете писать в темах бэкенда и баз данных.**

**7. Сервер отправляет HTTP-ответ:**

```text
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<!doctype html><html> ... <link href="/style.css"> <img src="/logo.png"> ...
```

**8. Браузер отображает страницу (рендеринг).** Браузер читает HTML и строит из него страницу. Когда он встречает дополнительные файлы (CSS, изображения, JavaScript), он отправляет **новые запросы** — по одному на файл, повторяя шаги 5–7. Средняя страница делает десятки запросов! (TCP-соединение и шифрование уже есть, поэтому шаги 2–4 обычно не повторяются.)

{{< box "analogy" "Аналогия: заказ доставки" >}}
1. Вы знаете, что хотите «пиццу из того ресторана» (URL). 2. Ищете его адрес в приложении (DNS). 3. Звоните, и вам отвечают (TCP-рукопожатие). 4. Убеждаетесь, что это действительно ресторан, а не самозванец, и говорите на секретном коде (TLS). 5. Делаете заказ (запрос). 6. Кухня готовит, возможно, беря ингредиенты со склада (обработка + база данных). 7. Курьер привозит блюдо (ответ). 8. Вы распаковываете и подаёте — и обнаруживаете, что соусов нет, поэтому заказываете ещё (запросы CSS и изображений).
{{< /box >}}

### Сколько длится каждый шаг

Весь этот путь обычно занимает меньше секунды. Пример замера одного запроса:

```text
Step 2 - DNS: example.com -> 93.184.215.14 | ms: 21
Step 3 - TCP connected to 93.184.215.14 443 | ms: 64
Step 4 - TLS version: TLSv1.3 | ms: 71
Steps 5-7 - first line: HTTP/1.1 200 OK | ms: 66
```

Те же замеры можно увидеть в любом браузере: **F12** → вкладка **Network** → щёлкнуть по запросу → **Timing**. Преподаватель покажет это на экране. Там же видно, сколько запросов отправляет одна страница — иногда десятки.

### Типичная ошибка

**Ошибка: пропустить DNS или поставить его после соединения** («браузер подключается к google.com»). К имени подключиться нельзя. TCP-соединению нужен **IP**, поэтому DNS всегда идёт первым.

**Вторая ошибка: думать, что вся страница приходит одним запросом.** Сначала приходит HTML, и из него браузер узнаёт о десятках других файлов и запрашивает каждый отдельно. Во вкладке Network в DevTools это сразу видно.

**Третья ошибка — неверная диагностика сбоя:**

| Симптом | Шаг, на котором произошёл сбой |
|---|---|
| «DNS_PROBE_FINISHED_NXDOMAIN» / «server IP address could not be found» | **2** — DNS: такого домена нет или проблема с DNS |
| «Connection refused» / «timed out» | **3** — никакой сервер не слушает, или сервер недоступен |
| «Your connection is not private» | **4** — проблема с сертификатом в TLS |
| Страница «404 Not Found» | **6–7** — сервер работает, но такого пути нет |
| Страница «500 Internal Server Error» | **6** — код сервера упал |

### Итоги

- **URL** = протокол + домен + порт + путь + параметры запроса.
- Порядок: **разбор URL → DNS → TCP-рукопожатие → TLS → HTTP-запрос → обработка на сервере → HTTP-ответ → рендеринг**.
- DNS всегда идёт **до** соединения, потому что подключаются к IP, а не к имени.
- Одна страница = десятки запросов: сначала HTML, затем CSS, изображения и JS.
- Каждый вид сбоя относится к определённому шагу — так его и диагностируют.

<!-- docs:start — generated by scripts/intro6/site_docs.py; edit the links there -->

### Официальная документация

- [MDN — How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works)

<!-- docs:end -->

<!-- exercises:start — generated by scripts/intro6/sync_site_exercises.py; edit scripts/intro6/exercises/ -->
## Практика

Вопросы на понимание материала урока — без кода.

### Упражнение 1: Клиент или сервер?

В каждом сценарии — кто клиент (Client), а кто сервер (Server)?

1. Вы заходите с телефона на сайт банка.
2. Приложение погоды запрашивает прогноз.
3. Дана запускает на своём ноутбуке программу, которая ждёт запросов, и открывает её в браузере на том же ноутбуке.

{{< solution >}}
1. **Клиент:** браузер на телефоне. **Сервер:** программа, на которой работает сайт банка.
2. **Клиент:** приложение. **Сервер:** сервис, который возвращает прогнозы.
3. **Оба на одном ноутбуке:** браузер — клиент, а программа, которая ждёт запросов, — сервер. Клиент и сервер — **роли программ**, а не виды компьютеров.
{{< /solution >}}

### Упражнение 2: IP, порт и DNS

1. Что идентифицирует IP-адрес, а что идентифицирует порт?
2. Что означает адрес `127.0.0.1:8000`?
3. Друг пытается открыть `127.0.0.1:8000` на своём телефоне, чтобы увидеть сервер, работающий на вашем компьютере. Почему это не сработает?

{{< solution >}}
1. **IP** идентифицирует **компьютер** в сети (какое здание). **Порт** идентифицирует **программу** внутри компьютера (какая квартира).
2. **`127.0.0.1`** — это **localhost**, сам компьютер. **`8000`** — порт, который слушает программа. Вместе: программа, слушающая порт 8000 на этом компьютере.
3. На телефоне друга `127.0.0.1` — это **сам телефон**, а не ваш компьютер. localhost доступен только с того же компьютера.
{{< /solution >}}

### Упражнение 3: Разбор URL

Разберите адрес на части — протокол, домен, порт, путь и параметры запроса (query):

```text
https://shop.example.com:443/cart?coupon=SALE10
```

А каким был бы порт, если бы `:443` не было написано в адресе?

{{< solution >}}
| Часть | Значение |
|---|---|
| Протокол | `https` |
| Домен | `shop.example.com` |
| Порт | `443` |
| Путь | `/cart` |
| Параметры запроса | `coupon=SALE10` |

Когда порт не указан, браузер использует порт протокола по умолчанию: **443 для HTTPS** (и 80 для HTTP).
{{< /solution >}}

### Упражнение 4: Коды ответа

Что означает каждый код и где проблема — у клиента или у сервера?

```text
200   301   404   500
```

А что получит браузер, если сервер вообще не запущен?

{{< solution >}}
| Код | Значение | Где проблема |
|---|---|---|
| `200` | Запрос выполнен успешно | Проблемы нет |
| `301` | Адрес переехал в другое место | Проблемы нет — перенаправление |
| `404` | Путь не найден | **Клиент** — неверный адрес |
| `500` | Ошибка в коде сервера | **Сервер** |

Если сервер вообще не запущен — **никакой код состояния не возвращается**. Вы получите ошибку соединения, например `Connection refused` или `timed out`.
{{< /solution >}}

### Упражнение 5: Путь запроса

Расставьте шаги по порядку — от ввода адреса до показа сайта:

- (а) TCP-соединение — тройное рукопожатие
- (б) DNS — перевод имени в IP-адрес
- (в) Браузер отображает страницу (рендеринг)
- (г) Отправка HTTP-запроса
- (д) Установка шифрования (TLS)
- (е) Разбор URL
- (ж) Сервер возвращает HTTP-ответ

И почему DNS должен идти до TCP-соединения?

{{< solution >}}
Порядок: **(е), (б), (а), (д), (г), (ж), (в)**

1. Разбор URL.
2. DNS — имя → IP-адрес.
3. TCP-соединение (SYN, SYN-ACK, ACK).
4. TLS — шифрование (из-за HTTPS).
5. HTTP-запрос.
6. (Сервер обрабатывает запрос.)
7. HTTP-ответ.
8. Рендеринг — и браузер запрашивает дополнительные файлы (CSS, изображения).

DNS идёт первым, потому что **TCP-соединению нужен IP-адрес** — к имени подключиться нельзя.
{{< /solution >}}

<!-- exercises:end -->