🎯 Цель урока

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

💡 Что вы узнаете:

• Структуру HTML документа для веб-приложения
• Работу с формами и полями ввода
• Создание кнопок и интерактивных элементов
• Организацию контента в блоки и секции
• Семантическую разметку

📚 Новые HTML элементы

Элементы, которые мы будем использовать:

<input>
Поле для ввода текста (имени пользователя)

<button>
Интерактивные кнопки для действий

onclick=""
Атрибут для обработки кликов мышью

id=""
Уникальный идентификатор элемента

class=""
CSS класс для стилизации

placeholder=""
Подсказка в поле ввода

🛠️ Создание базовой структуры

Давайте создадим 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>
    <div class="game-container">
      <h1>😊 Генератор комплиментов 😊</h1>
      <p>Создай хорошее настроение себе и друзьям!</p>
      
      <!-- Секция ввода имени -->
      <div class="input-section">
        <p>Как тебя зовут?</p>
        <input type="text" id="nameInput" placeholder="Твоё имя">
        <button onclick="setName()">✨ Сохранить имя</button>
      </div>

      <!-- Основная кнопка генерации -->
      <button onclick="generateCompliment()">
        🎁 Получить комплимент!
      </button>

      <!-- Область отображения комплимента -->
      <div id="complimentDisplay">
        Нажми на кнопку, чтобы получить свой первый комплимент! 🌈
      </div>
    </div>
  </body>
</html>

🔍 Разбор структуры:

• .game-container — главный контейнер приложения
• .input-section — секция для ввода имени
• id="nameInput" — поле для ввода имени
• id="complimentDisplay" — область для показа комплимента
• onclick — обработчики для кнопок

📝 Подробно о новых элементах

1. Поле ввода (input)

<input type="text" id="nameInput" placeholder="Твоё имя">

Этот элемент создаёт поле для ввода текста:

type="text" — указывает тип поля (текст)
id="nameInput" — уникальный идентификатор для JavaScript
placeholder="Твоё имя" — текст-подсказка в поле

2. Кнопки с обработчиками

<button onclick="setName()">✨ Сохранить имя</button>

Кнопка с обработчиком события:

onclick="setName()" — при клике вызывается функция setName()
Эмодзи ✨ делают интерфейс более дружелюбным

3. Области отображения

<div id="complimentDisplay">
  Нажми на кнопку, чтобы получить свой первый комплимент! 🌈
</div>

Контейнер для динамического содержимого:

id="complimentDisplay" — для обращения из JavaScript
Изначально содержит приветственный текст

🎮 Результат

Вот как будет выглядеть наша базовая HTML структура:

😊 Генератор комплиментов 😊

Создай хорошее настроение себе и друзьям!

Как тебя зовут?

Нажми на кнопку, чтобы получить свой первый комплимент! 🌈

🔧 Пошаговое создание

Создайте базовую HTML структуру
Начните с DOCTYPE, html, head и body
Добавьте главный контейнер
Создайте div с классом game-container
Добавьте заголовок и описание
Используйте h1 и p для основной информации
Создайте секцию ввода имени
Добавьте div с input и button
Добавьте основную кнопку
Кнопка для генерации комплиментов
Создайте область отображения
Div с id для показа результатов

🎓 Что вы изучили

Создание форм и полей ввода
Использование атрибутов id для JavaScript
Обработчики событий onclick
Placeholder для подсказок пользователю
Организацию контента в семантичные блоки
Структуру интерактивного приложения

🚀 Что дальше?

В следующем уроке мы изучим CSS и создадим красивый дизайн с градиентами, карточками и адаптивной сеткой!

🏗️ HTML основы