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

Тема

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

Мета

• Ознайомити учнів з поняттями: мова розмітки гіпертексту, структура HTML-документа, теги та атрибути.

• Сформувати вміння створювати просту веб-сторінку з використанням мови розмітки гіпертекстового документа.

• Розвивати інформаційну культуру, логічне мислення, навички роботи з комп’ютером.

• Виховувати уважність, акуратність, відповідальність за результат

Обладнання

• Комп’ютери (або ноутбуки) з доступом до браузера та текстового редактора (наприклад, Блокнот / Notepad++).

• Інтерактивна панель

• Підручник Морзе-Барна.

• Підготовлені файли-заготовки (наприклад, шаблон HTML-сторінки).

Очікувані результати

Після заняття учні зможуть:

• пояснити, що таке мова розмітки гіпертекстового документа;

• назвати основні елементи структури HTML-документа (doctype, html, head, body);

• вказати приклади тегів та атрибутів;

• самостійно створити просту веб-сторінку з заголовком, абзацом, зображенням або гіперпосиланням.

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

• Привітання класу, перевірка готовності до заняття (комп’ютери, редактори, браузер).

• Нагадайте правила техніки безпеки при роботі з комп’ютером.

• Повідомлення теми та мети заняття.

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

Запитання до класу:

1. Що таке веб-сторінка і як вона відображається в браузері?

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

3. Які ви знаєте елементи браузера?

4. З якою метою створюють веб-сторінки?
   (Учні записують відповіді у вікно вводу.)

Вивчення нового матеріалу

1. Пояснення поняття «мова розмітки гіпертекстового документа». Наприклад: мова розмітки гіпертексту (англ. Hyper Text Markup Language, HTML) — це стандартна мова розмітки для створення веб-сторінок.

2. На робочому столі створіть папку. Назва папки ("сайт "прізвище учня")

3. відкрийте папку і створіть *.txt документ.

4. відкрийте *.txt документ і введіть:

   <!DOCTYPE html>

   <html> …

   <head> Це сторінка Учня "Прізвище та ім'я"… </head>

   <body> Це моя перша пробна сторінка </body>

   </html>

   натисніть на клавіатурі CTRL+S для збереження сторінки .

   Закрийте документ.

   В папці як показано на малюнку встановіть розширення файлу:Подання, показати, розширення файлів., або відкрийте "Провідник", натисніть на вкладку "Вигляд" і поставте галочку біля пункту "Розширення імен файлів".

   Після цього змініть розширення файла з .txt на . HTML і ви отримаєте

5. Структура HTML-документа:

   • <!DOCTYPE html>

   • <html> … </html>

   • <head> … </head>

   • <body> … </body>

     Цей файл додайте до завдання

• Теги та атрибути: що таке тег, парні й непарні теги, атрибут у тегу.

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

  Парні та непарні теги

  1. Парні теги — мають відкриваючий і закриваючий тег.

     • Відкриваючий тег: <p>

     • Закриваючий тег: </p> (перед назвою ставиться символ /)

       <h1>Заголовок сторінки</h1>

       <p>Це перший абзац тексту.</p>

  2. Непарні теги — не мають закриваючого тегу, тобто вони самостійні.
     Зазвичай використовуються для вставки елементів, які не містять іншого вмісту (наприклад, зображення, розрив рядка).

     <br> <!-- розрив рядка -->

     <img src="photo.jpg" alt="Моє фото"> <!-- зображення -->

  3. Що таке атрибут

     Атрибут — це додаткова властивість тега, яка уточнює, як саме має працювати або виглядати елемент.

     Атрибут завжди записується всередині відкриваючого тега у форматі:

     назва_атрибуту="значення"

     <img src="school.jpg" alt="Будівля школи">

     • src — шлях до файлу зображення

     • alt — текст, який відображається, якщо зображення не завантажилося

  4. Підсумуємо

     Поняття	Пояснення	Приклад
     Тег	Команда для браузера, яка вказує, як відображати елемент	<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-файлу, покажіть код і результат у браузері.

ВВедіть код і виконайте попередні настанови
<!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>

додайте все необхідне і скрін виконаної роботи вставте у вікно вводу.

Завдання для учнів:
– Кожен учень (або в парах) створює HTML-файл з наступним вмістом:

1. Заголовок сторінки (наприклад, «Моє хобі»)

2. Абзац тексту про себе або своє хобі

3. Зображення (вставити тег <img> з атрибутами src=…, alt=…)

4. Гіперпосилання (<a href=…>) на зовнішній ресурс (наприклад, вікіпедію) або на іншу сторінку (за бажанням)
   – Додатково: створити список (маркерований або нумерований) з 3-ма пунктами (наприклад, «Мої улюблені книги/фільми/ігри»)
   – Зберегти файл з розширенням .html, відкрити його в браузері і перевірити результат.

5. Елемент	Тег	Призначення	Приклад

   Зображення

   <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>

Учитель проходить класом, допомагає тим, хто має питання.

Скрін роботи вставте у вікно вводу

V. Підсумок заняття

– Обговорення:

1. Що нового ви дізналися?

2. Які труднощі виникли під час створення сторінки?

3. Що сподобалося / не сподобалося?
   – Коротке опитування: назвіть три теги, які ви використали; поясніть, що таке атрибут; яка структура HTML-документа?
   – Оцінювання виконаних робіт (за домовленою системою класу).

4. Пояснення:

   • <!DOCTYPE html> — вказує, що це HTML-документ.

   • <html lang="uk"> — початок документа, мова сторінки українська.

   • <head> — технічна частина (сюди записують заголовок сторінки, метадані, стилі).

   • <title> — заголовок, який з’являється на вкладці браузера.

   • <body> — видима частина сторінки (те, що бачить користувач).

   • <h1> — заголовок на сторінці.

   • <p> — абзац тексту.

   • <strong> — виділяє текст жирним.

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

– Опрацювати відповідний параграф підручника Морзе-Барна (наприклад, § … – вказати за підручником)
– Самостійно створити веб-сторінку на тему «Мій клас» або «Моя родина», виконати: заголовок, текст, зображення, гіперпосилання, список.
– Привести коротку звітність: яке зображення вставили (посилання або файл), на що посилання веде.

Приклади застосування тегів 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>