Урок_23 Безпечний Інтернет

 

8 лютого 2022 року у світі відзначається 

День безпечного Інтернету (Safer Internet Day) 

 “Разом для найкращого Інтернету”.

День безпечного Інтернету (SID/ДБІ) запровадили мережі Insafe та INHOPE за підтримки Європейської комісії для просування безпечного та позитивного використання цифрових технологій, особливо, дітьми й молоддю.

Хід уроку

1. Положення та умови

Без сумніву, користуючись веб-сайтами, вам доводилося ставили позначку у спеціальному полі, погоджуючись із положеннями та умовами. Але чи дійсно ви знаєте, з чим погоджуєтеся?

Хоча може здатися, що перед вами нескінченний текст, написаний незрозумілим юридичним жаргоном, ваша “галочка” в полі прив’язує вас до набору певних прав і обов’язків. Тому важливо спробувати зрозуміти, про що йдеться у цьому документі.

Тож чому б не прийняти цей виклик просто зараз…

- Прочитай текст, та дай відповіді на запитання в текстовому документі:

Запитання:

1. Звідки взято цей текст? (зазначте посилання)

2. Чи погодилися ви з цими пунктами? (Так, Ні)

3.  Перекладіть цей фрагмент тексту більш зрозумілою мовою.

4. Яке призначення інструменту EULAlyzer?

2. “Зображення скаже більше, ніж 1000 слів”

Саме тому, у сучасному спілкуванні, ми часто використовуємо піктограми, що символізують  ключові поняття.

Доповни текстовий документ поясненням пікторгам, додаючи їх зображення:

3. Коли ваші права не дотримуються… 

Ваші права в Інтернеті можуть порушуватися багатьма різними способами. Хоча іноді це пов’язано з правилами поводження та безпеки в Інтернеті, в іншому випадку це може бути порушенням закону і призвести до юридичної відповідальності. 

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

4. Цінуй своє життя

Перегляньте відеоролик і опишіть в текстовому документі, які можливості надає живе спілкування на відміну від спілкування в соціальних мережах

5. Підсумок

Здайте виконану роботу

Пам'ятайте правила безпечного користування

Цінуйте своє життя, воно прекрасне!

Урок_22 Мультимедійний об'єкт - "біжуча стрічка"

 Мета: ознайомити з  тегами для створення елементу "біжуча стрічка" чи "біжучий малюнок" в  HTML документі

Вивчення нового матеріалу:

Опис

Тег <marquee> створює біжучі стрічку. В дісності зміст контейнера <marquee> не обмежується текстом і дозволяє переміщувати будь-які елементи веб-сторінки  —  зображення, текст, таблиці, елементи форм і т.д. 

Переміщення можна задавати не тільки горизонтально, але й вертикально.  

Синтаксис

<marquee>...</marquee>

Атрибути 

behavior

Задает тип руху контейнера <marquee>.

Синтаксис

<marquee behavior="alternate | scroll | slide">...</marquee>

Значення

alternate

Контент переміщається між правим і лівим краєм елемента.

scroll

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

slide

                 Контент переміщується в напрямку, що задається                 атрибутом direction, доходить до краю області і зупиняється.

bgcolor

Колір фона.

direction

Вказує напрям руху змісту контейнера <marquee>.

Опис

Зміст контейнера <marquee> може рухатися в 4 напрямках, не тільки вліво та вправо, а також вгору і вниз. 

Синтаксис

<marquee direction="down | left | right | up">...</marquee>

Значения

down

рух зверху вниз.

left

рух зліва направо.

right

рух  в праву сторону.

up

рух вгору.

height

Висота смуги прокрутки.

hspace

Горизонтальні поля навколо контента.

loop

Задает, скільки раз буде прокручуватись зміст.

scrollamount

Швидкість руху  контента.

scrolldelay

Величина затримки в мілісекундах між рухами. 

vspace

Вертикальні поля навколо змісту.

width

Ширина області прокрутки.

Приклад біжучої стрічки тексту:

<marquee behavior="alternate" direction="right">Бегущая строка</marquee>

Результат:

Бегущая строка

<marquee behavior="scroll" direction="left">Бегущая строка</marquee>

Результат:

Бегущая строка

<marquee behavior="scroll" direction="right"> <img src="../images/Chrome.png" /> </marquee>

Результат:

Формування практичних навичок: 

 Створити розмітку веб сторінки з назвою Рідна мова,  в якій відобразити наступне: 

- Біжуча стрічка з текстом: "Поважаючи мову своєї держави - ти поважаєш себе"

- зліва додати портрет Тараса Григоровича Шевченка (українського письменника)

- навколо портрету розмістити вірш про значимість української мови

- додати горизонтальну лінію на весь аркуш

- додати заголовок першого рівня "Основні положення"

- абзацом додати текст, який відображає основні положення 30 статті закону «Про забезпечення функціонування української мови як державної»

2. Приблизний зразок

3. Збережи код сторінки під назвою "Стрічка_Прізвище.HTML"

4. Збережіть скріншот відображення вашої сторінки в браузері під іменем "Урок22_Прізвище"

5. Здай обидва файли  в Google Classroom

При роботі можна скористатися підказками: 

1. Створення заголовку сторінки  

2.  Вставлення та редагування картинки

3. Оформлення тексту

4. Заголовок

5. горизонтальна лінія

6. Сторінка

 

Урок_18 Створення фотогалереї

 Завдання: створити веб-сторінку, яка відображатиме галерею замків України.

Інструкції до виконання:

Створимо у HTML-документі таблицю, в комірки якої вставимо ілюстрації до веб-сайту замки України. В комірках таблиці розміщено зменшені зображення, а при натисканні на них відкривається сторінка зі збільшеним зображенням та описом.

Зразки сторінок:

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

2. Створити розмітку веб-сторінки, використавши розмітку таблиці на 2 рядки та 4 стовпчики, в кожну комірку вставити зображення замку. Підказка. Код сторінки зберегти під назвою "Замки_Прізвще.html"

3. Кожний малюнок, вставлений у комірку таблиці, є посиланням,

що вказує на HTML-документ, тіло якого містить тег вставляння

того самого малюнка-гіперпосилання та опис його. Потрібно створити такий-HTML документ до кожного зображення, зберігши у папці із зображенням замків та відповідним кодом. 

Коди сторінок зберігати під іменами "1.html"-...-"8.html" Приклад файлу 1.HTML

4. Зробіть скріншот відображння сторінки "Замки", та відображення папки з кодами, зберігши їх в одному файлі під назвою "Урок_18_Фотогалерея_Прізвище"

5. Здай в Google Classroom файли: "Замки_Прізвще.html", "1.html"-...-"8.html" , "Урок_18_Фотогалерея_Прізвище".

Урок_17 Узагальнення знань з теми

Мета: узагальнити знання вивчених тегів, формувати пізнавальну компетентність учнів

Завдання:  

1. Виконайте вправи. Скріншоти зроблених вправ  одним файлом під назвою  "Урок17_Вправи_Прізвище" здати в Google Classroom.

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

1.Відкрити програму для прослуховування музики, наприклад Програвач Windows Media

2. Відкрити програму Захолення та ескіз (Ножницы) 

3. "Вирізати" зображення програми і зберегти у власній теці під назвою "Програвач"

4. Додати зображення програвача до файлу "Списки_Прізвище.HTML" або до будь-якої іншої сторінки

5. Зберегти зміни в розмітці

6. Збережи скріншот відображення твоєї сторінки в браузері під іменем  "Урок17_Ножиці_Прізвище". 

7. Здай файл скріншоту в Google Classroom

Урок 16 Практична робота_Частина 2

Мета: узагальнити знання вивчених тегів, формувати вміння учнів створювати розмітку веб-сторінки мовою HTML, форматуючи текст, малюнки, списки та таблиці

Створити розмітку веб сторінки за зразком:

Матеріали до практичної роботи: Файли-заготовки "Пункт 4.2"

Інструкції до виконання:

Збережи код сторінки під назвою "Основи_Прізвище.HTML". 

Збережи скріншот відображення вашої сторінки в браузері під іменем

 "Урок16_Основи_Прізвище". Здай обидва файли  в Google Classroom

Урок_15 Практична робота_частина1

 Таблиця зображень

Мета: узагальнити знання вивчених тегів, формувати вміння учнів створювати розмітку веб-сторінки мовою HTML, форматуючи текст, малюнки, списки та таблиці

 Створити розмітку веб сторінки "Таблиці із зображенням", яка міститиме дві таблиці "Пори року" та "Смайлики" за зразком:

1. Зображення для сторінки зберегти у папку з кодом, можна використати підбір зображень Фото зображень "Пори року"

2. Створити код сторінки, який відображатиме таблицю "Пори року". Підказка

3. Зображення для сторінки зберегти у папку з кодом, можна використати підбір зображень Фото "Смайлики"

4. Додай до коду розмітку, що відображатиме таблицю "смайлики" за зразком, доповнивши таблицю до 12 зображень: (Підказка)

Збережи код сторінки під назвою "Таблиця_зображення_Прізвище.HTML". 

Збережи скріншот відображення вашої сторінки в браузері під іменем

 "Урок17_Прізвище". Здай обидва файли  в Google Classroom

Урок_14 Зображення як фон веб-сторінки

 Мета: ознайомити з  можливостями використання зображень як фону в HTML документі

Вивчення нового матеріалу:

Формування практичних навичок: 

1. Знайти зображення, яке можна використати для тла веб-сторінки

2. Зберегти зображення у власній теці.

3. Відкрити з власної теки документ Практична_Прізвище.HTML

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

4.Задати тло веб-сторінки даним зображенням.

5. Переглянути результат, якщо необхідно відформатувати малюнок або шрифти на сторінці

6. Зберегти зміни в розмітці

7. Збережи скріншот відображення твоєї сторінки в браузері під іменем  "Урок14_Зображення_Прізвище". 

8. Здай файл скріншоту в Google Classroom 

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

https://www.pexels.com/uk-ua/

 https://www.freepik.com/popular-photos

http://thepatternlibrary.com 

http://www.designerspics.com/

https://www.iconfinder.com/free_icons

Для редагування малюнку можна використати Фотошоп онлайн