Фінальний 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="uk">
<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="uk">
<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.

Бо тепер, коли сторінка існує, ми нарешті можемо зробити так, щоб вона виглядала менше схожою на дизайн від калькулятора.