Урок №26. Поняття мови розмітки гіпертексту. Основні теги форматування тексту. Інструктаж з БЖД

1. Урок №26 8 __ клас 1 група ________________
2 група ________________
Тема: Поняття мови розмітки гіпертексту. Інструктаж з БЖД
Мета:
 навчальна ознайомитись з мовою HTML та її основними елементами.
Опрацювати основні теги форматування тексту та їх атрибути;
 розвивальна: розвивати логічне мислення та креативність;
 виховна: виховувати інформаційну культуру, дбайливе ставлення до
комп’ютерної техніки.
Тип уроку: Комбінований.
Обладнання та наочність: дошка, комп’ютери з підключенням до мережі
Інтернет, Notepad++.
Хід уроку
І. Організаційний етап
 привітання
 перевірка присутніх
 перевірка готовності учнів до уроку
ІІ. Актуалізація опорних знань
Перевірка домашнього завдання (виконання тестового завдання
http://nikolay.in.ua/do-uroku/perevirka-znan/100-komp-yuterni-merezhi/784-
stvorennya-ta-publikatsiya-veb-resursiv-osnovni-ponyattya-movi-rozmitki-gipertekstu-
test-1)
ІІІ. Вивчення нового матеріалу
Основні теги форматування тексту:
Тег Призначення
strong Тег <strong> призначений для акцентування тексту. Браузери
відображають такий текст жирним шрифтом.
b встановлює жирне накреслення шрифту. Допустимо
використовувати цей тег спільно з іншими тегами, які визначають
накреслення тексту.
em Тег <em> призначений для акцентування тексту. Браузери
відображають такий текст курсивним шрифтом.
i Встановлює курсивне накреслення шрифту. Допустимо
використовувати цей тег спільно з іншими тегами, які визначають
накреслення тексту.
u Додає підкреслення до тексту. Цей тег засуджується специфікацією
HTML, натомість рекомендується використовувати стилі.
s Тег <s> відображає текст як перекреслений. Замість цього тега
рекомендується використовувати стилі.

2. big Тег <big> збільшує розмір шрифту на одиницю в порівнянні зі
звичайним текстом. В HTML розмір шрифту вимірюється в умовних
одиницях від 1 до 7, середній розмір тексту, що використовується за
замовчуванням, прийнятий 3. Таким чином, додавання тега <big>
збільшує текст на одну умовну одиницю. Допускається застосування
вкладених тегів <big>, при цьому розмір шрифту буде більшим з
кожним рівнем.
small Тег <small> зменшує розмір шрифту на одиницю в порівнянні зі
звичайним текстом. В HTML розмір шрифту вимірюється в умовних
одиницях від 1 до 7, середній розмір тексту, що використовується за
замовчуванням, прийнятий 3. Таким чином, додавання тега <small>
зменшує текст на одну умовну одиницю. Допускається застосування
вкладених тегів <small>, при цьому розмір шрифту буде менше з
кожним вкладеним рівнем, але не може бути менше, ніж 1.
sub Відображає шрифт у вигляді нижнього індексу. Текст при цьому
розташовується нижче базової лінії інших символів рядка і
зменшеного розміру.
sup Відображає шрифт у вигляді верхнього індексу. Шрифт при цьому
відображається вище базової лінії тексту і зменшеного розміру.
code Тег <code> призначений для відображення одного або декількох
рядків тексту, який являє собою програмний код. Сюди відносяться
імена змінних, ключові слова, тексти функції і т.д. Браузери зазвичай
відображають вміст контейнера <code> як моноширинний текст
зменшеного розміру.
pre Елемент <pre> визначає блок попередньо форматованого тексту.
Такий текст відображається зазвичай моноширинним шрифтом із
усіма пробілами між словами. За замовчуванням, будь-яку кількість
пробілів, які йдуть в коді поспіль, на веб-сторінці показується як
один. Тег <pre> дозволяє обійти цю особливість і відображати текст
як потрібно розробнику. Всередині контейнера <pre> допустимо
застосовувати будь-які теги крім наступних: <big>, <img>, <object>,
<small>, <sub> і <sup>.
ins Тег <ins> призначений для виділення тексту, який був доданий до
нової версії документа. Подібне форматування дозволяє відстежити,
які зміни в тексті документа були зроблені.
del Тег <del> використовується для виділення тексту, який був
вилучений у новій версії документа. Подібне форматування
дозволяє відстежити, які зміни в тексті документа були зроблені.
Браузери зазвичай позначають текст у контейнері <del> як
перекреслений.
q Тег <q> використовується для виділення в тексті цитат. Вміст
контейнера автоматично відображається в браузері в лапках.
blockquote Тег <blockquote> призначений для виділення довгих цитат всередині
документа. Текст, позначений цим тегом, традиційно

3. відображається як вирівняний блок з відступами зліва і справа
(приблизно по 40 пікселів), а також з відбиття зверху і знизу.
cite Тег <cite> позначає текст як цитату або виноску на інший матеріал.
Таке виділення зручно для зміни стилю тексту через CSS, а також
застосовується для поділу коду HTML на структурні елементи.
Браузери зазвичай встановлюють текст всередині контейнера <cite>
курсивом
br Тег <br> встановлює новий рядок в тому місці, де цей тег
знаходиться. На відміну від тега абзацу <p>, використання тега <br>
Не додає порожній відступ перед рядком. Якщо текст, в якому
використовується новий рядок, обтікає плаваючий елемент, то за
допомогою атрибута clear тега <br> можна зробити так, щоб
наступний рядок починалася нижче елемента.
hr Малює горизонтальну лінію, яка за своїм виглядом залежить від
використовуваних параметрів, а також браузера. Тег <hr>
відноситься до блокових елементів, лінія завжди починається з
нового рядка, а після неї всі елементи відображаються на
наступному рядку.
ІV. Засвоєння нових знань, формування вмінь.
Завдання:
1. Завантажити з сайту http://nikolay.in.ua/ заготовку практичної роботи.
2. Відкрити завантажений файл, увімкнути підсвітку мови HTML та зберегти
його у власній папці під іменем page2.html
3. Використовуючи запропоновані теги форматування тексту, привести текст
до заданого вигляду.
4. Під час роботи систематично зберігати файл та перевіряти його
працездатність.
V. Підсумки уроку
Рефлексія
1. Що нового ви сьогодні дізналися?
2. Чого навчилися?
3. Чи виникали труднощі?
VІ. Домашнє завдання
Опрацювати додаткові матеріали до уроку.
Виконати практичне завдання (http://nikolay.in.ua/do-uroku/kon/8-klas/438-urok-26-
ponyattya-movi-rozmitki-gipertekstu-instruktazh-z-bzhd-instruktazh-z-bzhd):
1. Скопіюйте в каркас сторінки наступний текст та відформатуйте його
використовуючи відповідні теги:
Головний заголовок – <h1>
Підзаголовок – <h2>

4. Другий і Третій – <h3>
Текст потрібно оформити як параграф - <p>
Зразок тексту:
1.Головний заголовок
Параграф, який розповідає про основну ідею сайта або додатка.
Параграф, який розповідає про основну ідею сайта або додатка.
Параграф, який розповідає про основну ідею сайта або додатка
1.1. Підзаголовок
Параграф, який відноситься до підзаголовка.
Параграф, який відноситься до підзаголовка.
Параграф, який відноситься до підзаголовка.
1.1.1. Другий підзаголовок
Параграф, який відноситься до другого підзаголовка.
Параграф, який відноситься до другого підзаголовка.
Параграф, який відноситься до другого підзаголовка.
1.1.2. Третій підзаголовок
Параграф, який відноситься до третього підзаголовка.
Параграф, який відноситься до третього підзаголовка.
Параграф, який відноситься до третього підзаголовка.
2. Додайте два абзаци тексту та відформатуйте його за зразком:
Зразок тексту:
HTML - стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-
сторінок створюються за допомогою мови HTML. Документ HTML
оброблюється браузером та відтворюється на екрані у звичному для
людини вигляді.
CSS. Спеціальна мова, що використовується для опису сторінок, написаних
мовами розмітки даних.
Приклад форматування:
3. Збережіть власний файл та перевірте його працездатність у будь якому
браузері.
ІХ Оцінювання роботи учнів