Как работает веб: браузер, сервер, HTTP, домен и хостинг

Прежде чем писать первый тег, полезно понять, что происходит, когда вы вводите адрес сайта и нажимаете Enter. За доли секунды браузер находит нужный компьютер в интернете, запрашивает у него файлы и превращает полученный текст в страницу. Эти знания пригодятся с первого дня: вы будете понимать, почему страница «не открывается», откуда берётся ошибка 404 и за какую часть сайта отвечает верстальщик.

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

Веб устроен по схеме клиент — сервер. Клиент — программа, которая запрашивает данные; для сайтов это браузер: Chrome, Firefox, Safari, Edge. Сервер — компьютер, который круглосуточно подключён к интернету, хранит файлы сайта и отдаёт их по запросу; обычно это компьютер с Linux в дата-центре.

Главная мысль: сайт хранится на сервере, а не у пользователя. Браузер скачивает копию страницы, показывает её и сохраняет часть файлов в кэш, чтобы в следующий раз загрузить быстрее. Если владелец изменит файл на сервере, новую версию увидят все посетители. А если вы измените страницу у себя в браузере, это увидите только вы и только до перезагрузки — мы проверим это в теме про DevTools.

Путь запроса: от адреса до страницы

Разберём по шагам, что происходит после ввода адреса https://prowid.com/courses/htmlcss?lang=ru.

Шаг 1. Браузер разбирает адрес

URL — полный адрес ресурса в интернете. Браузер делит его на части:

Шаг 2. DNS: из имени в IP-адрес

Компьютеры в сети находят друг друга не по именам, а по числовым IP-адресам вроде 203.0.113.25. Запоминать цифры неудобно, поэтому существует DNS (Domain Name System) — «телефонная книга» интернета. Браузер спрашивает у DNS-сервера IP-адрес домена и только потом подключается к нужному компьютеру:

Браузер → DNS-сервер:    какой IP-адрес у prowid.com?
DNS-сервер → браузер:    prowid.com = 203.0.113.25
Браузер → 203.0.113.25:  открываю защищённое соединение (HTTPS, порт 443)

Ответ DNS кэшируется, поэтому при повторном визите этот шаг почти мгновенный. Команда nslookup prowid.com в терминале покажет IP-адрес сайта.

Шаг 3. HTTP-запрос

Затем браузер отправляет серверу HTTP-запрос — текстовое сообщение по правилам протокола HTTP (HyperText Transfer Protocol). В упрощённом виде он выглядит так:

GET /courses/htmlcss?lang=ru HTTP/1.1
Host: prowid.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/140.0
Accept: text/html
Accept-Language: ru,az;q=0.9,en;q=0.8

Первая строка — самое важное: метод GET («дай мне»), путь и версия протокола. Ниже идут заголовки — служебная информация: какой сайт нужен (Host), какой браузер спрашивает (User-Agent), какие форматы и языки он понимает. Современные сайты используют HTTP/2 и HTTP/3 — они быстрее, но смысл тот же.

Шаг 4. HTTP-ответ

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

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 412
Cache-Control: max-age=600

(пустая строка, а за ней — тело ответа: HTML-документ)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML and CSS course</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 16px; }
    h1 { color: #4338ca; }
  </style>
</head>
<body>
  <h1>HTML and CSS course</h1>
  <p>Start: 1 October, Baku. Duration: 4 months.</p>
  <a href="#">Sign up</a>
</body>
</html>

Каждую строку этого документа вы разберёте в ближайших темах. Сейчас важно другое: сервер присылает текст, а в страницу его превращает браузер. Заголовок Content-Type: text/html говорит: «это HTML, отрисуй его». С text/plain вы увидели бы тот же текст с угловыми скобками, как в блокноте.

Шаг 5. Дозагрузка ресурсов и отрисовка

Читая HTML, браузер находит ссылки на стили, скрипты, картинки и шрифты и за каждым файлом отправляет отдельный запрос — загрузка обычной страницы состоит из десятков запросов. Затем он строит из HTML дерево элементов (DOM), применяет CSS, рассчитывает положение каждого блока и рисует пиксели на экране.

Коды ответа

Каждый ответ начинается с трёхзначного кода статуса. Первая цифра называет группу: 2xx — успех, 3xx — перенаправление, 4xx — ошибка в запросе (на стороне клиента), 5xx — ошибка на стороне сервера.

Страница «404» — тоже HTML. Сервер отвечает кодом 404 и присылает обычный документ, который владелец сайта оформил сам, чтобы посетитель не заблудился:

<style>
  .error {
    max-width: 360px;
    padding: 24px;
    text-align: center;
    border: 2px dashed #f59e0b;
    border-radius: 12px;
    background: #fffbeb;
  }
  .error strong {
    display: block;
    font-size: 56px;
    color: #d97706;
  }
</style>

<div class="error">
  <strong>404</strong>
  <p>Page not found. Check the address or go to the home page.</p>
  <a href="#">Home page</a>
</div>

HTTPS: зачем нужен замок в адресной строке

Обычный HTTP передаёт данные открытым текстом: владелец публичного Wi-Fi или провайдер может их прочитать и даже подменить. HTTPS — тот же HTTP внутри зашифрованного соединения (TLS). Он даёт три гарантии:

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

Сегодня HTTPS — обязательный стандарт: браузеры помечают HTTP-сайты как «Не защищено», геолокация и камера работают только по HTTPS, а поисковики понижают незащищённые сайты. Сертификат бесплатен (например, Let's Encrypt), и большинство хостингов включает его одной кнопкой.

⚠️ Замок означает только то, что соединение зашифровано. Он не доказывает, что сайт честный: у фишинговых страниц тоже бывает HTTPS. Всегда проверяйте домен в адресной строке.

HTML, CSS и JavaScript: три слоя одной страницы

Страница строится из трёх технологий, и у каждой своя роль:

Посмотрим на одну карточку курса. Сначала — только HTML: браузер применяет стили по умолчанию, всё читается и работает, но выглядит как документ, а не как сайт.

<article>
  <h2>HTML and CSS</h2>
  <p>Build websites from scratch: 4 months, Baku.</p>
  <button>Sign up</button>
</article>

Теперь добавим CSS. Разметка не изменилась ни на символ — поменялся только внешний вид:

<style>
  article {
    max-width: 300px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }
  h2 { margin: 0 0 8px; color: #4338ca; }
  button {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: #4f46e5;
  }
</style>

<article>
  <h2>HTML and CSS</h2>
  <p>Build websites from scratch: 4 months, Baku.</p>
  <button>Sign up</button>
</article>

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

// находим кнопку на странице
const button = document.querySelector('button');

// по клику заменяем её текст
button.addEventListener('click', () => {
  button.textContent = 'You are signed up!';
});

Домен, хостинг и статический сайт

Домен — имя сайта: prowid.com, gov.az. Его арендуют у регистратора, обычно на год, и продлевают. Хостинг — место на сервере, где лежат файлы сайта. Чтобы сайт открывался по имени, в DNS-настройках домена указывают IP-адрес сервера хостинга. Аналогия: домен — адрес дома, хостинг — сам дом, в котором живут ваши файлы.

Статический сайт — набор готовых файлов (HTML, CSS, JS, картинки), которые сервер отдаёт как есть, всем одинаково. Такие сайты быстрые, дешёвые и безопасные, их можно бесплатно разместить на GitHub Pages, Netlify или Cloudflare Pages. Динамический сайт собирает HTML программой на сервере (PHP, Python, Node.js) для каждого запроса, часто с данными из базы: личный кабинет, интернет-магазин.

В этом курсе вы делаете статические сайты. Типичная структура такого проекта:

my-site/
├── index.html      ← главная: https://my-site.com/
├── about.html      ← https://my-site.com/about.html
├── css/
│   └── style.css
└── images/
    └── logo.svg

Файл index.html особенный: когда адрес указывает на папку, например просто https://my-site.com/, сервер отдаёт именно его.

Смотрим своими глазами: вкладка Network

Все запросы и ответы можно увидеть в инструментах разработчика (DevTools), встроенных в браузер:

1. Откройте любой сайт и нажмите F12 (на macOS — Cmd + Option + I), затем выберите вкладку Network.
2. Обновите страницу (Ctrl + R, на macOS Cmd + R) — таблица заполнится запросами.
3. Кликните по первой строке с типом document — это сам HTML-документ.
4. На вкладке Headers найдите Status Code и Content-Type, на вкладке Response — текст HTML, который прислал сервер.

Таблица выглядит примерно так (упрощённо):

Name         Status   Type         Size      Time
htmlcss      200      document     14.2 kB   120 ms
style.css    200      stylesheet    8.1 kB    35 ms
main.js      200      script        5.4 kB    41 ms
logo.svg     200      svg+xml       2.3 kB    22 ms
promo.png    404      png           0.6 kB    18 ms

Первая строка — HTML-документ, остальные файлы браузер запросил, прочитав его. Код 404 у promo.png значит, что такой картинки на сервере нет. Фильтры над таблицей (Doc, CSS, JS, Img) оставляют только файлы нужного типа.

💡 Галочка Disable cache на вкладке Network отключает кэш, пока открыты DevTools. Это спасает, когда вы исправили CSS, а изменения «не видны».

Типичные ошибки

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

«HTML — язык программирования». HTML — язык разметки: в нём нет переменных, условий, циклов и вычислений. Он не «выполняется», а описывает, из чего состоит документ; программирование во фронтенде начинается с JavaScript. При этом от качества разметки зависят доступность, SEO и удобство работы с CSS и JS.

«Купил домен — значит, сайт в интернете». Домен — только имя; без хостинга ему некуда указывать. Нужны оба: домен и сервер с файлами (или бесплатный хостинг вроде GitHub Pages со своим адресом).

Ссылка на файл со своего компьютера. Адрес, начинающийся с file://, ведёт на ваш диск — у друга по нему ничего не откроется:

file:///C:/Users/Murad/Desktop/my-site/index.html   ← файл на вашем диске, виден только вам
https://murad.github.io/my-site/                    ← адрес в интернете, откроется у всех

«404 — значит, сервер сломался». Код 404 означает, что сервер работает, но по этому пути ничего нет — чаще всего это опечатка в адресе или имени файла. Проблемы самого сервера — коды 5xx.

Итог

• Браузер (клиент) запрашивает файлы, сервер их хранит и отдаёт; сайт живёт на сервере.
• Путь запроса: URL → DNS находит IP-адрес → HTTP-запрос → ответ с кодом статуса, заголовками и телом → дозагрузка CSS, JS, картинок → отрисовка.
• Коды: 2xx — успех, 3xx — перенаправление, 4xx — ошибка в запросе (404), 5xx — ошибка сервера (500).
• HTTPS шифрует соединение и подтверждает подлинность сайта; сегодня это обязательный стандарт.
• HTML — структура, CSS — оформление, JavaScript — поведение; HTML — язык разметки, а не программирования.
• Домен — имя сайта, хостинг — место для файлов; статический сайт — готовые файлы, которые сервер отдаёт как есть.
• Вкладка Network в DevTools показывает каждый запрос, его статус и ответ сервера.

Практика

1. Откройте любимый сайт, затем вкладку Network, и обновите страницу. Запишите: код статуса и Content-Type HTML-документа, общее число запросов (оно показано внизу панели).
2. Допишите к адресу любого сайта несуществующий путь, например /abc-123. Найдите в Network запрос с кодом 404 и посмотрите, какой HTML прислал сервер во вкладке Response.
3. Разберите на части (протокол, домен, путь, параметры) три адреса: главную страницу любого новостного сайта, результат поиска в Google и страницу товара в интернет-магазине.
4. Сохраните HTML-код карточки курса из этого урока в файл card.html и откройте его в браузере двойным щелчком. Посмотрите на адрес в адресной строке и объясните, почему эта ссылка не откроется у друга. Опишите, что понадобится, чтобы карточку увидели все: какой хостинг, какой будет адрес.

💡 В задании 1 обратите внимание на колонку Type: сколько среди запросов стилей, скриптов, картинок и шрифтов?