6 клас 16 урок Інформатика "Інструктаж з БЖД. Створення простих вебресурсів"

Гвоздецька Ярослава Іванівна четвер, листопада 14, 2024

6 клас

Інформатика

Урок № 21

Тема уроку:

Інструктаж з БЖД.

Створення простих вебресурсів

Мета: Формування компетентностей: предметна компетентність:

навчальна: сформувати знання про створення простих веб-ресурсів;

виховна: виховувати інформаційну культуру, виховання уміння працювати в групі; формування позитивного ставлення до навчання.

ключові компетентності:

спілкування державною мовою: формувати вміння висловлюватися та спілкуватися на тему сучасних інформаційних технологій із використанням відповідної технології;

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

уміння вчитися впродовж життя: сприяти усвідомленню відповідальності за власне навчання.

Загальнонаціональна хвилина мовчання

🕯️

Перевірка домашнього завдання

1. Перечитати с.100-105, приготуватися до тесту.

2. Виконати інтерактивну вправу

"Основні теги вебсторінки"

https://learningapps.org/watch?v=pbn2kvfnt24

Мова HTML складається з тегів.

Теги − це ті самі цеглинки, з яких побудована кожна веб-сторінка.

Тег Опис
`<html>` Визначає початок і кінець HTML-документа.
`<head>` Містить метаінформацію про документ.
`<title>` Назва сторінки, що відображається у вкладці.
`<body>` Основний вміст сторінки.

Тег	Опис
`<html>`	Визначає початок і кінець HTML-документа.
`<head>`	Містить метаінформацію про документ.
`<title>`	Назва сторінки, що відображається у вкладці.
`<body>`	Основний вміст сторінки.

`<h1>`-`<h6>`
Заголовки від найбільшого (`<h1>`) до найменшого (`<h6>`).
`<p>` Абзац тексту.
`<br>` Перенос рядка (без нового абзацу).
`<hr>` Горизонтальна лінія для розділення вмісту.
`<strong>` Виділення тексту жирним.
`<em>` Виділення тексту курсивом.
`<span>` Виділення частини тексту або вмісту.
`<blockquote>` Цитата блоку тексту.

`<h1>`-`<h6>`	Заголовки від найбільшого (`<h1>`) до найменшого (`<h6>`).
`<p>`	Абзац тексту.
`<br>`	Перенос рядка (без нового абзацу).
`<hr>`	Горизонтальна лінія для розділення вмісту.
`<strong>`	Виділення тексту жирним.
`<em>`	Виділення тексту курсивом.
`<span>`	Виділення частини тексту або вмісту.
`<blockquote>`	Цитата блоку тексту.

`<ul>` Нумерований список (з "кульками").
`<ol>` Упорядкований список (з номерами).
`<li>` Елемент списку (використовується в `<ul>` або `<ol>`).

`<ul>`	Нумерований список (з "кульками").
`<ol>`	Упорядкований список (з номерами).
`<li>`	Елемент списку (використовується в `<ul>` або `<ol>`).

`<a>` Гіперпосилання.

<img src="посилання на зображення" alt="Це фото" width="1000"> Додає зображення.


`<a>`	Гіперпосилання.
	<img src="посилання на зображення" alt="Це фото" width="1000"> Додає зображення.

Медіа

Тег Опис
`<audio>` Відтворення аудіо.
Приклад коду:
<audio controls>
<source src="Посилання на аудіо(див. Рисунок 1)" type="audio/mpeg"
</audio>

`<video>` Відтворення відео.

Тег	Опис
`<audio>`	Відтворення аудіо. Приклад коду: <audio controls> <source src="Посилання на аудіо(див. Рисунок 1)" type="audio/mpeg" </audio>
`<video>`	Відтворення відео.

Типи кольорів у CSS

Назви кольорів: red, green, blue, тощо.
HEX-коди: #ff0000 (червоний), #00ff00 (зелений).
RGB: rgb(255, 0, 0) (червоний).
HSL: hsl(0, 100%, 50%) (червоний).

Приклад з різними типами кольорів:

html:
<p style="color: #ff0000;">Червоний текст</p>
<p style="color: rgb(0, 255, 0);">Зелений текст</p>
<p style="color: hsl(240, 100%, 50%);">Синій текст</p>

Презентація

"Створення простих вебресурсів"

Робота з підручником
https://pidruchnyk.com.ua/2685-informatyka-6-klas-morze-2023.html
с. 105-108

Інструктаж з БЖД

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки і санітарно-гігієнічних норм.

Тест

"Поняття про мову розмітки тексту"

https://forms.gle/Vkri5AN4MycNswJSA

Завантаження…

Практична робота в редакторі HTML

(с.105-106)

http://blocklyhtml.zgtm.de/

Середовище редактора HTML для створення веб-сайтів:

Блоки команд (зліва):

Створення сайту
"Вивчаємо інформатику":

Додай в редактор відповідні теги зі с.107

Послідовність створення
сайту
мовою HTML

Для того, щоб створити веб-сторінку, спочатку необхідно:

1.Створити текстовий документ у будь-якому текстовому редакторі (наприклад, блокнот).

Клікни правою клавішею миші та обери у контекстному меню Створити→Текстовий документ, який потім можна відкрити в програмі Блокнот.

2. У цій програмі набери html-код.

Після цього необхідно зберегти документ під назвою index.html

Проект сайту "Українські винахідники"

(с.107-108)

Запис на мові HTML:

Вигляд веб-сайту:

Код на мові HTML

<html>
<head>
<title>Сайт про українських винахідників</title>
</head>
<body>
<h1>Українські винахідники</h1>
<h1>Вчитель інформатики: Ярослава Іванівна Гвоздецька</h1>
<h2><p>Робота учнів ІІ групи 6-А класу</p></h2>
<h2><p>Гелікоптер</p></h2>
<h3><p>Винахідником гелікоптеру є київський авіаконструктор, який емігрував до США, Ігор Сікорський. У 1931 році він запатентував проект машини з двома пропелерами - горизонтальним на даху і вертикальним на хвості. У вересні 1939-го почалися випробовування гелікоптера VS-300 спочатку на прив’язі, а 13 травня 1940-го конструктор вперше підняв свою машину у вільний політ. Їхній успіх сприяв отриманню першого замовлення від американської армії. Поступово скромна фірма Сікорського перетворилася на потужний концерн, який щороку випускає сотні гвинтокрилів цивільного й військового призначення. Понад півстоліття всі президенти США користуються послугами гелікоптерів Сікорського.</p></h3>
<img src="https://static.espreso.tv/uploads/article/191909/images/im578x383-%D0%B3%D0%B5%D0%BB%D1%96%D0%BA%D0%BE%D0%BF%D1%82%D0%B5%D1%80%20%D1%81%D1%96%D0%BA%D0%BE%D1%80%D1%81%D1%8C%D0%BA%D0%B8%D0%B9%20-%20%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F.jpg"1000">
<p><audio controls>
<source src="https://topmusicua.com/uploads/files/2023-12/1703595300_d03d0bd180d0b0d197d0bdd181d18cd0bd196d0b7d0b8d0bcd0bd0b2d196d185d196d182d0b8f09f884f09f884f09f88429d84fb88f29d84fb88f29d84fb88fd658c8d4f1484.mp3" type="audio/mpeg"
</audio></p>
</body>
</html>

Зберегти зміни в документі можна, натиснувши

"Ctrl+s".

Посилання на інформацію про українських

винахідників:

https://espreso.tv/article/2015/07/24/top_22_ukrayinskykh_vynakhody___bez_yakykh_by_ne_isnuvav_svit

Щоб поставити знаки "<" і ">",утримуй клавішу Shift на англійській розкладці і натисни клавіші з буквами "б" та "ю".

6 клас 16 урок Інформатика "Інструктаж з БЖД. Створення простих вебресурсів"

ІнформатикаУрок № 21Тема уроку:

Інструктаж з БЖД.

Створення простих вебресурсів

Мета: Формування компетентностей: предметна компетентність:

навчальна: сформувати знання про створення простих веб-ресурсів;

виховна: виховувати інформаційну культуру, виховання уміння працювати в групі; формування позитивного ставлення до навчання.

ключові компетентності:

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

уміння вчитися впродовж життя: сприяти усвідомленню відповідальності за власне навчання.

Загальнонаціональна хвилина мовчання

1. Перечитати с.100-105, приготуватися до тесту.

2. Виконати інтерактивну вправу

"Основні теги вебсторінки"

https://learningapps.org/watch?v=pbn2kvfnt24

Мова HTML складається з тегів.

Теги − це ті самі цеглинки, з яких побудована кожна веб-сторінка.

<h1>-<h6>

<ul>Нумерований список (з "кульками").<ol>Упорядкований список (з номерами).<li>Елемент списку (використовується в <ul> або <ol>).

<a>Гіперпосилання.<img src="посилання на зображення" alt="Це фото" width="1000"> Додає зображення.

Медіа

ТегОпис<audio>Відтворення аудіо.Приклад коду:<audio controls> <source src="Посилання на аудіо(див. Рисунок 1)" type="audio/mpeg" </audio><video>Відтворення відео.

Презентація

"Створення простих вебресурсів"

Робота з підручникомhttps://pidruchnyk.com.ua/2685-informatyka-6-klas-morze-2023.html с. 105-108

Інструктаж з БЖД

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки і санітарно-гігієнічних норм.

Тест

"Поняття про мову розмітки тексту"

https://forms.gle/Vkri5AN4MycNswJSA

Завантаження&#8230;

Практична робота в редакторі HTML

(с.105-106)

http://blocklyhtml.zgtm.de/ Середовище редактора HTML для створення веб-сайтів:Блоки команд (зліва):Створення сайту "Вивчаємо інформатику":

Додай в редактор відповідні теги зі с.107

Послідовність створення сайту мовою HTML

Послідовність створення

сайту

мовою HTML

Для того, щоб створити веб-сторінку, спочатку необхідно:

1.Створити текстовий документ у будь-якому текстовому редакторі (наприклад, блокнот).

Клікни правою клавішею миші та обери у контекстному меню Створити→Текстовий документ, який потім можна відкрити в програмі Блокнот.

Проект сайту "Українські винахідники"

(с.107-108)

Запис на мові HTML:

Вигляд веб-сайту:

Код на мові HTML

Зберегти зміни в документі можна, натиснувши

"Ctrl+s".

Посилання на інформацію про українських

винахідників:

https://espreso.tv/article/2015/07/24/top_22_ukrayinskykh_vynakhody___bez_yakykh_by_ne_isnuvav_svit

Щоб поставити знаки "<" і ">",утримуй клавішу Shift на англійській розкладці і натисни клавіші з буквами "б" та "ю".

Додаткове завдання:

Створити сторінку веб-сайту

"Українські винахідники".

Відеороз'яснення:

Виконану роботу прикріпити посилання

на

Дошку Padlet "Інформатика 6 клас",

урок №16.

Коментарі

Дописати коментар

Популярні дописи з цього блогу

4 клас 23 урок Інформатика "Інструктаж з БЖД. Алгоритми із повторенням у середовищі Скретч"

5 клас 18 урок Інформатика "Інструктаж з БЖД. Постановка проблеми, закономірності. Побудова алгоритмів моделей закономірностей."

5 клас 19 урок Інформатика "Інструктаж з БЖД. Алгоритми із повторенням. Складання алгоритмів із командами повторення"