Финальный HTML-Проект

С возвращением.

Ты дошёл до последнего урока этого HTML-курса.

Поздравляю.

Браузер выжил.

Клавиатура выжила.

И самое главное — ты тоже выжил в загадочном мире угловых скобок.

В этом уроке мы построим полную HTML-страницу, используя всё, что ты изучил:

структуру документа;
заголовки и абзацы;
ссылки;
изображения;
списки;
таблицы;
формы;
семантический HTML.

Пока без CSS.

Пока без JavaScript.

Только HTML.

Потому что прежде чем украшать дом, нам нужны стены, двери, окна и крыша.

Иначе мы просто красим воздух.

Что Ты Построишь

Ты построишь простую персональную страницу для обучения.

Страница будет содержать:

header;
навигацию;
главный контент;
секции;
статьи;
изображение;
список;
таблицу;
контактную форму;
aside;
footer.

Это не просто случайное упражнение.

Это твоя первая полная HTML-страница.

Маленькая?

Да.

Простая?

Да.

Важная?

Абсолютно.

Маленькие страницы становятся большими сайтами.

Так же, как маленькие баги становятся трёхчасовыми приключениями с debugging.

Настройка Проекта

Создай папку проекта:

mkdir html-final-project
cd html-final-project
touch final-project.html
mkdir images

Положи одно изображение в папку images.

Например:

images/profile.jpg

Можешь использовать любое изображение:

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

Всё подходит.

Базовая HTML-Структура

Открой final-project.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>

</body>
</html>

Это фундамент.

Ещё не красиво.

Но правильно.

А правильная структура — первая победа.

Красивая, но сломанная страница всё равно сломана.

Простая и правильная страница может расти.

Header и Навигация

Внутри body добавь header:

<header id="top">
  <h1>Мой Учебный Сайт</h1>
  <p>Простой HTML-проект, построенный шаг за шагом.</p>

  <nav>
    <a href="#about">О Проекте</a>
    <a href="#lessons">Уроки</a>
    <a href="#schedule">План</a>
    <a href="#contact">Контакт</a>
  </nav>
</header>

header представляет вступление страницы.

nav содержит навигационные ссылки.

Каждая ссылка ведёт к секции на этой же странице.

Например:

<a href="#about">О Проекте</a>

ведёт к:

<section id="about">

Так работает внутренняя навигация на странице.

Маленькая деталь.

Очень полезная.

Как маленький лифт внутри страницы.

Главный Контент

После header добавь main:

<main>

</main>

Элемент main содержит главный контент страницы.

Именно здесь живёт важное содержимое.

Не footer.

Не повторяющаяся навигация.

Не случайный хаос в солнцезащитных очках.

Секция About

Внутри main добавь эту секцию:

<section id="about">
  <h2>О Этом Проекте</h2>

  <p>Эта страница — мой финальный HTML-проект. Она использует многие HTML-элементы, которые я изучил во время курса.</p>

  <img src="images/profile.jpg" alt="Профильное изображение для учебного проекта" width="300">

  <p>Цель — попрактиковать структуру, контент, ссылки, изображения, списки, таблицы, формы и семантический HTML.</p>
</section>

Эта секция использует:

section;
h2;
p;
img;
alt;
width.

Это уже довольно много HTML.

Страница начинает просыпаться.

Медленно.

Как разработчик до кофе.

Секция Уроков

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

<section id="lessons">
  <h2>Что Я Изучил</h2>

  <p>Во время этого курса я изучил самые важные основы HTML.</p>

  <ul>
    <li>Структура HTML-документа</li>
    <li>Заголовки и абзацы</li>
    <li>Списки и ссылки</li>
    <li>Изображения и медиа</li>
    <li>Таблицы и формы</li>
    <li>Семантический HTML</li>
  </ul>
</section>

Список здесь — правильный элемент.

Почему?

Потому что это группа связанных пунктов.

HTML любит, когда мы выбираем правильный элемент.

Браузер успокаивается.

Разработчик успокаивается.

Все выигрывают.

Почти.

Выделенные Уроки

Теперь добавь секцию со статьями:

<section>
  <h2>Выделенные Уроки</h2>

  <article>
    <h3>Ссылки и Навигация</h3>
    <p>Этот урок объясняет, как страницы соединяются между собой с помощью ссылок.</p>
  </article>

  <article>
    <h3>Формы и Ввод Данных</h3>
    <p>Этот урок объясняет, как пользователи могут отправлять информацию через формы.</p>
  </article>
</section>

Каждый article — это маленький независимый блок контента.

Он имеет собственный заголовок.

Он имеет собственное значение.

Он может существовать самостоятельно.

Очень ответственно.

В отличие от некоторых CSS-layouts, которые мы встретим позже.

Таблица Плана

Теперь добавь таблицу:

<section id="schedule">
  <h2>План Обучения</h2>

  <p>Эта таблица показывает простой план обучения.</p>

  <table>
    <caption>Недельный План Практики HTML</caption>

    <thead>
      <tr>
        <th>День</th>
        <th>Тема</th>
        <th>Время</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Понедельник</td>
        <td>HTML-Структура</td>
        <td>30 минут</td>
      </tr>
      <tr>
        <td>Среда</td>
        <td>Ссылки и Изображения</td>
        <td>45 минут</td>
      </tr>
      <tr>
        <td>Пятница</td>
        <td>Формы и Таблицы</td>
        <td>45 минут</td>
      </tr>
    </tbody>
  </table>
</section>

Это хорошее использование таблицы.

Строки.

Колонки.

Структурированные данные.

Без layout-преступлений.

Frontend-полиция может отдохнуть.

Пока что.

Контактная Форма

Теперь добавь форму:

<section id="contact">
  <h2>Контакт</h2>

  <p>Используй эту форму, чтобы отправить простое сообщение.</p>

  <form action="#" method="post">
    <label for="name">Имя</label>
    <input id="name" name="name" type="text" required>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>

    <label for="topic">Тема</label>
    <select id="topic" name="topic">
      <option value="question">Вопрос</option>
      <option value="feedback">Отзыв</option>
      <option value="project">Проект</option>
    </select>

    <label for="message">Сообщение</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Отправить Сообщение</button>
  </form>
</section>

Эта форма ещё не будет отправлять настоящий email.

Для этого нужен backend или form service.

Но HTML-структура правильная.

А правильная структура имеет значение.

Многие сайты в интернете пропустили этот этап и сразу перешли к страданию.

Aside

Добавь маленький совет для обучения:

<aside>
  <h2>Совет для Обучения</h2>
  <p>Практикуй HTML, строя маленькие страницы. Чтение полезно, но именно строительство — это момент, когда мозг наконец просыпается.</p>
</aside>

aside содержит дополнительную связанную информацию.

Это не главный контент.

Это боковая заметка.

Как мудрый друг, который стоит рядом с кофе.

Footer

После main добавь footer:

<footer>
  <p>&copy; 2026 Мой Учебный Сайт</p>
  <p><a href="#top">Наверх</a></p>
</footer>

Ссылка возвращает к:

<header id="top">

Это простая, но полезная функция.

Маленькая победа.

Как закрыть все вкладки браузера после исправления одного бага.

Полный Код Проекта

Вот полная страница:

<!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>
  <header id="top">
    <h1>Мой Учебный Сайт</h1>
    <p>Простой HTML-проект, построенный шаг за шагом.</p>

    <nav>
      <a href="#about">О Проекте</a>
      <a href="#lessons">Уроки</a>
      <a href="#schedule">План</a>
      <a href="#contact">Контакт</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>О Этом Проекте</h2>

      <p>Эта страница — мой финальный HTML-проект. Она использует многие HTML-элементы, которые я изучил во время курса.</p>

      <img src="images/profile.jpg" alt="Профильное изображение для учебного проекта" width="300">

      <p>Цель — попрактиковать структуру, контент, ссылки, изображения, списки, таблицы, формы и семантический HTML.</p>
    </section>

    <section id="lessons">
      <h2>Что Я Изучил</h2>

      <p>Во время этого курса я изучил самые важные основы HTML.</p>

      <ul>
        <li>Структура HTML-документа</li>
        <li>Заголовки и абзацы</li>
        <li>Списки и ссылки</li>
        <li>Изображения и медиа</li>
        <li>Таблицы и формы</li>
        <li>Семантический HTML</li>
      </ul>
    </section>

    <section>
      <h2>Выделенные Уроки</h2>

      <article>
        <h3>Ссылки и Навигация</h3>
        <p>Этот урок объясняет, как страницы соединяются между собой с помощью ссылок.</p>
      </article>

      <article>
        <h3>Формы и Ввод Данных</h3>
        <p>Этот урок объясняет, как пользователи могут отправлять информацию через формы.</p>
      </article>
    </section>

    <section id="schedule">
      <h2>План Обучения</h2>

      <p>Эта таблица показывает простой план обучения.</p>

      <table>
        <caption>Недельный План Практики HTML</caption>

        <thead>
          <tr>
            <th>День</th>
            <th>Тема</th>
            <th>Время</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Понедельник</td>
            <td>HTML-Структура</td>
            <td>30 минут</td>
          </tr>
          <tr>
            <td>Среда</td>
            <td>Ссылки и Изображения</td>
            <td>45 минут</td>
          </tr>
          <tr>
            <td>Пятница</td>
            <td>Формы и Таблицы</td>
            <td>45 минут</td>
          </tr>
        </tbody>
      </table>
    </section>

    <section id="contact">
      <h2>Контакт</h2>

      <p>Используй эту форму, чтобы отправить простое сообщение.</p>

      <form action="#" method="post">
        <label for="name">Имя</label>
        <input id="name" name="name" type="text" required>

        <label for="email">Email</label>
        <input id="email" name="email" type="email" required>

        <label for="topic">Тема</label>
        <select id="topic" name="topic">
          <option value="question">Вопрос</option>
          <option value="feedback">Отзыв</option>
          <option value="project">Проект</option>
        </select>

        <label for="message">Сообщение</label>
        <textarea id="message" name="message" rows="5" required></textarea>

        <button type="submit">Отправить Сообщение</button>
      </form>
    </section>

    <aside>
      <h2>Совет для Обучения</h2>
      <p>Практикуй HTML, строя маленькие страницы. Чтение полезно, но именно строительство — это момент, когда мозг наконец просыпается.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Мой Учебный Сайт</p>
    <p><a href="#top">Наверх</a></p>
  </footer>
</body>
</html>

Практика

Построй собственную версию этой страницы.

Измени:

title;
изображение;
список уроков;
план;
темы формы;
текст footer.

Не просто копируй.

Изменяй.

Немного ломай.

Исправляй.

Именно так обучение становится реальным.

Мини-Задание

Создай вторую страницу:

about.html

Добавь:

header;
навигацию назад к final-project.html;
одно изображение;
один список;
один абзац о том, что ты изучил;
footer.

Потом добавь ссылку на неё с главной страницы проекта.

Теперь у тебя больше чем одна страница.

Именно так сайт начинает расти.

Как растение.

Но с большим количеством угловых скобок.

Итог

Сегодня ты построил полный HTML-проект.

Ты использовал:

структуру документа;
заголовки;
абзацы;
навигационные ссылки;
изображения;
списки;
таблицы;
формы;
семантические элементы;
ссылки в footer.

Это настоящий фундамент.

Не стилизованный.

Не интерактивный.

Но структурно правильный.

HTML — это скелет веба.

CSS его оденет.

JavaScript заставит его танцевать.

Но без HTML нечего одевать и нечего заставлять танцевать.

Курс Завершён

Поздравляю.

Ты завершил HTML-курс.

Теперь ты понимаешь базовую структуру веб-страниц.

Следующий шаг?

CSS.

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