Модуль "Веб-технології"

 Підручник Вебтехнології   (переглянути >>)

Підручник (додатковий) Основи веб-дизайну О. Г. Пасічник, О. В. Пасічник, I. В. Стеценко (переглянути >>)

Український веб-довідник CSS.IN.UA >>

​

Почта вчителя informzosh126@gmail.com

01.09 - 05.09.2025

Урок 1. Інструктаж з безпеки життєдіяльності під час роботи за комп’ютером.

             Повторення навчального матеріалу з теми «Інформаційні технології в суспільстві»

             Презентація  >>

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

Переглянути презентацію, заповнити Анкету >>

 

08.09 - 12.09

Урок 2. Повторення навчального матеріалу з теми «Векторна графіка»

               Емблема ліцею №126 (переглянути оригінал >>)

               Зразок виконаного завдання (переглянути >>)

               Додаткові матеріали для завдання (перейти >>)

              Корисні посилання:  

                    - PNGTREE - високоякісні PNG, вектори, шаблони

                    - PNGWING - прозорі зображення в форматі png

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

За допомогою векторного редактора Inskape створити емблему ліцею, максимально приближений до оригіналу. Розмір документа А2, результат зберегти в форматі png (без фону). Готове завдання надіслати на пошту вчителя, в темі листа вказати назву роботи, прізвище, клас

 

15.09 - 19.09

Урок 3. Повторення навчального матеріалу з теми «Графічний дизайн у поліграфії»

                 Постер (переглянути зразок >>)

               Додаткові матеріали для завдання (перейти >>)

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

Зробити постер за зразком. Розмір постера А3, зберегти в форматі jpeg або pdf. (для роботи можна використовувати Inskape, Publisher, фон сторінки і кольори пазлів можна обирати за бажанням)

Результат надіслати на пошту вчителя informzosh126@gmail.com, в темі листа вказати назву роботи, прізвище, клас

 

Тема 1. Напрямки та інструменти веб-дизайну

22.09 - 26.09

Урок 4. Основні тренди у веб-дизайні   

Відеоурок >>

Презентація >> 

Корисні посилання: 

Основні тренди веб дизайну 2025 (переглянути >>)

Основні тренди у веб-дизайні (відео>>)

Сучасні тренди веб-дизайну (відео >>)

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

Опрацювати § 1.1 (підручник >>), презентацію.

​

29.09 - 03.10

Урок 5. Види сайтів. Цільова аудиторія.         

Відеоурок >>

Презентація >>    

Вправа "Види сайтів" (інструкція >>) 

Тест 1 - Тренди у веб-дизайні. Види сайтів (перейти >>)  код: lhm319

Корисні посилання:

Види сайтів. Цільова аудиторія (відеоурок >>)

Статистика використання соцмереж в світі (Digital 2025) >>

Топ-100 найпопулярніших сайтів України 2025: рейтинг та тренди >>

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

1) Опрацювати § 1.2 (підручник >>), презентацію. 

2) Виконати вправу "Види сайтів", за бажанням результ надіслати на пошту вчителя informzosh126@gmail.com 

3) Пройти Тест 1

​​

06.10 - 10.10

Урок 6. Інформаційна структура сайту.  Практична робота № 1. Створення структури сайту

Презентація >> 

Практична робота 1 (інструкція >>)

Практична робота 1 (відео >>)

Завдання на урок: 

Створити за допомогою будь-якого онлайн-сервісу структуру інформаційного сайту або інтернет-магазину, результат роботи надіслати на пошту вчителя informzosh126@gmail.com 

Корисні посилання (онлайн сервіси для створення схем):

Draw.io >>

Miro.com >>

Canva >>

Google Drawings >>

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

1) Опрацювати § 1.3 (ст.22 - 28) (підручник >>), презентацію. 

2) Виконати практичну роботу

​

13.10 - 17.10

Урок 7. Інструменти веб-розробника. Тематичне оцінювання.

Презентація >> 

Вправа 7- Інструменти веб розробника (інструкція >>)

Корисні посилання до завдання>> 

Тест  -  підсумковий (перейти >>)    код  -  zyv586

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

1) опрацювати § 1.4 (ст.29 - 32), презентацію

2) виконати Вправу 7 (за бажанням надіслати на пошту вчителя informzosh126@gmail.com)

3) пройти Тест 2 (підсумковий) - ті учні, які виконали всі практичні завдання - підсумковий тест можуть не проходити!

​

Урок узагальнення  та систематизації знань з теми

Для отримання тематичної оцінки необхідно здати такі завдання:

1) Логотип

2) Постер

3) Завдання "Види сайтів" - за бажанням

4) Тест 1 - Тренди у веб-дизайні. Види сайтів

5) Практична робота 1 - Cтруктура сайту

6) Вправа7- Інструменти веб розробника - за бажанням

7) Тест (підсумковий до теми 1)

Для отримання тематичної (семестрової) оцінки 9, 10 або 11 балів необхідно виконувати практичні завда​​​​ння!

                   

Тема 2. Проектування та верстка веб-сторінок 

​20.10 - 24.10

Редактори html-коду онлайн:

https://guruweba.com/code/

https://htmled.it/redaktor/

https://html5css.ru/edithtm/

https://codepen.io/       (html+css)

https://ed-info.github.io/editor/ - HTML+ CSS редактор з безпосереднім переглядом

https://liveweave.com/ - HTML+ CSS

Корисні посилання:

Підручник-довідник-приклади-вправи-редактор W3schoolsUA.українською (перейти >>)

Довідник HTML5CSS (перейти >>)

Довідник  HTML-CSS з прикладами !!!! (перейти >>)

Довідник css.in.ua (перейти >>)

10 найкращіх бесзкоштовних HTML-редакторов (перейти >>)

Генератор кольорової палітри >> 

HTML Палітра кольорів >>

Урок 8.  Мова гіпертекстової розмітки.   

Презентація >>     

Вправа Розклад (зразок >>) 

Корисні посилання: 

Знайомство з HTML (відео >>) 

Приклад вправи "Розмітка гіпертексту засобами мови HTML" (відео >>)

Поняття про мову HTML (презентація >>) - повторення з 10 класу

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

1) Опрацювати § 2.1 (ст.34 - 40), презентацію,

2) виконати вправу  Розклад (за бажанням)

03.11 - 07.11

Урок 9.  Форматування тексту. Додавання зображення, гіперпосилання. Робота з таблицями.   

Презентація до уроку >>     

Практичне завдання Таблиці (інструкція >>) 

Тест 2 - Мова гіпертекстової розмітки  (перейти >>)  Код доступу  icq169

 Корисні посилання:   Приклад вправи "Малюнки та гіперпосилання на веб-сторінці" (відео >>)

                                         Приклад вправи "Розмітка таблиць засобами мови HTML" (відео >>)

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

1) Повторити § 2.1 (ст.34 - 40), опрацювати презентацію, 2) Виконати практичне завдання Таблиці, результат надіслати на пошту вчителя informzosh126@gmail.com, в темі листа вказати назву роботи, прізвище, клас

3) Пройти Тест 2 

​​10.11 - 14.11

Урок 10.  Практична робота № 2. Текстові елементи веб-сторінки.  Гіперпосилання та  списки на веб-сторінках.

Практична робота 2 (інструкція >>)

Практична робота 2 (відео >>)

Корисні посилання:  Генератор текста  blindtextgenerator (перейти >>)

                                             Генератор текста онлайн (перейти >>)

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

1) Виконати Практичну роботу 2, результат надіслати на пошту вчителя informzosh126@gmail.com, в темі листа вказати назву роботи, прізвище, клас.​​

17.11 - 21.11

Урок 11.  Каскадні таблиці стилів (CSS).

Відеоурок >>   

Презентація >>

Опорний конспект >>                                     

Вправа 11-Каскадні таблиці стилів (CSS) (інструкція >>) 

Вправа 11 (відео >>)

Тест  3 - Каскадні таблиці стилів (CSS) (перейти >>)                  код ksn157

Заготовка до вправи >>

Корисні посилання: 

HTML Палітра кольорів >>

Довідник по CSS властивостям (перейти >>)

CSS Підручник з  прикладами  (перейти >>)

Каскадні таблиці стилів (відеоурок >>)

Стильове оформлення сторінок Поняття про каскадні таблиці стилів CSS (відео >>)

Поняття та застосування css стилів в html (відео >>)               

Курс HTML5 та CSS3 Стартовий (відео >>)                  

Вивачємо CSS за один час (відео >>)

HTML та CSS: як створити простий сайт (сторінку) для Лінивця :) (відео >>)

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

1) Опрацювати § 2.2 (ст. 44 - 49), матеріали до уроку.

2) Виконати Вправу11 або пройти Тест 3 (максимальна оцінка за тест 9 балів!), результат надіслати на пошту вчителя informzosh126@gmail.com, в темі листа вказати назву роботи, прізвище, клас

Учні, які виконують практичне завдання - тест проходити не потрібно!

24.11 - 28.11

Урок 12. Проектування та верстка веб-сторінок. Практична робота № 3. Блокова модель CSS.

Відеоурок  >>      

Практична робота 3 (інструкція >>) 

Зразок виконаного завдання (переглянути >>)

Практична робота 3 (відео >>)   

Тест (до практ.роботи 3) (перейти >>)   код  jxc021​      

Корисні посилання: 

Генератор текста  blindtextgenerator (перейти >>)

Генератор кольорів (перейти на сайт >>)

Довідник по CSS властивостям (перейти >>)

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

1) Опрацювати § 2.3 (ст. 53 - 61), матеріали до уроку

2) Виконати Практичну роботу 3  або пройти Тест до практичної роботи 3  (максимальна оцінка за тест 9 балів!), результат надіслати на пошту вчителя informzosh126@gmail.com, в темі листа вказати назву роботи, прізвище, клас. Учням, які виконують практичне завдання - тест проходити не потрібно!

​01.12 - 05.12

Урок 13. Адаптивна верстка.

                Відеоурок (переглянути >>)   

               Презентація  (переглянути >>)    

                Вправа 2.3 (відео >>)

Корисні посилання: 

Гра Flexbox Froggy https://flexboxfroggy.com/#uk

Гра «Морквяні городи» https://codepip.com/games/grid-garden/

Основи HTML & CSS для початківців #23 - CSS Flexbox (переглянути >>)

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

1) Опрацювати § 2.4 (ст. 64 - 71)

2) Переглянути Вправу 2.3, за бажанням виконати і надіслати результат на пошту вчителя informzosh126@gmail.com

​08.12 - 12.12

Урок 14. Практична робота № 4. Використання модуля CSS «flexbox»

               Практична робота 4 (інструкція >>)

               Практична робота 4 (відео >>)   

               Тест (до практ.роботи 4) - на 9 балів  (перейти >>)       код: kbk473  

Корисні посилання: 

Підручник Вебтехнології (перейти>>) 

Основи HTML & CSS для початківців #23 - CSS Flexbox (переглянути >>)

Верстка сторінка по технології flexbox | частина 1 (відео >>)

Верстка сторінка по технології flexbox | частина 2 (відео >>)

1) Повторити § 2.4 (ст. 64 - 71)

2) Виконати Практичну роботу 4  (ст. 72-73) або пройти Тест до практичної роботи  (максимальна оцінка за тест 9 балів!), результат надіслати на пошту вчителя informzosh126@gmail.com, в темі листа вказати назву роботи, прізвище, клас. Учням, які виконують практичне завдання - тест проходити не потрібно!

​15.12 - 19.12

Урок 15. Кросбраузерність. Використання спеціального CSS-файла для досягнення кросбраузерності. Тематичне оцінювання.

                Відеоурок (переглянути >>)   

                Презентація (переглянути >>)            

                Практичне завдання (відео >>)

Корисні посилання: 

                Підручник Вебтехнології (перейти>>) 

                Основи HTML & CSS для початківців #23 - CSS Flexbox (переглянути >>)

                Довідник по CSS властивостям (перейти >>)          

1) Опрацювати § 2.5 (ст. 74 - 79)

2) Переглянути Практичне завдання "Використання спеціального CSS-файла для досягнення кросбаузерності", за бажанням виконати і надіслати результат на пошту вчителя informzosh126@gmail.com

​Для отримання тематичної оцінки необхідно здати такі завдання:

1) Вправа Розклад (за бажанням) - урок 8

2) Тест 2 - Мова гіпертекстової розмітки - урок 9

3) Практична робота 2 (інструкція >>) - урок 10

4) Вправа11- Каскадні таблиці стилі або Тест 3 - в (на 9 балів) - урок 11

5) Практична робота 3  або Тест (на 9 балів)  - урок 12

6) Практична робота 4 або Тест  (на 9 балів)  - урок 14

Для отримання тематичної (семестрової) оцінки 9, 10 або 11 балів необхідно виконувати практичні завда​​​​ння!

​​​25.12 - 29.12

Урок 16. Урок узагальнення та систематизації знань з теми.  Підведення підсумків за семестр