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

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


Практична робота № 3. «Створення головної сторінки сайту засобами HTML»
Узагальнення навчального матеріалу з теми

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

🎯 Мета уроку

  • Освітня: Узагальнити та систематизувати знання з теми «Створення та публікація вебресурсів», закріпити навички створення вебсторінок засобами HTML.
  • Розвивальна: Розвивати практичні навички роботи з HTML-кодом, вміння створювати структуру сайту, додавати графічні зображення та гіперпосилання, розмічати таблиці.
  • Виховна: Виховувати самостійність, відповідальність та прагнення до саморозвитку в галузі веб-розробки.

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

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

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

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

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

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

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

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

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

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

📚 Тип уроку

Урок узагальнення та систематизації знань, застосування знань на практиці.

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

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

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

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

ПОВТОРЮЄМО

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

  1. Що таке HTML?
  2. Наведіть приклади парних та непарних тегів.
  3. Назвіть складові структури HTML-документа.
  4. Що таке атрибут тегу?
  5. Якими засобами HTML можна змінити колір тла вебсторінки сайту?
  6. Які теги використовуються для створення списків?
  7. Як вставити зображення на вебсторінку?
  8. Як створити гіперпосилання?
  9. Як додати на вебсторінку таблицю?
  10. Які атрибути використовують для об'єднання клітинок таблиці?
Знак питання

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

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

Самооцінка: Вправа 1

1. Які теги обов'язково використовуються для створення базової структури HTML-документа?

Самооцінка: Вправа 2

2. Які атрибути використовуються для налаштування зображень в HTML?

Самооцінка: Вправа 3

3. Який тег створює гіперпосилання?

Самооцінка: Вправа 4

4. Які теги використовуються для створення таблиць, рядків та клітинок відповідно?

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

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

  • 1. Яка основна мета HTML?
    HTML (HyperText Markup Language) використовується для створення структури та вмісту вебсторінок.
  • 2. Назвіть три базові теги, які є в кожному HTML-документі.
    Обов'язкові теги: `<html>`, `<head>`, `<body>`.
  • 3. Як відрізнити парний тег від непарного?
    Парний тег має відкриваючий (`<p>`) і закриваючий (`</p>`) елементи. Непарний тег не має закриваючого (`<img>`).
  • 4. Який атрибут використовується для вказівки джерела зображення?
    Атрибут `src` в тегу `<img>`, наприклад: `<img src="my_image.jpg">`.
  • 5. Як зробити текст або зображення клікабельним для переходу на іншу сторінку?
    Використовується тег `<a href="посилання">...</a>`.
  • 6. Які теги є основними для розмітки таблиці в HTML?
    Основні теги: `<table>` (таблиця), `<tr>` (рядок), `<td>` (клітинка даних), `<th>` (клітинка заголовка).

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

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

  • Повторити §§ 9-11 (стор. 52-64).

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

  • Виконати практичну роботу № 3 (стор. 65-66).

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

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

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