Урок 2. Основні теги: заголовки, параграфи, списки, посилання

Name: Урок 2. Основні теги: заголовки, параграфи, списки, посилання
Author: admin

admin

Адміністратор

Уроки HTML 26 0

План уроку: Основні теги: заголовки, параграфи, списки, посилання (25-30 хвилин)

1. Вступ: Про що цей урок (2-3 хвилини)

З цього уроку ви дізнаєтесь, як правильно використовувати теги для створення текстових блоків на сторінці. Ви навчитесь додавати заголовки, параграфи для тексту, створювати списки та робити гіперпосилання на інші сторінки.

2. Заголовки (5 хвилин)

Ціль: Пояснити, як працюють заголовки та для чого вони потрібні.
Кроки:
- В HTML є 6 рівнів заголовків: від <h1> до <h6>.
- Заголовки допомагають структурувати сторінку, де <h1> — це головний заголовок, а наступні йдуть у порядку зменшення важливості.
- Заголовок <h1> використовується лише один раз на сторінці для головного заголовка, інші заголовки можуть повторюватися.

Приклад коду:

<h1>Головний заголовок</h1>
<h2>Підзаголовок 1</h2>
<h3>Підзаголовок 2</h3>

Аналогія: Уявіть, що це як зміст книги, де <h1> — це назва книги, а <h2> — це розділи.

3. Параграфи (5 хвилин)

Ціль: Пояснити, як додавати та форматувати текстові блоки за допомогою параграфів.
Кроки:
- Тег <p> використовується для визначення параграфів або абзаців тексту.
- Кожен параграф автоматично відділяється від попереднього відступом.

Приклад коду:

<p>Це мій перший параграф.</p>
<p>А це другий параграф.</p>

4. Списки: Нумеровані та марковані (7 хвилин)

Ціль: Показати, як створювати списки різних типів: марковані (з кружечками) та нумеровані (з числами).
Марковані списки:
- Використовуються для переліку елементів, де порядок не важливий.
- Використовуємо тег <ul> для списку та <li> для кожного елемента списку.
- Приклад коду:
- ```
<ul>
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
</ul>
```
- Нумеровані списки:
  - Використовуються для переліку, де важливий порядок елементів.
  - Використовуємо тег <ol> для списку та <li> для елементів.
  - Приклад коду:
- ```
<ol>
  <li>Перший елемент</li>
  <li>Другий елемент</li>
  <li>Третій елемент</li>
</ol>
```
  - Аналогія: Марковані списки — це як список покупок (де неважливо, в якому порядку купувати), а нумеровані списки — це як рецепт, де кожен крок має бути виконаний у правильному порядку.

5. Посилання (5-7 хвилин)

Ціль: Пояснити, як створювати гіперпосилання на інші сторінки чи сайти.
Кроки:
- Використовуємо тег <a> для створення посилання. Обов'язковий атрибут — href, який вказує на адресу, куди веде посилання.
- Приклад коду:
- ```
<a href="https://example.com">Це посилання на сайт Example</a>
```
- Можна також робити посилання на інші частини вашого сайту, наприклад:
- ```
<a href="about.html">Дізнатися більше про нас</a>
```
- Щоб посилання відкривалося в новій вкладці, використовуємо атрибут target="_blank":
- ```
<a href="https://example.com" target="_blank">Відкрити у новій вкладці</a>
```
- Аналогія: Уявіть, що посилання — це як стежка в лісі, яка веде вас до іншого місця. Ви бачите напис, який каже, куди йти, і клікаючи на нього, переміщаєтесь в нову точку.

6. Практика (10 хвилин)

Ціль: Учні застосують нові знання та самостійно створять сторінку з заголовками, параграфами, списками та посиланнями.
Завдання:
- Створити HTML-документ з заголовком <h1>Мій перший сайт</h1>.
- Додати кілька абзаців тексту.
- Створити нумерований і маркований список.
- Додати посилання на свій улюблений сайт з атрибутом target="_blank".
Приклад коду:

<!DOCTYPE html>
<html>
<head>
  <title>Мій перший сайт</title>
</head>
<body>
  <h1>Мій перший сайт</h1>
  <p>Це мій перший параграф на цій сторінці.</p>
  <p>Ось список моїх улюблених хобі:</p>
  
  <ul>
    <li>Читання</li>
    <li>Програмування</li>
    <li>Подорожі</li>
  </ul>
  
  <p>А ось список кроків для приготування чаю:</p>
  
  <ol>
    <li>Закип'ятити воду</li>
    <li>Залити окропом чай</li>
    <li>Дочекатися, поки чай настоїться</li>
  </ol>
  
  <p>Перейдіть на <a href="https://rgb.in.ua" target="_blank">цей сайт</a>, щоб дізнатися більше про програмування!</p>
</body>
</html>

7. Підсумок і запитання (5 хвилин)

Ціль: Закріпити нові знання, відповісти на питання.
Що повторити:
- Для чого потрібні заголовки, параграфи, списки та посилання.
- Як створювати базові елементи структури сторінки.
Запитання:
- Які існують рівні заголовків?
- Як створюється посилання на інший сайт?
- Для чого використовуються марковані та нумеровані списки?

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

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

Цей урок націлений на закріплення базових тегів, без яких не обходиться жоден сайт. Учні зможуть структурувати текст і використовувати посилання для навігації!