inF | 6 клас | 28 листопада
Тема:
Інфографіка.
Домашня робота
Вивчити з підручника: § 26 ст. 130-136
та матеріал з презентації
inF | 6 клас | 24 листопада
Тема:
Створення блогу в мережі інтернет.
Домашня робота
Вивчити з підручника: § 25 ст. 125-129
та матеріал з презентації
inF | 6 клас | 21 листопада
Тема:
Блог. Відеоблог.
Домашня робота
Вивчити з підручника: § 24 ст. 121-125
та матеріал з презентації
inF | 6 клас | 17 листопада
Тема:
Колажі, комікси. Створення колажів і коміксів в онлайн-середовищах.
Домашня робота
Вивчити з підручника: § 23 ст. 116-120
та матеріал з презентації
inF | 6 клас | 14 листопада
Тема:
Публікація інформації в мережі інтернет.
Вправа: «Мій перший банер із зображенням»
Мета: навчитися вставляти зображення на вебсторінку та оформлювати його як банер.
Мета: навчитися вставляти зображення на вебсторінку та оформлювати його як банер.
<!DOCTYPE html>
<html>
<head>
<title>Мій банер</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial;
text-align: center;
}
.banner {
background-image: url("banner.jpg");
background-size: cover;
background-position: center;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 36px;
font-weight: bold;
text-shadow: 2px 2px 5px black;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="banner">
Вітаю на моєму сайті!
</div>
<p>Це мій перший банер із фоновим зображенням.</p>
</body>
</html>
Code language: HTML, XML (xml)
4. Збережи файл у папці разом із будь-якою фотографією (назви її banner.jpg).
5. Відкрий файл у браузері.
Творче завдання:
Замініть зображення на своє (наприклад, фото школи або природи).
Змініть текст на банері (наприклад: «Сайт 6-А/B класу» або «Літні пригоди»).
Додайте ефект наведення, щоб банер змінював колір або трохи рухався:
5. Відкрий файл у браузері.
Творче завдання:
Замініть зображення на своє (наприклад, фото школи або природи).
Змініть текст на банері (наприклад: «Сайт 6-А/B класу» або «Літні пригоди»).
Додайте ефект наведення, щоб банер змінював колір або трохи рухався:
.banner:hover {
transform: scale(1.05);
transition: 0.5s;
}
Code language: CSS (css)Домашня робота
Вивчити з підручника: § 22 ст. 113-115
та матеріал з презентації
inF | 6 клас | 10 листопада
Тема:
Створення простих вебресурсів.
Вправа: «Створи власну міні-сторінку»
Мета: закріпити знання структури HTML-документа.
Завдання:
Відкрий будь-який текстовий редактор (наприклад, Notepad).
Створи новий файл і збережи його під назвою
Введи правильну структуру HTML-сторінки:
Мета: закріпити знання структури HTML-документа.
Завдання:
Відкрий будь-який текстовий редактор (наприклад, Notepad).
Створи новий файл і збережи його під назвою
index.html.Введи правильну структуру HTML-сторінки:
<!DOCTYPE html>
<html>
<head>
<title>Моя перша вебсторінка</title>
</head>
<body>
<h1>Вітаю у світі HTML!</h1>
<p>Мене звати _______ і я створюю свою першу вебсторінку.</p>
<p>Мій улюблений предмет — інформатика.</p>
</body>
</html>
Code language: HTML, XML (xml)
4. Збережи файл і відкрий його у браузері.
Учні побачать власну сторінку з заголовком і двома абзацами.
Візуальне завдання:
Намалюй або познач стрілками на схемі, де розташовані:
Додатково:
Ти можеш змінити колір фону або шрифт за допомогою тегу
Учні побачать власну сторінку з заголовком і двома абзацами.
Візуальне завдання:
Намалюй або познач стрілками на схемі, де розташовані:
<head> — заголовок сторінки (метадані, назва у вкладці);<body> — вміст сторінки (текст, зображення, посилання).Додатково:
Ти можеш змінити колір фону або шрифт за допомогою тегу
<style> у <head>:
<style>
body { background-color: lightblue; font-family: Arial; }
</style>Code language: HTML, XML (xml)