🏫 Урок 24

Поняття про мову розмітки тексту

🏫 Урок 24

🖥️ Інформатика | 6 клас
🏫 Урок 24

🎯 Сьогодні ми дізнаємося

  • 🏗️ Що таке HTML і навіщо він потрібен.
  • 🏷️ Що таке теги і як ними користуватися.
  • 🛠️ Як створити свою першу вебсторінку за 5 хвилин.
🖥️ Інформатика | 6 клас
🏫 Урок 24

👷‍♂️ Аналогія: Архітектор і Будівельник

👨‍💻 Ви (Архітектор)

Ви створюєте "креслення" сайту. Ви не кажете "зроби гарно", ви кажете: "тут заголовок", "тут картинка".

🌐 Браузер (Будівельник)

Chrome, Firefox, або Edge читає ваші креслення (код) і будує візуальну сторінку на екрані.

🖥️ Інформатика | 6 клас
🏫 Урок 24

📘 Що таке HTML?

HTML (HyperText Markup Language) — це мова розмітки гіпертексту.

Це не мова програмування, де комп'ютер рахує 2 + 2.
Це мова розмітки, де ми вказуємо, де і які елементи розташовані.

🥪 Аналогія: Вебсторінка — це бутерброд.

  • Хліб (структура) = HTML
  • Начинка (контент) = Текст та картинки
🖥️ Інформатика | 6 клас
🏫 Урок 24

🏷️ Що таке "Тег"?

Команди в HTML називаються тегами.
Вони схожі на контейнери 📦, в які ми кладемо текст.

Теги пишуться в кутових дужках: < >.

  • <тег> — відкриває контейнер (початок).
  • </тег> — закриває контейнер (кінець).
<тег> Тут ваш текст </тег>
🖥️ Інформатика | 6 клас
🏫 Урок 24

🧱 Основні теги (деякі основні)

Тег Опис
<html> Головна коробка, де лежить весь сайт.
<head> Голова сайта. Інформація для браузера (налаштування).
<body> Тіло сайта. Все, що бачить користувач (текст, фото).
<h1> Заголовок 1-го рівня (найбільший).
<p> Абзац (звичайний текст).
<b> Виділити текст жирним.
🖥️ Інформатика | 6 клас
🏫 Урок 24

Код найпростішої сторінки

📝 Запам'ятай структуру!

Ось як виглядає код найпростішої сторінки:

<html>
  <head>
    <title>Моя перша сторінка</title>
  </head>
  <body>
     <h1>Привіт, світ!</h1>
     <p>Це моя перша сторінка.</p>
  </body>
</html>
🖥️ Інформатика | 6 клас
🏫 Урок 24

🕵️ Завдання 1: Шпигун (Рівень 1: Початковий)

  1. Відкрийте сайт Wikipedia
  2. Натисніть F12 (або Права кнопка миші → "Переглянути код").
  3. Знайдіть у вікні коду теги <html>, <body>.
  4. Відшукайте будь-який напис, який є на сторінці, в коді.
🖥️ Інформатика | 6 клас
🏫 Урок 24

👋 Завдання 2: Hello World (Рівень 2: Середній)

  1. Створіть Текстовий документ (Блокнот).
  2. Введіть код:
<html>
  <head>
    <title>Привіт, світе!</title>
  </head>
  <body>
    <h1>Привіт, це я, [замініть на своє імʼя]!</h1>
  </body>
</html>
  1. Натисніть Файл → Зберегти як...
  2. Назвіть файл index.html (важливо змінити розширення!).
  3. Відкрийте файл у браузері.
🖥️ Інформатика | 6 клас
🏫 Урок 24
🖥️ Інформатика | 6 клас