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

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

Розмічання тексту засобами HTML

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

🎯 Мета уроку

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

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

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

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

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

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

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

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

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

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

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

📚 Тип уроку

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

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

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

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

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

ПОВТОРЮЄМО

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

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

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

` Початок і кінець заголовка — службової частини коду `` Початок і кінець назви, що виводитиметься на вкладці браузера `` Початок і кінець тіла документа, яке виводить браузер у робочому полі вікна

Форматування тексту

    Теги із тегами в HTML-документі можна розташовувати довільно: розбивати на абзаци, робити відступи. Це не вплине на вигляд вебсторінки у вікні браузера, адже її вигляд залежить тільки від розмітки. Теги з помилками або такі, що не підтримуються браузером, буде знехтувано.

    **Теги HTML визначають вигляд і функціонування об’єктів на вебсторінці сайту.**

    Розглянемо деякі теги форматування тексту:

Тег Тип Призначення
`

`

 Парний Новий абзац із відступом
`

`

 Парний Заголовок: `

` – найвищий рівень
`
`
 Парний Заголовок: `
` – найнижчий
`` Парний Курсив

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

    Наприклад, для зміни кольору тексту та фону: ``

Марковані та нумеровані списки

    Для створення **маркованого списку** використовують тег `

    ...
` з атрибутом `type`, який задає вигляд маркера: `disk` — `●`, `circle` — `○`, `square` — `■`.

    Для створення **нумерованого списку** використовують тег `

    ...
` з атрибутом `type` (тип нумерації: `1` — арабські цифри, `A` — латинські літери, `I` — римська нумерація тощо) та атрибутом `start` (задання початкового номера в списку з нумерацією арабськими цифрами).

    Елементи списку розмічають тегами `

  • ...
    • `.

    Приклад списків в HTML

    Рис. 9.4. Приклад списків в HTML

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

    -->

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

    Вправа 1: Який із наведених тегів є непарним?

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

    Вправа 2: Зіставте теги структури HTML-документа з їхнім призначенням.

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

    Початок і кінець документа
    Початок і кінець заголовка — службової частини коду
    Початок і кінець назви, що виводитиметься на вкладці браузера
    Початок і кінець тіла документа, яке виводить браузер у робочому полі вікна

    Вправа 3: Виберіть теги, які використовуються для форматування тексту.

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

    Вправа 4: Які атрибути можна використовувати для налаштування вигляду маркованих та нумерованих списків в HTML?

    Виберіть усі правильні варіанти.

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

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

    • 1. Що таке HTML?
      HTML (HyperText Markup Language) — це мова розмітки гіпертексту, набір тегів та правил їх застосування для створення веб-документів.
    • 2. Наведіть приклади парних та непарних тегів.
      **Парні теги:** `<b>...</b>` (жирний), `<p>...</p>` (абзац). **Непарні теги:** `<br>` (розрив рядка).
    • 3. Назвіть складові структури HTML-документа.
      Складові структури HTML-документа: `<html>`, `<head>`, `<title>`, `<body>`.
    • 4. Що таке атрибут тегу?
      Атрибут тегу — це властивість, яка впливає на дію тегу, записується у відкриваючому тегу.
    • 5. Якими засобами HTML можна змінити колір тла вебсторінки сайту?
      Для зміни кольору тла вебсторінки сайту можна використати атрибут `bgcolor` в тегу `<body>`, наприклад: `<body bgcolor="green">`.
    • 6. Які теги використовуються для створення списків?
      Для створення маркованих списків використовують `<ul>`, для нумерованих — `<ol>`. Елементи списків розмічають тегами `<li>`.

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

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

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

    • Опрацювати § 9 (стор. 52-56).

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

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

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

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

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