10 клас

Тема. Основи дизайну та просування вебсайту

15.05 - 25.05. 2020

Тема. Проектна діяльність. Вибір теми проекту . Розробка плану проекту.

Пройти тест    за посиланням https://vseosvita.ua/go введіть код:  fjw465

або

Перейдіть за посиланням: https://vseosvita.ua/test/start/fjw465

27.04 - 08.05. 2020

Тема. Ергономіка у вебдизайні. Просування вебсайтів 

1.  15 провідних тенденцій веб розробки у 2020 році
2.  Основні тренди у веб дизайні 2020
3.  Тренди розробки вебсайтів 2020 
4. Пройти тест за кодом 614635 , відкривши посилання join.naurok.ua

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

25.04.2020

Тема. Хостинг сайту. Практична робота № 14 "Розміщення сайту на сервері"

Зареєструйтесь на сайті www.zzz.com.ua, отримайте доменне ім'я та завантажте власну сторінку на сервер. Пришліть на електронну пошту вчителя, адресу вашої сторінки. Детальні інструкції, дивіться в презентації. 

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

1. Створити сайт на довільну тему
А)сайт повинен містити не менше 5 сторінок

Б)Сайт повинен містити: таблицю, список, CSS, елементи адаптивної верстки, зображення, карту посилань, gif-анімацію, відео та/або аудіо, валідацію форм, елементи веб-програмування.


2. Розмістити сайт на зареєстрованому хостингу

Результат роботи надішліть вчителю на е-пошту.

23.04.2020

Тема. Практична робота № 13 "Створення інтерактивної веб-сторінки"

Створити інтерактивну веб-сторінку. Детальніше у відео

На ній повинні бути:

• повідомлення з трьома завданнями;
• різні повідомлення в залежності від кількості виконаних завдань;
• gif-анімація;
• форма з полями для реєстрації;
• валідація даних у формі відбувається обмеженням кількості символів і чисел, та підсвічуванням різними кольорами.

Результат роботи надішліть вчителю на е-пошту.

09.04.2020

Тема. Валідація те збереження даних форм.

Форма це елемент HTML-документа, що забезпечує взаємозв'язок з Web-вузлом. Форми використовуються для опитування відвідувачів, замовлення різних послуг та інших дій.  <form>...</form>- це фундаментальний елемент всіх форм, парний тег. Форма може мати декілька атрибутів. Основні з них: action, значенням якого є URL для передачі на вузол інформації з форми; metod, що приймає значення get або post (визначення способу  передачі даних форми до  вузла). <form method="post"  action="mailto:nadiya@ukr.net"> </form> Основними елементами, що розміщуються на формі, є: текстові поля; перемикачі; прапорці; списки; кнопки. Більшість з них створюється за допомогою непарного тегу <input> text - текстове поле. password - поле з паролем. radio - перемикач. checkbox - прапорець. hidden - приховане поле. button - кнопка. submit - кнопка для відправлення форми. reset - кнопка для очищення форми. image - кнопка із зображенням. file - поле для відправлення файлу. Тег <input> може мати різні атрибути.  type – визначає елемент управління (button, checkbox та інші-23 значення. Детальніше); name - ім'я елемента управління; value – значення елемента управління (атрибут є обов'язковим лише для  перемикача radio); size – ширина поля елемента управління в пікселях (для елементів text і password ширину поля визначають в символах); maxlength – максимальна кількість символів, котрі приймає елемент управління; checked – відмічений прапорець checkbox (перемикач radio); src – вказівник на рисунок, що використовується в формі як графічна кнопка. У HTML5 істотно розширений перелік таких елементів. Завдяки цим нововведенням форми стали привабливішими, а також значно спрощується перевірка правильності введення (валідация) клієнтом даних у форму. Детальніше. Прочитайте ще тут  Розглянемо приклад форми з різними елементами керування     Заголовок форми     <h1>Опитування</h1>     <h2>Дайте відповіді на запитання анкети :)</h2>      <form method="post" action="mailto:nadiya@ukr.net">                Текстове поле         <h3>Прізвище, ім'я *</h3>         <input type="text"  name="name" value="" placeholder="Вкажи прізвище, ім'я"  />               Перемикачі (радіокнопки)          <h3>Стать *</h3>          Жінка    <input type = "radio" name = "sex" value ="female"/>          Чоловік <input type = "radio" name = "sex" value ="male" checked/>                               Прапорці (чекбокси)     <h3>Які супермаркети  відвідуєте? *</h3>           <input type = "checkbox" name = "market" />"Рукавичка"<br>           <input type = "checkbox" name = "market" />"АТБ"<br>   <input type = "checkbox" name = "market" />"Близенько"<br>    <input type = "checkbox" name = "market" />"Сільпо"<br>                 Списки     <h3>Ваше заняття</h3>         <select  name="zanyattya">             <option>учень (учениця)</option>             <option>студент (студентка)</option>             <option>працюючий (працююча)</option>             <option>безробітний (безробітна)</option>             <option>пенсіонер (пенсіонерка)</option>         </select>               Текстове поле для електронної пошти <h3>Eлектронна пошта*</h3>         <input type="email"  name="email"  placeholder="nadiya@ukr.net"  />               Текстове поле для телефона         <h3> Телефон</h3>         <input type="tel"  name="telephone"  />               Текстове поле великої площі         <h3>Ваші пропозиції щодо поліпшення обслуговування*</h3>         <textarea  name="propozycii"           placeholder="У повідомленні має бути більше, ніж 20 символів"  >            </textarea>                         Кнопка надсилання на сервер         <input type="submit" value="Надіслати" id="my_button" />               Кнопка очистки форми         <input type="reset"  value="Очистити"  id="my_button" />                Примітка        <p>* Поля, обов'язкові для заповнення </p>     </form> Завдання .  Створіть форму згідно зразка. Результат збережіть у файлі form2.html.  Використайте як заготовку  файл form1.html, змініть стилі. Додайте до форми елементи "повзунок", "дата".(Дивіться довідник).  Поекспериментуйте з іншими елементами, які ще можна додати до форми.  Результат роботи надішліть вчителю на е-пошту.

06.04.2020

Тема. Поняття об'єктної моделі документа.   Веб-програмування та інтерактивні сторінки . Використання форм. Основні елементи форм.

Перегляньте теоретичний матеріал

Форма

Детальніше про створення форм та різноманітні атрибути можете прочитати ТУТ

Виконай завдання за зразком, використай підказку

Підказка

Скопіюй код сторінки, переглянь отриманий результат. Використай для виконання Завдання.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Моя сторінка 2</title>

</head>
<body>

<form>
  <fieldset>
  <legend>Реєстрація</legend>
  Прізвище:<br>
  <input type="text" name="firstname"><br>
  Ім'я:<br>
  <input type="text" name="lastname">
  <br>
  <input type="radio" name="gender"  checked> Чоловік<br>
  <input type="radio" name="gender" > Жінка<br>
  <input type="radio" name="gender" > Інше <br>
  <input type="submit" value="Відправити">
  </fieldset>
  
  <br>
  <fieldset>
  <legend>Трішки про Вас</legend>
   <p>Оберіть автомобіль, який би Ви придбали?</p>
  <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
  </select>
  <br>
   <p>Які страви Вам до вподоби?</p>
   <input type="checkbox" name="vehicle1" > Борщ<br>
  <input type="checkbox" name="vehicle2" > Шашлики <br>
  <input type="checkbox" name="vehicle2" > Пельмені <br>
  <p>Залиште свої коментарі</p> <br>
  <textarea> </textarea> <br>

  </fieldset>
  
  
</form>

</body>
</html>

Результат роботи надішліть вчителю на е-пошту.

02.04.2020

Тема. Дотримання авторських прав та ліцензій на використання графічних зображень та засобів мультимедіа на веб-сторінках.   

Практична робота "Використання графічних анімаційних та мультимедійних даних на веб-сторінках"

Правові документи в Україні:

ЗАКОН УКРАЇНИ, Про авторське право і суміжні права, (Відомості Верховної Ради України (ВВР), 1994, № 13, ст.64) Інтернет у законодавчому полі України Рекомендації з приводу правового захисту фотографій як об’єктів авторського права Протидія комп'ютерному піратству Стаття 42. Академічна доброчесність

Перегляньте

Подивись сюди:

Практична робота.  Створити веб-сторінку «Україна»

1. Помістити на веб-сторінку карту України.

2. За допомогою карти посилань, створити посилання з герба обраної області на відповідну сторінку Вікіпедії.

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

4. Під зображенням карти розмістіть gif-анімацію, з вказанням прізвища та класу автора сторінки.

Посилання на файли

• карта України
• музичні файли (1, 2, 3)

Результат роботи надішліть вчителю на е-пошту.

30.03.2020

Тема. Розміщення та відтворення мультимедійних даних на веб сторінках

Перегляньте теоретичний матеріал та виконайте практичне завдання

Практичне завдання. Створіть веб-сторінку за зразком з двома відео.

Вигляд веб-сторінки

Файли для роботи

Сім міфів.mp4

Мислення зростання.mp4
Текст для сторінки

Підказка

26.03.2020

Тема. Карти посилань

Переглянь теоретичний матеріал та виконай практичне завдання

Вигляд веб-сторінки та відео, як це повинно працювати

Посилання на сторінки Вікіпедії та підказка

Монітор
https://uk.wikipedia.org/wiki/%D0%9C%D0%BE%D0%BD%D1%96%D1%82%D0%BE%D1%80

Системний блок
https://uk.wikipedia.org/wiki/%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%BD%D0%B8%D0%B9_%D0%B1%D0%BB%D0%BE%D0%BA_(%D0%BA%D0%BE%D0%BC%D0%BF%27%D1%8E%D1%82%D0%B5%D1%80)

Клавіатура
https://uk.wikipedia.org/wiki/%D0%9A%D0%BB%D0%B0%D0%B2%D1%96%D0%B0%D1%82%D1%83%D1%80%D0%B0

Миша
https://uk.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BC%D0%BF%27%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0_%D0%BC%D0%B8%D1%88%D0%B0

Результат роботи надішліть вчителю на е-пошту.

23.03.2020

Тема. Створення gif-анімації

Перегляньте декілька способів створення gif-анімації.

Використовуючи будь-який створіть анімацію за зразком.

Для створення gif файлів можна використовувати безкоштовний LibreOffice Draw, або інший графічний редактор.

Програма UnFREEz для створення простої анімації. Особливості роботи дивися на сторінці "Як створити gif анімацію?"

Перегляньте відео

Створіть гіф-анімацію, в якій ваше ім'я та прізвище з'являлось по одній літері.

Результат роботи надішліть вчителю на е-пошту.

19.03.2020

Тема. Використання зображень у вебдокументах.

Ознайомтесь з теоретичним матеріалом

Виконайте вправу

Додайте зображення до веб-сторінки bembi.html

Докладніше - сторінка 102-103 (дивись в теоретичному матеріалі)

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

1. Знайдіть зображення, яке можна використати для тла.
2. Вкажіть атрибут background для тегу body (ст.98).
3. До проекту додайте файл bembi.jpg Розмістіть це зображення на своїй сторінці, скориставшись різними варіантами розташування та вирівнювання зі ст.103

Орієнтовний вигляд веб-сторінки

Бібліотеки зображень:

http://thepatternlibrary.com/
https://www.freepik.com/
http://www.designerspics.com/
https://www.pexels.com/uk-ua/
https://stokpic.com/
https://www.iconfinder.com/free_icons

16.03.2020

Урок 44. Практична робота 11. Створення вебсторінки з використанням каскадних аркушів стилю

Створити папку "ПР"11", у якій розмістити 2 файли: index.html та style.css.

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

Для виконання роботи можна користуватися онлайн редактором https://liveweave.com/
  Веб-сторінка в браузері повинна мати такий вигляд

Вказівка

Текст для виконання практичної роботи

12.03.2020

Урок 43.  Каскадні таблиці стилів. Стильове оформлення сторінок. Позиціювання елементів вебсторінки за допомогою стилів.

Опрацювати матеріал за посиланням