Course: Вебтехнології | Інформатика

Section outline

Select section Вступ

Вступ

Collapse all Expand all
Цей курс розроблено з урахуванням сучасних тенденцій веб-дизайну. Його матеріали можна використовувати для викладання профільного курсу за вибором "Основи веб-дизайну".
Матеріали подано у формі текстових лекцій з практичним ілюструванням усіх демонстрованих технологій. Завдання та вправи можна виконувати онлайн або на власному комп'ютері та завантажувати результати виконання у вигляді посилань або створених файлів. Для перевірки знань та закріплення матеріалу створено тести до кожного розділу.
У форумі курсу можна задати питання, якщо вони виникають.
Успіхів!
- Select activity Форум новин курсу
  
  Форум новин курсу Forum
- Select activity Форум тематичних обговорень
  
  Форум тематичних обговорень Forum
- Select activity Завдання цього курсу зручно виконувати в онлайново...
  
  Завдання цього курсу зручно виконувати в онлайновому редакторі https://jsfiddle.net/ або http://cssdeck.com http://jsbin.com/
  Результат роботи можна зберегти та надіслати у вигляді посилання або файлу. Сервіси також передбачають спільну роботу, це може бути корисним при виконанні деяких завдань.
  Успіхів!
- Select activity Форум новин курсу
  
  Форум новин курсу Forum
Select section Як працює Інтернет. Основи веб-дизайну

Як працює Інтернет. Основи веб-дизайну
Основні терміни та поняття веб-дизайну. Класифікація веб-сайтів та технології для їх створення
- Select activity Знаннєва складова Діяльнісна складова Ці...
  
  Знати основні класифікації типів сайтів.
  Пояснювати застосування різних технологій для розробки сайтів.
  Визначати тип сайту та прогнозує його цільову аудиторію.
  
  Використовувати та налаштовувати інструментальні засоби для веб-розробки.
  Складати план розробки сайту.
  Створювати макет інформаційної структури сайту.
  
  Усвідомлювати важливість участі в діяльності глобальної інтернет-спільноти.
  
  Основні тренди у веб-дизайні.
  Види сайтів та цільова аудиторія.
  Інформаційна структура сайту.
  Інструменти веб-розробника.
- Select activity 📑 Технології створення сайтів
  
  📑 Технології створення сайтів Page
  
  Students must
  
  View
- Select activity 🧩 Терміни веб-дизайну
  
  🧩 Терміни веб-дизайну Assignment
- Select activity Тест 1. Як працює Інтернет
  
  Тест 1. Як працює Інтернет Quiz
  
  Students must
  
  Receive a grade
  
  Receive a passing grade
Select section Мова розмітки гіпертексту HTML5

Мова розмітки гіпертексту HTML5
Найбільш вживані теги для створення змістової структури сторінки, додавання зображень, таблиць, мультимедійних елементів та форм для зворотного зв'язку з відвідувачами сайту.

Публікація сайту на хостингу
- Select activity Знаннєва складова Діяльнісна складова ...
  
  Students must
  
  Mark as done
  
  Знати основні теги мови гіпертекстової розмітки та їх параметри.
  Пояснювати переваги та недоліки різних прийомів верстки веб-сторінок.
  
  Проектувати веб-сторінки на основі попередньо розробленого макету.
  Створювати веб-сторінки за допомогою мови гіпертекстової розмітки.
  
  Усвідомлювати важливість кросбраузерної оптимізації сторінок сайту.
  Усвідомлювати важливість адаптивної верстки сторінок сайту.
  
  Мова гіпертекстової розмітки.
  Проектування та верстка веб-сторінок.
  Адаптивна верстка.
  Кросбраузерність.
- Select activity 📑 Основи HTML
  
  📑 Основи HTML Page
  
  Students must
  
  View
- Select activity 📑 HTML-довідник
  
  📑 HTML-довідник Page
- Select activity 💻 Вправа "Вірш" (абзаци, заголовки)
  
  💻 Вправа "Вірш" (абзаци, заголовки) Assignment
- Select activity 💻 Вправа "Троянда столиста" (форматування символів)
  
  💻 Вправа "Троянда столиста" (форматування символів) Assignment
- Select activity 💻 Вправа "Бембі" (зображення та ілюстрації)
  
  💻 Вправа "Бембі" (зображення та ілюстрації) Assignment
- Select activity 💻 Вправа "Афіша"
  
  💻 Вправа "Афіша" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Як вчитися вчитися" (абзаци, заголовки, форматування, ілюстрації)
  
  💻 Вправа "Як вчитися вчитися" (абзаци, заголовки, форматування, ілюстрації) Assignment
- Select activity 💻 Вправа "Впізнай фільм" (карта зображень)
  
  💻 Вправа "Впізнай фільм" (карта зображень) Assignment
- Select activity 💻 Вправа "Інтерактивна історія" (посилання, кнопки, карти зображень)
  
  💻 Вправа "Інтерактивна історія" (посилання, кнопки, карти зображень) Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Таблиці
  
  📑 Таблиці Page
  
  Students must
  
  View
- Select activity 💻 Вправа "Бембі" (таблиці)
  
  💻 Вправа "Бембі" (таблиці) Assignment
- Select activity 💻 Вправа "Табель" (таблиці)
  
  💻 Вправа "Табель" (таблиці) Assignment
- Select activity 💻 Вправа "Мислення зростання" (таблиці)
  
  💻 Вправа "Мислення зростання" (таблиці) Assignment
- Select activity 💻 Вправа "Календар" (таблиці)
  
  💻 Вправа "Календар" (таблиці) Assignment
  
  Students must
  
  Mark as done
- Select activity Мультимедія та форми Знаннєва складова Діяльнісна ...
  
  Мультимедія та форми
  
  Пояснювати принципи та методи утворення та збереження зображень для веб-сторінок.
  Знати основні формати мультимедіа та теги їх додавання до веб-сторінок.
  
  Використовувати гіпертекстові, графічні, анімаційні та мультимедійні елементи на веб-сторінках.
  
  Дотримуватись авторських прав та ліцензій на використання графічних зображень та мультимедійних елементів на веб-сторінках.
  
  Графіка для веб-середовища.
  Анімаційні ефекти.
  Мультимедіа на веб-сторінках.
- Select activity 📑 Мультимедіа
  
  📑 Мультимедіа Page
  
  Students must
  
  View
- Select activity 💻 Завдання Мультимедіа
  
  💻 Завдання Мультимедіа Assignment
- Select activity 💻 Вправа "Мислення зростання" (мультимедія)
  
  💻 Вправа "Мислення зростання" (мультимедія) Assignment
- Select activity 📑 Форми на веб-сторінках
  
  📑 Форми на веб-сторінках Page
- Select activity 💻 Вправа "Мислення зростання" (форма)
  
  💻 Вправа "Мислення зростання" (форма) Assignment
- Select activity 📑 Хостинг
  
  📑 Хостинг Page
Select section Каскадні аркуші стилів CSS3

Каскадні аркуші стилів CSS3
Форматування та верстка веб-сторінок на основі стилів
- Select activity Знаннєва складова Діяльнісна складова Ці...
  
  Знати основні теги каскадних аркушів стилів та їх параметри.
  Пояснювати переваги та недоліки різних прийомів верстки веб-сторінок.
  
  Проектувати веб-сторінки на основі попередньо розробленого макету.
  Створювати веб-сторінки за допомогою каскадних аркушів стилів.
  
  Усвідомлювати важливість кросбраузерної оптимізації сторінок сайту.
  Усвідомлювати важливість адаптивної верстки сторінок сайту.
  
  Каскадні таблиці стилів.
  Проектування та верстка веб-сторінок.
  Адаптивна верстка.
  Кросбраузерність.
- Select activity 📑 Стильове оформлення сторінок
  
  📑 Стильове оформлення сторінок Page
  
  Students must
  
  View
- Select activity 💻 Вправа "Таємний шифр"
  
  💻 Вправа "Таємний шифр" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Стильове оформлення сторінок"
  
  💻 Вправа "Стильове оформлення сторінок" Assignment
- Select activity 💻 Вправа "4 сезони"
  
  💻 Вправа "4 сезони" Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Верстка сторінки
  
  📑 Верстка сторінки Page
- Select activity 💻 Вправа "Позиціювання"
  
  💻 Вправа "Позиціювання" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Верстка"
  
  💻 Вправа "Верстка" Assignment
- Select activity 📑 Довідник стильових властивостей
  
  📑 Довідник стильових властивостей File
- Select activity HTML та CSS: як створити простий сайт
  
  HTML та CSS: як створити простий сайт URL
  
  Students must
  
  Mark as done
- Select activity Практика CSS grid
  
  Практика CSS grid URL
- Select activity Практика CSS flexbox
  
  Практика CSS flexbox URL
- Select activity 📑 Практика "Роботи"
  
  📑 Практика "Роботи" Page
- Select activity 💻 Вправа "Роботи" (стилі)
  
  💻 Вправа "Роботи" (стилі) Assignment
- Select activity 💻 Вправа "Лендинг"
  
  💻 Вправа "Лендинг" Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Figma. Знайомство
  
  📑 Figma. Знайомство Page
  
  Students must
  
  Mark as done
- Select activity 💻 Презентація у Figma
  
  💻 Презентація у Figma Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Figma у вебдизайні
  
  📑 Figma у вебдизайні Page
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Вебдизайн"
  
  💻 Вправа "Вебдизайн" Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Графічні ефекти на CSS
  
  📑 Графічні ефекти на CSS Page
- Select activity 💻 Вправа "Ефекти"
  
  💻 Вправа "Ефекти" Assignment
- Select activity 📑 Анімації
  
  📑 Анімації Page
- Select activity 💻 Вправа "Анімаційні ефекти"
  
  💻 Вправа "Анімаційні ефекти" Assignment
  
  Students must
  
  Mark as done
- Select activity Тест 4. Каскадні аркуші стилів
  
  Тест 4. Каскадні аркуші стилів Quiz
Select section Основи веб-програмування мовою JavaScript (+jQuery)

Основи веб-програмування мовою JavaScript (+jQuery)
Інтерактивні веб-сторінки на основі JavaScript, знайомство з бібліотекою jQuery
- Select activity Знаннєва складова Діяльнісна складова Ці...
  
  Описувати об’єктну модель документа.
  Пояснювати принципи взаємодії клієнт-сервер.
  Називати і наводити приклади використання основних елементів форм.
  Пояснювати принцип роботи прикладного програмного інтерфейсу.
  
  Створювати та налагоджувати інтерактивні веб-сторінки з використанням форм та веб-програмування.
  Створювати та застосовувати правила валідації даних, що вводяться у форму.
  Розміщувати сайт на сервері.
  
  Визначати необхідність застосування програмних скриптів на стороні клієнта чи сервера.
  
  Об’єктна модель документа.
  Веб-програмування та інтерактивні сторінки.
  Хостинг сайту.
  Веб-сервер та база даних. Взаємодія клієнт-сервер.
  Валідація та збереження даних форм.
  Прикладний програмний інтерфейс.
- Select activity 📑 Інструменти розробки у браузері
  
  📑 Інструменти розробки у браузері Page
- Select activity 📑 Об'єктна модель документа
  
  📑 Об'єктна модель документа Page
- Select activity 📑 Мова Java Script
  
  📑 Мова Java Script Page
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Мрії"
  
  💻 Вправа "Мрії" Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Кнопки, події, функції
  
  📑 Кнопки, події, функції Page
- Select activity 💻 Вправа "Згадай число"
  
  💻 Вправа "Згадай число" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Підказка"
  
  💻 Вправа "Підказка" Assignment
- Select activity 💻 Вправа "Невловима"
  
  💻 Вправа "Невловима" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Бариста"
  
  💻 Вправа "Бариста" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "PIN-код"
  
  💻 Вправа "PIN-код" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Лото-трійка"
  
  💻 Вправа "Лото-трійка" Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Форми і JS (і CSS)
  
  📑 Форми і JS (і CSS) Page
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Школа"
  
  💻 Вправа "Школа" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Колірна тема"
  
  💻 Вправа "Колірна тема" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Квіз"
  
  💻 Вправа "Квіз" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Як обрати професію?"
  
  💻 Вправа "Як обрати професію?" Assignment
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "ЗНО/НМТ"
  
  💻 Вправа "ЗНО/НМТ" Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Тестування на JavaScript
  
  📑 Тестування на JavaScript Page
- Select activity 💻 Вправа "Тест"
  
  💻 Вправа "Тест" Assignment
- Select activity 📑 Змінюємо вміст сторінки за допомогою JavaScript
  
  📑 Змінюємо вміст сторінки за допомогою JavaScript Page
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Список справ"
  
  💻 Вправа "Список справ" Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Вкладинки
  
  📑 Вкладинки Page
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Дистанційне навчання"
  
  💻 Вправа "Дистанційне навчання" Assignment
  
  Students must
  
  Mark as done
- Select activity 📑 Слайдер
  
  📑 Слайдер Page
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Конструктор емоцій"
  
  💻 Вправа "Конструктор емоцій" Assignment
  
  Students must
  
  Mark as done
- Select activity Локальна пам’ять браузера
  
  Локальна пам’ять браузера Page
  
  Students must
  
  Mark as done
- Select activity 💻 Вправа "Флеш-картки"
  
  💻 Вправа "Флеш-картки" Assignment
  
  Students must
  
  Mark as done
- Select activity JQuery
  
  Students must
  
  Mark as done
  
  JQuery
- Select activity 📑 Бібліотека jQuery
  
  📑 Бібліотека jQuery Page
- Select activity 💻 Вправа "Список справ"
  
  💻 Вправа "Список справ" Assignment
- Select activity 📑 Слайдер
  
  📑 Слайдер Page
- Select activity 💻 Проєкт "Монстрики"
  
  💻 Проєкт "Монстрики" Assignment
Select section Онлайнові конструктори сайтів

Онлайнові конструктори сайтів
Розробка сайту в онлайновому конструкторі Weebly.Com: створення сайту з кількох сторінок, опитування відвідувачів, блогу
Альтернативні конструктори: strikingly, mozello, webnode.
- Select activity www.weebly.com
  
  www.weebly.com URL
- Select activity 📑 Створення сайту та розміщення матеріалів
  
  📑 Створення сайту та розміщення матеріалів Page
- Select activity 📑 Створення форм для зворотного зв'язку
  
  📑 Створення форм для зворотного зв'язку Page
- Select activity 📑 Блог на платформі Weebly.Com
  
  📑 Блог на платформі Weebly.Com Page
- Select activity Сайти Google
  
  Сайти Google File
- Select activity Strikingly
  
  Strikingly URL
- Select activity Webnode
  
  Webnode URL
- Select activity Mozello
  
  Mozello URL
- Select activity Weblium
  
  Weblium URL
Select section Розробка сайту на движку WordPress

Розробка сайту на движку WordPress
Розробка блогу на основі системи керування вмістом WordPress, налаштування дизайну та структури блогу та сайту
- Select activity 📑 Технологія WordPress
  
  📑 Технологія WordPress Page
- Select activity 📑 Блог на WordPress
  
  📑 Блог на WordPress Page
- Select activity 📑 Дизайн WordPress
  
  📑 Дизайн WordPress Page
- Select activity 📑 Майстерня WordPress
  
  📑 Майстерня WordPress Page
Select section Основи дизайну та CEO просування сайту

Основи дизайну та CEO просування сайту
Принципи та поняття дизайну та юзабіліті; просування сайту та оптимізація для пошукових запитів
- Select activity Знаннєва складова Діяльнісна складова Ці...
  
  Наводити приклади оптимізації та стратегій просування веб-сайтів.
  
  Виконувати перевірку та оцінку сайту з точки зору ергономіки та пошукової оптимізації.
  Створювати стратегію просування сайту.
  
  Дотримуватися правил ергономічного розміщення матеріалів на веб-сторінці.
  Ураховувати особливості користувачів з особливими потребами при розробці веб-ресурсів.
  
  Правила ергономічного розміщення відомостей на веб-сторінці.
  Пошукова оптимізація та просування веб-сайтів.
- Select activity 📑 Проєктування сайту
  
  📑 Проєктування сайту Page
  
  Students must
  
  View
- Select activity 📑 Принципи графічного дизайну
  
  📑 Принципи графічного дизайну Page
- Select activity “Flat Design vs Realism” (відео)
  
  “Flat Design vs Realism” (відео) URL
- Select activity Визначте помилки дизайну
  
  Визначте помилки дизайну URL
- Select activity 📑 Основи СЕО
  
  📑 Основи СЕО Page
- Select activity Як подружити свій сайт з Facebook
  
  Як подружити свій сайт з Facebook URL
- Select activity Інклюзивний дизайн
  
  Інклюзивний дизайн URL
  
  Students must
  
  Mark as done
- Select activity SEO спеціаліст 2.0 (курс на Дія. Освіта)
  
  SEO спеціаліст 2.0 (курс на Дія. Освіта) URL
  
  Students must
  
  Mark as done

Course Activities

Section outline

Мультимедія та форми

JQuery