Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Поняття про мову розмічання гіпертекстового документа.
Урок:
Поняття про мову розмічання гіпертекстового документа.
01.11.2025
10 Клас
11
32
88
0
1
2
Залучено ШІ
При створенні цього матеріалу був залучений штучний інтелект.
Вміст уроку:
1
2
3
4
5
6
7
8
9
10
11
1
Тема
Поняття про мову розмічання гіпертекстового документа.
Мета
Ознайомити учнів з поняттями: мова розмітки гіпертексту, структура HTML-документа, теги та атрибути.
Сформувати вміння створювати просту веб-сторінку з використанням мови розмітки гіпертекстового документа.
Розвивати інформаційну культуру, логічне мислення, навички роботи з комп’ютером.
Виховувати уважність, акуратність, відповідальність за результат
2
Обладнання
Комп’ютери (або ноутбуки) з доступом до браузера та текстового редактора (наприклад, Блокнот / Notepad++).
Інтерактивна панель
Підручник Морзе-Барна.
Підготовлені файли-заготовки (наприклад, шаблон HTML-сторінки).
3
Очікувані результати
Після заняття учні зможуть:
пояснити, що таке мова розмітки гіпертекстового документа;
назвати основні елементи структури HTML-документа (doctype, html, head, body);
вказати приклади тегів та атрибутів;
самостійно створити просту веб-сторінку з заголовком, абзацом, зображенням або гіперпосиланням.
4
I. Організаційний момент
Привітання класу, перевірка готовності до заняття (комп’ютери, редактори, браузер).
Нагадайте правила техніки безпеки при роботі з комп’ютером.
Повідомлення теми та мети заняття.
5
3 з 12 балів
Актуалізація опорних знань
Запитання до класу:
Що таке веб-сторінка і як вона відображається в браузері?
Що означає “гіпертекст”?
Які ви знаєте елементи браузера?
З якою метою створюють веб-сторінки?
(Учні записують відповіді у вікно вводу.)
.png)
6
Вивчення нового матеріалу
Пояснення поняття «мова розмітки гіпертекстового документа». Наприклад: мова розмітки гіпертексту (англ. Hyper Text Markup Language, HTML) — це стандартна мова розмітки для створення веб-сторінок.
На робочому столі створіть папку. Назва папки ("сайт "прізвище учня")
відкрийте папку і створіть *.txt документ.
відкрийте *.txt документ і введіть:
<!DOCTYPE html>
<html> …
<head> Це сторінка Учня "Прізвище та ім'я"… </head>
<body> Це моя перша пробна сторінка </body>
</html>
натисніть на клавіатурі CTRL+S для збереження сторінки .
Закрийте документ.
В папці як показано на малюнку встановіть розширення файлу:
Подання, показати, розширення файлів., або відкрийте "Провідник", натисніть на вкладку "Вигляд" і поставте галочку біля пункту "Розширення імен файлів". Після цього змініть розширення файла з .txt на . HTML і ви отримаєте
Структура HTML-документа:
<!DOCTYPE html>
<html> … </html>
<head> … </head>
<body> … </body>
Цей файл додайте до завдання
.png)
7
Теги та атрибути: що таке тег, парні й непарні теги, атрибут у тегу.
Тег — це спеціальне слово (команда) в HTML, яке вказує браузеру, як відображати певний елемент вебсторінки.
Теги записуються в кутових дужках < >.Парні та непарні теги
Парні теги — мають відкриваючий і закриваючий тег.
Відкриваючий тег: <p>
Закриваючий тег: </p> (перед назвою ставиться символ /)
<h1>Заголовок сторінки</h1>
<p>Це перший абзац тексту.</p>
Непарні теги — не мають закриваючого тегу, тобто вони самостійні.
Зазвичай використовуються для вставки елементів, які не містять іншого вмісту (наприклад, зображення, розрив рядка).<br> <!-- розрив рядка -->
<img src="photo.jpg" alt="Моє фото"> <!-- зображення -->
Що таке атрибут
Атрибут — це додаткова властивість тега, яка уточнює, як саме має працювати або виглядати елемент.
Атрибут завжди записується всередині відкриваючого тега у форматі:
назва_атрибуту="значення"
<img src="school.jpg" alt="Будівля школи">
src — шлях до файлу зображення
alt — текст, який відображається, якщо зображення не завантажилося
Підсумуємо
Поняття
Пояснення
Приклад
Тег
Команда для браузера, яка вказує, як відображати елемент
<p>Текст</p>
Парний тег
Має відкриваючий і закриваючий тег
<h1>Заголовок</h1>
Непарний тег
Не має закриваючого тегу
<br>, <img>
Атрибут
Властивість тега, яка задає його параметри
<img src=\"a.jpg\" alt=\"Фото\">
Приклади застосування: вставка зображень (<img>), гіперпосилань (<a>), списків (<ul>, <ol>), таблиць (<table>).
<img src="school.jpg" alt="Будівля школи">
Отже якщо напишимо код:
<!DOCTYPE html><html>
<head> <title>Це сторінка Учня "Прізвище та ім'я"</title></head>
<body> Це моя перша пробна сторінка
<h2>Наша школа</h2>
<img src="school.jpg" alt="Будівля школи">
<p>Це фото нашої школи</p>
</body>
</html>
то отримаємо:
Демонстрація: відкрийте шаблон HTML-файлу, покажіть код і результат у браузері.
8
3 з 12 балів
ВВедіть код і виконайте попередні настанови
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Сторінка учня — Прізвище Ім’я</title>
</head>
<body>
<h1>Сторінка учня</h1>
<p>Мене звати <strong>Прізвище Ім’я</strong>.</p>
<p>Я навчаюся у 10-му класі нашої школи.</p>
</body>
</html>
додайте все необхідне і скрін виконаної роботи вставте у вікно вводу.
9
6 з 12 балів
Завдання для учнів:
– Кожен учень (або в парах) створює HTML-файл з наступним вмістом:
Заголовок сторінки (наприклад, «Моє хобі»)
Абзац тексту про себе або своє хобі
Зображення (вставити тег <img> з атрибутами src=…, alt=…)
Гіперпосилання (<a href=…>) на зовнішній ресурс (наприклад, вікіпедію) або на іншу сторінку (за бажанням)
– Додатково: створити список (маркерований або нумерований) з 3-ма пунктами (наприклад, «Мої улюблені книги/фільми/ігри»)
– Зберегти файл з розширенням .html, відкрити його в браузері і перевірити результат.Елемент
Тег
Призначення
Приклад
Зображення
<img>
Вставляє малюнок
<img src="a.jpg" alt="Фото">
Посилання
<a>
Створює гіперпосилання
<a href="...">Текст</a>
Списки
<ul>, <ol>, <li>
Виводять пункти списку
<ul><li>Елемент</li></ul>
Таблиця
<table>, <tr>, <td>, <th>
Створює таблицю
<table><tr><td>...</td></tr></table>
Учитель проходить класом, допомагає тим, хто має питання.
Скрін роботи вставте у вікно вводу
10
V. Підсумок заняття
– Обговорення:
Що нового ви дізналися?
Які труднощі виникли під час створення сторінки?
Що сподобалося / не сподобалося?
– Коротке опитування: назвіть три теги, які ви використали; поясніть, що таке атрибут; яка структура HTML-документа?
– Оцінювання виконаних робіт (за домовленою системою класу).Пояснення:
<!DOCTYPE html> — вказує, що це HTML-документ.
<html lang="uk"> — початок документа, мова сторінки українська.
<head> — технічна частина (сюди записують заголовок сторінки, метадані, стилі).
<title> — заголовок, який з’являється на вкладці браузера.
<body> — видима частина сторінки (те, що бачить користувач).
<h1> — заголовок на сторінці.
<p> — абзац тексту.
<strong> — виділяє текст жирним.
VI. Домашнє завдання
– Опрацювати відповідний параграф підручника Морзе-Барна (наприклад, § … – вказати за підручником)
– Самостійно створити веб-сторінку на тему «Мій клас» або «Моя родина», виконати: заголовок, текст, зображення, гіперпосилання, список.
– Привести коротку звітність: яке зображення вставили (посилання або файл), на що посилання веде.
11
Приклади застосування тегів HTML
У мові HTML є багато тегів, за допомогою яких створюють різні елементи вебсторінки: зображення, посилання, списки, таблиці тощо.
Нижче наведено найпоширеніші приклади.
🖼️ 1. Вставка зображення — <img>
Тег <img> використовується для вставки зображень на сторінку.
Це непарний тег, тому він не має закриваючого.
📘 Синтаксис:
<img src="school.jpg" alt="Будівля школи">
🔹 src — шлях до файлу (адреса зображення);
🔹 alt — альтернативний текст (показується, якщо зображення не завантажилося).
💡 Приклад у сторінці:
<h2>Наша школа</h2> <img src="school.jpg" alt="Будівля школи"> <p>Це фото нашої школи навесні.</p>
🔗 2. Створення гіперпосилання — <a>
Тег <a> використовується для створення посилань на інші сторінки або сайти.
📘 Синтаксис:
<a href="http://radehiv-school3.lviv.sch.in.ua/">Перейти на сайт школи</a>
🔹 href — атрибут, що містить адресу сторінки, на яку веде посилання.
🔹 Текст між тегами <a> і </a> — це клікований текст.
💡 Приклад:
<p>Детальніше читайте на <a href="https://mon.gov.ua/">сайті МОН України</a>.</p>
📋 3. Створення списків — <ul>, <ol>, <li>
Списки дозволяють впорядкувати інформацію у вигляді пунктів.
🔹 Маркерований список — <ul> (unordered list)
<h3>Наші гуртки</h3> <ul> <li>Робототехніка</li> <li>Футбол</li> <li>Хореографія</li> </ul>
🔹 Нумерований список — <ol> (ordered list)
<h3>Розклад дзвінків</h3> <ol> <li>08:30 — 09:15</li> <li>09:25 — 10:10</li> <li>10:20 — 11:05</li> </ol>
📊 4. Створення таблиці — <table>
Тег <table> використовується для створення таблиць.
Всередині таблиці використовують:
<tr> — рядок таблиці (table row),
<th> — заголовок стовпця (table header),
<td> — комірка з даними (table data).
📘 Приклад:
<h3>Розклад уроків</h3> <table border="1"> <tr> <th>День</th> <th>Предмет</th> <th>Вчитель</th> </tr> <tr> <td>Понеділок</td> <td>Інформатика</td> <td>Коваль Н. С.</td> </tr> <tr> <td>Вівторок</td> <td>Математика</td> <td>Петренко О. М.</td> </tr> </table>
Рефлексія від 3 учнів
Сподобався:
0
Так: 2
Ні: 1
Зрозумілий:
0
Так: 2
Ні: 1
Потрібні роз'яснення:
0
Ні: 3
Так: 0