Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Поняття про мову гіпертекстової розмітки (HTML)
Урок:
Поняття про мову гіпертекстової розмітки (HTML)
16.05.2025
Вміст уроку:
1
2
3
4
5
6
7
8
9
1
Тема: Поняття про мову гіпертекстової розмітки (HTML)
Тип уроку: Вступний, комбінований
Тривалість: 45 хвилин
Мета уроку:
Ознайомити учнів із поняттям мови гіпертекстової розмітки (HTML)
Пояснити призначення HTML у створенні вебсторінок
Навчити розпізнавати базові теги HTML та створювати просту структуру сторінки
🎯 Очікувані результати:
Після уроку учень зможе:
Пояснити, що таке HTML
Знати призначення основних тегів
Написати просту HTML-сторінку з текстом і заголовком
Відкрити її у браузері
2
1 з 12 балів
Структура уроку
1. Організаційний момент (2 хв)
Привітання
Перевірка готовності до уроку
Мотиваційне питання:
❓ Як ви гадаєте, що "ховається" за будь-якою вебсторінкою?
.png)
3
1 з 12 балів
Актуалізація знань (3–5 хв)
Що таке вебсайт?
Які елементи ви бачите на сторінці (заголовки, кнопки, зображення тощо)?
Чи можна створити свою вебсторінку без програм? (Відповідь: Так — за допомогою HTML)
4
Пояснення нового матеріалу (20 хв)
📌 Що таке HTML?
HTML (HyperText Markup Language) — мова розмітки гіпертексту, що використовується для створення вебсторінок.
📄 HTML не є мовою програмування, вона лише структурує інформацію на сторінці.
5
Основні елементи HTML-документа
HTML складається з тегів — спеціальних команд, які «розмічають» вміст сторінки.
Тег — це команда, що починається з кутових дужок < >
Тег | Призначення | Приклад |
|---|---|---|
<html> | Вказує початок і кінець HTML-документа | <html>...</html> |
<head> | Службова інформація (назва, стилі) | <head>...</head> |
<title> | Назва вкладки браузера | <title>Моя сторінка</title> |
<body> | Основна частина — те, що бачить користувач | <body>...</body> |
<h1> — <h6> | Заголовки від найбільшого до найменшого | <h1>Привіт!</h1> |
<p> | Абзац тексту | <p>Це абзац.</p> |
<br> | Перехід на новий рядок | <br> |
<a href=""> | Посилання | <a href="https://example.com">Сайт</a> |
<img> | Зображення | <img src="cat.jpg"> |
6
Скелет HTML-документа:
📌 Цей код створює вебсторінку з заголовком і абзацом тексту.
7
3 з 12 балів
4. Практична робота (10–12 хв)
Завдання: Створи свою першу вебсторінку
Інструкція:
Відкрий Блокнот (Notepad) або Notepad++
Скопіюй базовий код HTML
Заміни текст на свій: заголовок і абзац
Збережи файл з розширенням .html
Наприклад: moya_storinka.htmlВідкрий файл у браузері
8
6 з 12 балів
завдання:
Скласти HTML-файл, який містить:
Заголовок (h1)
Два абзаци (p)
Одне посилання (a href)
🎁 Бонусне завдання: вставити зображення через тег <img> (можна з інтернету)
9
1 з 12 балів
Додаткові матеріали:
W3Schools — HTML tutorial (укр./англ.)
Онлайн-редактор HTML: https://html-online.com/editor/
Рефлексія від 9 учнів
Сподобався:
0
Так: 8
Ні: 1
Зрозумілий:
0
Так: 6
Ні: 3
Потрібні роз'яснення:
0
Ні: 8
Так: 1