🎯 Цель урока

В этом уроке мы изучим основы HTML и создадим базовую структуру для нашей игры "Волшебная кнопка". HTML (HyperText Markup Language) — это язык разметки, который определяет структуру и содержимое веб-страниц.

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

• Структуру HTML документа
• Основные HTML теги
• Как создать кнопку
• Как добавить заголовки и текст

📚 Основы HTML

Что такое HTML?

HTML состоит из элементов, которые обозначаются тегами. Теги заключаются в угловые скобки: <тег>. Большинство тегов имеют открывающую и закрывающую части, например: <h1>Заголовок</h1>

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

<!DOCTYPE html>
Объявляет тип документа как HTML5

<html>
Корневой элемент HTML документа

<head>
Содержит метаинформацию о странице

<title>
Заголовок страницы (отображается в браузере)

<body>
Видимая часть страницы

<h1>
Главный заголовок на странице

<button>
Интерактивная кнопка

<div>
Контейнер для группировки элементов

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

Давайте создадим простейшую версию нашей игры:

<!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>
      <h1>Волшебная кнопка</h1>
      <p>Нажми на кнопку и увидишь магию!</p>
      <button>✨ Магия! ✨</button>
    </div>
  </body>
</html>

🔍 Разбор кода:

• <!DOCTYPE html> — говорит браузеру, что это HTML5 документ
• lang="ru" — указывает язык страницы для поисковых систем
• <meta charset="UTF-8"> — поддержка русских букв и символов
• <div> — контейнер, который группирует наш контент

🎮 Результат

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

Волшебная кнопка

Нажми на кнопку и увидишь магию!

📝 Задание для практики:

Создайте новый файл lesson1.html и скопируйте туда код выше. Откройте файл в браузере и посмотрите на результат!

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

Создайте новый файл
Откройте текстовый редактор (например, Блокнот) и создайте новый файл
Добавьте базовую структуру
Начните с <!DOCTYPE html> и добавьте теги <html>, <head> и <body>
Заполните head
Добавьте title и meta теги для правильного отображения
Создайте контент
В body добавьте заголовок, описание и кнопку
Сохраните и проверьте
Сохраните файл с расширением .html и откройте в браузере

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

Базовую структуру HTML документа
Основные HTML теги и их назначение
Как создать заголовки, текст и кнопки
Важность правильной разметки

🚀 Что дальше?

В следующем уроке мы изучим CSS и сделаем нашу кнопку красивой и стильной! Добавим цвета, эффекты и анимации.

🏗️ HTML структура