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

Содержание и основные понятия

← Вернуться к оглавлению
Alterna · глава 6 · страница 6.3
Веб-сайты: как устроен Интернет
Каждый сайт — это файлы на сервере, которые браузер превращает в красивую страницу. Разберём три столпа веба: HTML, CSS и JavaScript.
В главе 4 вы узнали, что браузер отправляет
HTTP-запрос
и получает ответ. Теперь посмотрим,
что именно
приходит в ответе и как браузер превращает текст в страницу.
Веб =
HTML
(структура) +
CSS
(оформление) +
JavaScript
(поведение).
ФГОС · базовый
ФОП · углублённый
ЕГЭ · задание 13
01
Три столпа веба
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-код слева — результат обновится справа в реальном времени.
02
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)
Frontend
Браузер пользователя
HTML
CSS
JavaScript
React / Vue / Angular
Показывает страницу
Backend
Сервер
Python / Node.js
Nginx / Apache
PostgreSQL
REST API / GraphQL
Логика + данные
HTTP-запрос (GET /api/data)
HTTP-ответ (JSON / HTML)
Frontend запрашивает → Backend обрабатывает → Frontend показывает
Рис. 1.
Архитектура веб-приложения: клиент запрашивает, сервер обрабатывает
03
Веб-серверы и хостинг
Где живут сайты и как они попадают в Интернет
ФГОС
Веб-сервер
Веб-сервер
— программа (или компьютер), которая:
Принимает 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. Сайт доступен всему миру!
04
Как браузер рендерит страницу
От HTML-текста к пикселям на экране
ФОП · углублённый
Пять шагов рендеринга
Парсинг HTML
→ DOM (Document Object Model) — дерево элементов
Парсинг CSS
→ CSSOM (CSS Object Model) — дерево стилей
Объединение
DOM + CSSOM →
Render Tree
(дерево отрисовки)
Layout
(reflow) — вычисление размеров и позиций каждого элемента
Paint
(paint) — рисование пикселей на экране
HTML
текст
DOM
дерево
Render Tree
DOM + CSSOM
Layout
размеры
Paint
пиксели!
CSS
HTML + CSS → DOM + CSSOM → Render Tree → Layout → Paint → Экран
Рис. 2.
Пять этапов рендеринга: от текста к пикселям
Почему это важно?
Если CSS загружается долго — страница «мигает» (сначала без стилей, потом оформленная). Если JS блокирует — страница «зависает». Оптимизация загрузки = быстрый сайт.
05
Современный веб: 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 обновляет страницу без перезагрузки.