← Назад к курсу

✊ Урок 1: HTML структура

Создаём семантическую разметку игрового интерфейса

🎯 Цель урока

В этом уроке мы создадим семантическую HTML структуру для игры "Камень-ножницы-бумага". Ты научишься правильно размечать игровой интерфейс, создавать доступные кнопки и организовывать контент.

Мы заложим прочный фундамент для будущего стилизования и добавления JavaScript логики.

Как будет выглядеть структура

Посмотри на итоговый интерфейс, который мы создадим:

0 Победы
0 Поражения
0 Ничьи
0 Серия

👤 Игрок

❓
VS

🤖 Компьютер

❓
Выбери свой ход!

📋 Основная HTML структура

Начнём с создания базовой HTML структуры. Используем семантические элементы для лучшей доступности и SEO.

📋 Базовая структура документа
<!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>
    <main class="game-container">
        
    </main>
</body>
</html>

lang="ru" указывает язык страницы для поисковиков и скринридеров. <main> обозначает основное содержимое страницы.

📊 Заголовок и статистика игры

Создадим заголовок игры и панель статистики, которая будет показывать количество побед, поражений и текущую серию.

📊 Заголовок и статистика
<main class="game-container">
    <header class="game-header">
        <h1>✂️ Камень-Ножницы-Бумага ✂️</h1>
        <p class="subtitle">Классическая игра на ловкость!</p>
    </header>

    <section class="game-stats" aria-label="Игровая статистика">
        <div class="stat-card">
            <span class="stat-number" id="wins">0</span>
            <span class="stat-label">Победы</span>
        </div>
        
        <div class="stat-card">
            <span class="stat-number" id="losses">0</span>
            <span class="stat-label">Поражения</span>
        </div>
        
        <div class="stat-card">
            <span class="stat-number" id="draws">0</span>
            <span class="stat-label">Ничьи</span>
        </div>
        
        <div class="stat-card">
            <span class="stat-number" id="streak">0</span>
            <span class="stat-label">Серия</span>
        </div>
    </section>
</main>

aria-label делает контент доступным для людей с нарушениями зрения. ID элементы понадобятся для обновления статистики через JavaScript.

⚔️ Боевая арена

Создадим центральную часть игры - боевую арену, где будут отображаться выборы игрока и компьютера.

⚔️ Боевая арена
<section class="battle-arena" aria-label="Игровое поле">
    <div class="vs-section">
        <div class="player-side">
            <h3>👤 Игрок</h3>
            <div class="choice-display" id="playerChoice" 
                 aria-live="polite" aria-label="Выбор игрока">
                ❓
            </div>
        </div>
        
        <div class="vs-divider">
            <span aria-hidden="true">VS</span>
        </div>
        
        <div class="computer-side">
            <h3>🤖 Компьютер</h3>
            <div class="choice-display" id="computerChoice" 
                 aria-live="polite" aria-label="Выбор компьютера">
                ❓
            </div>
        </div>
    </div>
</section>

aria-live="polite" сообщает скринридеру об изменениях содержимого. aria-hidden="true" скрывает декоративный элемент от программ чтения экрана.

🎮 Кнопки выбора

Создадим интерактивные кнопки для выбора хода. Важно правильно их разметить для удобства использования и доступности.

🎮 Кнопки игрового выбора
<section class="choice-buttons" aria-label="Выбор хода">
    <button class="choice-btn" id="rock-btn" type="button"
            onclick="makeChoice('rock')"
            aria-label="Выбрать камень">
        <span class="choice-emoji" aria-hidden="true">✊</span>
        <span class="choice-label">Камень</span>
    </button>
    
    <button class="choice-btn" id="paper-btn" type="button"
            onclick="makeChoice('paper')"
            aria-label="Выбрать бумагу">
        <span class="choice-emoji" aria-hidden="true">✋</span>
        <span class="choice-label">Бумага</span>
    </button>
    
    <button class="choice-btn" id="scissors-btn" type="button"
            onclick="makeChoice('scissors')"
            aria-label="Выбрать ножницы">
        <span class="choice-emoji" aria-hidden="true">✌️</span>
        <span class="choice-label">Ножницы</span>
    </button>
</section>

type="button" предотвращает отправку формы. Отдельные span элементы позволяют гибко стилизовать эмодзи и текст.

📋 Область результатов

Добавим область для отображения результатов игры и дополнительных элементов интерфейса.

📋 Результаты и управление
<section class="result-section">
    <div class="result-display" id="gameResult" 
         aria-live="assertive" aria-label="Результат игры">
        <p class="result-text">Выбери свой ход!</p>
    </div>
</section>

<section class="game-controls">
    <button class="control-btn reset-btn" type="button"
            onclick="resetGame()"
            aria-label="Сбросить статистику игры">
        🔄 Сброс
    </button>
    
    <button class="control-btn rules-btn" type="button"
            onclick="showRules()"
            aria-label="Показать правила игры">
        📖 Правила
    </button>
</section>

aria-live="assertive" немедленно сообщает об изменениях результата, что важно для доступности.

🏗️ Общая структура HTML

Посмотри на полную иерархию элементов нашей игры:

<main class="game-container"> ├─ <header class="game-header"> // Заголовок │ ├─ <h1> Название игры │ └─ <p> Подзаголовок ├─ <section class="game-stats"> // Статистика │ ├─ <div class="stat-card"> Победы │ ├─ <div class="stat-card"> Поражения │ ├─ <div class="stat-card"> Ничьи │ └─ <div class="stat-card"> Серия ├─ <section class="battle-arena"> // Игровое поле │ └─ <div class="vs-section"> │ ├─ <div class="player-side"> Игрок │ ├─ <div class="vs-divider"> VS │ └─ <div class="computer-side"> Компьютер ├─ <section class="choice-buttons"> // Кнопки выбора │ ├─ <button> Камень │ ├─ <button> Бумага │ └─ <button> Ножницы ├─ <section class="result-section"> // Результаты │ └─ <div class="result-display"> └─ <section class="game-controls"> // Управление ├─ <button> Сброс └─ <button> Правила

♿ Доступность (Accessibility)

aria-label: Описывает назначение элементов для программ чтения экрана. Особенно важно для кнопок с только эмодзи.
aria-live: Сообщает об изменениях контента. "polite" - после завершения текущего чтения, "assertive" - немедленно.
aria-hidden="true": Скрывает декоративные элементы (например, эмодзи) от программ чтения экрана, чтобы не засорять информацию.
Семантические теги: <main>, <section>, <header> помогают программам понять структуру страницы и навигацию по ней.

🎯 Твоё задание

Создай HTML файл со следующей структурой:

  1. Базовую HTML5 структуру с правильным DOCTYPE и meta-тегами
  2. Заголовок игры с названием и подзаголовком
  3. Панель статистики с четырьмя карточками счётчиков
  4. Боевую арену с отображением выборов игрока и компьютера
  5. Три кнопки выбора хода с эмодзи и подписями
  6. Область результатов с сообщениями для игрока
  7. Кнопки управления (сброс и правила)
  8. Правильные aria-атрибуты для доступности

💡 Используй семантические HTML5 теги и не забывай про доступность!

Следующий урок: CSS стилизация →