13 KiB

Raw Blame History Unescape Escape

Завдання з практики HTML: Створення макету блогу

Цілі навчання

Застосуйте свої знання HTML, створюючи та кодуючи структуру головної сторінки блогу. Це практичне завдання допоможе закріпити концепції семантичного HTML, найкращі практики доступності та навички професійної організації коду, які ви будете використовувати протягом вашого шляху у веб-розробці.

Виконуючи це завдання, ви:

Навчитеся планувати макети вебсайтів перед написанням коду
Правильно застосовувати семантичні елементи HTML
Створювати доступний, добре структурований код
Розвивати професійні звички кодування з коментарями та організацією

Вимоги до проєкту

Частина 1: Планування дизайну (візуальний макет)

Створіть візуальний макет головної сторінки вашого блогу, який включає:

Заголовок із назвою сайту та навігацією
Основну область контенту з принаймні 2-3 прев’ю блогових постів
Бічну панель із додатковою інформацією (розділ "Про нас", останні пости, категорії)
Нижній колонтитул із контактною інформацією або посиланнями

Варіанти створення макету:

Ручний ескіз: Використовуйте папір і олівець, а потім сфотографуйте або відскануйте ваш дизайн
Цифрові інструменти: Figma, Adobe XD, Canva, PowerPoint або будь-який додаток для малювання
Інструменти для створення каркасів: Balsamiq, MockFlow або подібне програмне забезпечення

Позначте секції вашого макету HTML-елементами, які ви плануєте використовувати (наприклад, "Заголовок - <header>", "Блогові пости - <article>").

Частина 2: Планування елементів HTML

Створіть список, який зіставляє кожну секцію вашого макету з конкретними HTML-елементами:

Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>

Обов’язкові елементи для включення: Ваш HTML повинен містити принаймні 10 різних семантичних елементів із цього списку:

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <a>
<img>, <time>, <blockquote>, <strong>, <em>

Частина 3: Реалізація HTML

Напишіть код головної сторінки блогу, дотримуючись цих стандартів:

Структура документа: Включіть правильний DOCTYPE, html, head і body елементи
Семантична розмітка: Використовуйте HTML-елементи за їх призначенням
Доступність: Додайте правильний alt-текст для зображень і змістовний текст для посилань
Якість коду: Використовуйте послідовне відступлення та змістовні коментарі
Контент: Включіть реалістичний контент блогу (можна використовувати текст-заповнювач)

Зразок структури HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Частина 4: Рефлексія

Напишіть коротку рефлексію (3-5 речень), відповідаючи на такі питання:

Які HTML-елементи ви використовували найвпевненіше?
З якими труднощами ви зіткнулися під час планування або написання коду?
Як семантичний HTML допоміг організувати ваш контент?
Що б ви зробили інакше у вашому наступному проєкті HTML?

Контрольний список для подання

Перед поданням переконайтеся, що ви:

Створили візуальний макет із позначеними HTML-елементами
Завершили HTML-файл із правильною структурою документа
Використали принаймні 10 різних семантичних HTML-елементів правильно
Додали змістовні коментарі, які пояснюють структуру вашого коду
Перевірили синтаксис HTML (перевірте у браузері)
Написали рефлексію, відповідаючи на запитання

Рубрика оцінювання

Критерії	Відмінно (4)	Добре (3)	Задовільно (2)	Початковий рівень (1)
Планування та дизайн	Детальний, добре позначений макет, що демонструє чітке розуміння макету та семантичної структури HTML	Чіткий макет із більшістю секцій, позначених належним чином	Базовий макет із деяким позначенням, показує загальне розуміння	Мінімальний або нечіткий макет, відсутність належної ідентифікації секцій
Використання семантичного HTML	Використовує 10+ семантичних елементів правильно, демонструє глибоке розуміння структури HTML та доступності	Використовує 8-9 семантичних елементів правильно, показує хороше розуміння семантичної розмітки	Використовує 6-7 семантичних елементів, деяке нерозуміння правильного використання	Використовує менше 6 елементів або неправильно використовує семантичні елементи
Якість та організація коду	Надзвичайно добре організований, правильно відступлений код із всебічними коментарями та ідеальним синтаксисом HTML	Добре організований код із хорошим відступленням, корисними коментарями та правильним синтаксисом	Переважно організований код із деякими коментарями, незначні проблеми із синтаксисом	Погана організація, мінімальні коментарі, численні помилки синтаксису
Доступність та найкращі практики	Відмінні міркування щодо доступності, змістовний alt-текст, правильна ієрархія заголовків, дотримання всіх сучасних найкращих практик HTML	Хороші функції доступності, відповідне використання заголовків і alt-тексту, дотримання більшості найкращих практик	Деякі міркування щодо доступності, базовий alt-текст і структура заголовків	Обмежені функції доступності, погана структура заголовків, недотримання найкращих практик
Рефлексія та навчання	Глибока рефлексія, що демонструє глибоке розуміння концепцій HTML та вдумливий аналіз процесу навчання	Хороша рефлексія, що показує розуміння ключових концепцій та певну самосвідомість навчання	Базова рефлексія з обмеженим розумінням концепцій HTML або процесу навчання	Мінімальна або відсутня рефлексія, показує мало розуміння вивчених концепцій

Ресурси для навчання

Основні посилання:

MDN HTML Elements Reference - Повний довідник по всіх елементах HTML
HTML5 Semantic Elements - Розуміння семантичної розмітки
Web Accessibility Guidelines - Створення доступного веб-контенту
HTML Validator - Перевірка синтаксису HTML

Поради для успіху:

Почніть із макету перед написанням будь-якого коду
Використовуйте інструменти розробника браузера для перевірки структури HTML
Тестуйте вашу сторінку на різних розмірах екрану (навіть без CSS)
Читайте ваш HTML вголос, щоб перевірити, чи структура логічна
Подумайте, як екранний читач буде інтерпретувати структуру вашої сторінки

💡 Пам’ятайте: Це завдання зосереджене на структурі та семантиці HTML. Не хвилюйтеся про візуальне оформлення – для цього є CSS! Ваша сторінка може виглядати просто, але вона повинна бути добре структурованою та змістовною.

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

13 KiB Raw Blame History Unescape Escape