<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T10:42:05+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "sk"
}
-->
# HTML Praktická úloha: Vytvorte návrh blogu

## Cieľ

Navrhnite a ručne napíšte HTML štruktúru pre úvodnú stránku osobného blogu. Táto úloha vám pomôže precvičiť si semantické HTML, plánovanie rozloženia a organizáciu kódu.

## Pokyny

1. **Navrhnite svoj návrh blogu**
   - Nakreslite vizuálny návrh úvodnej stránky blogu. Zahrňte kľúčové sekcie, ako sú hlavička, navigácia, hlavný obsah, bočný panel a päta.
   - Môžete použiť papier a naskenovať svoj návrh, alebo použiť digitálne nástroje (napr. Figma, Adobe XD, Canva alebo dokonca PowerPoint).

2. **Identifikujte HTML prvky**
   - Vytvorte zoznam HTML prvkov, ktoré plánujete použiť pre každú sekciu (napr. `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` atď.).

3. **Napíšte HTML kód**
   - Ručne napíšte HTML pre svoj návrh. Zamerajte sa na semantickú štruktúru a osvedčené postupy.
   - Zahrňte aspoň 10 rôznych HTML prvkov.
   - Pridajte komentáre, aby ste vysvetlili svoje voľby a štruktúru.

4. **Odošlite svoju prácu**
   - Nahrajte svoj návrh a HTML súbor.
   - Voliteľne pridajte krátku reflexiu (2–3 vety) o svojich dizajnových rozhodnutiach.

## Hodnotiace kritériá

| Kritérium        | Vynikajúce                                                                                 | Dostatočné                                                                     | Potrebuje zlepšenie                                                             |
|------------------|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Vizuálny návrh   | Jasný, detailný návrh s označenými sekciami a premysleným rozložením                        | Základný návrh s niektorými označenými sekciami                                | Minimálny alebo nejasný návrh; chýbajú označenia sekcií                         |
| HTML prvky       | Používa 10+ semantických HTML prvkov; preukazuje pochopenie štruktúry a osvedčených postupov | Používa 5–9 HTML prvkov; čiastočne semantická štruktúra                        | Používa menej ako 5 prvkov; chýba semantická štruktúra                          |
| Kvalita kódu     | Dobre organizovaný, čitateľný kód s komentármi; dodržiava HTML štandardy                    | Väčšinou organizovaný kód; málo komentárov                                     | Neorganizovaný kód; chýbajú komentáre                                          |
| Reflexia         | Premyslená reflexia o dizajnových rozhodnutiach a výzvach                                  | Základná reflexia                                                              | Žiadna reflexia alebo chýba relevantnosť                                       |

## Tipy

- Používajte semantické HTML značky pre lepšiu prístupnosť a SEO.
- Organizujte svoj kód pomocou odsadenia a komentárov.
- Odkážte sa na [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) pre pomoc.
- Premýšľajte o tom, ako by sa vaše rozloženie mohlo rozšíriť alebo upraviť v budúcich úlohách.

---

**Upozornenie**:  
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.