Как устроен веб: твоя первая HTML-страница

Каждый день ты открываешь десятки веб-страниц: новости, видео, сайт школы. Но что происходит между моментом, когда ты вводишь адрес, и моментом, когда страница появляется на экране? И из чего она вообще состоит? В этом уроке ты это узнаешь и напишешь свою первую веб-страницу.

Что происходит, когда ты открываешь сайт?

Каждый сайт хранится на сервере — компьютере, который постоянно подключён к интернету и хранит файлы. Твой браузер (Chrome, Firefox, Safari, Edge) — это клиент: он запрашивает у сервера файлы и показывает их тебе. Этот «разговор» проходит в несколько шагов:

1. 1
   Ты вводишь адрес

   Ты вводишь в адресную строку URL, например https://example.com/about, или нажимаешь на ссылку.

2. 2
   Находится сервер

   Система DNS превращает доменное имя вроде example.com в числовой адрес сервера — IP-адрес. Это похоже на телефонную книгу: ты знаешь имя, а номер находит DNS.

3. 3
   Отправляется запрос

   Браузер отправляет серверу HTTP-запрос: «Дай мне страницу /about». Буква S в HTTPS означает «secure» (защищённый): данные по пути шифруются.

4. 4
   Приходит ответ

   Сервер отвечает HTML-файлом и кодом состояния: 200 означает, что всё в порядке, а 404 — что такой страницы нет.

5. 5
   Страница строится

   Браузер читает HTML, загружает упомянутые в нём CSS-файлы, изображения и скрипты и отрисовывает страницу на экране.

HTML, CSS и JavaScript

Каждая веб-страница — совместная работа трёх языков. Её можно сравнить с домом: HTML — это стены и комнаты, то есть структура; CSS — краска и мебель, то есть внешний вид; а JavaScript — электричество: то, что происходит, когда нажимаешь кнопку.

Теги, элементы и атрибуты

HTML размечает содержимое с помощью тегов — слов в угловых скобках. Большинство тегов парные: открывающий <p> и закрывающий </p> со слешем. Открывающий тег, содержимое и закрывающий тег вместе образуют элемент.

• Открывающий тег <p> показывает, где начинается элемент.
• Закрывающий тег </p> показывает, где элемент заканчивается, — обрати внимание на слеш перед именем.
• Атрибут добавляет открывающему тегу дополнительную информацию и записывается в виде name="value", например title="Tip".
• У пустых элементов (void elements), таких как <br>, <hr> и <img>, нет содержимого и закрывающего тега.

<p>Plain text and <strong>important text</strong>.</p>
<p title="Surprise!">Hold your mouse over this paragraph.</p>
<p>First line<br>Second line</p>
<hr>
<p>Nested: <em>italic with <strong>bold</strong> inside</em></p>

Структура HTML-документа

Каждый файл с расширением .html строится по одному и тому же «скелету». Запомни его — так начинается любая страница:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My first page</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #e34f26; }
  </style>
</head>
<body>
  <!-- Everything inside body is visible -->
  <h1>Hello, world!</h1>
  <p>This is my first web page.</p>
  <p>I am learning <strong>HTML</strong>.</p>
</body>
</html>

• <!DOCTYPE html> сообщает браузеру, что это современный HTML-документ (HTML5). Всегда пишется в первой строке.
• <html lang="en"> — корневой элемент, всё остальное находится внутри него. Атрибут lang указывает язык страницы: ru для русской, az для азербайджанской, tr для турецкой.
• <head> содержит сведения о странице и на экране не отображается: <meta charset="UTF-8"> нужен, чтобы буквы вроде ё, ş и ə выводились правильно, viewport — для правильного масштаба на телефонах, <title> — это название на вкладке браузера, а <style> содержит правила CSS — их мы изучим в модуле по CSS.
• <body> содержит всё, что видно на странице: заголовки, текст, изображения, кнопки.
• <!-- … --> — это комментарий, заметка для людей. Браузер её не показывает.