Створення HTML-сторінки «Правила безпечного інтернету»

 

Завдання:

1. Створити HTML-сторінку.  За основу беремо код 

2. Розмістити 10 правил безпечного інтернету:
   
   

   1. Не повідомляй особисті дані

   Пояснення: Особисті дані можуть використати шахраї.
   Приклад: Не пиши незнайомцям свою адресу, номер телефону, пароль, номер школи.

   ---

   2. Використовуй складні паролі

   Пояснення: Простий пароль легко зламати.
   Приклад: Пароль 12345 — поганий, а G7#k9!Qw — надійний.

   ---

   3. Не переходь за підозрілими посиланнями

   Пояснення: Посилання можуть містити віруси або шахрайські сайти.
   Приклад: Повідомлення «Ти виграв айфон — натисни тут» найчастіше є обманом.

   ---

   4. Не відкривай файли від незнайомців

   Пояснення: У файлах можуть бути віруси.
   Приклад: Якщо хтось надіслав файл photo.exe, його відкривати не можна.

   ---

   5. Не довіряй незнайомцям в інтернеті

   Пояснення: Люди можуть видавати себе за інших.
   Приклад: Дорослий може прикидатися дитиною, щоб виманити інформацію.

   ---

   6. Думай, перш ніж публікувати

   Пояснення: Видалити інформацію з інтернету дуже важко.
   Приклад: Фото, викладене сьогодні, можуть побачити вчителі або батьки.

   ---

   7. Поважай інших користувачів

   Пояснення: Образи та приниження — це кібербулінг.
   Приклад: Не пиши образливі коментарі та не поширюй чутки.

   ---

   8. Повідомляй дорослим про небезпеку

   Пояснення: Самостійно вирішити проблему може бути складно.
   Приклад: Якщо хтось погрожує або шантажує — одразу скажи батькам або вчителю.

   ---

   9. Перевіряй інформацію

   Пояснення: В інтернеті багато фейків.
   Приклад: Новину краще перевірити в кількох надійних джерелах.

   ---

   10. Контролюй час у мережі

   Пояснення: Надмірне користування шкодить здоров’ю.
   Приклад: Робити перерви кожні 30–40 хвилин.
   
   

3. Оформити сторінку за допомогою CSS-стилів:

   • фон сторінки

   • заголовок

   • блоки з правилами

   • hover-ефекти

---

🧩 Шаблон + приклад виконання

Учні мають створити код  і зберегти у файл index.html та експериментувати з дизайном.

      <style>
  body {
            background: linear-gradient(135deg, #dff6ff, #ffffff);
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #0066cc;
            margin-bottom: 25px;
        }

        li b {
            max-width: 900px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 15px;
        }

        li {
            background: #ffffff;
            border-left: 6px solid #3399ff;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: 0.3s;
        }

       li:hover {
            transform: scale(1.03);
            background: #f0f8ff;
        }

        li span {
            font-weight: bold;
            color: #0066cc;
        }
  </style>

---

✅ Що учень повинен уміти після виконання:

• створити HTML-сторінку

• використовувати CSS

• оформлювати блоки

• створювати hover-ефекти

• працювати з класами

---

⭐ Додаткові завдання (на 10–12 балів):

🔹 Додати іконки (emoji або картинки)
🔹 Зробити темну тему (dark mode)
🔹 Додати анімацію появи блоків
🔹 Зробити кнопку "Я згоден з правилами"

---

📊 Критерії оцінювання:

Елемент	Бали
HTML структура	3
CSS оформлення	5
Hover-ефекти	2
Охайність коду	2
Разом	12

Етап самостійної роботи за комп'ютером

 

Найбільший елемент

 

Практична робота: CSS до Дня святого Валентина

 Оформлення тексту засобами CSS

Хешування даних. Практична робота

Мета роботи:

• ознайомитися з поняттям хешування;

• навчитися створювати хеші за допомогою стандартних алгоритмів;

• навчитися застосовувати хешування для перевірки цілісності даних та паролів.

---

Теоретичні відомості (коротко)

Хешування — це процес перетворення довільних даних у рядок фіксованої довжини (хеш), який однозначно представляє ці дані.

Пошук елемента у списку

1. Пошук елемента у списку

Використання математичних, логічних та статистичних функцій табличного процесора. Умовне форматування

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

Мета: формувати вміння використовувати у формулах вивчені функції та налаштовувати умовне форматування комірок таблиці; розвивати логічне мислення; виховувати інформаційну культуру.

Обладнання: підручник, ПК з табличним процесором.