Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все занятия обоих курсов, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт

HTML и CSS с нуля: создаём свои сайты Модуль 1. Введение и HTML

Занятие 1.12

Повторение HTML

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

Изучаем: Обобщение тегов
Результат: Мини-проект «Моя страница увлечений» только на HTML

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

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

Показать код примера 
<header>
  <h1>Я и шахматы ♟</h1>
  <nav>
    <a href="#hobby">Увлечение</a> |
    <a href="#need">Что нужно</a> |
    <a href="#results">Достижения</a>
  </nav>
</header>
<main>
  <section id="hobby">
    <h2>Моё увлечение</h2>
    <img src="/images/mountain.svg" alt="Горы — символ цели" width="200">
    <p>Шахматы учат <strong>думать наперёд</strong>.</p>
  </section>
  <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>
</main>
<footer><p>© 2026, Кирилл</p></footer>

💡 Объяснение

Время собрать всё вместе

За 11 занятий ты изучил(а) почти все основные теги HTML. Сегодня — мини-проект: страница «Мои увлечения», в которой используется всё сразу, но без CSS. Это как построить дом без ремонта: стены, окна и двери уже на месте, а обои поклеим в следующем модуле.

Шаг 1. План

Прежде чем писать код, ответь на вопросы и набросай план на листочке:

  • О каком увлечении страница?
  • Какие будут разделы (это будущие h2 и section)?
  • Что можно показать списком, а что таблицей?
  • Какая картинка подойдёт и какой у неё будет alt?

Шаг 2. Каркас

Начинаем с семантического скелета: header с h1 и nav, main с разделами section, footer. Каждому разделу сразу даём id — пригодится для меню-якорей.

Шаг 3. Наполнение

Разделы и подходящие теги:

  • Моё увлечение — абзацы p, выделения strong/em, картинка img в figure.
  • Что нужно — маркированный список ul; с чего начать — нумерованный ol.
  • Мои достижения — таблица: год, событие, результат.
  • Полезные ссылки — ссылки на внешние сайты с target="_blank".
  • Задай вопрос — небольшая форма: имя, вопрос, кнопка.
  • Видео или карта (по желанию) — iframe.

Шаг 4. Проверка по чек-листу

  1. Есть <!DOCTYPE html>, lang="ru", meta charset, свой title.
  2. Один h1, заголовки идут по порядку.
  3. Используются header, nav, main, footer.
  4. Есть хотя бы один список и одна таблица.
  5. У всех картинок есть осмысленный alt.
  6. Все ссылки меню работают (id совпадают с href).
  7. Все теги закрыты, есть отступы.
  8. На странице нет личных данных.

Как читать свой код на ошибки

  • Выровняй код (Shift+Alt+F в VS Code) — по «лесенке» отступов сразу видно незакрытые теги.
  • Если что-то «поехало» — ищи ошибку выше того места, где сломалось.
  • Проверь страницу в валидаторе validator.w3.org.
  • Попроси близких пройти по твоему меню и найти, что не работает.

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

Первый модуль пройден! Покажи страницу близким и попроси отзыв по правилу «два плюса и одно пожелание»: что понравилось и что можно добавить. Запиши пожелания — они пригодятся для итогового проекта.

🔒 Работаешь без аккаунта? Сохрани код страницы в файл в VS Code: на сайте черновик хранится только в этом браузере и может пропасть.

Дальше в курсе от rth.su — CSS: цвета, шрифты и раскладка. Самое интересное впереди!

Проверь себя

  1. Какие теги ты использовал(а) на своей странице? Назови не меньше 15.
  2. Какой тег было сложнее всего применить и почему?
  3. Что ты хочешь изменить во внешнем виде страницы, когда изучишь CSS?

⌨️ Практика

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

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

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

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход

💬 Вопросы по занятию

Не получается — спроси здесь. Другие ученики и преподаватель видят вопросы и отвечают. Пиши вежливо: грубые сообщения сайт не примет.

🔒 Писать могут только зарегистрированные. Читать обсуждение можно и без аккаунта. Регистрация · Вход

Вопросов пока нет. Задай первый — это помогает и тебе, и другим.