Практика HTML: собираем учебную страницу услуги

Этот урок объединяет предыдущие темы в один артефакт — страницу услуги. Так вы проверяете, что теги «живут» вместе, а не в изолированных сниппетах.

Что должно быть на странице

  1. Семантический каркас header/main/footer
  2. Оффер с h1 и коротким текстом
  3. Таблица тарифов
  4. Форма заявки с label
  5. SEO-теги в head

Критерии качества

Валидная вложенность, один h1, рабочие name у полей, alt у изображений. Стили можно добавить позже в курсе CSS — сейчас важна разметка.

Куда двигаться

После приёмки проекта откройте CSS с нуля и начните оформлять тот же HTML.

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Аудит сайта — заявка</title>
  <meta name="description" content="Учебная страница услуги: оффер, тарифы и форма заявки на аудит сайта.">
</head>
<body>
  <header><nav><a href="/programming/html">Обучение HTML</a></nav></header>
  <main>
    <section>
      <h1>Аудит сайта за 5 дней</h1>
      <p>Найдём технические ошибки и точки роста трафика.</p>
    </section>
    <section>
      <h2>Тарифы</h2>
      <table>
        <thead><tr><th>Пакет</th><th>Срок</th><th>Цена</th></tr></thead>
        <tbody><tr><td>Базовый</td><td>5 дней</td><td>15 000 ₽</td></tr></tbody>
      </table>
    </section>
    <section>
      <h2>Оставить заявку</h2>
      <form method="post" action="#">
        <label for="c-name">Имя</label>
        <input id="c-name" name="name" required>
        <label for="c-email">Email</label>
        <input id="c-email" name="email" type="email" required>
        <button type="submit">Отправить</button>
      </form>
    </section>
  </main>
  <footer><p>Учебный проект курса HTML</p></footer>
</body>
</html>

Практическое задание

Задание: сдайте итоговый index.html по чек-листу курса.

  • Семантика header/main/footer и секции с h2
  • Таблица минимум 2×3 и форма с двумя полями + submit
  • title, description, viewport, lang="ru"
  • Нет table-вёрстки макета — table только для тарифов