Домашнє завдання #2: Відтворення текстового документа
Тема: Використання HTML-тегів для створення структурованого текстового документа
Мета завдання
Навчитися використовувати на практиці всі HTML-теги, які ми вивчили в перших двох уроках: заголовки, параграфи, форматування тексту, списки, таблиці та інші елементи.
Зразок документа
Твоє завдання — відтворити готовий документ за допомогою чистого HTML. Відкрий зразок і уважно розглянь його структуру, стилі тексту та елементи:
Відкрити зразок — тримай його у сусідній вкладці, поки верстаєш.
Що потрібно зробити
1. Створити файл article.html
У репозиторії курсу my-web-course (ти створив його у ДЗ #1) створи папку hw-02/, а в ній — файл 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-структурі — правильне використання тегів та ієрархія заголовків.
Як здати
- Робота — в публічному GitHub-репозиторії курсу
my-web-course, у папціhw-02/ - У папці ДЗ —
article.htmlтаREADME.md(2-3 речення: що зроблено) - Мінімум 3 коміти з осмисленими повідомленнями (не "fix"/"update")
- Перед здачею переконайся, що файл відкривається в браузері
- Надішли посилання на репозиторій (можна одразу на папку
hw-02)
Критерії оцінювання
| Критерій | Тип | Бали |
|---|---|---|
| Правильна 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 для перегляду онлайн (посилання в README) | [код] | +10 |
Підказки
- Відкрий зразок у новій вкладці та переглядай його паралельно з написанням коду
- Використовуй VS Code з розширенням Live Server — воно автоматично оновлює сторінку при збереженні
- Якщо забув якийсь тег — шукай на W3Schools HTML Reference
- Перевіряй валідність свого HTML на W3C Validator