Мова гіпертекствої розмітки. Урок №6. Модуль "Вебтехнології"
Урок №6 Тема: Мова гіпертекстової розмітки.
Мета: ознайомити учнів з базовими поняттями та тегами мови розмітки HTML5, їх функціями та способами задання; розвивати логічне мислення, вміння прогнозувати зовнішній вигляд сайту в мережі Інтернет на основі його коду, аналізувати готовий код для HTML-документа; виховувати інтерес до сучасних технологій, базову цифрову грамотність.
Тип уроку: урок формування компетентностей.
Обладнання: ПК (вчительський та учнівські), презентація , проектор, картки із тегами мови HTML, роздруківки з кодами HTML, середовище Sublime Text 3, браузер Google Chrome.
Література: 1. Інформатика : вебтехнології (вибірковий модуль для 10-11 класів, рівень стандарту) / Н. В. Речич. – Харків : Видавництво «Ранок», 2020. – 160 с.
2. http://interactive.ranok.com.ua.
Хід уроку
І. Організаційний етап (привітання, розсадка за робочими місцями).
ІІ. Актуалізація опорних знань (обговорення питань минулих уроків).
1. Види сайтів.
2. Цільова аудиторія сайтів.
3. Інформаційна структура сайту.
4. Інструменти веброзробника.
ІІІ. Повідомлення теми та мети заняття.
– На минулому уроці ми познайомились із декількома найбільш популярними інструментами для створення розмітки та дизайну вебдокументів. Сьогодні ми поговоримо більш детально про мову гіпертекстової розмітки HTML, її основні поняття; напишемо свій перший код в середовищі Sublime Text 3.
IV. Пояснення нового матеріалу (використання презентації).
1. HTML (HyperText Markup Language) – стандартна мова розмітки документів у мережі Інтернет, яка обробляється спеціальними програмами (браузерами) і відображається у вигляді документа у зручній для людини формі.
2. Теги – команди мови HTML. Атрибути тегів – додаткові властивості елементів HTML.
3. Основні теги мови HTML : <Doctype HTML>, <head></head>, <body></body>, <h></h>, <p></p>, <a>, <ol></ol>, <li></li>, <ul></ul>, <nav>. Їх застосування на прикладах.
4. Гра «Теги в ряд». Учням роздаються картки з назвами основних тегів. Їх завдання розташуватися у шеренгу зліва-направо, імітуючи картками вигляд HTMLсторінки.
V. Закріплення нового матеріалу.
1. Завдання: у середовищі Sublime Text 3 створити код за зразком із роздруківки; модифікувати його на власний розсуд; пояснити, чому був змінений саме той чи інший елемент сторінки.
VI. Оцінювання.
Критерії:
1-3 бали – код не був набраний, але середовище запущене.
4 бали – набрана лише верхня частина коду.
5 балів – набрані дві з трьох частин коду.
6 балів – набраний весь код правильно.
7 балів – один елемент змінений доречно, але пояснення відсутнє.
8 балів – змінено два елементи, але пояснення відсутнє.
9 балів – змінено два елементи з доречним поясненням.
10 балів – документ модифіковано значним чином, є пояснення до кожної зміни.
VII. Рефлексія.
1. Чи є, на Вашу думку, тема уроку актуальною для сьогодення?
2. Що було найбільш цікавим сьогодні на уроці? А що найменш?
3. Як Ви можете використати знання, набуті на уроці, у майбутньому?
VIII. Домашнє завдання.
1. За матеріалами конспекта і попередньої практичної роботи (створення інформаційної структури сайту) розробити код для HTML-сторінки за власною структурою. У коді має бути як мінімум по одному елементу кожного тегу, вивченого на уроці.
про публікацію авторської розробки
Додати розробку