Alterna · 6.3 — Веб-сайты: как устроен Интернет

В главе 4 вы узнали, что браузер отправляет HTTP-запрос и получает ответ. Теперь посмотрим, что именно приходит в ответе и как браузер превращает текст в страницу.

Веб = HTML (структура) + CSS (оформление) + JavaScript (поведение).

ФГОС · базовый ФОП · углублённый ЕГЭ · задание 13

Три столпа веба

HTML — скелет, CSS — одежда, JavaScript — мышцы

ФГОСЕГЭ 13

HTML — HyperText Markup Language

Разметка структуры страницы: заголовки, параграфы, списки, ссылки, изображения, таблицы, формы.

HTML — не язык программирования, а язык разметки. Теги описывают что на странице, не как это работает.

Пример HTML <h1>Привет, мир!</h1> — заголовок первого уровня.
<p>Это параграф.</p> — абзац текста.
<a href="https://example.com">Ссылка</a> — гиперссылка.

CSS — Cascading Style Sheets

Оформление: цвета, шрифты, отступы, расположение элементов, анимации, адаптивность.

CSS отделяет внешний вид от структуры. Один CSS-файл может стилизовать весь сайт.

JavaScript — язык программирования

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

JS — единственный язык программирования, который работает напрямую в браузере.

📄

HTML

аналогия: скелет здания

Определяет структуру: где заголовок, где текст, где картинка. Без CSS — некрасиво, но читаемо.

🎨

CSS

аналогия: краска и отделка

Делает страницу красивой: цвета, шрифты, тени, анимации. Без HTML не к чему применять.

⚡

JavaScript

аналогия: электрика и лифты

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

🛠️

Живой редактор HTML

редактируйте код · результат справа

интерактив

Измените HTML-код слева — результат обновится справа в реальном времени.

Frontend и Backend

Клиентская и серверная части: кто за что отвечает

ФГОСЕГЭ 13

Frontend (клиентская часть)

Всё, что видит и с чем взаимодействует пользователь в браузере:

HTML — разметка страницы
CSS — стили и адаптивность
JavaScript — интерактивность, анимация, AJAX-запросы
Фреймворки: React, Vue, Angular, Svelte

Backend (серверная часть)

Всё, что работает на сервере и не видно пользователю:

Веб-сервер — принимает HTTP-запросы, отдаёт файлы (Nginx, Apache)
Языки — Python, Node.js, PHP, Go, Java, C#
База данных — хранит данные (PostgreSQL, MySQL, MongoDB)
API — интерфейс между frontend и backend (REST, GraphQL)

Рис. 1. Архитектура веб-приложения: клиент запрашивает, сервер обрабатывает

Веб-серверы и хостинг

Где живут сайты и как они попадают в Интернет

ФГОС

Веб-сервер

Веб-сервер — программа (или компьютер), которая:

Принимает HTTP-запросы от браузеров
Находит запрошенный файл или формирует ответ
Отправляет HTTP-ответ обратно

Популярные веб-серверы: Nginx (быстрый, для статики и reverse proxy), Apache (старейший, гибкий).

Хостинг

Хостинг — услуга размещения сайта на сервере с постоянным подключением к Интернету.

Тип	Описание	Для кого
Виртуальный хостинг	Много сайтов на одном сервере, делят ресурсы	Блоги, маленькие сайты
VPS (виртуальный сервер)	Свой «кусок» сервера с root-доступом	Средние проекты, магазины
Выделенный сервер	Целый физический сервер в аренду	Высоконагруженные проекты
Облако (IaaS)	Виртуальные машины в облаке (AWS, Yandex Cloud)	Масштабируемые проекты
Статический хостинг	Только HTML/CSS/JS файлы (GitHub Pages, Netlify)	Лендинги, документация

Домен и DNS

Домен (alterna-edu.ru) — читаемое имя сайта. Регистрируется у регистратора (REG.RU, GoDaddy). DNS связывает домен с IP-адресом сервера (подробнее на странице 6.2).

Как сайт попадает к пользователю 1. Вы регистрируете домен → 2. Арендуете хостинг → 3. Загружаете файлы на сервер → 4. Настраиваете DNS: домен → IP сервера → 5. Сайт доступен всему миру!

Как браузер рендерит страницу

От HTML-текста к пикселям на экране

ФОП · углублённый

Пять шагов рендеринга

Парсинг HTML → DOM (Document Object Model) — дерево элементов
Парсинг CSS → CSSOM (CSS Object Model) — дерево стилей
Объединение DOM + CSSOM → Render Tree (дерево отрисовки)
Layout (reflow) — вычисление размеров и позиций каждого элемента
Paint (paint) — рисование пикселей на экране

Рис. 2. Пять этапов рендеринга: от текста к пикселям

Почему это важно? Если CSS загружается долго — страница «мигает» (сначала без стилей, потом оформленная). Если JS блокирует — страница «зависает». Оптимизация загрузки = быстрый сайт.

Современный веб: SPA, API, CDN

Как устроены сайты, которыми вы пользуетесь каждый день

ФОП · углублённый

SPA — Single Page Application

Одностраничное приложение: загружается один раз, далее JS обновляет части страницы без перезагрузки. Примеры: Gmail, Telegram Web, Google Maps.

Плюсы: быстро работает, как десктопное приложение. Минусы: сложнее для SEO, первая загрузка медленнее.

API — Application Programming Interface

API — интерфейс, через который frontend общается с backend. Самый популярный стиль — REST:

Метод	Действие	Пример
`GET /api/users`	Получить список	Список пользователей
`GET /api/users/5`	Получить одного	Профиль пользователя 5
`POST /api/users`	Создать	Зарегистрировать нового
`PUT /api/users/5`	Обновить целиком	Изменить все поля
`PATCH /api/users/5`	Обновить частично	Изменить только имя
`DELETE /api/users/5`	Удалить	Удалить пользователя

CDN — Content Delivery Network

CDN — сеть серверов по всему миру, хранящих копии контента. Пользователь получает из ближайшей точки. Примеры: Cloudflare, Akamai.

Как это работает вместе Вы открываете Telegram Web (SPA). Браузер загружает HTML/CSS/JS с CDN (быстро, из ближайшего сервера). Далее JS делает API-запросы к backend: «покажи сообщения из чата Х». Backend отвечает JSON-ом. JS обновляет страницу без перезагрузки.