Урок_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

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

Урок_13 Використання зображень у веб-документах

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

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

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

1. Знайти в мережі фото вашого кумира (людини, яка є для вас взірцем по життю)

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

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

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

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

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

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

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

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

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

Дотримуючись таких вимог:

1. Заголовок сторінки -Практична робота. Підказка

2. Текст "Привіт" - заголовок першого рівня вирівняний по центру. 

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

4. В наступному абзаці, який вирівняний по ширині, атрибут - курсив, описати свої пани на майбутнє. Підказка

5. Список предметів, які здаватимете на ЗНО - нумерований список Підказка

6. Список посилань на сайти для підготовки до ЗНО - маркований список Підказка

7. Таблиця з датами проведення ЗНО Підказка

8. Додати після таблиці горизонтальну лінію 50% і розміром 6 

9 Додати віршовані рядки, що відображають ваше життєве кредо

Кольорову гамму підбираєте на власний смак

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

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

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

Урок_ 11 таблиці в HTML

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

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

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

1. Створити просту таблицю за зразком. (7 балів)

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

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

 "Урок11_Проста таблиця_Прізвище"

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

Можливо скачати заготовку для цього завдання

2. Самостійно створити складнішу таблицю за зразком. (12 балів)

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

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

 "Урок11_Складна таблиця_Прізвище". Здай обидва файли  в Google Classroom

Урок10_Списки в HTML

Мета: ознайомити з  тегами для створення списків різного виду у HTML документі

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

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

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

    - топ-5 співаків (маркований список) (підказка)

    - топ-5 музичних хітів (нумерований список) (підказка)

    - визначення 3 музичних стилів (список термінів) (підказка)

   -  за допомогою списків реалізувати горизонтальне меню  з посиланнями на відповідні сайти (Новини музичного світу; українські хіти; світові хіти) (підказка)

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

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

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

Урок 9_Гіперпосилання

 Мета: формувати уміння здійснювати розмітку тексту на веб-сторінці та додавати гіперпосилання

Актуалізація опорних знань:

Здійснити аналіз даної розмітки гіпертексту:

Розмітка сторінки з використанням тегів форматування тексту

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

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

1.До розмітки веб-сторінки створеної на попередньому уроці додай гіперпосилання на сайт "Інформатика -11 клас", який ми використовуємо на уроках інформатики. Та додай посилання на сторінки Вікіпедії, що містять інформацію про поетів, вірші яких розміщені на вашій сторінці

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

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

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

Урок_8 Текстові теги

 Мета: ознайомити з  поняттями розмітки веб-сторінки та основами мови HTML

1. Актуалізація опорних знань:

- Який основний елемент мови розмітки HTML?

- Як записуються теги?

- Яка різниця між відкриваючим та закриваючим тегом?

-  Приклади одинарних тегів

-  Що таке атрибут тегу? 

- Прокоментувати запис:

 <!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<title>Тестова сторінка</title>

</head>

<body>

<p>Моя перша сторінка</p>

</body>

</html>

- В якій програмі пишеться розмітка веб-сторінки?

- Які правила збереження веб-сторінки?

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

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

1.Створи розмітку веб-сторінки, яка має орієнтовний вигляд

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

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

4. Здай роботи в Google Classroom

Урок_7 Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи

 Мета: ознайомити з  поняттями розмітки веб-сторінки та основами мови HTML

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

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

1. У текстовому редакторі  Блокнот створити розмітку своєї першої сторінки, набравши код за зразком:

  <!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<title>Тестова сторінка</title>

</head>

<body>

<p>Моя перша сторінка</p>

</body>

</html>

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

3. Переглянь результат за допомогою браузера.

4. Зроби скріншот результату та збережи його  під назвою "Результат_Прізвище". 

5. Здай роботу у Google Classroom

Урок_6 Практична робота №1

 Проектування структури та складання плану розробки сайту

Мета: забезпечити засвоєння знань про процес створення макету інформаційної структури; формувати вміння створювати макет інформаційної структури сайта.

 Завдання: Спланувати та створити ескіз сайту школи, де ви навчаєтесь.

Продумайте:

o цілі і завдання свого сайту;

o специфічні риси майбутніх відвідувачів, які враховуватимуться при проектуванні;

o   структуру майбутнього сайту, сформулювати чинники, що впливають на вибір структури;

o   загальну дизайнерську концепцію, вибрати стиль.

Створіть:

o   ескіз-структуру головної сторінки сайту для вашої школи з назвою «Запрошуємо до нас за освітою» в середовищі MS Word.

 

Інформація, що має бути на сторінці:

ü Заголовок – текст  «Запрошуємо до нас за освітою»;

ü Назва організації – Нетішинська ЗОШ І-ІІІ ступенів №4;

ü Емблема школи;

ü Девіз школи;

ü Світлина школи;

ü Зображення основних кнопок переходу з головної сторінки;

ü Загальна інформація про школу (мова навчання, профільні класи, вивчення іноземних мов, гуртки та секції);

ü  Зацікавте користувача відвідувати саме вашу школу!

 Збережіть завдання у власній теці з назвою Практична робота №1_Прізвище та здайте у Google Сlassroom.

Урок_5 Етапи розробки сайту

 Мета: розглянути основні етапи розробки веб-сайту

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

Осмислення нового матеріалу: 

1. Виконай інтерактивні вправи:

- Правильні результати оформи у вигляді текстового документу  з назвою "Урок5_прізвище".
- Вправу 1 доповни поясненнями кожного етапу
Пам'ятай правила оформлення ділової документації при оформленні роботи.
- Здай роботу

 

2.   Створіть за допомогою будь-якої програми інформаційну структуру сайту із запропонованого списку. Схему збережіть у файлі з назвою "Структура сайту". Здайте роботу вчителю

Список сайтів

1. Сайт навчального закладу, де ви плануєте навчатись.
2. Сайт вашого класу
3. Сайт готелю
4. Сайт вашого міста
5. Сайт з продажу виробів зробленими вашими руками
6. Сайт з охорони тварин (рослин)
7. Сайт на власну тему

Урок_4 Інформаційна структура сайту

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

Актуалізація опорних знань: 

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

Осмислення нового матеріалу

Створити текстовий документ, в якому визначи інформаційну структуру таких сайтів:

1.https://uk.wikipedia.org

2. https://zno.osvita.ua

3. https://learningapps.org

4.http://ukrlit.org/slovnyk

Результат роботи зберегти під назвою "Структура_прізвище" та здай роботу вчителю.

Урок 2_ Поняття веб-дизайну. Основні тренди веб-дизайну. Ергономіка сайту.

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

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

Опрацюй інформацію за презентацією Ергономіка сайту

Завдання: 

1.  Перегляньте сайт Зелена хвиля (https://ecoclubua.com/).  Створіть текстовий документ, в якому запишіть, які елементи сайту відповідають вимогам ергономіки, а які — ні та у чому могла б полягати оптимізація сайту. До документу створіть титульний аркуш з вказаними даними про автора роботи. Збережіть  документ  під назвою "Ергономіка_прізвище". 

2. Ознайомтеся з рекомендаціями щодо просування (https://igroup.com.ua/seo-articles/prosuvannya-sajtu/) та оптимізації сайтів (https://igroup.com.ua/seo-articles/optymizatsiya-sajtu/). До попереднього документу додайте пояснення понять «просування веб-сайту» та «пошукова оптимізація». 

3. Здайте створений документ

Урок 1. Види сайтів. Способи їх створення

 Мета: узагальнити поняття: Інтернет, гіпертекст. Розглянути типи сайтів та можливі технології їх створення.

 11-А 03.09  11-Б 03.09

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

Види сайтів, способи їх створення 

Осмислення нового матеріалу

Пройти тест "Створення та адміністрування сайту"