Что мы сделаем за этот урок

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

Ты разберёшь ключевые теги HTML и сразу увидишь, как они работают в живом примере.

  • Создадим файл и базовую структуру страницы
  • Соберём интерфейс мини-игры из семантических блоков
  • Добавим кнопки действий и область результата
  • Подготовим удобный шаблон для следующих проектов

Шаг 1. Создай файл проекта

Создай папку проекта и файл index.html. Вставь базовый каркас документа:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Мини-игра: выбор пути</title>
</head>
<body>

</body>
</html>

Это обязательная основа любой HTML-страницы: язык, кодировка, адаптивный viewport и тело документа.

Шаг 2. Добавь разметку мини-игры

Теперь вставь в <body> структуру интерфейса:

<main>
  <h1>Мини-игра «Выбор пути»</h1>
  <p>Ты стоишь у развилки. Выбери направление и посмотри результат.</p>

  <section>
    <h2>Твой выбор</h2>
    <button type="button">Пойти в лес</button>
    <button type="button">Пойти к реке</button>
    <button type="button">Остаться в лагере</button>
  </section>

  <section>
    <h2>Результат</h2>
    <p>Здесь появится итог твоего выбора.</p>
  </section>
</main>

Ты уже используешь важные теги:

  • main — основное содержимое страницы
  • h1 и h2 — заголовки уровней
  • p — обычный текст
  • section — смысловые блоки
  • button — интерактивные элементы интерфейса

Шаг 3. Сделай читабельный макет

Добавь стили прямо в этот же файл, внутрь <head>, чтобы страница выглядела аккуратно:

<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f3f4f6;
    color: #111827;
  }

  main {
    max-width: 680px;
    margin: 40px auto;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  h1 {
    margin-top: 0;
  }

  section {
    margin-top: 24px;
  }

  button {
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    cursor: pointer;
  }
</style>

Здесь HTML и CSS работают вместе: HTML задаёт структуру, CSS отвечает за внешний вид.

Шаг 4. Подготовь место под интерактив

Даже без JavaScript полезно сразу заложить правильную структуру. Добавь идентификатор блоку результата:

<section>
  <h2>Результат</h2>
  <p id="result">Сделай выбор, чтобы увидеть развитие истории.</p>
</section>

Позже ты сможешь менять текст внутри #result через JavaScript, не переделывая всю страницу.

Что ты выучил в этом уроке

  • Как выглядит базовый HTML-документ
  • Как строить интерфейс из семантических блоков
  • Как организовать заголовки, текст и кнопки
  • Как подготовить разметку к будущей интерактивности

Практика на 20 минут

Закрепи материал и доработай мини-игру:

  • Добавь четвёртую кнопку с новым сценарием
  • Создай ещё один информационный блок с правилами
  • Измени заголовок и описание под свою тему (космос, квест, приключение)
  • Сделай два новых экрана в отдельных section

Так ты не просто запомнишь теги, а начнёшь уверенно собирать страницы под реальные задачи.

Обложка книги JavaScript с нуля: учимся программировать, создавая игры

Книга по JavaScript для начинающих

«JavaScript с нуля: учимся программировать, создавая игры»

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

Читать книгу на ЛитРес →