Тема уроку
Списки та таблиці мовою HTML
Тип уроку: вивчення нового матеріалу.
Тривалість: 45 хвилин.
Мета уроку
- Навчальна: ознайомити з призначенням і структурою впорядкованих та невпорядкованих списків і таблиць в HTML; навчити створювати їх за допомогою тегів
ul,ol,li,table,caption,thead,tbody,tr,th,td. - Розвивальна: розвивати алгоритмічне мислення, уміння структурувати дані, читати й перевіряти HTML-код.
- Ціннісна: формувати відповідальне ставлення до точності, зрозумілості й доступності вебконтенту, навички взаємоповаги під час спільної роботи.
Очікувані результати
Після уроку учні й учениці зможуть:
- пояснити, коли доречно використовувати список, а коли — таблицю;
- розрізняти впорядковані (
ol) і невпорядковані (ul) списки; - створювати елементи списку за допомогою
li; - будувати таблицю з рядків, заголовків і комірок;
- знаходити та виправляти типові помилки у вкладеності тегів;
- перевіряти результат у браузері й оцінювати його зрозумілість.
Ключові компетентності
Інформаційно-комунікаційна, математична, вільне володіння державною мовою, уміння навчатися, ініціативність і підприємливість, соціальна та громадянська.
Обладнання та матеріали
Комп’ютери або ноутбуки, текстовий редактор коду, браузер, проєктор чи інтерактивна дошка, картки із завданнями. За потреби — друковані приклади HTML-коду для роботи без пристроїв.
Хід уроку
| Етап | Час | Діяльність учителя | Діяльність учнівства |
|---|---|---|---|
| Організація роботи | 2 хв | Вітає клас, перевіряє готовність робочих місць і доступ до редактора та браузера. Повідомляє, що сьогодні створюватимуть структуровані списки й таблиці. | Готують робоче місце, відкривають редактор коду або отримують картку для роботи на папері. |
| Актуалізація опорних знань | 5 хв | Пропонує пригадати базову структуру HTML-документа. Запитує: «Для чого потрібні парні теги?», «Які теги утворюють каркас HTML-документа?», «Що станеться, якщо неправильно вкласти один елемент у інший?». На дошці показує фрагмент: <p>Розділ</p>. | Називають знайомі теги, пояснюють різницю між відкривальним і закривальним тегами. Визначають, що для списку чи таблиці знадобляться елементи, вкладені один в один. |
| Мотивація та визначення мети | 3 хв | Показує два способи подати однакові дані — перелік гуртків звичайним текстом і таблицею з днями та часом занять. Запитує: «Який варіант швидше переглянути?», «Коли список зручніший за таблицю?». Оголошує мету уроку. | Порівнюють подання, аргументують вибір: список зручний для переліку, таблиця — для даних, пов’язаних між собою за рядками й стовпцями. |
| Вивчення нового матеріалу | 12 хв | Пояснює призначення тегів списку: ul — невпорядкований список, ol — упорядкований, li — його елемент. Демонструє: <ul><li>Підготувати матеріали</li><li>Перевірити посилання</li></ul> та <ol><li>Відкрити редактор</li><li>Зберегти файл</li></ol>. Пояснює, що в таблиці table містить таблицю, tr — рядок, th — заголовкову комірку, td — звичайну комірку; caption додає назву, thead і tbody групують заголовок і дані. Демонструє фрагмент: <table><caption>Гуртки</caption><thead><tr><th scope="col">Назва</th><th scope="col">День</th></tr></thead><tbody><tr><td>Робототехніка</td><td>Вівторок</td></tr></tbody></table>. Наголошує: таблиці призначені для табличних даних, а не для розташування елементів сторінки; зовнішній вигляд оформлюють CSS. | Стежать за демонстрацією, фіксують призначення тегів. Відповідають на запитання: «Який тег позначає елемент списку?», «Що утворює один рядок таблиці?», «Чим th відрізняється від td?». |
| Практична робота з новим матеріалом | 12 хв | Пропонує створити HTML-фрагмент «План підготовки до презентації»: упорядкований список із трьох кроків і таблицю «Завдання / Статус» із заголовком та двома рядками даних. Нагадує перевірити, чи кожен li міститься в ul або ol, а кожен td чи th — у tr. За потреби надає підказки або картку з назвами тегів. | Самостійно або в парах набирають код, зберігають файл і відкривають його в браузері. Перевіряють структуру та результат; за можливості обмінюються роботами й знаходять одну сильну сторону та одну можливу помилку. |
| Закріплення | 6 хв | Показує фрагмент із помилками: <ul><li>Пошук інформації<li>Створення плану</ul> і запитує: «Що потрібно виправити?». Далі пропонує визначити, що доречніше для подання: «етапи роботи над проєктом» чи «назви проєктів, автори, дати». | Виправляють код, додаючи закривальний тег </li>. Обґрунтовують вибір: етапи роботи — упорядкований список, дані про проєкти за кількома ознаками — таблиця. |
| Підсумок і рефлексія | 5 хв | Підсумовує призначення основних тегів. Проводить коротку рефлексію: «Тепер я можу…», «Ще хочу потренуватися…». Просить оцінити власну впевненість за шкалою від 1 до 5 пальцями або позначкою на картці. Пояснює домашнє завдання. | Називають основні відмінності між списком і таблицею, завершують одне з речень рефлексії, визначають, що потребує повторення. Записують домашнє завдання. |
| Разом | 45 хв |
Формувальне оцінювання
- Усні відповіді під час актуалізації та пояснення нового матеріалу.
- Спостереження за роботою: правильність вкладеності тегів, відповідність обраної структури змісту, перевірка результату в браузері.
- Взаємоперевірка за критеріями: структура списку або таблиці коректна; дані подано доречно; заголовки зрозумілі; помилки виправлено.
- Самооцінювання під час рефлексії. Оцінюється процес і досягнення навчальних результатів, а не швидкість набору коду.
Домашнє завдання
Оберіть один рівень або виконайте завдання наступного рівня, якщо попередній опановано.
- Початковий рівень. Створіть невпорядкований список із п’яти навчальних ресурсів або матеріалів і впорядкований список із чотирьох кроків підготовки до навчального проєкту.
- Середній рівень. Створіть HTML-таблицю «План навчального тижня» з назвою, заголовками стовпців і щонайменше чотирма рядками даних. Використайте
caption,thead,tbody,tr,th,td. - Високий рівень. Створіть фрагмент вебсторінки про вигаданий навчальний проєкт: додайте короткий опис, список етапів роботи та таблицю «Етап / Результат». Перевірте коректність вкладення тегів і поясніть, чому для кожної частини обрали саме список або таблицю.