Урок 17. Підсумковий проект: Збір усіх знань у фінальному міні-сайті

План уроку: Підсумковий проект (45 хвилин)

1. Вступ до завдання (5 хвилин)

• Мета уроку: На цьому уроці ми об'єднаємо всі вивчені концепції, щоб створити міні-сайт, який можна використовувати як особистий проєкт або як старт для власного портфоліо.
• Результат: Створений міні-сайт, що складається з декількох сторінок, кожна з яких включатиме елементи тексту, зображень, навігації, форм і таблиць.

2. Структура проекту (5 хвилин)

Розкажіть учням, що їхній міні-сайт складатиметься з наступних сторінок:

• Головна сторінка: короткий вступ про власника сайту чи тему.
• Сторінка блогу: кілька записів у вигляді заголовків, тексту та зображень.
• Сторінка контактів: контактна форма.
• Про нас: опис або біографія власника сайту.

3. Огляд основних кроків (10 хвилин)

• Головна сторінка:

  • Створіть сторінку з основною інформацією про сайт.
  • Додайте заголовок (тег <h1>), параграф із вступним текстом (тег <p>), а також навігаційні посилання на інші сторінки сайту (тег <a>).

• Приклад коду для головної сторінки:

  Показати / Приховати текст
  Увага! У Вас немає прав для перегляду прихованого тексту.
  
  
  

• Сторінка блогу:

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

• Приклад коду для сторінки блогу:
  

  Показати / Приховати текст
  Увага! У Вас немає прав для перегляду прихованого тексту.

• Сторінка контактів:
  • Створіть контактну форму з текстовими полями для імені, email, повідомлення, а також кнопкою "Відправити".
    
    
• Приклад коду для сторінки контактів:
  
  Показати / Приховати текст
  Увага! У Вас немає прав для перегляду прихованого тексту.
  
  
  
• Сторінка "Про нас":
  • Напишіть невелику біографію чи історію про власника сайту або команду.

4. Підсумкове налаштування (10 хвилин)

• Додайте всі сторінки в одну папку і зв'яжіть їх через навігаційні посилання.
• Переконайтесь, що всі сторінки працюють коректно, і кожне посилання веде на потрібну сторінку.
• Якщо є час, ви можете додати базові стилі за допомогою CSS, щоб зробити сайт більш привабливим.

5. Підсумок уроку (5 хвилин)

• Що повторити:
  • Основи структури HTML-сторінки.
  • Створення різних типів контенту: текст, зображення, форми, навігація.
    
    
• Запитання для обговорення:
  • Які елементи вам сподобалось використовувати найбільше?
  • Що можна додати до сайту, щоб зробити його більш професійним?

Домашнє завдання

• Завершити свій міні-сайт, додавши додаткові сторінки або розширивши існуючі.
• Якщо є час, додайте базові CSS стилі, щоб покращити зовнішній вигляд вашого сайту.

Цей підсумковий урок дозволить учням зібрати всі навички в єдиний проект і продемонструвати свою здатність створювати повноцінні веб-сайти.