Урок 16. Практичне завдання: Створення простого односторінкового сайту

План уроку: Створення односторінкового сайту (25-30 хвилин)

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

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

2. Підготовка та планування структури сайту (5 хвилин)

• Розкажіть про важливість планування структури сторінки перед початком кодування.
• Поясніть, що сайт повинен мати:
  • Заголовок (наприклад, назву сайту).
  • Меню навігації з посиланнями.
  • Основний контент — текстові блоки з параграфами, списками та зображеннями.
  • Таблицю для відображення даних.
  • Футер з інформацією про автора сайту або копірайт.

Приклад структури сайту:

<header> - заголовок сайту
<nav> - меню навігації
<section> - основний контент
<table> - таблиця
<footer> - футер з інформацією

3. Створення HTML-структури сайту (10 хвилин)

• Крок 1: Створіть файл index.html і підготуйте базову структуру HTML-документа.

Код для початку:

• Пояснення:
  • В <header> розміщено заголовок сайту.
  • Елемент <nav> містить меню з посиланнями на різні частини сторінки.
  • Основний контент знаходиться в секціях <section>: про автора, проекти та контакти.
  • Елемент <footer> включає копірайт та контактну інформацію.

4. Додавання таблиці (5 хвилин)

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

Приклад таблиці:

• Пояснення:
  • Таблиця містить <thead> для заголовків колонок та <tbody> для рядків з даними.

5. Оформлення та перевірка роботи сайту (5 хвилин)

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

6. Підсумок уроку та обговорення (5 хвилин)

• Що повторити:

  • Як створити основну структуру HTML-документа.
  • Як додавати заголовки, параграфи, зображення та таблиці.
  • Як організувати меню для навігації по сторінці.
    
    

• Запитання для обговорення:

  • Як можна використати односторінковий сайт у реальних проєктах?
  • Що ще можна додати до сторінки, щоб зробити її цікавішою?

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

• Завершіть ваш односторінковий сайт. Додайте більше секцій і контенту, наприклад, інформацію про хобі чи цікаві факти.
• Додайте ще одну таблицю або оновіть вже наявну з більш детальними даними.

Цей урок допоможе учням зрозуміти, як компонувати всі елементи HTML у цілісну сторінку, що є важливим кроком на шляху до створення справжніх вебсайтів.