Логотип сайту
Інформатика 8 клас

Тема 2: «Створення та публікація вебресурсів». Урок № 14. (До § 11)

Розмічання таблиць засобами HTML

Інтерактивний план-конспект уроку для 8 класу НУШ

🎯 Мета уроку

  • Освітня: Ознайомити учнів із засобами HTML для створення та форматування таблиць на вебсторінці.
  • Розвивальна: Розвивати логічне мислення, вміння структурувати дані у вигляді таблиць, застосовувати атрибути для їх оформлення.
  • Виховна: Формувати акуратність та системність у роботі з веб-контентом.

✅ Очікувані результати

Після уроку учні зможуть:

  • визначати поняття таблиці в HTML;
  • називати теги для створення таблиць, рядків та клітинок;
  • використовувати атрибути для форматування таблиць та їх елементів;
  • об'єднувати клітинки таблиць;
  • створювати прості таблиці засобами HTML.

📊 Групи результатів (НУШ)

Візуалізація важливості груп результатів для цього уроку.

Учень / учениця:

  • ГР1 – працює з інформацією, даними, моделями;

  • ГР2 – створює інформаційні продукти;

  • ГР3 – працює в цифровому середовищі;

  • ГР4 – безпечно та відповідально працює з інформаційними технологіями.

📚 Тип уроку

Урок вивчення нового матеріалу з елементами практичної роботи.

💻 Обладнання та ПЗ

  • Персональні комп’ютери, підключені до мережі Інтернет.
  • Підручник «Інформатика 8 клас» О. О. Бондаренко, В. В. Ластовецький, О. П. Пилипчук, Є. А. Шестопалов.
  • Текстовий редактор (Блокнот, Notepad++, Sublime Text тощо).
  • Браузер для перегляду HTML-файлів.

🔗 Міжпредметні зв'язки

  • Математика: Робота з табличними даними, їх організація.
  • Інформатика (попередні теми): Структурування даних.

ПОВТОРЮЄМО

Актуалізація опорних знань

  1. Як вставити зображення на вебсторінку?
  2. У чому відмінність значень атрибутів для вставляння малюнка з внутрішньої та зовнішньої папок?
  3. Як вирівняти зображення за правим краєм браузера?
  4. Як задати розмір малюнка? Що означає розмір у відсотках?
  5. Як створити гіперпосилання?
  6. Як додати до малюнка гіперпосилання на іншу вебсторінку?
Знак питання

Джерело: Підручник з інформатики для 8 класу (стор. 57-60)

Практичний блок уроку

Вправа 1: Зіставте теги HTML-таблиць з їхнім призначенням.

Перетягніть тег до відповідного призначення.

Обмежують таблицю.
Обмежують рядок таблиці.
Обмежують клітинку таблиці.
Використовується для виокремлення заголовків стовпців таблиці.

Вправа 2: Який атрибут використовується для задання відстані між клітинками таблиці?

Виберіть єдиний правильний варіант.

Вправа 3: Які атрибути використовуються для об'єднання клітинок в HTML-таблиці?

Відмітьте всі правильні варіанти.

Перевірка знань

Натисніть на картку, щоб побачити відповідь.

  • 1. Як додати на вебсторінку таблицю?
    Таблиця на вебсторінку додається за допомогою тегів `<table>...</table>`.
  • 2. Як вирівняти текст у клітинці таблиці по горизонталі?
    Для горизонтального вирівнювання тексту в клітинці використовується атрибут `align` (`"left"`, `"center"`, `"right"`).
  • 3. Як вирівняти текст у клітинці таблиці по вертикалі?
    Для вертикального вирівнювання тексту в клітинці використовується атрибут `valign` (`"top"`, `"middle"`, `"bottom"`).
  • 4. Як встановити товщину меж таблиці?
    Товщина меж таблиці встановлюється атрибутом `border` в тезі `<table>`, наприклад: `<table border="2">`.
  • 5. Як встановити відступ від тексту в клітинці до її меж?
    Відступ від тексту в клітинці до її меж встановлюється атрибутом `cellpadding` в тезі `<table>`, наприклад: `<table cellpadding="10">`.
  • 6. Як об'єднати клітинки одного рядка або стовпця таблиці?
    Для об'єднання клітинок використовуються атрибути `colspan` (для об'єднання по горизонталі) та `rowspan` (для об'єднання по вертикалі) у тегах `<td>` або `<th>`.

Джерело: Підручник з інформатики для 8 класу (стор. 60-64)

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

1. Теоретична частина:

  • Опрацювати § 11 (стор. 60-64).

2. Практична частина:

  • Виконати вправу № 11 (стор. 64).

3. Завдання за бажанням (для закріплення):

Учні з книгами або комп'ютерами

Додаткові матеріали