понеділок, 1 грудня 2025 р.

Вступ до HTML. Створення першої веб-сторінки Клас: 10–11

 



Що таке HTML?

HTML (HyperText Markup Language) — мова розмітки, яка задає структуру веб-сторінки.
HTML складається з тегів — команд у кутових дужках.


Учням потрібні:

🔹  Приклад тега

<p>Це абзац тексту</p>

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

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Моя перша сторінка</title>
</head>
<body>
    <h1>Привіт, світ!</h1>
    <p>Це мій перший документ HTML.</p>
</body>
</html>

Коротке пояснення кожної частини:

  • <!DOCTYPE html> – вказує тип документа;

  • <html> – основний контейнер;

  • <head> – службова інформація;

  • <title> – назва вкладки;

  • <body> – видима частина сторінки.

🧪 Практична робота 
Практика 1: Створення своєї першої сторінки (7 хв)

Перейти:
👉 https://w3schoolsua.github.io/html/html_intro.html → кнопка "Спробуй сам"

Учні редагують код:

<h1>Мій перший сайт</h1>
<p>Я вивчаю HTML!</p>

Міні-завдання:

  • змінити текст заголовка;

  • додати другий абзац;

  • зробити текст у абзаці жирним за допомогою <b>.

🟢 Практика 2: Заголовки + абзаци (5 хв)

Перейти:
👉 https://w3schoolsua.github.io/html/html_headings.html

Учні створюють:

<h1>Місто моєї мрії</h1>
<h2>Цікаві місця</h2>
<p>Ось що я хочу відвідати...</p>

Міні-квест:
Зробіть 4 різних заголовки (<h1>–<h4>) і один абзац.

🟢 Практика 3: Додати картинку (7 хв)

Перейти:
👉 https://w3schoolsua.github.io/html/html_images.html

Учні вставляють зображення:

<img src="https://www.w3schools.com/images/picture.jpg" width="300">

Міні-квест:

  • вставити 2 різні картинки, але одну зробити більшою;

  • додати підпис до зображення через <p>.

🟢 Практика 4: Створення меню сайту (8 хв)

Перейти:
👉 https://w3schoolsua.github.io/html/html_links.html

Учні створюють навігацію:

<h2>Моє меню</h2>
<a href="https://google.com">Google</a><br>
<a href="https://youtube.com">YouTube</a><br>
<a href="https://w3schoolsua.github.io/html/index.html">HTML урок</a>

Міні-квест:

  • замінити текст посилань;

  • додати 4-те посилання;

  • зробити одне посилання відкритим у новій вкладці:

<a href="https://example.com" target="_blank">Посилання</a>

🟢 Практика 5: Створюємо особисту сторінку (8 хв)

Учні збирають все в один проект:

<h1>Про мене</h1>

<h2>Моє хобі</h2>
<p>Тут учень пише про свої захоплення.</p>

<h2>Улюблене фото</h2>
<img src="URL" width="250">

<h2>Корисні посилання</h2>
<a href="https://example.com">Мій сайт</a>

Квест-місія:

  1. Створити 3 розділи:
    ✔ Про мене
    ✔ Мої інтереси
    ✔ Зв’язок зі мною

  2. Додати 1 фото

  3. Додати 3 посилання

  4. Оформити сторінку у своєму стилі

Хто виконав — показує сусіду, робить взаємоперевірку. Оголошує оцінку. 

Опубліковано о
Мітки: ,

Немає коментарів:

Дописати коментар

Підписатися на: Дописати коментарі (Atom)