Продолжаем расследование

В прошлом уроке браузер наконец нашёл нужный сервер, отправил HTTP-запрос и получил ответ.

Но мы намеренно оставили один вопрос без ответа. Мы несколько раз говорили, что сервер отправляет данные. Только вот какие именно?

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

На самом деле всё устроено интереснее. Современный сайт — это не один файл, а целый набор ресурсов, которые браузер получает постепенно и собирает в единую страницу.

Сегодня мы впервые заглянем внутрь ответа сервера.

---

Первая часть — HTML

Представьте, что вы строите дом. Сначала появляется каркас: стены, комнаты, двери, окна. Только после этого приходит время покраски, мебели и освещения.

У сайта тоже есть такой каркас. Он создаётся с помощью HTML (HyperText Markup Language).

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

Сам по себе HTML почти не отвечает за внешний вид страницы. Он лишь описывает, что находится на странице.

Именно HTML обычно становится первым файлом, который браузер получает от сервера.

---

Но почему сайты выглядят красиво?

Если открыть страницу только с HTML, она будет выглядеть очень просто. Текст появится. Кнопки тоже. Но привычного дизайна почти не будет.

За оформление отвечает CSS (Cascading Style Sheets).

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

Если HTML — это каркас дома, то CSS — отделка и интерьер. Каркас может существовать без отделки. Но жить в таком доме вряд ли будет приятно.

Красиво — это хорошо. Но почему страницы ещё и реагируют на наши действия?

---

Кто делает страницу "живой"?

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

За всё это отвечает JavaScript.

Если HTML создаёт структуру, а CSS отвечает за оформление, то JavaScript управляет поведением страницы. Именно он позволяет странице реагировать на действия пользователя и изменяться уже после загрузки.

В следующих модулях мы будем подробно изучать JavaScript. Пока достаточно понимать его роль в общей картине.

---

Сайт состоит не только из трёх файлов

На этом легко сделать неправильный вывод: «Значит, сайт — это HTML, CSS и JavaScript.»

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

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

💡 Почему так делают в индустрии

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

---

Один запрос — один сайт?

Не совсем.

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

После этого браузер отправляет новые HTTP-запросы за каждым из них.

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

Если браузер получает десятки файлов, как он успевает собрать их в одну страницу?

---

🤖 AI-помощник

Попробуйте попросить AI объяснить роли HTML, CSS и JavaScript одной аналогией. Например:

«Объясни HTML, CSS и JavaScript на примере театральной постановки.»

Затем оцените ответ критически. Хорошая аналогия помогает понять роли технологий, но не заменяет точные определения. Если AI начинает утверждать, что HTML отвечает за внешний вид или что CSS делает страницу интерактивной, значит, в объяснении есть ошибка.

---

Что мы уже знаем?

Теперь наше расследование выглядит так. Браузер:

1. получает HTML;
2. узнаёт из него, какие ещё ресурсы нужны;
3. запрашивает CSS, JavaScript, изображения, шрифты и другие файлы;
4. постепенно собирает страницу из полученных частей.

Мы уже понимаем, что получает браузер. Остаётся последний большой вопрос: как браузер превращает все эти отдельные файлы в страницу, которую мы видим на экране? Именно этим мы займёмся в следующем уроке.

---

Частая ошибка новичков

«Сайт — это один HTML-файл.»

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