🧱

Модуль 1. Введение и HTML

Занятие 12
Повторение HTML

Сегодня мы соберём всё, что знаем, в одну страницу «Мои увлечения» — без единой строчки CSS.

👀

Сегодня сделаем вот такое

🏁

Финиш первого модуля!

Сегодня собираем всё, что знаем, в одну страницу.

🏠 Строим дом без ремонта: стены, окна, двери — HTML.

🎨 Обои и мебель (CSS) — в следующем модуле.

🧠

Вспомним теги

Каркас
header nav main section footer
Текст
h1–h6 p strong em br hr
Списки и таблицы
ul ol li table tr th td
Ссылки и медиа
a img figure video iframe
Формы
form label input textarea button
🗺

Шаг 1–2: план и каркас

  1. Нарисуй план на листочке: какие разделы?
  2. Собери скелет: header, nav, main, footer
  3. Каждому разделу — id для меню
<header>
  <h1>Я и шахматы ♟</h1>
  <nav>
    <a href="#hobby">Увлечение</a> |
    <a href="#need">Что нужно</a> |
    <a href="#results">Достижения</a>
  </nav>
</header>
<main>
  <section id="hobby">…</section>
  <section id="need">…</section>
  <section id="results">…</section>
</main>
<footer>© 2026, Кирилл</footer>
🧩

Шаг 3: наполняем разделы

  • 📝 Рассказ — p, strong, img
  • 📋 Что нужно — ul
  • 🏆 Достижения — table
  • 🔗 Полезные сайты — a
  • ❓ Задай вопрос — form
<section id="need">
  <h2>Что нужно</h2>
  <ul><li>Доска</li><li>Фигуры</li><li>Терпение</li></ul>
</section>
<section id="results">
  <h2>Мои достижения</h2>
  <table border="1">
    <tr><th>Год</th><th>Турнир</th><th>Место</th></tr>
    <tr><td>2025</td><td>Школьный</td><td>2</td></tr>
  </table>
</section>
✅

Шаг 4: чек-лист

  1. DOCTYPE, lang, charset, title
  2. Один h1, заголовки по порядку
  3. header, nav, main, footer
  4. Есть список и таблица
  5. У картинок есть alt
  6. Меню работает
  7. Теги закрыты, есть отступы
  8. Нет личных данных
🔎

Как искать ошибки

  • 🪜 Выровняй код: Shift + Alt + F
  • ⬆️ Сломалось здесь — ищи ошибку выше
  • 🧪 Проверь в validator.w3.org
  • 👀 Попроси близких пройти по меню
🖼

Покажи свою работу

Открой страницу и покажи её близким — как экспонат в музее.

Два плюса ➕➕ и одно пожелание 💡

  • Что понравилось?
  • Что можно добавить?
🃏

Запомни!

  • header / nav / main / footerКаркас
  • h1–h6, p, strong, emТекст
  • ul / ol / liСписки
  • a href, img altСсылки и картинки
  • table / tr / tdТаблица
  • form / input / buttonФорма
⌨️

Практика: Мини-проект «Моя страница увлечений» только на HTML

  1. Собери каркас страницы и меню с якорями.
  2. Заполни разделы: «Моё увлечение», «Что нужно», «Мои достижения».
  3. Добавь картинку, список и таблицу.
  4. Добавь форму «Задай вопрос» и подвал.
  5. Проверь по чек-листу из теории, что ничего не забыто.

🚀 Со звёздочкой: Добавь вторую страницу-заготовку через ссылку и блок «Интересные факты» с details и summary.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Покажи свою страницу родным и спроси, что им было бы интересно ещё узнать.