Готова практична робота з інформатики для учнів 11 класу (вибірковий модуль «Вебтехнології»), спрямована на формування практичних навичок стильового оформлення HTML-сторінок за допомогою каскадних таблиць стилів CSS.
Під час виконання роботи учні продовжать створення власного вебсайта, розпочатого в практичній роботі № 2. Вони навчаться створювати зовнішній файл CSS, підключати його до кількох HTML-документів, налаштовувати кольори, шрифти, відступи, оформлювати навігаційне меню та основні структурні елементи вебсторінок.
Матеріал передбачає два рівноцінні формати виконання — очний урок і самостійну асинхронну роботу через Google Classroom. Обидві версії мають однакові навчальні цілі, очікувані результати та спільну 12-бальну систему оцінювання.
Відповідність підручнику
Практичну роботу розроблено на основі завдання «Практична робота № 3. Стильове оформлення сторінок із використанням CSS» із навчального посібника:
Речич Н. В. Інформатика : вебтехнології (вибірковий модуль для учнів 10–11 класів, рівень стандарту). Харків : Вид-во «Ранок», 2020. 160 с.
Збережено основну навчальну мету оригінального завдання — оформлення раніше створеного HTML-сайта за допомогою зовнішньої таблиці стилів. Водночас інструкції адаптовано до сучасної практики веброзробки: для горизонтального меню використовується CSS Flexbox, уточнено структуру файлів і додано докладні пояснення для самостійного виконання.
Що входить до комплекту?
Комплект містить 4 готові матеріали:
Практична робота № 3 — очний урок. Покрокова інструкція для роботи в комп’ютерному класі. Містить мету, необхідне обладнання, послідовність практичних дій, приклади CSS-коду, зразок колірної палітри, перевірку результату та коротку таблицю оцінювання.
Практична робота № 3 — Google Classroom. Розширена інструкція для самостійного асинхронного виконання. Передбачає створення та редагування файлів, пояснення типових технічних помилок, перевірку підключення CSS, підготовку ZIP-архіву та подання результату через Google Classroom.
Критерії оцінювання для вчителя. Окрема спільна рубрика на 12 балів. Для кожного критерію визначено максимальну кількість балів, ознаки повного виконання та правила часткового оцінювання. Додано методичні примітки щодо перевірки роботи.
Заготовка HTML-сайта. Архів із трьома пов’язаними сторінками index.html, info.html і form.html. Дає можливість виконати практичну роботу учням, які не мають власного сайта з попереднього заняття, без необхідності створювати HTML-структуру заново.
Що виконуватимуть учні?
1. Підготовка сайта до оформлення.
Учні відкриють три HTML-сторінки, створені під час попередньої практичної роботи, перевірять їхню структуру та збережуть скриншот головної сторінки до застосування стилів. У теці сайта створять підпапку css і файл style.css, який використовуватиметься для спільного оформлення всіх сторінок.
2. Створення та налаштування CSS-стилів.
Використовуючи наведені зразки коду, учні опрацюють CSS-селектори та властивості оформлення. Вони налаштують тло сторінок, шрифти, кольори тексту, вирівнювання заголовків, внутрішні й зовнішні відступи, оформлення шапки та підвалу сайта.
Окрему увагу приділено створенню горизонтального навігаційного меню засобами Flexbox. Учні приберуть стандартні маркери списку, налаштують розташування пунктів меню, вигляд гіперпосилань і зміну їхнього оформлення під час наведення вказівника за допомогою псевдокласу :hover.
3. Підключення CSS та індивідуальне оформлення.
Учні підключать зовнішню таблицю стилів до всіх трьох HTML-документів за допомогою елемента <link>. Перевірять, що зміни у файлі style.css застосовуються до кожної сторінки.
Для індивідуалізації результату передбачено самостійний добір щонайменше двох значень кольорів зі збереженням достатньої контрастності тексту й тла. Це допоможе учням закріпити навички роботи з кольоровою палітрою та зрозуміти принцип централізованого керування дизайном сайта.
4. Перевірка та подання результату.
Наприкінці учні перевірять працездатність навігаційного меню, правильність відображення стилів на всіх сторінках і читабельність тексту. Створять скриншот оновленого сайта, порівняють його з початковим виглядом і сформулюють короткий висновок про переваги використання CSS.
Підсумковим результатом стане ZIP-архів готового тристорінкового вебсайта зі спільним файлом CSS і двома скриншотами для порівняння.
Оцінювання
Практична робота оцінюється за 12-бальною шкалою.
Створення файла CSS і підключення його до трьох сторінок — 3 бали.
Стильове оформлення тла, шапки та підвалу сторінок — 3 бали.
Створення горизонтального меню, усунення маркерів списку та налаштування гіперпосилань — 3 бали.
Оформлення тексту та добір читабельної колірної гами — 2 бали.
Перевірка результату, порівняння вигляду сайта та подання роботи — 1 бал.
Разом — 12 балів.
Для вчителя передбачено окремий документ із детальними критеріями, характеристиками повного виконання та правилами нарахування частини балів. Система оцінювання однакова для очної та асинхронної версій.
Для кого призначений матеріал?
Практична робота призначена для вчителів інформатики, які викладають вибірковий модуль «Вебтехнології» в 10–11 класах, зокрема для використання в 11 класі після вивчення основ HTML і CSS.
Матеріал підходить для очного, дистанційного та змішаного навчання. Окрема версія для Google Classroom дає можливість організувати самостійну роботу учнів без синхронної участі вчителя.
Наявність двох готових інструкцій, повних прикладів CSS-коду, резервної HTML-заготовки та єдиних критеріїв оцінювання дозволяє організувати практичне заняття без додаткової розробки завдань для різних форматів навчання.
