МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

НАВЧАЛЬНО-МЕТОДИЧНИЙ ЦЕНТР ПРОФЕСІЙНО-ТЕХНІЧНОЇ

ОСВІТИ У ЛУГАНСЬКІЙ ОБЛАСТІ

ДЕРЖАВНИЙ НАВЧАЛЬНИЙ ЗАКЛАД "СЄВЄРОДОНЕЦЬКИЙ

ПРОФЕСІЙНИЙ ЛІЦЕЙ"

 

 

 

 

 

 

 

МЕТОДИЧНА РОЗРОБКА ЗАНЯТТЯ З ІНФОРМАТИКИ

НА ТЕМУ: "ПОНЯТТЯ ПРО МОВУ РОЗМІЧАННЯ ГІПЕРТЕКСТОВОГО ДОКУМЕНТА"

 

 

 

 

 

Укладач: 

Викладач інформатики, викладач-методист  О.С. Воронкін

 

 

 

 

 

 

 

 

 

2025

Методична розробка заняття з інформатики на тему: "Поняття про мову розмічання гіпертекстового документа" / Укладач Воронкін Олексій Сергійович. – Сєвєродонецьк: ДНЗ СПЛ, 2025. – 18 с.

 

 

Анотація

Методична розробка на тему "Поняття про мову розмічання гіпертекстового документа" містить дидактичний матеріал, завдання для самостійної роботи та контролю знань. Розробка сприятиме формуванню у здобувачів освіти знань про основи мови HTML, її теги та атрибути, а також навичок створення вебсторінок. Відповідає навчальній програмі вибірково-обов’язкового предмету "Інформатика" для учнів 10-11 класів закладів загальної середньої освіти (рівень стандарту), затвердженої наказом Міністерства освіти і науки № 1407 від 23 жовтня 2017 року. Методична розробка може бути корисною для викладачів інформатики закладів професійної (професійно-технічної) освіти і закладів фахової передвищої освіти, учителів інформатики закладів загальної середньої освіти, здобувачів освіти зазначених закладів, а також всіх, хто цікавиться основами веб-дизайну.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ТЕМА ЗАНЯТТЯ 

ПОНЯТТЯ ПРО МОВУ РОЗМІЧАННЯ ГІПЕРТЕКСТОВОГО ДОКУМЕНТА

 

МЕТА ЗАНЯТТЯ

•              формування        предметних         компетентностей:        сформувати уміння

створювати найпростіші веб-сторінки мовою розмітки гіпертексту HTML; 

•              формування ключових компетентностей: 

-                 спілкування державною мовою (уміння обговорювати проблемні питання);

-                 ініціативність і підприємливість (уміння самостійно приймати рішення

і нести за них відповідальність);                                                                                          

-                 соціальна і громадянська компетентності (усвідомлення важливості

участі в діяльності глобальної інтернет-спільноти);                                                          

-                 екологічна грамотність і здорове життя (знання правил техніки безпеки, адекватна оцінка користі й шкоди від роботи за комп’ютером, вміння організовувати свій робочий час).                                                                                          

ОЧІКУВАНІ РЕЗУЛЬТАТИ

•              здобувач освіти вміє зберігати текстові документи як веб-сторінку, додавати текст, мультимедійні об’єкти на веб-сторінку, переглядати вебсторінку                                            

ОБЛАДНАННЯ

•              комп’ютери з доступом до мережі Інтернет

 

ПЛАН ЗАНЯТТЯ

I. Організаційний момент II. Актуалізація опорних знань     III. Основна частина.  

IV. Практичні завдання  V. Завершальна частина. Підбиття підсумків заняття VI. Домашнє завдання

 

ХІД ЗАНЯТТЯ

I. Організаційний момент

1.   Привітання здобувачів освіти та перевірка готовності до заняття.

2.   Повторення правил техніки безпеки при роботі з комп’ютером.

3.   Перевірка домашнього завдання.

II. Актуалізація опорних знань    

Фронтальне опитування здобувачів освіти

1.     Що таке веб-розробка і чому вона важлива?

2.     Що означає термін "гіпертекст"?

3.     Що таке браузер і як він взаємодіє з веб-сторінкою?

4.     Які є основні елементи графічного інтерфейсу веб-браузера?

5.     Що таке URL і яку роль він відіграє в інтернет-адресації?

Вправа "До та після". Запитання до здобувачів освіти, зведені у таблиці нижче. 

Свою відповідь здобувачі освіти занотовують до стовпця "До".

	До	Після
Як створити веб-сайт?
Які програми для цього використовують?

 

IIІ. Основна частина

Веб-сторінки є базовими документами World Wide Web і створються у HTML. Сторінки можуть бути як частиною веб-сайту, так і самостійними документами. 

 

Що таке HTML

Мова гіпертекстової розмітки (від англ. Hyper Text Markup Language, скорочено HTML) – стандартна мова розмітки документів у всесвітній павутині, яка обробляється спеціальними програмами (браузерами) і відображається у вигляді документа у зручній для людини формі.

HTML-сторінка містить HTML-теги, що надають інформацію про структуру сторінки, її вигляд та вміст. Веб-браузери (далі – браузери) використовують цю інформацію для визначення способу відображення сторінки.

 

Що таке теги

Теги – команди мови HTML.  

HTML-теги (команди) – це ключові слова або символи, які записуються в кутові дужки. Теги бувають двох видів: парні й непарні.

Парні теги складаються з початкового (відкриваючого) і кінцевого (закриваючого) тегів (рис. 1).  Непарний тег – лише початковий.

 

Рис. 1. Склад HTML-елементу

Початковий тег елемента має вигляд <element-name>, а кінцевий тег має вигляд </element-name>. Тег разом з опціональними атрибутами та вмістом, якщо він є, утворює HTML-елемент. Атрибути елемента записуються в початковому тегу одразу після назви елемента. Вміст елемента записується між його двома тегами. У прикладі, наведеному на рис. 2: <abbr> - це початковий тег, title="World Wide Web" - це атрибут, WWW – це вміст елемента, </abbr> – кінцевий тег.

 

Рис. 2. Складові частини HTML-елементу

 

Рівні створення веб-сторінок

До створення веб-сторінок існує три загальних підходи:

1.                      Високий рівень – створення документу звичайними засобами з наступною його конвертацією в HTML.

2.                      Середній рівень – створення веб-сторінки в спеціалізованому редакторі.

3.                      Низький рівень – створення веб-сторінки безпосередньо в HTMLкодах. 

Перший підхід не вимагає жодних знань мови HTML. Документ створюється в довільному текстовому редакторі у форматі, в якому він буде відображатись у браузері. Після створення документ конвертується у HTMLкод. Наприклад, Microsoft Word дозволяє зберегти відкритий документ у форматі HTML. Але цей підхід має суттєві недоліки: по-перше, код, що отримано в результаті конвертації, є досить громіздким і незручним для подальшого редагування, а по-друге, можливості веб-сторінки, що отримана таким шляхом, досить обмежені, оскільки з початку створюється не HTMLдокумент, а, наприклад, Word-документ.

Другий підхід є найзручнішим з точки зору співвідношення часу, що витрачається на створення веб-сторінки, та можливостей цієї сторінки, отриманих за допомогою спеціалізованого HTML-редактора (наприклад, WYSIWYG Web Builder, Adobe Dreamweaver). Ці редактори, як правило, дозволяють створювати веб-сторінки за принципом "Що бачиш, те й отримуєш", при цьому документ зберігається одразу у HTML-коді. Крім того, такі редактори дозволяють безпосередньо редагувати HTML-код. Ефективність отриманого коду при цьому підході залежить від ефективності та можливостей обраного редактора.

Третій підхід вимагає глибокого знання мови HTML. Редагування вебсторінок відбувається у форматі, дещо незручному для сприйняття початківцем. Однак при такому підході можна створити дуже ефективний HTML-код, що забезпечить максимальну інформативність сторінки при її мінімальному об’ємі. Крім того, в такому випадку веб-дизайнеру доступні всі можливості мови HTML, які можуть не бути реалізовані у спеціалізованих HTML-редакторах. На цьому занятті для цього ми будемо використовувати Windows Notepad (Блокнот) – простий текстовий редактор, що є частиною операційних систем Microsoft Windows.

 

Структура HTML документа

Символи, взяті в кутові дужки <> є тегами.

Документ повинен починатися тегом <html> і закінчуватися тегом </html>. <html> є кореневим елементом документа. Всі інші елементи містяться всередині тегів <html> ... </html>. Все, що знаходиться за межами цих тегів, не сприймається браузером як код HTML і не обробляється

Документ складається із 2 частин: заголовка (Head) і, власне, документа (Body).

Кожний WWW – документ має назву, яка вводиться у титульному рядку веб-браузера.

Для введення титульного рядка в заголовок документа потрібно скористатися наступними тегами: 

<head> <title> Титульний рядок документа </title> </head>.

Для запису основного тексту потрібно ввести: <body> Основний текст </body>.

 

Таблиця 1. Елементи структури веб-сторінок

<html> </html>	Початок і кінець документа; вказує програмі перегляду сторінок що це HTML документ
<head> </head>	Заголовок; визначає місце, де поміщується різна інформація, яка не відображається в тілі документа. Тут розташовується тег назви документа та теги для пошукових машин
<title>	Поміщує назву документа, що відображається у заголовку
</title>	вікна
<body> </body>	Тіло документа; визначає видиму частину документа

 

Таким чином, спрощена схема документа в форматі HTML виглядає так:

<html>

<head>

  <title> Титульний рядок документа</title>

</head>

<body> Основний вміст документа </body>

</html>

Ця схема є базовою для будь-якого HTML-документа і може бути розширена. У подальшому – при виконанні вправи 3, ми додамо до цієї спрощеної структури оголошення типу документа, щоб вказати браузеру на використання HTML5, мови сторінки, типу кодування символів документа. 

Отже загальна схема документа в форматі HTML виглядатиме таким чином:

<!DOCTYPE html>

<html lang="uk">

<head>

  <meta charset="UTF-8">

  <title> Титульний рядок документа</title>

</head>

<body> Основний вміст документа </body>

</html>

Елементи, що знаходяться всередині тегу <html>, утворюють дерево документа, так звану об'єктну модель документа, DOM (document object model). Елемент <html> є кореневим елементом, body і head – структурними елементами.

 

Рис. 3. Найпростіша структура веб-сторінки

Технологія роботи за комп’ютером під час виконання практичних завдань

1.   Відкриття текстового редактора "Блокнот"

•       Зазвичай його можна знайти в меню "Пуск" під категорією "Стандартні" або швидко відкликати, набравши "Блокнот" у поле пошуку.

2.   Збереження документа під назвою "Веб_технології.html":

•       Слід відкрити "Блокнот".

•       Вводимо або копіюємо необхідний HTML-код для нашої веб-сторінки.

•       Коли закінчимо, оберемо "Файл" - "Зберегти як".

•       У вікні "Зберегти як" задаємо назву файлу, наприклад, "Веб_технології.html".

•       У рядку "Тип" оберемо "Усі файли (*.*)".

•       Клацнімо кнопку "Зберегти".

3.   Відкриття збереженого документа веб-браузером:

•       Після того, як файл збережено, відкриємо його веб-браузером (наприклад, Google Chrome, Mozilla Firefox, Microsoft Edge тощо), для цього у браузері виберемо "Файл" - "Відкрити файл" або просто перетягнімо збережений файл HTML у вікно браузера. Веб-сторінка повинна відобразитися у веб-браузері.

4.   Редагування та оновлення сторінки:

•       Під час заняття будемо повертатися до "Блокнота" та вносити певні зміни до нашого HTML-документа.

•       Після кожного збереження змін, слід оновлювати веб-сторінку у веббраузері, щоб побачити оновлення.

 

IV. Практичні завдання 

Вправа 1. Створення найпростішої веб-сторінки. Наберіть у текстовому редакторі такий текст:

<html>

<head>

  <title>My first Web-page</title>

</head>

<body>

My first site

</body>

</html>

Збережіть як файл у форматі html "Веб_технології.html", якщо тепер відкрити його у вікні браузера, то з’явиться створена вами сторінка (рис. 4). 

 

Рис. 4. Відображення створеної веб-сторінки у Microsoft Edge

 

Вправа 2. Створення заголовків

Заголовки в документі створюються за допомогою команд: <Hi>, причому при i = 1 заголовок – самий великий (табл. 2).

 

Таблиця 2. Створення заголовків

 

 

Відредагуйте попередній код наступним чином:

<html>

<head>

  <title>My first Web-page</title>

</head>

<body>

  <h1>My first site</h1>

  <h2>My first site</h2>

  <h3>My first site</h3>

  <h4>My first site</h4>

  <h5>My first site</h5>

  <h6>My first site</h6>

</body>

</html>

Збережіть зміни у файл "Веб_технології.html", відкрийте його у вікні браузера (або оновіть сторінку), при цьому ви маєте побачити результат, показаний на рис. 5.

 

Рис. 5. Відображення веб-сторінки у Microsoft Edge

 

Додайте деякі теги (на вибір) з табл. 3 для додаткового виділення фрази "My first site". 

 

Таблиця 3. Команди виділення тексту

Текст, що відображається браузером	Запис в блокноті, формат HTML
Виділення тексту жирним шрифтом	Виділення<b>тексту</b>жирним шрифтом
Виділення тексту курсивом	Виділення<i>тексту</i>курсивом
Виділення тексту підкресленням	Виділення<u>тексту</u>підкресленням
Виділення тексту перекресленням	Виділення<strike>тексту</strike> перекресленням

 

Вправа 3. Управління кольором  

Кольори і зображення фону задаються за допомогою команди <body>. Ця команда може задаватися тільки на початку HTML файлу і не може бути змінена надалі.  Її параметри:

bgcolor = "# код кольору" – колір фону документа,

text ="#код кольору" – колір тексту документа, link ="#код кольору" – колір тексту, що використовується як покликання, vlink ="#код кольору" – колір покликання на переглянутий раніше

документ, alink ="#код кольору" – колір покликання в момент натиснення на неї

правої кнопки миші.

Ось один з прикладів використання цих параметрів:

<body bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#800080" alink="#00FF00">

Код кольору задається в кодуванні RGB – шість шістнадцяткових чисел (HEX). У табл.4 приводяться коди найпростіших кольорів разом з їх назвами. Для роботи з іншими кольорами можна звернутися до інтерактивного довідника "HTML Палітра кольорів" за адресою https://w3schoolsua.github.io/colors/colors_picker.html#gsc.tab=0. 

 

Таблиця 4. Коди деяких кольорів

Ім'я кольору	Колір	Опис	Шістнадцяткове значення
aqua		Блакитний	#00ffff
black		Чорний	#000000
blue		Синій	#0000ff
fuchsia		Фуксія	#ff00ff
gray		Сірий	#808080
green		Зелений	#008000
lime		Світло зелений	#00ff00
maroon		Темно червоний	#800000
navy		Темно синій	#000080
olive		Оливковий	#808000
purple		Фіолетовий	#800080
red		Червоний	#ff0000
silver		Світло сірий	#c0c0c0
teal		Синьо-зелений	#008080
white		Білий	#ffffff
yellow		Жовтий	#ffff00

 

Наберіть в текстовому редакторі наступний код:

<html>

<head>

  <title>My first Web-page</title>

</head>

<body bgcolor="#FFFF00" text="#000080">

  <h1>My first web-page</h1>

  <ol>

    <li>Text, line one</li>

    <li>Text, line two</li>

  </ol>

</body>

</html>

 

Код створює просту веб-сторінку із заголовком "My first web-page" та нумерованим списком (тег <ol>) із двома елементами: "Text, line one" та "Text, line two". Сторінка матиме жовте тло (#FFFF00) і темно-синій текст (#000080). Збережіть зміни у файл "Веб_технології.html", відкрийте його у вікні браузера (або оновіть сторінку), при цьому ви маєте побачити такий результат:

 

 

Рис. 6. Відображення веб-сторінки у Microsoft Edge

 

Хочемо звернути увагу на те, що такий код є трохи застарілим, оскільки в ньому відсутні: тег <!DOCTYPE>, HTML глобальний атрибут lang, визначення кодування символів.

<!DOCTYPE> це посилання на набір правил, яким має слідувати HTMLсторінка,  також вказівка на автоматичну перевірку помилок і інші корисні речі. Тег допомагає браузеру правильно відображати документ, він наче вказує браузеру: "працюй зі сторінкою в стандартному режимі, будь ласка". Він ставиться першим рядком у HTML-документі.

Глобальний атрибут lang використовується для визначення мови тексту на сторінці. Це важливий атрибут, який допомагає:

–        браузерам правильно відображати текст, використовуючи коректні правила перенесення, лапки та інші мовні особливості. 

–        пошуковим системам індексувати сторінку відповідною мовою, що впливає на пошук за релевантними запитами. 

–        програмним системам правильно вимовляти текст для користувачів з порушеннями зору.

HTML атрибуту lang необхідно присвоїти код мови, що відповідає стандарту ISO 639-1. Наприклад, для англійської мови – en, для української мови – uk. Це виглядатиме так: <html lang="en">; <html lang="uk">. Також для деяких мов можна вказувати регіональні варіанти, наприклад, для британської англійської – en-GB, для англійської мови США – en-US. 

Для визначення кодування символів у HTML-документі доцільно застосувати тег <meta charset="UTF-8">. Це важливий тег, який допомагає браузерам правильно відображати текст на сторінці. Так, застосування UTF-8 дозволяє використовувати символи з різних мов та систем письма. Тег <meta charset="UTF-8"> має бути одним із перших тегів у <head>-секції. Таким чином, код з урахуванням зазначеного, буде виглядати так: 

<!DOCTYPE html> <html lang="en">

<head>

  <meta charset="UTF-8">

  <title>My first Web-page</title>

</head>

<body bgcolor="#FFFF00" text="#000080">

  <h1>My first web-page</h1>

  <ol>

    <li>Text, line one</li>

    <li>Text, line two</li>

  </ol>

</body>

</html>

 

Вправа 4. Рухомий рядок 

Використаємо тег <marquee> для створення на сторінці рухомого рядку.

Скопіюйте в текстовий редактор наступний код:

<!DOCTYPE html>

<html lang="uk">

<head>

  <meta charset="UTF-8">   <title>Мій сайт</title>

</head>

<body bgcolor="#808080" text="#000080">

  <h1>Моя перша веб-сторінка</h1>

  <marquee behavior="alternate" direction="left" bgcolor="#ffcc00">     Вчимо інформатику!

  </marquee>

</body>

</html>

При відкритті цього коду в браузері, ви побачите веб-сторінку з сірим фоном, на якій є темно-синій заголовок "Моя перша веб-сторінка", нижче розташовано рядок з текстом "Вчимо інформатику!", що рухається зліва направо з жовтим фоном (рис. 7).

 

Рис. 7. Відображення веб-сторінки у Microsoft Edge

 

Насправді вміст контейнера <marquee> не обмежується рядками і дозволяє переміщати будь-які елементи веб-сторінки — зображення, текст, таблиці, елементи форм тощо. Переміщення можна задати не тільки по горизонталі, але і вертикалі, в цьому випадку вказуються розміри ділянки, в якій буде відбуватися рух. Атрибути <marquee>:

–               behavior - задає тип руху вмісту контейнера <marquee> . 

–               bgcolor - колір фону. 

–               direction - вказує напрямок руху вмісту контейнера <marquee> . 

–               height - висота області прокрутки. 

–               hspace - горизонтальні поля навколо контенту.  – loop - задає кількість повторних прокручуватися вміст. 

–               scrollamount - швидкість руху контенту. 

–               scrolldelay - величина затримки в мілісекундах між рухами. 

–               truespeed - скасовує вбудований обмежувач швидкості при низьких значеннях атрибута scrolldelay. 

–               vspace - вертикальні поля навколо вмісту. 

–               width - ширина ділянки прокрутки. 

Слід зауважити, що тег <marquee> застарів і рідко використовується у сучасних проектах. Замість нього застосовується каскадні таблиці стилів CSS, однак розгляд цього питання виходить за рамки нашого заняття.

Вправа 5. Інтерактивна вправа

Прикріпіть до маркерів відповідні підписи, що відповідають загальній структурі HTML коду веб-сторінки (рис.8) https://learningapps.org/watch?v=pt8a4wt9t22  

  

Рис. 8. QR-код та скріншот інтерактивної вправи Learningapps

 

 

Вправа 6. Інтерактивна вправа  Заповніть пропуски в HTML-коді. Покликання для доступу до вправи:

https://learningapps.org/watch?v=p11qfim0322  

 

Рис. 9. QR-код та скріншот інтерактивної вправи Learningapps

 

Вправа 7. Додавання на веб-сторінку відео з YouTube

Припустимо, що до створеної у попередньому прикладі сторінці ми хочемо додати відео з YouTube.  • Перейдіть на YouTube та знайдіть потрібне вам відео.  • Для прикладу, візьмемо відео за покликанням https://youtu.be/UjMAmPlsQ9s?si=GBdci1Kvh6oRmB56  

 

•    Натисніть кнопку "Поділитися" під відео. 

•    У меню, що з'явиться, оберіть пункт "Вбудувати". Відкриється нове вікно з кодом для вбудовування.

•    Скопіюйте код вбудовування з віконця (рис. 10). 

 

Рис. 10. Додавання на веб-сторінку відео з YouTube

 

•    Перейдіть до HTML-коду вашої веб-сторінки. 

•    Вставте скопійований код в потрібне місце на сторінці.

Таким чином ви маєте отримати щось подібне

<!DOCTYPE html>

<html lang="uk">

<head>

  <meta charset="UTF-8">   <title>Мій сайт</title>

</head>

<body bgcolor="#808080" text="#000080">

  <h1>Моя перша веб-сторінка</h1>

  <marquee behavior="alternate" direction="left" bgcolor="#ffcc00">     Вчимо інформатику!

  </marquee>

<p> <center>

<iframe width="560" height="315"

src="https://www.youtube.com/embed/UjMAmPlsQ9s?si=0lcUb

1xA-1cROlFZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picturein-picture; web-share" allowfullscreen></iframe>

</center>

</body>

</html>

 

Ширина відео встановлена на 560 пікселів, висота – на 315 пікселів. Тег <p> визначає абзац. Браузер автоматично додає верхній і нижній відступ для відокремлення абзаців збільшеною відстанню. Тег <center> розташовує наше відео  по центру сторінки.

 

Рис. 11. Відображення веб-сторінки у Microsoft Edge

 

V. Завершальна частина. Підбиття підсумків заняття • Вправа "До та після":

o Свою відповідь здобувачі освіти занотовують до стовпця "Після".

•  Опитування: 

o    Які основні теги HTML ви запам’ятали? o Які атрибути тегів ви можете згадати?

•  Демонстрація: 

o    Здобувачі освіти демонструють створені веб-сторінки.

•  Рефлексія: 

o    Що нового ви дізналися на цьому занятті? o Які труднощі виникали? o Що вам сподобалося/не сподобалося?

•  Оцінювання діяльності здобувачів освіти. 

 

VI. Домашнє завдання

•  Створити веб-сторінку на задану тему (наприклад, про себе, про своє хобі, про улюблену книгу). 

•  Використовувати різні теги HTML для форматування тексту, додавання зображень або покликань. • Перевірити свою веб-сторінку в різних браузерах.

 

Список використаних джерел

1.            Морзе Н. В. Інформатика (рівень стандарту): підруч. для 10 (11) кл. закладів загальної середньої освіти / Н. В. Морзе, О. В. Барна. – К.: УОВЦ «Оріон», 2018. – 240 с.

2.            Елементи HTML // Матеріал з Вікіпедії — вільної енциклопедії [Електронний ресурс]. – Режим доступу: https://uk.wikipedia.org/wiki/Елементи_HTML  

3.            Янко С. С. Поняття про мову розмітки, гіпертекстовий документ та його елементи. HTML файли: конспект [Електронний ресурс]. – Режим доступу:

https://naurok.com.ua/urok-ponyattya-pro-movu-rozmitki-gipertekstoviydokument-ta-yogo-elementi-html-fayli-200638.html  

4.            HTML Довідник       тегів               [Електронний          ресурс].         – Режим доступу:

https://w3schoolsua.github.io/tags/index.html#gsc.tab=0