"Створення та форматування Web-cторінок засобами HTML"

Відкритий підсумково-узагальнюючий урок
з застосуванням інтерактивних форм

за темою

Група № 23

Гра – це творчість, гра – це праця. 
Праця – шлях дітей до пізнання світу.
О.М.Горький

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

Тип уроку: комплексне застосування знань і способів дій. Практико-орієнтований проект з елементами дослідницького та творчого характеру з кінцевим захистом у вигляді Web-сторінок.

Форма проведення: Урок виробничого навчання.

Устаткування і наочний матеріал:

Плакати

Мультимедійний пристрій

Презентація

Тести за ПК

Персональні комп’ютери

Папір і олівці для учасників і журі.

Табличка "Журі" .

Таблички з назвою команд .

Картки-запитання для конкурсів.

Картки-завдання для конкурсів

Попередня підготовка до гри:

1. Об'єднати групу у 3 команди по 5 учнів.
2. Кожна команда отримує домашнє завдання:
3. Придумати назву команди, девіз, емблему.
4. Вибрати капітана.
5. Запросити журі.
6. Підготувати призи .

Час на проведення заходу: 60 хв.

ХІД ЗАХОДУ:

1. Опитування учнів методом тестів.
2. Конкурс капітанів "Найерудованіший"
3. Конкурс "Інтелектуальний поєдинок"
4. Конкурс "Впіймай зашифровану помилку"
5. Конкурс "Програміст"

(Вислів, який потрібно повісити на видному місці)

Зробив – це перемога

Не буду – це відступ

Не можу – це поразка

Повинен – це твій борг

Спроба – це можливість

Зроблю – це слово радості

Можу – це твоя впевненість і сила

Так будьте ж сильними, впевненими, щасливими!

Вступне слово майстра в/н.
Оголошення теми та мети уроку.
(тема уроку та конкурси гри виводяться
за допомогою проектора на екран) ЧАС - 5 хв.

Доброго дня шановні гості та учасники нашого відкритого заходу!

У нас сьогодні підсумковий урок вивчення теми "Створення та форматування Web-сторінок засобами мови HTML".

Тому наша мета сьогодні повторити і закріпити вивчений матеріал попередніх уроків, поглибивши свої знання у роботі з дескрипторами мови HTML.

Бачу ваш хороший настрій і зосереджені обличчя, що свідчить про готовність до уроку.

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

Шановні учні, у мене до вас є запитання, для чого ви використовуєте Internet? (Послухати відповіді). Якщо серед відповідей виникне думка „розповісти світу про себе” наголосити на ній, звернувши увагу на те, що люди, які розташовують свою інформацію в Internet хочуть бути почутими, хочуть поділитися своїми думками, ідеями.

А ми зможемо це зробити? Звичайно зможемо, якщо отримаємо необхідний об’єм знань.

Тож давайте сьогодні узагальнимо все набуте нами раніше з вивчення мови HTML, яка і відповідає за представлення інформації в Internet.

Наш сьогоднішній урок буде нестандартним, тобто ми його проведемо у вигляді змагання. Свої знання демонструватимуть три команди.

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

Конкурс оцінюватиметься 4-ма балами (тобто по 1 балу за девіз, емблему, привітання).

По одному додатковому балу може бути присвоєно команді за вихованість, мовний етикет, коректність, доброзичливість до суперників, ініціативність.

Оцінювати результати конкурсів люб’язно погодилась моя колега Коржан Тетяна Василівна. Отже, представлення команд:

1 конкурс – Презентація команд.

1 команда – Командир Галат Альона (Атаманюк Альона, Гайдук Ірина, Журавльова Галина, Демковський Дмитро). Назва команди 25-й кадр Девіз: "25-й кадр – це сила, користуйся цим уміло! Якщо алгоритм знайдеш, то до успіху прийдеш!" <Бажаєм вам, бажаєм вам…Щоб кращий приз дістався нам!>

2 команда – Командир Єфремова Ілона (Багдай Лілія, Дженжелей Ольга, Іваніцька Оксана). Назва команди Профі Девіз - «Не лінуйся працювати, якщо хочеш Профі стати»

3 команда – Командир Кобильчак Діна (Волинець Альона, Гуменюк Віка, Ковальчук Ольга, Андрейків Олена). Назва команди ШОК (Швидкі! Оригінальні! Креативні) Девіз - «Ваша підтримка – наша перемога»

Кожна команда з 5 чоловік у своєму складі має:

• Капітана
• Редактора, який працює з текстом
• Дизайнера, що опрацьовує графіку та фон
• двох Консультантів, які повинні надавати допомогу

Але перш ніж ми перейдемо до запланованих заходів, давайте пригадаємо безпеку праці у роботі з комп’ютерною технікою.

1. Яких правил необхідно дотримуватись
   перед початком роботи за ПК?
   (Багдай Лілія, Гайдук Ірина, Волинець Альона)
2. Назвати правила роботи за комп’ютером
   під час заняття. (Кобильчак Діна)
3. Які дії виконаємо по закінченню роботи?
   Гуменюк Віка)

Ви всі відповідали впевнено та вірно, сподіваюсь, що цих правил ви будете дотримуватись і надалі.

П. Актуалізація опорних знань. 2 конкурс – Тестування ЧАС – 6 хв.

Щоб налаштуватись на роботу, зробимо з вами невеличку розминку у вигляді опитування, яке проведемо за комп’ютерами. До вашої уваги пропонується ряд запитань (18 питань), відповідь на які потрібно отримати за 6 хвилин. Максимальна оцінка 12 балів.

Прошу учнів зайняти свої місяця за комп’ютерами. За моєю командою розпочнемо тестування.

Під час тестування відбувається ознайомча презентація.

Тести для опитування

1. Що таке веб-сайт?
   1. група веб-сторінок, об'єднаних між собою гіперпосиланнями
   2. група Web-сторінок, об'єднаних за певною тематикою
   3. насичена текстом, таблицями, графікою сторінка
   4. група сторінок з контентом
   5. сторінка, розташована в Інтернеті
2. Який засіб допомагає проглянути код веб-сторінки?
   1. Блокнот
   2. Word
   3. WordPad
   4. Браузер
   5. HTML
3. Вибрати тег на позначення жирного накреслення шрифту
   1. <font black>
   2. <b>
   3. <v>
   4. <font size=6>
   5. <h1-h6>
4. Оболонка веб-сторінки - це...
   1. <html></html>
   2. <body></body>
   3. <HTML></HTML>
   4. <html><head><title><body></body></title></head></html>
   5. <html><head></head></html>
5. В якій програмі можна створювати веб-сторінки?
   1. Блокнот
   2. Word
   3. PowerPoint
   4. Браузер
   5. HTML
6. Веб-сторінка - це...
   1. документ, створений за допомогою мови гіпертекстової розмітки
   2. документ, збережений з розширенням HTML
   3. документ, що міститиме гіперпосилання
   4. документ, насичений графічними зображеннями, текстом, таблицями
   5. представлення інформації у веб-просторі
7. Ознака заголовку веб-сторінки...
   1. <h1-h6>
   2. <head></head>
   3. <!->
   4. <title></title>
   5. <big>
8. Вибрати дескриптор кольору шрифту
   1. font color
   2. front color
   3. font size
   4. color font
   5. bgcolor
9. Що оберемо для встановлення кольору фону сторінки?
   1. bg color
   2. font color
   3. background
   4. bgcolor
   5. color bg
10. Мова HTML це...
    1. мова гіперпосилань
    2. кодування документу тегами мови HTML
    3. мова гіпертекстової розмітки документу
    4. мова розмітки гіпертексту
    5. мова програмування
11. Який дескриптор задає вирівнювання тексту по центру?
    1. <align=center>
    2. <centre>
    3. <center>
    4. <centr>
    5. <main>
12. Виберіть дескриптор для списків
    1. <dl></dl>
    2. <ul></ul>
    3. <ol></ol>
    4. <dt>
    5. <l1>
13. Щоб вставити таблицю використаємо тег...
    1. <tc>
    2. <td>
    3. <tr>
    4. <th>
    5. <table></table>
14. Яким дескриптором скористаємось для вставки малюнка?
    1. <img src=>
    2. <img crs>
    3. <img xsrc=>
    4. <imq src=>
    5. <imd crs=>
15. Щоб створити рухомий рядок оберемо...
    1. <marquee>
    2. <marguee>
    3. <margue>
    4. <marquee behavior="alternate">
    5. <marqyee>
16. Без якого дескриптора зміст веб-сторінки не буде відображатись?
    1. <head>
    2. <title>
    3. <body>
    4. <html>
    5. <!->
17. Які елементи віднесемо до атрибутів тіла документу?
    1. body alink (link, vlink)
    2. <p>
    3. body bgcolor
    4. <hr>
    5. body text
18. Вкажіть можливі розширення HTML документу
    1. <.txt>
    2. <.pdf>
    3. <.xdoc>
    4. <.html>
    5. <.htm>

Тестування завершено. Оцінки виведено. Отже, ми провели з вами розминку і після двох конкурсів маємо певні результати. Попрошу Тетяну Василівну їх оголосити.

• За презентацію команда «25-й кадр» отримує______ балів;

Команда «Профі»  отримує_______балів

Команда «ШОК» отримує_______балів

За тестування виводиться середній бал у команді

• За тестування команда «25-й кадр»  має_________балів

Команда «Профі»  має_________балів

Команда «ШОК» має__________балів

Оскільки кожна команда має у своєму складі капітана, то нам потрібно переконатись, що ці учні дійсно відповідають обраній посаді, а для цього проведемо серед них конкурс на звання кращого. Отже,

3 конкурс – Конкурс капітанів "Найерудованіший" (ЧАС – 10 хвилин)

Капітанам дається кросворд, який потрібно розгадати. Зашифровані терміни мають пряме відношення до нашої теми. Щоб його розгадати, потрібно заповнити всі клітинки кросворду, відповідаючи на запитання. На виконання завдання дається 10 хв. При підрахунку балів за одне правильно відгадане слово надається 1 бал, за ключове слово – 3 бали. Всього 15 балів.

КРОСВОРД 1

По вертикалі:

1. Тег sup визначає … індекс Верхній

3. Яке форматування здійснює тег i Курсив

5. Що пишеться між тегами dd Визначення

7. Нумерувати список можуть … цифри Римські

9. Конструкція мови html, чи контейнер, який містить дані  Елемент

11. Теги big и small змінюють розмір шрифту на один … Піксель

12. За допомогою тегів ol створюється ... список Нумерований

По горизонталі:

2. Що визначають теги sub sup Індекс

4. За допомогою тега ul створюється ... список Маркірований

6. Що пишеться між тегами dt Термін

8. Компонент тега, що містить вказівку на те,
як браузер повинен сприйняти і обробити тег Атрибут

10.  Тег big забезпечує… шрифта Збільшення

КРОСВОРД 2

По вертикалі:

1. Яке форматування здійснює тег center Центроване

3. Що міститься між тегами <title></title> Заголовок

5. Нумерувати список можуть…літери Латинські

7. Яке форматування здійснює тег s Перекреслення

9. Багаторівневі списки називають… Вкладені

11. Яким терміном позначаються програми
для перегляду Web-сторінок Браузер

По горизонталі:

2. Списки бувають…. і вкладені Однорівневі

6. Тег small забезпечує …шрифту Зменшення

8. Тип маркера при використанні атрибуту square Квадрат

10. Функція атрибуту align Вирівнювання

12. Яке форматування здійснює тег u Підкреслення

КРОСВОРД 3

По вертикалі:

1. Переміщення між Web-документами  Навігація

3. Відстань між тегами Відступ

5. Інформація для браузера Коментар

7. Верхня (заголовкова) частина сайту Хедер

9. Елемент Web-сторінки Таблиця

11. Парний тег Контейнер

12.  Інша назва тегу Дескриптор

По горизонталі:

2. Нижня частина сайту Підвал

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

6. Текст, що має гіперпосилання, які дають
можливість переходити зі сторінки на сторінку Гіпертекст

8. Багатосторінковий документ, розміщений в інтернеті Сайт

10. Підключений до мережі ПК, який створює
гіпертекстовий простір документа Сервер

ВІДПОВІДІ