8 клас. НУШ.Підсумковий урок з теми 5"Тема 5. Створення та публікація вебресурсів (4 год)Контрольна тематична / підсумкова + індекси НУШ + розподіл за групами результатів ГР)+ план конспект + інструкція практичної роботи. майже 100% унікальність

Урок 33. Підсумковий урок з теми 5. Створення та публікація вебресурсів(4 год).

Практична робота № 6. «Створення сайту з використанням онлайн-системи конструювання сайтів».

Добрий день, діти! Сьогодні у нас 8 клас — Урок 33. Підсумковий урок з розділу 5. Створення та публікація вебресурсів. Це практична робота №6 «Створення сайту з використанням онлайн-системи конструювання сайтів».

Сьогодні ми підсумуємо все, що вивчали протягом останніх 4 годин розділу: від основ HTML/CSS до принципів вебдизайну, ергономіки сторінок, трендів 2025–2026 років і, головне, автоматизованих засобів створення сайтів. Саме онлайн-конструктори дозволяють кожному швидко створити сучасний вебресурс без знання програмування.

Актуальність і застосування у житті

Сьогодні майже кожна людина, школа, гурток чи маленьке підприємство має свій сайт або сторінку. Онлайн-конструктори (Google Sites, Weblium, Wix безкоштовна версія тощо) дозволяють за 20–30 хвилин створити гарний сайт для портфоліо, шкільного проєкту, оголошення про захід чи навіть резюме. У майбутньому це вміння знадобиться для створення блогу, сторінки хобі, презентації себе як фахівця чи навіть для малого бізнесу. Вебсайт — це ваша візитка в інтернеті 24/7.

Актуалізація знань

Давайте пригадаємо, що ми вже вміємо:

1. Що таке вебсторінка? (Документ, який відображається у браузері за допомогою HTML-коду)

2. Назвіть основні принципи гарного вебдизайну. (Ергономіка, композиція, достатній контраст кольорів, читабельність шрифтів, адаптивність під мобільні)

3. Що означає термін «тренди вебдизайну»? (Мінімалізм, темні теми, великі фото-фони, анімації при скролі, мікроінтеракції)

4. Які переваги онлайн-конструкторів порівняно з ручним кодуванням? (Швидкість, не треба знати код, готові шаблони, вбудований хостинг)

5. Як називається мова, на якій «розмовляють» сайти? (HTML + CSS + JavaScript)

Основні теоретичні відомості та терміни

Онлайн-система конструювання сайтів — це вебсервіс, який дозволяє створювати сайт за принципом «drag & drop» (перетягування блоків).

Основні етапи створення сайту в конструкторі:

• Вибір шаблону або створення з нуля

• Вибір назви сайту та адреси

• Додавання сторінок (Головна, Про нас, Галерея, Контакти тощо)

• Заповнення блоками: текст, зображення, відео з YouTube, кнопки, форми

• Налаштування дизайну (кольори, шрифти, фон)

• Публікація сайту (отримання публічної адреси)

• Перегляд та редагування

Важливо: сайти в конструкторах адаптивні (гарно виглядають на телефоні), безпечні та не потребують окремого хостингу.

Практична робота №6

Тема: Створення простого сайту-вітальні про улюблене хобі або видатну українську особистість (наприклад, Леся Українка, Сергій Корольов, сучасний блогер, космос, тварини тощо).

Завдання: Створити сайт з 3–4 сторінок за допомогою Google Sites (найпростіший і не вимагає реєстрації окремого акаунту — використовуємо шкільний комп'ютер без входу в особистий Google-акаунт, або якщо потрібно — тимчасовий).

Чітка покрокова інструкція виконання (20–25 хвилин):

Практична робота

Варіант 1

1. Відкрийте браузер Google Chrome і авторизуйтесь у свій обліковий запис google.

2. У адресному рядку введіть: sites.google.com і натисніть Enter.

3. Натисніть кнопку «+» або «Створити новий сайт» (порожній сайт).

4. У лівому верхньому куті натисніть «Без назви» → введіть назву сайту, наприклад: «Леся Українка – моє хобі» або «Космос очима підлітка_Прізвище».

5. Натисніть «Опублікувати» → у полі «Веб-адреса» введіть простий ідентифікатор латиницею, наприклад: hobby-prizvyshche або kosmos-ivanov → Натисніть «Опублікувати». Запишіть отриману адресу.

6. На головній сторінці:

   • Натисніть «Вставити» → «Текст» → напишіть великий заголовок (наприклад, «Леся Українка — геніальна поетеса»).

   • Додайте текст-опис (3–5 речень про особу або хобі).

   • Натисніть «Вставити» → «Зображення» → «Завантажити з комп’ютера» або «Пошук у веб» → знайдіть і додайте 1–2 фото (не захищені авторським правом).

7. Додайте нову сторінку: ліворуч «Сторінки» → «+ Нова сторінка» → назвіть «Біографія» або «Чому мені подобається».

   • Повторіть: додайте текст і 1–2 фото.

8. Додайте ще одну сторінку «Цікаві факти» або «Галерея» — розмістіть там 3–4 фото або короткий список фактів.

9. (За бажанням) На будь-якій сторінці: «Вставити» → «YouTube» → вставте посилання на коротке відео (наприклад, про Лесю Українку або ракети).

10. Змініть дизайн: у правому верхньому куті «Теми» → оберіть будь-яку тему (світлу або темну), змініть кольори за бажанням.

11. Перегляньте сайт: натисніть «Попередній перегляд» (очі).

12. Звіт: Відкрийте Microsoft Word.

    • Введіть у першому рядку: Прізвище Ім’я Клас Підгрупа Завдання ПР6 — шрифт 28

    • Далі (шрифт 14): Дата уроку Практична робота №6 Тема: Створення сайту з використанням онлайн-системи конструювання сайтів

    • Вставте (Ctrl+V) повну адресу вашого сайту.

    • Збережіть файл: Файл → Зберегти як → Цей ПК → Локальний диск D: → папка Work → папка «Ваше прізвище» → Назва файлу: ПР6СайтПрізвище.docx → Зберегти.

Практична робота

Варіант 2

Створення сайту в Carrd (carrd.co) — односторінковий стильний лендінг

Тема практичної роботи: Створення односторінкового сайту-вітрини про улюблений фільм, гру, книгу або спортсмена за допомогою безкоштовного конструктора Carrd.

Покрокова інструкція (без входу в акаунт):

1. Відкрийте Google Chrome.

2. У адресному рядку введіть: carrd.co і натисніть Enter. Покликання https://carrd.co/

3. Натисніть велику кнопку «Start Building» (або «Try for Free»).

4. З’явиться вікно вибору шаблону. Прокрутіть вниз і натисніть «Start from Scratch» (почати з чистої сторінки).

5. Натисніть «Continue as Guest» або просто пропустіть будь-яке вікно з пропозицією зареєструватися (Carrd дозволяє працювати як гість).

6. Ви потрапите в редактор.

   • Зверху ліворуч натисніть на назву «Untitled Site» → введіть назву, наприклад: «MinecraftПрізвище» або «ФільмДюна_Іванова».

7. Натисніть «+» (додати елемент) і по черзі додайте:

   • Text → великий заголовок (наприклад, «Мій улюблений фільм — Дюна») — шрифт зробіть більшим, натиснувши на іконку «A» зверху.

   • Text → короткий опис фільму/гри (4–6 речень).

   • Image → натисніть «Upload Image» → оберіть «Unsplash» (вбудований пошук безкоштовних фото) → введіть ключове слово (наприклад, dune movie, minecraft, football) → оберіть фото → «Insert».

   • Ще раз Image → додайте 2–3 фото в ряд (можна використати галерею — елемент «Gallery»).

   • Button → напишіть текст «Дізнатися більше» → у поле Link вставте будь-яке посилання на YouTube-трейлер (наприклад, https://www.youtube.com/watch?v=...).

8. Додайте ще один блок Text знизу: «Цей сайт створив(ла) Ім’я Прізвище, 8 клас».

9. Змініть дизайн: зліва в панелі «Theme» → оберіть будь-яку кольорову схему або темну/світлу тему.

10. Натисніть синю кнопку «Publish» (зверху праворуч).

11. У полі «URL» введіть простий ідентифікатор латиницею, наприклад: pryzvyshche-film або ivanov-minecraft → натисніть «Publish Site».

12. Скопіюйте повну адресу сайту — вона з’явиться одразу після публікації.

Звіт у Word (той самий формат):

• Прізвище Ім’я Клас Підгрупа Практична робота Варіант А Carrd

• Дата уроку

• Практична робота №6

• Тема: Створення сайту з використанням онлайн-системи конструювання сайтів

• Повна адреса сайту: ______________________________

Збереження файлу: Локальний диск D:\Work\Вашепрізвище\CarrdПрізвище.docx

Практична робота

Варіант 3

Створення сайту в Webnode (webnode.ua або webnode.com) — без реєстрації в режимі демо.

Покликання на ресурс https://www.webnode.com/

Тема практичної роботи: Створення простого сайту з 2–3 сторінками про екологічний проєкт або шкільний захід.

Покрокова інструкція:

1. Відкрийте браузер.

2. Введіть адресу: webnode.com або webnode.ua → Enter.

3. Натисніть «Створити сайт» або «Try for free».

4. Оберіть «Створити сайт без реєстрації» (якщо з’явиться таке вікно) або просто натисніть на будь-який шаблон і пропустіть крок реєстрації (Webnode дозволяє працювати в демо-режимі як гість).

5. Оберіть простий шаблон (наприклад, «One Page», «Portfolio», «Education»).

6. Натисніть «Edit Site» або «Редагувати».

7. Змініть назву сайту: зверху ліворуч клікніть на назву → введіть «ЕкоШколаПрізвище» або «ДеньНауки_2026».

8. На головній сторінці:

   • Клікніть на великий заголовок → напишіть «Збережемо планету разом!»

   • Нижче в текстовому блоці напишіть 4–5 речень про важливість сортування сміття або економії води.

   • Натисніть на місце для фото → «Замінити» → «Безкоштовні фото» (вбудована бібліотека) → знайдіть картинки за словами earth, recycle, nature.

9. Додайте нову сторінку: зверху меню «Сторінки» → «+ Додати сторінку» → назвіть «Поради» або «Наші дії».

   • Додайте текст з 5–7 порадами (наприклад, «1. Використовуй багаторазову пляшку»).

   • Додайте 2 фото.

10. Змініть кольори: зліва або зверху панель «Дизайн» → оберіть інший колір фону або акцентний колір.

11. Натисніть «Опублікувати» або «Publish» (зверху).

12. Скопіюйте тимчасову адресу сайту, яка з’явиться (виглядатиме приблизно як https://вашсайт.webnode.page або https://site-123456789.webnode.com.ua).

Звіт у Word:

• Прізвище Ім’я Клас Підгрупа Практична робота Варіант Б Webnode

• Дата уроку

• Практична робота №6

• Тема: Створення сайту з використанням онлайн-системи конструювання сайтів

• Повна адреса сайту: ______________________________

Оцінювання (однакове для обох варіантів):

ГР1 — 3 бали (правильний підбір і розміщення тексту та зображень)

ГР2 — 5 балів (наявність 2–3 змістовних блоків/сторінок, оформлення)

ГР3 — 2 бали (сайт успішно опубліковано і адреса вказана у звіті)

ГР4 — 2 бали (використані лише безкоштовні фото з вбудованого пошуку, нічого не завантажували з сумнівних джерел)

Безмашинний варіант

(на аркуші):

Намалюйте ескіз односторінкового сайту (як у Carrd) або двох сторінок (як у Webnode).

Підпишіть блоки: Заголовок, Фото, Текст, Кнопка «Дізнатись більше».

Напишіть 4 переваги використання онлайн-конструкторів сайтів.

Завдання на безмашинний варіант (урок без світла):

На аркуші А4 намалюйте ескіз (план) вашого сайту:

• прямокутник — головна сторінка,

• стрілки — посилання на інші сторінки,

• в кожному блоці напишіть, що там буде (заголовок, текст, фото, відео).

• знизу напишіть 5 правил гарного вебдизайну, які ви запам’ятали.

Оцінювання за 12-бальною шкалою (за групами результатів):

ГР1 (Працює з інформацією, даними, моделями) — 3 бали:

• правильно підібрана та розміщена інформація (текст+фото+відео) — 3 б

• неповна або з помилками — 1–2 б

ГР2 (Створює інформаційні продукти) — 5 балів:

• створено 3–4 сторінки з наповненням — 5 б

• 2 сторінки — 3–4 б

• 1 сторінка або дуже мало контенту — 1–2 б

ГР3 (Працює в цифровому середовищі) — 2 бали:

• сайт опубліковано, адреса надіслана у звіті, працює — 2 б

• не опубліковано або помилка — 0–1 б

ГР4 (Безпечно та відповідально працює з ІТ) — 2 бали:

• використано лише вільні зображення, без порушення авторських прав, не завантажено нічого забороненого — 2 б

• дрібні порушення або невідоме джерело — 1 б

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

Переглянути свій сайт вдома (за посиланням), надіслати батькам або друзям. Підготувати 2–3 пропозиції, як його можна покращити (наприклад, додати форму зворотного зв’язку чи анімацію).

Успіхів на уроці! Працюємо творчо, але акуратно! Якщо щось не виходить — піднімайте руку, допоможу.