Урок_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_Фотогалерея_Прізвище".