Календар
| « Квітень 2025 » | ||||||
|---|---|---|---|---|---|---|
| Пн | Вт | Ср | Чт | Пт | Сб | Нд |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | ||||
Опитування
жов 28
Урок 3. Форматування тексту — теги для виділення тексту (b, i, strong, em), блокові та інлайн елементи
admin
План уроку: Форматування тексту — теги для виділення тексту (b, i, strong, em), блокові та інлайн елементи (25-30 хвилин)
1. Вступ: Про що цей урок (2-3 хвилини)
- З цього уроку ви дізнаєтесь, як виділяти важливі частини тексту на вашій вебсторінці за допомогою спеціальних тегів. Ви також навчитеся відрізняти блокові елементи від інлайнових, що допоможе краще розуміти, як HTML елементи займають місце на сторінці.
2. Теги для виділення тексту (10 хвилин)
- Ціль: Ознайомити учнів із основними тегами, які використовуються для форматування тексту в HTML.
Теги <b> та <strong>
Тег
<b>робить текст жирним, але не додає ніякого додаткового семантичного значення.Тег
<strong>також робить текст жирним, але надає йому особливе семантичне значення: текст всередині цього тега вважається важливим для контенту.Приклад:
<p>Це звичайний текст, а це <b>жирний текст</b>.</p> <p>Це <strong>дуже важливий текст</strong> для розуміння.</p>
Теги <i> та <em>
Тег
<i>робить текст курсивним, але знову ж таки без додаткового семантичного значення.Тег
<em>робить текст курсивним і одночасно надає йому емоційне або важливе значення.Приклад:
<p>Це звичайний текст, а це <i>курсивний текст</i>.</p> <p>Це <em>важливий курсивний текст</em>, який слід виділити.</p>Аналогія: Уявіть собі текст як голос під час розмови. Тег
<b>просто збільшує гучність, тоді як<strong>робить голос не тільки гучним, але й наголошує на важливості того, що сказано. Теги<i>і<em>— це як говорити тихіше або з емоцією.
3. Блокові та інлайн елементи (10 хвилин)
- Ціль: Пояснити різницю між блоковими та інлайн елементами в HTML, щоб учні розуміли, як різні частини сторінки поводяться в браузері.
Блокові елементи
Блокові елементи займають всю ширину сторінки, навіть якщо їх контент займає лише частину простору.
Вони завжди починаються з нового рядка.
Приклади:
<div>,<p>,<h1>,<ul>.Приклад:
<p>Це параграф, який займає всю ширину сторінки.</p> <div>Це блоковий елемент, який також займає всю ширину.</div>
Інлайн елементи
Інлайн елементи займають тільки стільки місця, скільки їм потрібно, і не переносяться на новий рядок.
Приклади:
<span>,<a>,<em>,<strong>.Приклад:
<p>Цей текст містить <a href="#">посилання</a>, яке є інлайн елементом.</p>Аналогія: Блокові елементи можна порівняти з великими коробками, які займають весь простір на полиці (рядку), навіть якщо вони не заповнені до кінця. Інлайн елементи — це як маленькі предмети, які акуратно стоять один біля одного в одному рядку.
4. Практика (10 хвилин)
Ціль: Учні закріплюють отримані знання на практиці, форматуючи текст на своїй вебсторінці та працюючи з блоковими й інлайн елементами.
Завдання:
- Створити HTML-документ, у якому виділити важливі частини тексту за допомогою тегів
<b>,<i>,<strong>,<em>. - Додати кілька блокових та інлайн елементів і подивитися, як вони розміщуються на сторінці.
- Створити HTML-документ, у якому виділити важливі частини тексту за допомогою тегів
Приклад завдання:
Обговорення:
- Запропонувати учням спробувати використовувати різні теги для форматування тексту і поекспериментувати з тим, як блокові й інлайн елементи виглядають на сторінці.
5. Підсумок і запитання (5 хвилин)
Ціль: Закріпити знання про теги форматування тексту та блокові й інлайн елементи.
Що повторити:
- Що роблять теги
<b>,<strong>,<i>,<em>. - Що таке блокові елементи та як вони відрізняються від інлайнових.
- Що роблять теги
Запитання:
- Для чого використовують тег
<strong>? - Яка різниця між блоковими та інлайн елементами?
- Як можна виділити текст курсивом?
- Для чого використовують тег
Домашнє завдання
- Створити сторінку з різними стилями форматування тексту (жирний, курсивний, емоційний текст) і додати кілька блокових та інлайн елементів.
Цей урок дасть учням змогу контролювати вигляд тексту на вебсторінках та зрозуміти, як HTML елементи взаємодіють між собою в різних частинах сторінки.
Дивіться також:
Ласкаво просимо
16-09-2024, 20:56