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

Тема: «Зима в лісі»

 


Використовувати ресурс:
https://w3schoolsua.github.io/html/html_basic.html#gsc.tab=0

1.Структура сайту «Зима в лісі»

Створіть сторінку, яка містить такі елементи:

  • <header> — назва сайту «Зимовий Ліс»

  • <nav> — 3 внутрішні посилання (якорі): «Пейзажі», «Тварини», «Цікаві факти»

  • <main> — контейнер для статей

  • <footer> — автор, рік

Кожен елемент повинен бути чітко підписаний заголовком.

2. Стаття з 3 розділами

Створіть статтю <article> під назвою
«Зимовий ліс: краса та атмосферність»

В ній повинно бути 3 розділи <section>:

  • «Сніг і світло»

  • «Звуки лісу»

  • «Морозне повітря»

У кожному розділі:

  • заголовок <h2>

  • мінімум 2 параграфи

  • 1 внутрішнє посилання (якір)

3. Вкладені списки «Будова зимового лісу»

Створіть структуру списків з вкладеннями мінімум у 3 рівні.
Приклад, який потрібно розширити:

  • Ліс узимку

    • Дерева

      • Хвойні

        • Сосна

        • Ялина

      • Листяні

    • Тварини

      • Птахи

      • Хижаки

        • Лисиця

        • Вовк

Учень повинен додати ще мінімум 4 нові елементи.

4. Галерея без таблиці (тільки списки та фігури)

Створити галерею у форматі:

<ul>
  <li>
    <figure>
      <img src="..." alt="..." title="...">
      <figcaption>...</figcaption>
    </figure>
  </li>

Потрібно додати мінімум 4 зображення зимового лісу
(можна з інтернету, можна локальні).

У кожному <img> має бути:

  • alt

  • title

  • width або height

5. Розширена стаття з цитатами і виділеннями

Створіть текст на тему «Тиша зимового лісу», використовуючи:

  • <blockquote> — цитата з описом тиші в лісі

  • <q> — коротка цитата всередині абзацу

  • <em> — для емоційного підкреслення

  • <strong> — для логічного підкреслення

  • <mark> — для виділення важливої думки

Текст має містити мінімум 10 речень.

6. Сторінка з двома статтями

Створити <main>, всередині якого буде:

Перша стаття:

«Мороз у лісі»

  • 2 підзаголовки

  • 2 параграфи

  • список з мінімум 5 пунктів

Друга стаття:

«Зимові сліди тварин»

  • зображення

  • 2 параграфи

  • 1 внутрішній якір

  • посилання «Повернутися нагору»

7. Хронологія «День у зимовому лісі» (тільки списки)

Створити впорядкований список, де кожен пункт описує подію в лісі:

  1. Ранковий туман

    • опис туману

    • які звуки чути

  2. Полуденний холод

    • характерні особливості

  3. Вечірня тиша

    • як змінюється світло

  4. Нічний ліс

    • зірки

    • сніг

Учень повинен створити мінімум 8 пунктів.

8. Огляд дерев зимового лісу (кілька статей)

Створіть три статті <article>:

  1. «Сосна взимку»

  2. «Ялина взимку»

  3. «Береза взимку»

У кожній:

  • заголовок <h2>

  • опис дерева

  • список з 3–5 характеристик

  • фотографія

  • посилання на додаткову інформацію

9. Повноцінна HTML-сторінка на 60+ рядків

Створіть один великий HTML-документ, який включає:

✔ <header>
✔ <nav>
✔ <main> з мінімум 3 статтями
✔ вкладені списки
✔ 4+ зображення
✔ цитати (blockquote, q)
✔ посилання-якорі
✔ <aside> з блоком «Цікаві факти про зимовий ліс»
✔ <footer> з авторством

Тема сторінки:
«Енциклопедія зимового лісу»

10. Виправлення помилок (складний код)

Учні мають знайти й виправити помилки в цьому коді:

<html>
<head>
<title>Зима в лiсi</title>
</head
<body>

<header>
<h1>Зимовий Ліс<h1>
</header>

<nav>
<a href="#animals">Тварини</a
<a href="#trees">Дерева<a>
</nav>

<main>

<article id="animals">
<h2>Тварини лiсу</h3>
<p>Взимку лiс перетворюeться...</p>
<ul>
<li>Вовк
<li>Олень
</ul>
</article>

<article id="trees">
<h2>Дерева</h2>
<img src="tree.jpg">
<p>Сосна - дуже красиве дерево
</article>

<footer>
<p>Автор:Учень<p>
</footer>

</body>
</html>

Помилки:

  • незакриті теги

  • неправильні атрибути

  • змішані заголовки

  • нема alt у зображення

  • пропущені символи

  • порушена структура

Учні повинні повністю переписати цей код правильно.

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

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

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

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