Лекция 01. Как работает Web

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

После этой лекции

После занятия вы должны уметь своими словами объяснить:

• чем Internet отличается от Web;
• чем отличаются веб-страница, сайт и веб-приложение;
• что делает браузер;
• кто такие клиент и сервер;
• чем занимаются frontend-, backend- и fullstack-разработчики;
• что означают части URL;
• зачем нужны доменное имя, DNS и IP-адрес;
• как устроены HTTP-запрос и HTTP-ответ;
• почему HTTPS важен;
• в каких случаях обычно применяют GET и POST;
• что происходит после ввода URL до появления страницы;
• какую роль играют HTML, CSS, JavaScript, серверный код и база данных;
• как начать проверять всё это в инструментах разработчика браузера.

1. Internet и Web — не одно и то же

Эти слова в разговоре часто смешивают, но технически они обозначают разные уровни.

Internet (Интернет) — мировая сеть соединённых между собой сетей. Она позволяет устройствам передавать данные по набору сетевых протоколов, прежде всего IP. Интернет — это инфраструктура и правила доставки: кабели, Wi‑Fi, мобильные сети, маршрутизаторы, дата-центры и сетевые протоколы.

Web (Всемирная паутина, World Wide Web) — один из сервисов, работающих поверх Интернета. Он строится на связанных ресурсах, адресах URL и протоколе HTTP. Веб-страница — типичный ресурс Web.

Простая аналогия: Интернет похож на систему дорог и адресов, а Web — на одну из служб, которые по этой системе работают. По Интернету существуют и другие сервисы: электронная почта, видеозвонки, облачные игры, обмен файлами, DNS. Не всякий Интернет-трафик является Web-трафиком.

Важно: браузер и поисковая система тоже не одно и то же. Браузер — программа на устройстве. Поисковая система — веб-сервис, который индексирует и помогает находить страницы других сайтов.

Гипертекст: почему Web называется «паутиной»

В основе Web лежит идея гипертекста: документ может содержать ссылки на другие документы или их фрагменты. Ссылка соединяет материалы в сеть, а не складывает их в одну линейную книгу.

<a href="https://developer.mozilla.org/">Открыть справочник MDN</a>

Элемент <a> создаёт ссылку. Атрибут href содержит адрес ресурса. Когда пользователь нажимает на ссылку, браузер получает новый URL и начинает новую навигацию.

2. Веб-страница, сайт и веб-приложение

Веб-страница

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

Примеры страниц: главная страница колледжа, страница одной новости, карточка товара, форма регистрации, статья в справочнике.

Веб-сайт

Сайт — набор связанных веб-страниц и ресурсов, обычно объединённых одним доменным именем. У сайта есть навигация, общая тема и адресное пространство. Например, у одного домена могут быть страницы /about, /news и /contacts.

Веб-приложение

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

Граница условна: современный сайт может иметь и информационные страницы, и части приложения. Важно не название, а поведение:

Не нужно запоминать: нет универсального технического правила, после которого «сайт» превращается в «приложение». Это полезные слова для описания назначения продукта.

3. Браузер: программа между пользователем и Web

Браузер — клиентская программа, которая умеет запрашивать веб-ресурсы, применять правила веб-стандартов и отображать результат пользователю.

Браузер умеет:

1. принимать URL из адресной строки или ссылку;
2. находить сервер через DNS;
3. устанавливать сетевое соединение и при необходимости защищать его через TLS;
4. отправлять HTTP-запросы и получать ответы;
5. читать HTML и строить структуру документа;
6. загружать связанные CSS, JavaScript, изображения и другие файлы;
7. вычислять внешний вид элементов и рисовать их на экране;
8. исполнять JavaScript в среде страницы;
9. хранить часть данных локально — например, в localStorage, кэше или cookies — в рамках правил безопасности.

Браузер не является «окном в сервер». Большая часть визуальной работы происходит на устройстве пользователя: браузер получил данные и сам построил пиксели на экране.

Рендеринг очень упрощённо

Получив HTML, браузер начинает разбирать его. Находит в нём ссылки на CSS, JavaScript, картинки и другие файлы, поэтому одна страница почти всегда означает много сетевых запросов.

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

Важно: «страница загрузилась» не всегда означает, что она полностью готова. Изображения, шрифты, запросы к API и JavaScript-логика могут продолжать работать после первого появления интерфейса.

4. Клиент и сервер

В Web роли распределяются так:

• клиент запрашивает ресурс;
• сервер принимает запрос, обрабатывает его и отправляет ответ.

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

Браузер (клиент)  ─── HTTP request ───>  Сервер
Браузер (клиент)  <── HTTP response ─── Сервер

Слово «сервер» используют в двух значениях:

1. Компьютер или виртуальная машина, на которой работает сервис.
2. Серверная программа, которая слушает запросы и отвечает на них.

В разговоре полезно уточнять контекст. Например, Nginx — веб-серверная программа; её могут запустить на физическом сервере, в виртуальной машине или в облаке.

Один компьютер может выполнять обе роли

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

http://localhost:3000

Браузер на вашем ноутбуке ──> сервер разработки на том же ноутбуке

Статический и динамический ответ

Статический сайт часто отдаёт файл без вычислений: сервер получил запрос /about и вернул подготовленный HTML-файл. CSS, JavaScript и изображения тоже могут быть статическими файлами.

Динамический ответ создаётся или собирается в момент запроса. Например, пользователь открывает /profile: сервер проверяет, кто вошёл, получает именно его данные из базы и возвращает результат.

На практике один проект часто сочетает оба подхода.

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

5. Frontend, backend и fullstack

Это не названия «разных интернетов», а условное разделение задач в разработке.

Frontend

Frontend — часть, которая работает в браузере и с которой взаимодействует пользователь. Обычно это HTML, CSS и JavaScript.

• HTML задаёт структуру и смысл контента.
• CSS описывает внешний вид и раскладку.
• JavaScript добавляет поведение: обработку кликов, изменение интерфейса, валидацию, запросы данных.

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

Backend

Backend — серверная часть. Она получает запросы, реализует бизнес-правила, управляет доступом, взаимодействует с базой данных и другими сервисами, формирует ответы.

Примеры серверных действий:

• проверить пароль при входе;
• определить права пользователя;
• сохранить заявку;
• найти расписание в базе;
• сформировать список товаров;
• принять оплату через платёжный сервис;
• вернуть данные в JSON.

Серверный код может быть написан на JavaScript/TypeScript, Python, PHP, Java, C#, Go, Ruby и других языках. Важно место выполнения: backend-код выполняется на сервере, а не передаётся в браузер как код страницы.

Fullstack

Fullstack-разработчик работает и с frontend, и с backend. Это не означает, что один человек должен знать всё одинаково глубоко; обычно у него есть более сильная сторона и понимание всей цепочки.

Важно: нельзя доверять только проверкам на frontend. Пользователь может изменить данные в браузере или отправить запрос напрямую. Критичные правила — доступ, цены, роли, сохранение данных — сервер обязан проверять сам.

6. URL: адрес ресурса

URL (Uniform Resource Locator) — адрес ресурса в Web. Ресурсом может быть HTML-страница, картинка, документ, API-ответ, видео или другой объект, доступный по адресу.

Рассмотрим адрес:

Домен, поддомен и доменная зона

В www.example.org:

• org — домен верхнего уровня (доменная зона);
• example — зарегистрированное доменное имя;
• www — поддомен, если владелец его настроил.

Запись www не обязательна и не означает автоматически «главная страница». example.org и www.example.org — разные имена, хотя владелец сайта часто настраивает одно для перенаправления на другое.

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

Абсолютный URL содержит полный адрес:

https://example.org/images/logo.png

Относительный URL понимается относительно текущей страницы:

<img src="images/logo.png" alt="Логотип">
<a href="/contacts">Контакты</a>
<a href="#reviews">К отзывам на этой странице</a>

Пусть документ открыт по адресу https://example.org/catalog/item/. Тогда images/logo.png будет искать файл по пути https://example.org/catalog/item/images/logo.png, а /contacts — по адресу https://example.org/contacts.

Проверь себя: отправится ли #reviews на сервер? Нет. Фрагмент обрабатывает браузер после получения ресурса.

7. IP-адрес и DNS

IP-адрес

Чтобы данные дошли по сети до нужного устройства, используется IP-адрес. Это сетевой адрес, по которому маршрутизаторы могут направлять пакеты.

Существуют две основные версии IP:

IPv4: 203.0.113.42
IPv6: 2001:db8:abcd:12::42

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

DNS — система имён

Людям удобнее помнить example.org, чем набор цифр и шестнадцатеричных символов. DNS (Domain Name System) сопоставляет доменные имена с нужными данными, в частности с IP-адресами.

Упрощённая последовательность выглядит так:

1. Браузер или ОС проверяет, нет ли недавнего ответа в локальном кэше.
2. Если ответа нет, запрос отправляется DNS-резолверу — обычно его предоставляет провайдер, сеть, устройство или выбранный публичный сервис.
3. Резолвер при необходимости обращается к распределённой и иерархической DNS-системе, чтобы найти авторитетный ответ для домена.
4. Он возвращает IP-адрес браузеру и на время сохраняет ответ в кэше.
5. Браузер устанавливает соединение с этим адресом.

Браузер -> DNS-резолвер -> DNS-система -> ответ с IP -> браузер -> сервер

DNS — не «папка с сайтами» и не сам сайт. Это отдельный инфраструктурный сервис. Он также хранит не только адреса сайтов: например, сведения о почтовых серверах и правилах проверки домена.

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

Кэш и распространение изменений

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

8. HTTP и HTTPS

HTTP

HTTP (Hypertext Transfer Protocol) — прикладной протокол общения клиента и сервера в Web. Он описывает, как выглядят запросы и ответы: метод, адрес цели, заголовки, статус и тело сообщения.

HTTP является протоколом «запрос → ответ». Клиент формулирует намерение, сервер его обрабатывает и сообщает результат. Сам HTTP по своей модели не хранит состояние между независимыми запросами; приложения поверх него используют cookies, токены, серверные сессии и другие механизмы, когда нужно помнить пользователя.

HTTPS

HTTPS — это HTTP, передаваемый через защищённое TLS-соединение. TLS даёт три ключевых свойства:

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

Для этого сервер предъявляет цифровой сертификат, а браузер проверяет его цепочку доверия, срок действия и соответствие имени сайта. При проблеме браузер показывает предупреждение. Замок в адресной строке не означает, что сайт честный, качественный или безопасный во всех смыслах; он означает, что соединение с этим сайтом защищено и сертификат прошёл проверку браузера.

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

Порт и версии HTTP

По соглашению HTTP часто использует порт 80, а HTTPS — 443. Это значения по умолчанию, поэтому в обычном URL они не видны.

Встречаются HTTP/1.1, HTTP/2 и HTTP/3. Для первой лекции достаточно знать: это разные версии передачи HTTP-сообщений. Их смысл — запросы, ответы, методы и статусы — сохраняется; браузер и сервер выбирают совместимый вариант. HTTP/3 использует QUIC как транспорт, но прикладная модель HTTP остаётся той же.

Не нужно запоминать: детали TCP, UDP, QUIC и этапов TLS-переговоров сейчас не нужны. Важно понимать их роль: сеть доставляет данные, а HTTPS защищает соединение.

9. HTTP request и HTTP response

Запрос

HTTP request — сообщение от клиента серверу. В нём обычно есть:

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

Пример упрощённого запроса за страницей:

GET /catalog?category=books HTTP/1.1
Host: example.org
Accept: text/html

GET — метод, /catalog?category=books — путь с параметром, Host — домен, а Accept сообщает, какой формат ответа клиент готов принять.

Ответ

HTTP response — сообщение сервера клиенту. В нём есть:

• строка со статусом результата;
• заголовки;
• иногда тело ответа: HTML, JSON, изображение, файл, описание ошибки и т. д.

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
 
<!doctype html>
<html>
  <body><h1>Каталог</h1></body>
</html>

Content-Type помогает браузеру понять, как интерпретировать тело. HTML обычно получает тип text/html, JSON — application/json, изображение PNG — image/png.

Коды состояния

Статус-код — короткое число, которое описывает результат на уровне протокола. Полезные группы:

Важно не делать чрезмерных выводов по одному числу. Например, 404 означает, что сервер не нашёл ресурс по этому адресу; это не доказывает, что «сайта нет вообще». А 401 Unauthorized исторически назван не очень удачно: обычно он сообщает, что для доступа нужна аутентификация.

GET и POST

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

GET /api/students?group=42 HTTP/1.1
Host: college.example

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

POST /api/applications HTTP/1.1
Host: college.example
Content-Type: application/json
 
{
  "name": "Анна",
  "course": "Веб-разработка"
}

Сервер может ответить, например:

HTTP/1.1 201 Created
Content-Type: application/json
 
{"id": 581, "status": "received"}

Важно: GET и POST не являются средствами защиты. Не следует передавать пароль в URL: URL может попасть в историю браузера, логи и закладки. Защита данных обеспечивается HTTPS, корректной серверной обработкой и правилами доступа.

Не нужно запоминать: остальные методы (PUT, PATCH, DELETE, HEAD, OPTIONS) мы будем встречать позже при работе с API. Сейчас важно уверенно различать задачу чтения (GET) и отправки/обработки данных (POST).

10. Полный путь: что происходит после ввода URL

Возьмём адрес:

https://learn.example.org/lessons/web?group=101

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

1. Браузер разбирает URL. Он видит схему https, хост learn.example.org, путь /lessons/web и параметр group=101.
2. Проверяется доступный кэш. Возможно, для домена или части ресурсов уже есть недавние данные.
3. DNS ищет адрес. Браузеру нужен IP-адрес, связанный с learn.example.org.
4. Устанавливается соединение. Для HTTPS браузер и сервер договариваются о защищённом TLS-сеансе; браузер проверяет сертификат.
5. Отправляется HTTP-запрос. Например, GET /lessons/web?group=101.
6. Запрос попадает к серверному приложению. Перед ним может стоять прокси, балансировщик или CDN; это детали инфраструктуры, скрытые от обычного пользователя.
7. Сервер выполняет нужную работу. Он может отдать готовый HTML-файл или выполнить код: проверить сессию, получить данные из БД, обратиться к внешнему API, собрать HTML или JSON.
8. Сервер возвращает HTTP-ответ. Например, 200 OK с HTML-документом.
9. Браузер разбирает HTML. Он находит ссылки на CSS, JavaScript, изображения, шрифты и отправляет новые запросы за этими ресурсами.
10. Браузер строит интерфейс. Применяет CSS, выполняет JavaScript, рисует видимые элементы. Веб-приложение может затем запросить дополнительные данные через API.
11. Пользователь видит страницу и взаимодействует с ней. Клик, ввод в форму, поиск или отправка данных могут инициировать новые запросы.

Что может пойти не так

На каждом этапе возможна отдельная ошибка. Это полезно для диагностики:

11. HTML, CSS и JavaScript: три базовых слоя frontend

HTML — структура и смысл

HTML (HyperText Markup Language) — язык разметки. Он описывает, из каких смысловых частей состоит документ: заголовка, текста, навигации, списка, изображения, формы, кнопки.

<article>
  <h1>Как работает Web</h1>
  <p>Браузер получает ресурсы и строит страницу.</p>
  <a href="/lessons/html">Следующая тема</a>
</article>

HTML — не язык программирования. Его задача — структура и семантика, а не вычисления и не декоративное оформление.

CSS — оформление и расположение

CSS (Cascading Style Sheets) описывает, как HTML-элементы выглядят и располагаются: цвета, шрифты, отступы, размеры, сетки, адаптацию к экрану.

article {
  max-width: 70ch;
  margin: 40px auto;
  padding: 0 16px;
}
 
h1 {
  color: #24324a;
}

CSS не добавляет на страницу смысловой заголовок; он меняет представление уже существующего HTML.

JavaScript — поведение

JavaScript — язык программирования, который в браузере может реагировать на события, менять страницу, проверять введённые данные и обращаться за данными к серверу.

<button id="show-answer">Показать ответ</button>
<p id="answer" hidden>HTTP — протокол запросов и ответов.</p>
 
<script>
  const button = document.querySelector('#show-answer');
  const answer = document.querySelector('#answer');
 
  button.addEventListener('click', () => {
    answer.hidden = false;
  });
</script>

Важно: хороший интерфейс не строится из «трёх одинаковых слоёв». Сначала нужен осмысленный HTML. CSS и JavaScript должны усиливать его, а не заменять понятную структуру.

Как браузер узнаёт о связанных файлах

HTML может содержать ссылки на ресурсы:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Пример</title>
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>Заголовок</h1>
    <img src="images/web-flow.png" alt="Схема работы Web">
  </body>
</html>

Получив этот HTML, браузер отправит новые запросы за styles.css, app.js и images/web-flow.png. Именно поэтому в панели Network виден не один запрос, а целый список.

12. Серверный код, API и база данных

Серверный код

HTML, CSS и JavaScript, отданные браузеру, пользователь может увидеть через инструменты разработчика. Секреты и критичная бизнес-логика не должны находиться там. Серверный код выполняется в контролируемой среде сервера и возвращает только результат, который разрешено получить клиенту.

Например, маршрут /api/schedule?group=101 может быть реализован на сервере так:

// Псевдокод: этот файл выполняется на сервере, не в браузере.
app.get('/api/schedule', async (request, response) => {
  const group = request.query.group;
  const lessons = await database.findLessons({ group });
 
  response.json({ group, lessons });
});

Браузер может получить ответ:

{
  "group": "101",
  "lessons": [
    { "time": "09:00", "subject": "Веб-разработка", "room": "214" }
  ]
}

Такой программный интерфейс обмена данными называют API (Application Programming Interface). В данном курсе, когда мы говорим «веб-API», часто будем иметь в виду адреса, по которым frontend получает или отправляет данные через HTTP.

База данных

База данных (БД) — система для надёжного хранения и поиска данных. Там могут находиться пользователи, товары, расписание, заказы, сообщения и результаты обучения.

Браузер обычно не подключается к основной базе данных напрямую. Вместо этого он обращается к backend, а backend:

1. проверяет пользователя и его права;
2. проверяет корректность входных данных;
3. выполняет разрешённое действие с БД;
4. возвращает клиенту только нужную часть результата.

Браузер -> API / backend -> база данных
             ^
             | проверяет доступ и правила

Почему это разделение важно

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

Важно: frontend отвечает за удобство и быструю обратную связь, но backend — за окончательную проверку правил и безопасность данных.

13. Мини-демонстрация: от формы до ответа сервера

Рассмотрим форму поиска. Пользователь вводит запрос и нажимает кнопку.

<form action="/search" method="get">
  <label>
    Найти материал
    <input name="q" type="search">
  </label>
  <button>Найти</button>
</form>

Если пользователь ввёл DNS, браузер обычно перейдёт на адрес:

/search?q=DNS

и отправит запрос:

GET /search?q=DNS HTTP/1.1
Host: learn.example.org

Сервер получает параметр q, выполняет поиск и возвращает HTML с результатами или JSON, который затем отрисует JavaScript.

Для создания записи часто используют форму с method="post". Но сам по себе HTML-атрибут не защищает пользователя: серверу всё равно необходимо проверить данные и права.

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

14. DevTools: как увидеть работу Web своими глазами

Инструменты разработчика (Developer Tools, DevTools) есть во всех современных браузерах. Это не «хакерская панель», а рабочая среда для проверки HTML, CSS, JavaScript, запросов и ошибок.

Обычно DevTools открываются клавишей F12 или сочетанием Ctrl + Shift + I (на macOS часто ⌘ + Option + I). Конкретные сочетания зависят от браузера и ОС.

Elements / Inspector

Показывает текущую HTML-структуру страницы и применённые CSS-правила. Можно выбрать элемент инструментом-стрелкой, увидеть, откуда взялся цвет или отступ, и временно изменить правило.

Это помогает ответить на вопросы:

• есть ли элемент в DOM;
• какой у него класс и атрибуты;
• какое CSS-правило победило в каскаде;
• почему блок имеет именно такой размер или отступ.

Console

Показывает сообщения и ошибки JavaScript. Если кнопка не работает, сначала стоит проверить Console: там часто есть точный текст ошибки и ссылка на строку кода.

console.log('Проверка: скрипт запущен');

console.log временно выводит значение в Console и помогает понять, выполняется ли код.

Network

Панель Network показывает запросы, которые сделала страница. Здесь можно увидеть:

• URL каждого запроса;
• метод (GET, POST и др.);
• статус (200, 404, 500 и т. п.);
• время загрузки;
• заголовки запроса и ответа;
• тело ответа или отправленные данные, если браузер их показывает.

Практика на 5 минут

1. Откройте любую простую страницу.
2. Откройте DevTools и перейдите в Network.
3. Обновите страницу, пока Network открыта.
4. Найдите строку, где тип — document или Doc: это основной HTML-запрос.
5. Откройте её и найдите URL, метод, статус и Content-Type.
6. Найдите запрос типа stylesheet или script.

Если Network пустая, чаще всего страницу обновили до открытия панели. Откройте панель и обновите страницу ещё раз.

15. Частые заблуждения

«HTML — это сайт»

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

«JavaScript всегда работает только в браузере»

В курсе мы сначала изучаем JavaScript в браузере, но JavaScript также может выполняться на сервере, например в Node.js. Место выполнения определяет среда, а не название языка.

«Если сайт открывается, значит сервер отправил всё одним файлом»

Одна навигация обычно запускает множество запросов: HTML, CSS, JavaScript, изображения, шрифты, данные API. Посмотреть это можно в Network.

«HTTPS гарантирует, что сайт не мошеннический»

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

«DNS — это адрес сайта»

DNS — система, которая помогает найти данные о домене, например IP-адрес. Адрес сайта для пользователя обычно URL, а DNS — один из шагов на пути к серверу.

«Frontend не связан с backend»

Они могут разрабатываться отдельно, но в работающем веб-приложении обычно обмениваются данными по согласованному API. Несовпадение ожиданий frontend и backend — частая причина ошибок.

16. Карта понятий

Internet
└── Web
    ├── URL — адрес ресурса
    │   └── домен --DNS--> IP-адрес
    ├── браузер (клиент)
    │   ├── получает HTTP/HTTPS-ответы
    │   ├── строит HTML + CSS
    │   └── исполняет JavaScript
    └── сервер
        ├── принимает HTTP-запросы
        ├── выполняет backend-код
        └── при необходимости работает с БД

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

17. Проверь себя

Попробуйте ответить без поиска, затем сверяйтесь с материалом.

1. Чем Web отличается от Интернета? Приведите пример сервиса Интернета, который не является обычной веб-страницей.
2. Что делает браузер после получения HTML-документа?
3. Почему college.example удобнее для человека, чем IP-адрес?
4. Как DNS участвует в открытии сайта?
5. Чем отличаются URL, доменное имя и IP-адрес?
6. Какая часть URL не отправляется в HTTP-запросе: путь, query-параметры или фрагмент после #?
7. Кто является клиентом, а кто сервером, когда вы открываете сайт в браузере?
8. Назовите по одной основной задаче HTML, CSS и JavaScript.
9. Чем frontend отличается от backend? Почему проверку прав нельзя оставлять только на frontend?
10. Из каких основных частей состоит HTTP-запрос?
11. Какой метод обычно используют для получения страницы или результатов поиска? Какой — для отправки формы на обработку?
12. Что означают коды 200, 404 и 500 в самом общем виде?
13. Что защищает HTTPS и чего он сам по себе не гарантирует?
14. Где в браузере посмотреть метод, статус и заголовки запроса?

Мини-задание

Откройте страницу любого известного вам сайта и выполните три действия в DevTools:

1. В Elements найдите главный заголовок страницы (h1, если он есть).
2. В Network после обновления страницы найдите основной документ и запишите его статус.
3. Найдите один подключённый CSS-файл и один JavaScript-файл.

Запишите ответы в формате:

Страница: ...
Основной запрос: GET ..., статус ...
CSS: ...
JavaScript: ...

Краткий словарь

Что будет дальше

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

Источники и дальнейшее чтение

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

1. MDN: How the web works  — клиент, сервер, DNS, URL, базовый путь загрузки страницы.
2. MDN: Browsing the web  — различия между страницей, сайтом, сервером, браузером и поисковой системой.
3. MDN: What is a URL?  — состав URL, абсолютные и относительные адреса, фрагмент.
4. ICANN: The Domain Name System  — назначение DNS, домены и IP-адреса.
5. IETF RFC 9110: HTTP Semantics  — стандартная семантика HTTP, запросы, ответы, методы и статусы.
6. MDN: Client-server overview  — статические и динамические сайты, взаимодействие браузера и сервера.
7. MDN: Populating the page: how browsers work  — загрузка ресурсов и рендеринг в браузере.
8. MDN: HTML  — назначение HTML.
9. MDN: What is JavaScript?  — роль JavaScript в веб-странице.
10. MDN: What are browser developer tools?  — базовое использование DevTools.