Урок Поняття про мову розмітки гіпертекстового документа.
Урок №26 10 клас
Тема: Поняття про мову розмітки гіпертекстового документа.
Цілі:
- навчальна: сформувати поняття про мову розмічання гіпертекстового документа;
- розвивальна: розвивати логічне мислення, пам’ять; формувати вміння узагальнювати;
- виховна: виховувати інформаційну культуру, формування бережливого ставлення до обладнання комп’ютерного кабінету, виховання уміння працювати в групі; формування позитивного ставлення до навчання.
Тип уроку: Комбінований.
Обладнання та наочність: дошка, комп’ютери з підключенням до мережі Інтернет, картки з завданнями, навчальна презентація, проектор.
Програмне забезпечення: браузер, офісні програми.
Структура уроку
- Організаційний етап.
- Оголошення теми уроку.
- Актуалізація опорних знань.
- Мотивація навчальної діяльності.
- Вивчення нового матеріалу.
- Засвоєння нових знань, формування вмінь.
- Підсумки уроку.
- Домашнє завдання.
- Оцінювання учнів.
Хід уроку
- Організаційний етап
- привітання
- перевірка присутніх
- перевірка готовності учнів до уроку
- Оголошення теми уроку.
На екрані – хмара слів, з яких учні утворюють тему уроку: «Поняття про мову розмітки гіпертекстового документа».
- Актуалізація опорних знань
Учні виконують інтерактивну вправу за посиланням https://learningapps.org/watch?v=pnsb2js5t19, пригадують сучасні сервіси Інтернету, об’єкти мультимедіа та мультимедійні технології. В результаті правильного складання пазлів з’являється портрет Тіма Бернерса-Лі. З’ясовуємо, як ця людина пов’язана з темою уроку (Сер Тімоті Джон Бе́рнерс-Лі – британський спеціаліст з інформатики, творець HTTP, HTML, URI і автор інших розробок в галузі інформаційних технологій, засновник та голова консорціуму W3C, головний розробник Всесвітньої павутини (спільно з Робертом Кайо), автор концепції семантичної павутини. Лауреат премії Тюрінга 2016 року.)
Учень виступає з презентацією та доповіддю про Бернерса-Лі на англійській мові з перекладом на українську мову.
- Мотивація навчальної діяльності.
Багато людей називають HTML мовою програмування. Сьогодні з’ясуємо, чи це так, що представляє собою мова розмітки гіпертекста, для чого вона використовується.
- Вивчення нового матеріалу
Пояснення вчителя з демонструванням презентації
HTML (Hyper Text Markup Language – мова розмітки гіпертексту) – стандартна мова розмітки документів у всесвітній павутині, яка обробляється спеціальними програмами (браузерами) і відображається у вигляді документа, у зручній для людини формі
Гіпертекст – електронний документ, який містить зв’язки з іншими електронними документами. Такі зв’язки називаються гіперпосиланнями.
Контент – інформаційне наповнення сайту.
Раніше HTML поєднувала функції розмітки та форматування контенту, тобто зміст (семантичний) та зовнішній вигляд цього змісту (презентаційний).
В сучасних сайтах форматування виконується засобами каскадних таблиць стилів.
Каскадні таблиці стилів (CSS англ. Cascading Style Sheets) — спеціальна мова, що використовується для опису зовнішнього вигляду сторінок, написаних мовами розмітки даних.
JavaScript (JS) — динамічна мова програмування, яка використовується для організації взаємодії з користувачем, обміну даними з сервером, зміни структури та зовнішнього вигляду веб-сторінки.
Будь-який документ мовою HTML є набором елементів, причому початок і кінець кожного елемента зазначається спеціальними позначками — тегами.
Теги — команди мови HTML.
HTML-теги — це ключові слова або символи, які записуються в кутові дужки.
Теги бувають двох видів: парні й непарні (їх ще називають поодинокими). Парні теги складаються з відкриваючого і закриваючого тегів.
Теги нечутливі до регістра, тому можуть бути написані як великими, так і малими літерами.
Структура коду веб-сторінки:
<html>
<head>
Cлужбова інформація та посилання на фавікон, таблицю стилів і скрипти, які використовуються на веб сторінці.
</head>
<body>
Увесь контент, який відображається на сторінці.
</body>
</html>
Теги розміщуються в дужках <>. Наприклад:
<hr> тег для розміщення на сторінці горизонтальної лінії.
Дія окремих тегів поширюється на певний фрагмент документа. Щоб задати такий фрагмент використовують відкриваючий та закриваючий теги, які розміщуються на початку фрагмента та в місці його завершення. Перед закриваючим тегом ставлять символ /, наприклад:
<b> Текст, оформлений напівжирним накресленням </b>
Атрибути тегів
Більшість тегів мають додаткові властивості або характеристики.
Такі властивості називаються атрибутами (латин. attribuo — надавати, наділяти) і складаються з пари «назва — значення», розділених між собою знаком рівності та записаних у відкриваючому тегу відразу після назви елементу.
<p align=“justify”></p> - параграф вирівнено за шириною (по лівому та правому краями)
Код сторінки та її відображення в браузері
Засоби розробки веб-сайтів
HTML-код веб-сторінок сайту можна написати в текстовому редакторі та зберегти у файлах з розширенням імені htm або html. Для написання коду можна використовувати будь-який текстовий редактор, наприклад:
- Блокнот – стандартну програму Windows
- Notepad++ (notepad-plus-plus.org)
- SublimeText (sublimetext.com)
Створення веб-сторінки мовою HTML
Розглянемо процес створення веб-сторінок з використанням текстового редактора Notepad++.
За замовчуванням текст, що вводиться в редакторі, кодується з використанням кодової таблиці Юнікод.
Наведену на малюнку структуру коду рекомендується використовувати в усіх веб-сторінках, які ви створюватимете.
Щоб побачити, як відображається веб-сторінка в браузері, потрібно зберегти створений файл з розширенням html. Після цього у вікні браузера відобразиться створена веб-сторінка.
Для цього:
1. Виконайте Файл ⇒ Зберегти як.
2. Виберіть власну папку, у якій буде збережено файл .
3. Уведіть ім’я файла *.html в поле Ім’я файла.
4. Виберіть тип файла Hyper Text Markup Language file в списку Тип файла.
5. Виберіть кнопку Зберегти.
VI. Засвоєння нових знань, формування вмінь
Робота за комп’ютером
- Повторення правил безпечної поведінки за комп’ютером.
- Інструктаж учителя.
- Практична робота за комп’ютерами.
Картки із завданнями
- Вправи для очей.
VII. Підсумки уроку
Тестування за допомогою Kahoot!
Рефлексія
На інтерактивній дошці linoit.com напишіть продовження речення «Сьогодні на уроці я дізнався …» та поставте смайлик, що відповідає вашому настрою!
1. Під час уроку я
- дізнався…
- зрозумів…
- навчився…
2. Найбільше мені сподобалося…
3. На уроках найкраще в мене виходило…
4. Я мав (-ла) труднощі з…
5. Я хотів би ще дізнатися про…
VІII. Домашнє завдання
Створити HTML-сторінку на тему «Зимові канікули моєї мрії», використовуючи форматування символів і абзаців.
IX. Оцінювання роботи учнів
1
про публікацію авторської розробки
Додати розробку