Домашнє завдання #2: Відтворення текстового документа
Тема: Використання HTML-тегів для створення структурованого текстового документа
Мета завдання
Навчитися використовувати на практиці всі HTML-теги, які ми вивчили в перших двох уроках: заголовки, параграфи, форматування тексту, списки, таблиці та інші елементи.
Зразок документа
Нижче відображено документ, який потрібно відтворити за допомогою чистого HTML. Уважно розглянь його структуру, стилі тексту та елементи:
Також можеш відкрити зразок в окремій вкладці: Переглянути зразок
Що потрібно зробити
1. Створити файл article.html
У своєму GitHub-репозиторії (або в тому самому, що й ДЗ #1) створи файл article.html.
2. Відтворити структуру документа
Документ містить наступні елементи, які потрібно відтворити:
| Елемент | HTML-теги | Де використовується |
|---|---|---|
| Головний заголовок | <h1> | Назва статті |
| Розділи | <h2>, <h3> | Нумеровані розділи |
| Параграфи | <p> | Основний текст |
| Жирний / курсив | <strong>, <em> | Виділення важливого |
| Виділення | <mark> | Підсвічений текст |
| Закреслення | <del> | Перекреслені поради |
| Підрядковий / надрядковий | <sub>, <sup> | Формули, виноски |
| Розрив рядка | <br> | Підпис автора |
| Горизонтальна лінія | <hr> | Розділювачі секцій |
| Невпорядкований список | <ul>, <li> | Поради, технології |
| Впорядкований список | <ol>, <li> | Етапи, "чого уникати" |
| Вкладені списки | <ul> в <li> | Деталі етапів навчання |
| Список визначень | <dl>, <dt>, <dd> | Три технології |
| Таблиця | <table>, <thead>, <tbody>, <tr>, <th>, <td> | Фреймворки |
3. Вимоги
- Документ має мати правильну HTML5-структуру (
<!DOCTYPE html>,<html>,<head>,<body>) - Вказати
<meta charset="UTF-8">та<title> - Вказати
lang="uk"для тегу<html> - Використати всі перераховані теги з таблиці вище
- Контент має бути українською мовою
- Вміст не обов'язково має бути ідентичним — можеш написати про іншу тему, але структура має відповідати зразку
Не потрібно відтворювати кольори та стилі! Це CSS, який ми ще не вивчали. Зосередься на HTML-структурі — правильне використання тегів та ієрархія заголовків.
Як здати завдання
- Завантаж файл
article.htmlна GitHub - Переконайся, що файл відкривається в браузері
- Надішли посилання на репозиторій
Критерії оцінювання
| Критерій | Бали |
|---|---|
| Правильна HTML5-структура (DOCTYPE, html, head, body) | 10 |
| Ієрархія заголовків (h1 один раз, h2 для розділів, h3 для підрозділів) | 15 |
Параграфи <p> з текстом | 10 |
Форматування: <strong>, <em>, <mark>, <del> | 15 |
<sub>, <sup> для формул або виносок | 5 |
<br> та <hr> у відповідних місцях | 5 |
Невпорядкований список <ul> з пунктами | 10 |
Впорядкований список <ol> з пунктами | 10 |
| Вкладені списки (список всередині списку) | 10 |
Таблиця з <thead>, <tbody>, <th>, <td> | 10 |
| Разом | 100 |
Бонусні завдання
| Бонус | Бали |
|---|---|
Додати список визначень <dl>, <dt>, <dd> | +10 |
Додати зображення <img> з підписом | +10 |
| Увімкнути GitHub Pages для перегляду онлайн | +10 |
Підказки
- Відкрий зразок у новій вкладці та переглядай його паралельно з написанням коду
- Використовуй VS Code з розширенням Live Server — воно автоматично оновлює сторінку при збереженні
- Якщо забув якийсь тег — шукай на W3Schools HTML Reference
- Перевіряй валідність свого HTML на W3C Validator