Вебтехнології. Практична робота № 1. Створення структури сайта в онлайн-сервісі draw.io / diagrams.net

ПОВНИЙ КОМПЛЕКТ «ВЕБТЕХНОЛОГІЇ» —

презентації, тести,

практичні матеріали та КТП • ЕКОНОМІЯ 50%

Придбати всі матеріали зі знижкою 50% → https://vseosvita.ua/2-qalz

Автор: Пархомчук Вадим

•  

Моя сторінка на Всеосвіті

•  Стор. 

1 

Підписуйтеся —

регулярно публікую готові матеріали, КТП, тести та розробки для уроків інформатики й математики.

▣

ВЕБТЕХНОЛОГІЇ  •  10–11 КЛАСИ  •  РОЗДІЛ 1

ПРАКТИЧНА РОБОТА № 1

«Створення структури сайта в онлайн-сервісі draw.io / diagrams.net»

🎯

Мета роботи

Навчитися створювати інформаційну структуру сайта за 
допомогою онлайн-сервісу diagrams.net; побудувати логічну 
ієрархію сторінок щонайменше з трьох рівнів.

💼

Потрібно

Комп’ютер або ноутбук, браузер, обліковий запис Google, 
доступ до Інтернету.

💡

Примітка.  

У старіших матеріалах сервіс називається draw.io. Сучасна назва — diagrams.net; інтерфейс може дещо 

відрізнятися від наведених скріншотів.

⚠️

Перед початком роботи.  

Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.

🖥️

Хід роботи

1

Увійдіть у свій обліковий запис Google.

2

Відкрийте сервіс 

diagrams.net: 

https://app.diagrams.net

3

Оберіть місце збереження. 

Якщо сервіс запропонує вибір сховища, оберіть Google 

Drive; для локальної роботи можна використати Device. 

4

Створіть нову діаграму. 

Оберіть порожній шаблон (Blank Diagram) або аналогічну 

команду. 

⚙️

Створення структури

5

Створіть головний блок. 

На панелі фігур виберіть прямокутник і перетягніть його на 

робоче поле. 

6

Налаштуйте вигляд. 

За потреби змініть колір заливки, межі, шрифт і вирівнювання 

тексту. 

7

Додайте назву. 

У прямокутнику введіть текст «Головна сторінка». 

ПОВНИЙ КОМПЛЕКТ «ВЕБТЕХНОЛОГІЇ» —

презентації, тести,

практичні матеріали та КТП • ЕКОНОМІЯ 50%

Придбати всі матеріали зі знижкою 50% → https://vseosvita.ua/2-qalz

Автор: Пархомчук Вадим

•  

Моя сторінка на Всеосвіті

•  Стор. 

2 

Підписуйтеся —

регулярно публікую готові матеріали, КТП, тести та розробки для уроків інформатики й математики.

8

Створіть другий рівень. 

Додайте, наприклад, сторінки «Програмування» та 

«Інформаційні технології». 

9

Використовуйте дублювання. 

Для однакових блоків зручно копіювати / дублювати 

готову фігуру та змінювати її назву. 

10

Створіть третій рівень. 

Продумайте підсторінки відповідно до тематики вашого сайта. У 

схемі має бути щонайменше три рівні ієрархії. 

11

Додайте зв’язки. 

Інструментом Connector / Стрілка поєднайте сторінки відповідно до 

переходів між ними. 

12

Упорядкуйте схему. 

Вирівняйте блоки й за потреби відформатуйте зв’язки, щоб 

структура була читабельною та охайною. 

ПОВНИЙ КОМПЛЕКТ «ВЕБТЕХНОЛОГІЇ» —

презентації, тести,

практичні матеріали та КТП • ЕКОНОМІЯ 50%

Придбати всі матеріали зі знижкою 50% → https://vseosvita.ua/2-qalz

Автор: Пархомчук Вадим

•  

Моя сторінка на Всеосвіті

•  Стор. 

3 

Підписуйтеся —

регулярно публікую готові матеріали, КТП, тести та розробки для уроків інформатики й математики.

☁️

Збереження та спільний доступ

13

Збережіть діаграму. 

Назвіть файл «Практична робота 1. Прізвище» та переконайтеся, 

що зміни збережено. 

14

Перевірте файл на Google Drive. 

Якщо ви працювали з Диском, переконайтеся, що 

файл з’явився у вашому сховищі. 

15

Налаштуйте доступ. 

Скористайтеся командою Share / «Поділитися» у diagrams.net або 

відкрийте файл на Google Drive й надайте доступ за посиланням. 

16

Надішліть посилання. 

Передайте його вчителю та 2–3 однокласникам / однокласницям 

для короткого взаємооцінювання. 

17

Зробіть висновок. 

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

схемі вдалося найкраще і що можна було б удосконалити? 

💡

Додатково: 

за бажанням експортуйте готову схему у PNG або PDF — так її зручно додати до Classroom, 

електронного щоденника або презентації.

✅

Як оцінюється моя робота

Що потрібно виконати

Бали

Я налаштував(-ла) сервіс і створив(-ла) нову діаграму 

2 

Я побудував(-ла) логічну структуру сайта щонайменше з 3 рівнями 

4 

Я коректно використав(-ла) зв’язки та форматування 

2 

Я зберіг(-ла) роботу й надав(-ла) посилання / доступ 

2 

Я зробив(-ла) змістовний висновок 

2 

РАЗОМ

12

ПОВНИЙ КОМПЛЕКТ «ВЕБТЕХНОЛОГІЇ» —

презентації, тести,

практичні матеріали та КТП • ЕКОНОМІЯ 50%

Придбати всі матеріали зі знижкою 50% → https://vseosvita.ua/2-qalz

Автор: Пархомчук Вадим

•  

Моя сторінка на Всеосвіті

•  Стор. 

4 

Підписуйтеся —

регулярно публікую готові матеріали, КТП, тести та розробки для уроків інформатики й математики.

▣

ВЕБТЕХНОЛОГІЇ  •  10–11 КЛАСИ  •  РОЗДІЛ 1

КРИТЕРІЇ ОЦІНЮВАННЯ

Практична робота № 1 «Створення структури сайта в онлайн-сервісі draw.io / diagrams.net»

📌

Що оцінюємо.  

Уміння самостійно побудувати логічну ієрархічну структуру сайта, коректно пов’язати її елементи, зберегти 

результат, надати доступ і коротко проаналізувати створену схему.

Розподіл балів

Критерій

Макс.

Ознаки повного виконання

Орієнтир для часткового бала

1. Налаштування сервісу 
та старт діаграми

2 

Відкрито diagrams.net; за потреби 
вибрано Google Drive як сховище; 
створено нову діаграму. 

2 

— усі дії виконано самостійно; 1 — 

потрібна незначна допомога або є 
один пропуск; 0 — роботу фактично 
не розпочато. 

2. Інформаційна 
структура сайта

4 

Структура логічна, містить головну 
сторінку та щонайменше три рівні 
ієрархії; назви сторінок змістовні й 
відповідають тематиці сайта. 

3 

— структура переважно логічна, 

але має дрібні недоліки; 2 — є лише 
2 рівні або окремі нелогічні 
переходи; 1 — подано 
фрагментарну схему; 0 — структуру 
не створено. 

3. Зв’язки та 
оформлення

2 

Елементи коректно з’єднані; 
використано зрозуміле 
форматування, вирівнювання та 
однаковий стиль споріднених блоків. 

1 

— зв’язки або оформлення 

виконано частково; 0 — схема 
нечитабельна або зв’язки відсутні. 

4. Збереження та 
надання доступу

2 

Роботу збережено з коректною 
назвою; вчителю надано 
працездатне посилання або доступ 
до файла. 

1 

— файл збережено, але доступ / 

посилання налаштовано некоректно 
або назва файла не відповідає 
вимогам; 0 — результат не подано. 

5. Висновок і самоаналіз

2 

У висновку порівняно власну 
структуру з іншими, названо сильні 
сторони та щонайменше один 
можливий напрям удосконалення. 

1 

— висновок є, але загальний або 

розкриває лише частину аспектів; 0 
— висновок відсутній або не 
пов’язаний із роботою. 

Разом

12

Максимальна оцінка — 12 балів

Максимальна оцінка — 12 балів

📝

Методичні примітки

•  Інтерфейс diagrams.net може змінюватися, тому оцінюється результат і логіка виконання, а не повне збігання 

розташування кнопок зі скриншотами. 

•  Назви сторінок і кількість елементів можуть відрізнятися залежно від тематики сайта. Важливими є логічність 

ієрархії та зрозумілість зв’язків. 

•  Якщо учень / учениця працює без Google Drive, допускається локальне збереження файла за умови 

коректного подання результату вчителю. 

•  Експорт у PNG або PDF є додатковою дією і сам по собі не впливає на оцінку, якщо вчитель окремо не 

визначив це як вимогу. 

Навчальна основа. 

Роботу розроблено з опорою на практичну роботу № 1 з посібника Н. В. Речич «Вебтехнології» (2020). Інструкції 

осучаснено: використано актуальну назву diagrams.net, додано альтернативний шлях збереження, чітке налаштування спільного доступу, 
експорт результату та прозорі критерії оцінювання.