10 кла І: 2020

неділя, 24 травня 2020 р.

28.05

Підготовка звітів. Представлення та зихист проєктів
Підготувати проєкт до захисту.
Надіслати проєкт на email: vor16022009@gmail.com

27.05

Виконання індивідуальних та колективних проєктів
Виконати проєкт на теми, які були вивченні впродовж навчального року.

понеділок, 18 травня 2020 р.

вівторок, 5 травня 2020 р.

Прикладний програмний інтерфейс (07.05)

Опрацювати теоретичну частину
Практична робота

Веб-сервер та бази даних. Взаємодія клієнт сервер (06.05)

Опрацювати теоретичну частину

четвер, 30 квітня 2020 р.

Валідація та збереження даних форм. Хостинг сайту (30.04)

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

Форма це елемент 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>

Текстове поле

<h3>Прізвище, ім'я *</h3>

Перемикачі (радіокнопки)

<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>

Списки

<h3>Ваше заняття</h3>

<option>учень (учениця)</option>

<option>студент (студентка)</option>

<option>працюючий (працююча)</option>

<option>безробітний (безробітна)</option>

<option>пенсіонер (пенсіонерка)</option>

</select>

Текстове поле для електронної пошти

<h3>Eлектронна пошта*</h3>

Текстове поле для телефона

<h3> Телефон</h3>

Текстове поле великої площі

<h3>Ваші пропозиції щодо поліпшення обслуговування*</h3>

</textarea>

Кнопка надсилання на сервер

Кнопка очистки форми

Примітка

<p>* Поля, обов'язкові для заповнення </p>

</form>

Завдання практичної роботи. Створіть форму згідно зразка.

Результат збережіть у файлі form2.html.
Використайте як заготовку файл form1.html, змініть стилі.
Додайте до форми елементи "повзунок", "дата".(Дивіться довідник).
Поекспериментуйте з іншими елементами, які ще можна додати до форми.

Створення динамічних елементів на веб-сторінках (29.04)

Опрацювати теоретичний матеріал

Об'єктна модель документа. Кнопки, події, функції (23.04)

Опрацювати теоретичний матеріал

Поняття про мови веб-скриптів та спосіб використання скриптів у гіпертекстових документах (22.04)

Опрацювати теоретичний матеріал
Таблиця тегів

Графіка та мультимедіа для веб середовища (16.04)

Опрацювати теоретичний матеріал
Графіка для веб-середовища. Анімаційні ефекти.

Мультимедіа на веб-сторінках. Розміщення мультимедійних файлів і настроювання параметрів їх програвання

Адаптивна верстка. Кросбраузерна оптимізація сторінок сайту. (15.04)

Опрацювати теоретичний матеріал
Виконати тестування

вівторок, 7 квітня 2020 р.

Блокування модель CSS. Проектування та верстка веб-сторінок (09.04)
Опорний конспект
Презентація
Практична робота (Результат надіслати на email: vor16022009@gmail.com)

Таблиці та списки на веб-сторінках. Каскадні таблиці стилів. Стильове оформлення сторінок (09.04)
Опоний конспект
Презентація
Конспект уроку

Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи. Текстові елементи. Гіперпосилання(08.04)
Презентація
Теоретична частина
Конспект уроку

неділя, 24 травня 2020 р.

понеділок, 18 травня 2020 р.

вівторок, 5 травня 2020 р.

четвер, 30 квітня 2020 р.