Календар
| « Квітень 2025 » | ||||||
|---|---|---|---|---|---|---|
| Пн | Вт | Ср | Чт | Пт | Сб | Нд |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | ||||
Опитування
Оцініть роботу двигуна
Понеділок
жов 28
Урок 7. Створення базової сторінки блогу: Заголовки, параграфи, картинки, посилання
admin
План уроку: Створення базової сторінки блогу (25-30 хвилин)
1. Вступ: Що таке сторінка блогу? (3-5 хвилин)
З цього уроку ви дізнаєтесь, як створити базову структуру блогу, використовуючи прості HTML-теги для організації тексту, зображень і посилань. Блог — це місце для публікації статей чи особистих записів, і для його створення нам знадобляться ключові HTML-елементи.
Основні елементи блогу:
- Заголовки для розділення контенту на секції.
- Параграфи для основного тексту.
- Зображення для ілюстрації записів.
- Посилання для навігації або зовнішніх ресурсів.
2. Створення базової структури HTML (5 хвилин)
- Ціль: Навчитися створювати основний каркас сторінки.
Приклад коду:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мій блог</title>
</head>
<body>
<h1>Мій перший запис у блозі</h1>
<p>Привіт! Це мій перший запис у блозі. Я розповідатиму тут про свої улюблені хобі та цікаві події з життя.</p>
</body>
</html>
- Пояснення:
<h1>використовується для заголовку блогу або окремої статті.<p>використовується для створення абзацу з текстом.
3. Додавання зображень до сторінки блогу (5 хвилин)
- Ціль: Навчитися додавати зображення до записів у блозі.
Приклад коду:
<img src="blog-image.jpg" alt="Моє улюблене хобі" width="500">
- Пояснення:
<img>вставляє зображення на сторінку. Атрибутsrcвказує на шлях до зображення, а атрибутaltописує зображення для доступності.- Атрибут
widthдопомагає контролювати розмір зображення.
4. Використання заголовків для розділення контенту (5 хвилин)
- Ціль: Навчитися використовувати різні рівні заголовків для організації статті.
Приклад коду:
<h2>Моє улюблене хобі</h2>
<p>Я дуже люблю займатися малюванням у вільний час. Це допомагає мені розслабитися і бути креативним.</p>
<h2>Подорожі</h2>
<p>Мені подобається подорожувати та відкривати нові місця. Нещодавно я відвідав Карпати, і це було неймовірно!</p>
- Пояснення:
<h2>використовується для створення підзаголовків, щоб розділити різні теми в блозі. Це робить текст більш структурованим і читабельним.
5. Додавання посилань до статей (5 хвилин)
- Ціль: Навчитися додавати посилання на інші сторінки або зовнішні ресурси.
Приклад коду:
<p>Дізнайтесь більше про <a href="https://www.travelblog.com">подорожі</a> на моєму улюбленому сайті про подорожі.</p>
- Пояснення:
<a>створює гіперпосилання. Атрибутhrefвказує на адресу, куди веде посилання.
6. Практична вправа: Створення статті для блогу (7 хвилин)
- Завдання: Створіть вебсторінку з вашим першим записом у блозі, який міститиме:
- Заголовок блогу.
- Параграфи з текстом.
- Зображення, що ілюструє тему запису.
- Посилання на зовнішній ресурс або іншу сторінку.
Приклад готового блогу:
7. Підсумок і обговорення (5 хвилин)
Що повторити:
- Як створювати заголовки для організації тексту.
- Як додавати абзаци, зображення та посилання до сторінки блогу.
Запитання для обговорення:
- Чому важливо розбивати текст на заголовки?
- Як додати більше інтерактивності на сторінку блогу?
Домашнє завдання
- Написати статтю для вашого власного блогу, використовуючи заголовки, параграфи, зображення та посилання.
Цей урок навчить учнів створювати перші статті для блогу, що є основою для більш складних вебсайтів у майбутньому.
Дивіться також:
Урок 8. Позиціювання: Static, Relative, Absolute, Fixed, Sticky
1-11-2024, 11:05
Урок 2. Основні теги: заголовки, параграфи, списки, посилання
28-10-2024, 13:46