Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Урок 1. Вступ до веб-технологій. Структура HTML. Форматування тексту за допомогою HTML
Урок:
Урок 1. Вступ до веб-технологій. Структура HTML. Форматування тексту за допомогою HTML
08.03.2026
Вміст уроку:
1
2
3
4
Опис, який учні побачать перед початком уроку
Урок 1. Вступ до веб-технологій. Структура HTML. Форматування тексту за допомогою HTML
1
Звичайний текст можна пристосувати для відображення браузером за допомогою спеціальних позначок — тегів, сукупність яких разом із правилами їх використання називають мовою розмітки гіпертексту.
HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це набір тегів та правила їх застосування для створення гіпертекстових документів.
Отже, вебсторінка — це текстовий документ, розмічений тегами HTML, відображений у вікні браузера. HTML не є мовою програмування.
HTML-документ (HTML-файл) є текстовим документом, тому створити його можна в будь-якому текстовому редакторі.
Тег — це записана в кутових дужках < > позначка мови HTML, яку опрацьовує браузер.
Розглянемо основні елементи HTML:
<!DOCTYPE html>: Цей рядок вказує браузеру, що документ написаний на HTML5.
<html>: Кореневий елемент HTML-документа.
<head>: Містить мета-інформацію про документ, таку як заголовок та підключення стилів.
<meta charset="UTF-8">: Вказує на використання кодування UTF-8.
<title>: Задає заголовок сторінки, який відображається на вкладці браузера.
<body>: Містить основний контент сторінки, який бачать користувачі.
<h1>: Заголовок першого рівня.
<p>: Абзац тексту.
Форматування тексту
У HTML-документі розмір і регістр символів, якими записано теги, не мають значення. Розмір і накреслення символів, що відображаються у вікні браузера, визначаються розміткою документа.
Теги мови HTML визначають вигляд об’єктів, зокрема текстових фрагментів, на вебсторінці.Теги бувають парними і непарними. Парний тег складається з відкривального і закривального тегів. Закривальний тег починається символом «/».
Теги з помилками або такі, що не підтримуються браузером, ігноруються.
Тег може містити атрибути, значення яких впливають на його дію. Атрибути записуються у відкривальному тегу.
Для створення маркованого списку використовують тег <ul>…</ul> з атрибутом type, який задає вигляд маркера:
"disk" —
; "circle" — 
; "square" — 
.Для створення нумерованих списків використовують тег <ol>…</ol> з атрибутами type (тип нумерації: "1" — арабські цифри, "А" — латинські літери, "І" — римська нумерація тощо) і start (задання початкового номера арабськими цифрами).
2
8 березня
3
100 з 100 балів
Крок 1. Підготовка файлу
Відкрий редактор Phoenix.
Створи новий документ.
Одразу збережи його під назвою index.html. Увага: переконайся, що в назві немає пробілів, а після крапки стоїть саме html, а не txt.
<head> (Голова) — тут пропиши назву сторінки для вкладки браузера (використовуй тег заголовка вікна).
<body> (Тіло) — тут буде все, що ми побачимо на екрані.
Крок 2. Наповнення контентом
У розділі <body> додай наступні елементи:
Заголовок: Напиши фразу "Вітаю на моїй сторінці!" найбільшим рівнем заголовка.
Текст: Напиши коротке речення про себе у звичайному абзаці.
Акцент: Одне слово у реченні виділи так, щоб воно стало жирним.
Як перевірити роботу?
Збережи файл/
Знайди файл index.html у своїй папці.
Прикріпи файл index.html до цього тесту.
.png)
4
8 березня
Рефлексія від 0 учнів
Сподобався:
0
Так: 0
Ні: 0
Зрозумілий:
0
Так: 0
Ні: 0
Потрібні роз'яснення:
0
Ні: 0
Так: 0