Олімпіада

 Інстал https://drive.google.com/drive/folders/1pr1XnZfQZVsWNP-nfHCPmp7c26DaXW2E?usp=sharing

Посилання https://elr.tnpu.edu.ua/login/index.php

11 клас Урок . Практична робота Матеріали та текстури

Тест  https://naurok.com.ua/test/join?gamecode=2416593

ОГОЛОШЕННЯ! Дистанційне навчання з інформатики для учнів НВК "Загальноосвітня школа І-ІІІ ст. ДНЗ с. Великі Гаї""

Добрий день і доброго здоров'я усім моїм учням!!!

У зв'язку з карантином ви можете скористатися дистанційною формою навчання уроків інформатики, які організовуватимуться таким чином:

• Для 2-4 класів я виставлятиму матеріал та завдання на цьому блозі.
• Для 5-11 класів створенні хмарні кабінети за допомогою сервісу Google Classroom. У групи  Viber кинуті інструкції для приєднання та коди потрібних для вас класів.

Питання пишіть у коментарях до даного допису!

Сподіваюся на плідну співпрацю та оптимізм!!!

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

Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили

Форми в HTML5 тепер мають вбудовану підтримку для перевірки за допомогою використання спеціальних атрибутів і нових типів введення, і надають вам широкий контроль над CSS-стилями.

Приклад:https://demo.tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/

color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url,week
Більше 
Щоб скористуватися новими типами, включіть їх в якості значення атрибута type:


 <input type="email">
Завдання 1. Порожні поля.
Валідація через атрибут required, який прописується в тезі input або інших тегах форм
Допишіть у всі теги форм атрибут required та зробіть висновок.

Завдання 2. Обмеження кількості символів та максимум числа
атрибути:

• maxlenght="число" максимальна довжина стрічки
• minlength="число" мінімальна довжина стрічки
• min="число" мінімальне значення
• max="число" максимальне значення

Доберіть до даних елементів форми обмеження по кількості та величині даних. Допишіть елемент форми для введення електронної пошти.

Завдання 3. Підказка про обмеження у введенні даних
Атрибут: 
title="Текст підказки для введення даних у елемент форми".
Додайте підказки до усіх полів.

Урок 22. Поняття об’єктної моделі документа. Веб-програмування та інтерактивні сторінки.

Форми
Для того щоб у браузері відображалися елементи форми існують такі теги та їх комбінації

<form>
.
елементи форми
.

</form>

Елементи форми:

для ввелення даних

• <Input type = "text" name="назва_змінної" > Визначає однорядкове текстове поле введення

• <input type="radio" name="назва_змінної" value="значення" checked>  Визначає перемикач (для вибору одного з варіантів)
• <input type="checkbox" name="a" value="1417"> Визначає перемикач (для вибору одного з варіантів)

Список, що відкривається

<select name="Кольори">
 <option value="Red" selected>Червоний</option>
 <option value="Green">Зелений</option>
 <option value="Blue">Синій</option>
</select>

Багатосимвольне текстове поле

<textarea name="message" rows="10" cols="30">
Коментар до товару

</textarea>

Кнопка

<input type="button" onclick="alert('Привіт світ!')" value="ОК">
 <input type="submit" value="Відправити">
 <input type="reset" value="Очистити">

<form action="action_page.php" method="get">

Приклад 1.

Скопіюйте текст програми у файл Zad1.html та перегляньте результат у браузері.

<html>

<head>

    <title>Приклад 1</title>

</head>

<body>

<input type="image"  src="j0433223.jpg"  width=60 height=60>

</body>

</html>

Додайте після <body>

<script type="text/javascript">

    var х = "Привіт!!!";

    var y = х + "Ти справився!!!";

    alert(y);

</script>

https://zbl99kurs.blogspot.com/p/22.html

11 клас. Урок 17. Створення gif-анімації

Онлайн створення gif-анімації
Практичне завдання.
Завдання 1. 
1. Створіть файл галерею зображень колекції товарів однієї з фірм на вибір (5 зображень)
https://gifius.ru/
Завдання 2. 
2. Створити рекламний банер Power Point
3. Зберегти під розширенням wmv
4. Відкрити аккаунт youtube
5. Завантажити відео у youtube
6. У посиланні перед словом youtube записуємо gif
7. Натискаємо Trim video

8. Натискаємо Create video
9.Копіюємо посилання на відео.
10. У  файл попереднього уроку додайте зображення які ви створили.

11 клас Урок 17. Використання зображень у веб-документах

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

• http://thepatternlibrary.com/
• http://www.freepik.com/
•    http://www.designerspics.com/
•     http://www.pexels.com/
•     http://stokpic.com/
•     https://www.iconfinder.com/free_icons

Більше про селектори фону https://www.w3schools.com/css/css_background.asp

Каскадні стилі CSS для фону:

• Повторення

background-repeat: no-repeat; repeat-x; repeat-y;

• Позиція

background-position: right top;

• Вкладення

background-attachment: fixed; scroll;

• Розмір

background-size: 100% 100%;

Каскадні стилі CSS для зображення:

Рамка

Border: дозволяє створити рамку для зображення можна налаштовувати ширину та колір і стиль рамки за допомогою відповідних параметрів:

• border-width:...
• border-color:...
• border-style:...

Додатково можна налаштовувати ці властивості для кожної сторони:
• top (верхня), 
• left (ліва),
• right (права),
• bottom (нижня). 

Можна прописати всі властивості однією командою

border: 3px solid red;

Відступи

• padding — внутрішні відступи  між зображенням та рамкою;
• margin — задає відступи від зображення від усіх чотирьох країв; 

Можна задавати відступ від конкретного краю:

• margin-top — відступ від верхньої сторони;
• margin-right — відступ від правого боку;
• margin-bottom — відступ від нижньої сторони;
• margin-left — відступ від лівого боку.
  

Аналогічно можна задавати внутрішні відступи:

• padding-top, 
• padding-left, 
• padding-right, 
• padding-bottom 

Завдання 

Створіть файл стилю за зразком

Файл заготовка


Д/з Проаналізувати презентацію https://drive.google.com/file/d/1mr9H3q6WZtNnnJNXNK31MkuHO6M1D9xk/view з сайтуhttp://it-science.com.ua/

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

Файл для роботи
https://drive.google.com/file/d/1cP-n7Wq85gfV8O8bMkoDmZIY0gm2wpLr/view?usp=sharing

11 клас. Година коду

Година Коду
https://hourofcode.com/ua/ru/learn
CSS 
https://hourofcode.com/flexfrog

11 клас. Застосування каскадних стилів у HTML-документах.

Селектори бувають

• id
• class
• tag
• атрибут
• *
• псевдо-елементи
• псевдо-класи

Заготовка для уроку
1. Створіть папку CSS у папці,  яку ви завантажили
2. У цій папці створіть файл style.css блокнот або NotePad++/
3. У файлі index.html під'єднайте файл style.css таким тегом.

<head>

<link rel="stylesheet" type="text/css" href="Style.css">

</head>

4. Запис селекторів з властивостями у файл style.css 

Універсальний селектор(стосується усіх тегів сторінки)
* {
text-decoration: none;

}

Властивості селектора (атрибута body)

Фон

body{background-color
background-image
background-repeat
background-attachment

background-position}

Більше про селектори https://www.w3schools.com/css/css_font.asp

Структура сучасної сторінки

<!DOCTYPE html>
<html>
<head>
<title> Сучасна сторінка
</title>

</head>
<body>
<header>Назва сайту</header>
<nav>Меню(навігація)</nav>
<main>Головна частина</main>
<footer>Підвал</footer>
</body>
</html>

Мультимедія

Малюнок
<img src="адреса файла" width="20" height="20" >
Відео
<video controls>
<source scr="video/movie.mp4" type="video/mp4" >

</video>
Звук
<audio controls>
<source scr="audio/audio.mp3" type="audio/mpeg" >

</video>

Блочні елементи

<div></div> блок, який займає всю ширину браузера

блок1
блок2
блок3

<span></span> блок, який займає лише місце своєї ширини. Наступний буде в тому самому рядку.

блок1 блок2 блок 3

11 клас . Урок 10. Практична робота №2 "Створення веб-сторінки за допомогою мови HTML"

1. Створіть папку PR2 у своїй папці.(0,5)
2. Створіть шаблон веб-сторінки та збережіть під назвою pr2.html (0,5)
3. У заголовку вікна сторінки впишіть назву "Практична робота 2. Прізвище ім'я"(1)
4. Задайте колір фону сторінки (1)
5. Заголовок тексту(ім'я видатного українця) задайте заголовком H1(1)
6. Наберіть текст розділивши його на два абзаци (тег <p>) (2)
7. Створіть маркірований список який стосується цього українця з трьох елементів (2)
8. Створіть таблицю, яка складається з одного рядка та трьох стовпців, яка має розмір ширини сторінки і змінюється разом з розміром сторінки (2)
9. Розмістіть три фото людини у кожну з комірок таблиці розміром 100 на 100 та посередині комірки (2)

11 клас 9 урок. Використання таблиць у HTML-документах.

Табли­ця

<TABLE>

<TR>

<TH>Назва стовпця 1 першого рядка</TH> 
<TH>Назва стовпця 2 першого рядка</TH>
<TH>Назва стовпця 3 першого рядка</TY>
...
</TR> 

<TR>

<TD>клітинка 1 другого рядка</TD> 
<TD>клітинка 2 другого рядка</TD>
<TD>клітинки 3 другого рядка</TD>

</TR>

...

</TABLE>

Атрибути:

<TABLE BORDER=5> , рамка товщиною 5.
<TD ROWSPAN=2>, об'єднання 2 клітинок по вертикалі 
<TD COLSPAN=3>, об'єднання 3 клітинок по горизонталі
<TABLE BORDER="1" WIDTH=100%>, ширина таблиці
<TR BGCOLOR=lightblue>,ирядка(може бути всієї таблиці, або клітинки)

11 клас. Урок 8. Теги форматування тексту, списки, гіперпосилання.

Створення списків

Ненумеровані

 <ul> 
<li>перший елемент</li>
<li>другий елемент</li>
…

 </ul>

Нумеровані 
 <ol> 
<li>перший елемент</li>
<li>другий елемент</li>
…

 </ol>

Словник визначень
 <dl> 
<dt> термін
 <dd>визначення терміну
 </dl>

Атрибути списків 
TYPE={disc|circle|square}
TYPE="значення параметра" , де 
"і"  -  римськими малими (і, іі, ііі, iv, ...), 
"І" - римськими великими (І, II, III, IV, ...) цифрами, 
"а" - латинськими малими (a, b, c, d, ...),

"А" - латинськими великими (А, В, С, ...) літерами.

Гіперпосилання

<a href="адреса лінку">Текст(об'єкт), який переходить за лінком</a>

<a href="mailto:pochta@gmail.com"> pochta@gmail.com - пишите письма </a>

Завдання:
Створіть сторінку rozklad.html
Розклад 10 класу

• Понеділок

1.
2.
3.
.....

• Вівторок

1.
2.
3.

.....

11 клас Урок 7 Каскадна таблиця стилів

Онлайн підручник https://www.w3schools.com/css

Три способи вставки CSS
Існує три способи вставлення таблиці стилів:

1. Зовнішній CSS
2. Внутрішній CSS
3. Вбудований CSS

Опис зовнішнього CSS:

1. Створити файл у папці сайту з назвою Style.css(назва Style може бути будь-яка)

2. Підключити файл Style.css до файлу нашої веб-сторінки

 <!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="Style.css">

</head>

<body>

<h1>Заголовок</h1>

<p>Параграф.</p>

</body>

</html>

3. Вигляд файлу "Style.css"

body {

  background-color: green;

}

h1 {

  color: brown;

  margin-left: 20px;

}

Внутрішній CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: green;}

h1 {
  color: brown;
  margin-left: 20px;}</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

11 клас Урок 7 .Поняття мови HTML. Базові конструкції: теги, структура HTML-документа.

Найпростіша структура веб-сторінки
<HTML>
<HEAD>
<TITLE> Найпростіша веб-сторінка
</TITLE>
</HEAD>
<BODY>
Ця сторінка створена за допомогою простих тегів
</BODY>
</HTML>

Урок 4. 11 клас Веб-технології

Типи сайтів
https://learningapps.org/view6415216

Урок 3_11. Інформаційна структура сайту

Презентація https://drive.google.com/file/d/1VdPLlwcCV8gW7DhCCnV85rgYimmeWAzf/view?usp=drive_open
Тест
https://onedrive.live.com/?authkey=%21APki%5Fq7IdzfCJOg&cid=7811D05561F72B66&id=7811D05561F72B66%21413&parId=7811D05561F72B66%21407&o=OneUp

11 клас. Модуль Веб-технології

Список сайтів
Завдання 1. Відвідайте та перегляньте сайти:
http://www.okeanelzy.com/
http://www.nbuv.gov.ua/
https://www.facebook.com/
https://korrespondent.net/
http://bdpu.org/
https://rozetka.com.ua/

Завдання 2. Каталог веб-професій 

https://www.education.ua/ua/professions/it/

Д/з Опрацювати презентацію https://onedrive.live.com/view.aspx?resid=FA5D45696FB78!2967&ithint=file%2cpptx&authkey=!AL88bmvQ66gSpmw
 Заповнити таблицю до Завдання 1

11 клас

https://onedrive.live.com/?authkey=%21AClTGcFITaKWX_Y&cid=CE79E13D8E47F5D6&id=CE79E13D8E47F5D6%21914&parId=CE79E13D8E47F5D6%21265&o=OneUp