Урок "Поняття про мову гіпертекстової розмітки. Теги та атрибути."

Тема уроку: Поняття про мову гіпертекстової розмітки. Теги та атрибути.

Клас: 8

Мета уроку:

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

Очікувані результати (згідно з ГР):

•        ГР 1: Учень вміє знаходити конкретні фрагменти інформації в коді сторінки.
•        ГР 2: Учень розуміє призначення основних тегів розмітки структури сторінки.
•        ГР 3: Учень аналізує логіку побудови вебдокумента через його вихідний код.

Тип уроку: Практикум з елементами дослідження.

Обладнання: комп’ютери, браузери, підручник (Ривкінд Й.Я., 8 клас), доступ до онлайн-середовища JSBin.

ХІД УРОКУ

І. Організаційний етап (2 хв)

•        Привітання, перевірка присутніх.
•        Повторення правил безпечної роботи з комп’ютерною технікою.

ІІ. Актуалізація знань та розминка (5 хв)

•        Інтерактивна вправа «Обери визначення»: Учням пропонується чотири варіанти визначення терміна «вебсторінка» (від метафори «цифровий аркуш» до технічного «електронний документ»).
•        Завдання: Обрати варіант, який здається найзрозумілішим, та обґрунтувати свій вибір.
•        Мета: Підвести до розуміння, що за візуальною оболонкою стоїть код.

ІІІ. Вивчення нового матеріалу (10 хв)

•        Поняття HTML: Пояснення, що HTML — це не мова програмування, а мова «розмітки» (маркування) тексту.
•        Будова тегу: Робота зі схемою в підручнику (с. 172–173). Поняття про відкриваючі та закриваючі теги.
•        Атрибути: Як додаткові параметри, що уточнюють дію тегу (наприклад, колір або шлях до зображення).
•        Аналогія: Сайт — це будинок, HTML — це його каркас (цегла та перекриття), а вебсторінка — окрема кімната.

ІV. Практична робота — Дослідження «Внутрішній світ сторінки» (20 хв)

•        Етап 1. Пошук: Учні знаходять у Вікіпедії статтю «Зимові Олімпійські ігри».
•        Етап 2. Дослідження коду: Використання комбінації Ctrl + U або правої кнопки миші («Переглянути джерело сторінки»).
•        Етап 3. Аналіз: Використовуючи таблицю тегів у підручнику (с. 174–175), знайти в реальному коді тег <title>, який відповідає за назву вкладки браузера.
•        Фіксація результату: Створення скриншота коду з виділеним фрагментом та завантаження його в Google Classroom.

V. Додаткове завдання (для учнів з високим рівнем пізнавальної активності) (5 хв)

•        Робота в онлайн-середовищі JSBin. Спроба самостійно прописати прості теги (наприклад, заголовки <h1> або абзаци <p>) та миттєве спостереження за результатом у вікні «Output».

VІ. Підбиття підсумків та рефлексія (3 хв)

•        Питання: «Чи важко було орієнтуватися в коді? Що найбільше здивувало у вихідному коді сторінки?».
•        Висновки: Ми навчилися бачити не тільки «фасад» сайту, а й його «креслення».

VІІ. Домашнє завдання

•        Повторити матеріал підручника (с. 171–177).
•        Тим, хто не встиг завершити практичне дослідження, доопрацювати його вдома.
  

Матеріал для розміщення в Classroom на випадок асинхронної роботи, плюс додаток.

На уроці

      У випадку асинхронної роботи (через відключення світла або інтернету) виконайте нижче зазначене.

Матеріали по темі розміщені в:

        Підручник: «Інформатика 8 клас» (авт. Ривкінд Й.Я., Лисенко Т.І. та ін.), с. 171-177.

     Електронна версія підручника в форматі PDF: https://drive.google.com/file/d/1mfpj_xItWOdVCyU8pp3LErlNNy7b_mRa/view?usp=classroom_web&authuser=0

        Онлайн середовище для роботи з HTML-кодом https://jsbin.com/?html,output

  ✅ Сьогодні ви дізнаєтеся, що таке мова HTML, для чого потрібні теги та атрибути. Ви навчитеся досліджувати «внутрішній світ» вебсторінок, аналізувати їхній вихідний код та знаходити в ньому конкретні елементи керування вмістом.