Теоретичний матеріал:
1. Підручник "Інформатика" (8 кл.) Автори: О. О. Бондаренко, В. В. Ластовецький, О. П. Пилипчук, Є. А. Шестопалов
2. https://sites.google.com/view/schoolratusha/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%8C%D0%BD%D1%96-%D1%81%D0%BF%D0%B5%D1%86%D0%BA%D1%83%D1%80%D1%81%D0%B8/%D1%821-%D0%B2%D0%B5%D0%B1-%D1%82%D0%B5%D1%85%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D1%96%D1%97/%D1%82%D0%B5%D0%BC%D0%B0-2-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BE%D0%BA-%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B8-html-%D1%82%D0%B0-css/2-1-%D0%BC%D0%BE%D0%B2%D0%B0-%D0%B3%D1%96%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D1%97-%D1%80%D0%BE%D0%B7%D0%BC%D1%96%D1%82%D0%BA%D0%B8-%D0%B3%D1%96%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%B8%D0%B9-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82-%D1%82%D0%B0-%D0%B9%D0%BE%D0%B3%D0%BE-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8
Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Мова гіпертекстової розмітки html
Урок:
Мова гіпертекстової розмітки html
21.09.2026
Вміст уроку:
1
2
3
4
5
1
Опрацюйте теоретичний матеріал:
Звичайний текст можна пристосувати для відображення браузером за допомогою спеціальних позначок — тегів, сукупність яких разом із правилами їх використання називають мовою розмітки гіпертексту.
HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це набір тегів та правила їх застосування для створення гіпертекстових документів.
Вебсторінка — це текстовий документ, розмічений тегами HTML, відображений у вікні браузера.
HTML не є мовою програмування.
HTML-документ (HTML-файл) є текстовим документом, тому створити його можна в будь-якому текстовому редакторі.
Наприкінці 1991 року Тім Бернерс-Лі опублікував перший загальнодоступний опис мови розмітки HTML, відомий як документ «HTML-теги». В ньому були описані 20 елементів відносно простої схеми розмітки HTML.
Тім Бернерс-Лі (нар. 8 червня 1955, Лондон) — британський спеціаліст з інформатики, творець HTTP, HTML, URI і автор інших розробок в галузі інформаційних технологій, засновник та голова консорціуму W3C, головний розробник Всесвітньої павутини (спільно з Робертом Кайо), автор концепції семантичної павутини. Лауреат премії Тюрінга 2016 року.
Тег — це записана в кутових дужках < > команда/позначка мови HTML, яку опрацьовує браузер.
Теги бувають парними і непарними. Парний тег складається з відкривального і закривального тегів. Закривальний тег починається символом «/».
Структуру HTML-документа визначають такі теги:
<html> | Початок документа |
<head> | Початок заголовка — службової частини коду |
<title> | Назва, що виводитиметься на вкладці браузера |
</title> | Кінець назви |
</head> | Кінець заголовка |
<body> | Початок «тіла» документа, яке виводить браузер |
</body> | Кінець «тіла» документа |
</html> | Кінець документа |
Приклад:
Один із варіантів структури вебсторінки:
https://w3schoolsua.github.io/htmltryit/tryhtml_default.html
Контейнери — це парні теги.
Контейнери позначають початок і кінець області дії відповідної вказівки. Між цими тегами може міститися текст та інші теги. Тег, що закриває область дії, порівняно з тим, що відкриває, має додаткову косу риску одразу після «кутової» дужки.
Oпис властивостей контейнера записують у першому дескрипторі контейнера через пропуск після назви контейнера або з нового рядка. Нечислові значення параметрів прийнято записувати у лапках.
Елементи гіпертекстового документа мають таку структуру:
2
Виконайте інтерактивні вправи.
Скріни виконаних вправ прикріпіть до цього завдання.
.png)
3
Практичне завдання "Порівняння середовищ для створення та тестування HTML-коду"
Для створення HTML-розмітки документа використовують будь-який текстовий редактор.
Для перегляду HTML- документа використовується браузер.
Створення простої вебсторінки в Блокноті
Створіть папку "Web_Ваше прізвище" для збереження завдань модуля.
У цій папці створіть папку Урок_1 рівняння середовищ, в якій буде зберігатися вебсторінка.
Запустіть Блокнот.
У вікні редактора наберіть код HTML-розмітки:
Збережіть сторінку з розширенням .html
В голові документа прописується теги, які не відображаються браузером, в тілі - ті, які браузер відображає.
Прикріпіть . txt та *. html файли
4
Створення простої вебсторінки в онлайновому середовищі.
Перевірте роботу в середовищах⬇️
https://jsfiddle.net/, http://cssdeck.com, http://jsbin.com/
У вікні кожного онлайн-редактора наберіть код HTML-розмітки:
Збережіть сторінку з розширенням .html чи іншим доступним способом
Прикріпіть відповідні скриншоти, посилання в це завдання
❗ Зробіть висновок щодо зручності, доступу онлайн/офлайн/подальшого редагування тощо
5
Створення простої вебсторінки в середовищі за вибором учня
Рефлексія від 6 учнів
Сподобався:
0
Так: 5
Ні: 1
Зрозумілий:
0
Так: 5
Ні: 1
Потрібні роз'яснення:
0
Ні: 6
Так: 0
