<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T10:38:15+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "cs"
}
-->
# HTML Praktické zadání: Vytvořte návrh blogu

## Cíl

Navrhněte a ručně napište HTML strukturu pro úvodní stránku osobního blogu. Toto cvičení vám pomůže procvičit sémantické HTML, plánování rozvržení a organizaci kódu.

## Pokyny

1. **Navrhněte návrh svého blogu**
   - Nakreslete vizuální návrh úvodní stránky svého blogu. Zahrňte klíčové sekce, jako jsou záhlaví, navigace, hlavní obsah, postranní panel a zápatí.
   - Můžete použít papír a naskenovat svůj návrh, nebo použít digitální nástroje (např. Figma, Adobe XD, Canva nebo dokonce PowerPoint).

2. **Identifikujte HTML prvky**
   - Seznamte se s HTML prvky, které plánujete použít pro každou sekci (např. `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` atd.).

3. **Napište HTML kód**
   - Ručně napište HTML pro svůj návrh. Zaměřte se na sémantickou strukturu a osvědčené postupy.
   - Zahrňte alespoň 10 různých HTML prvků.
   - Přidejte komentáře, které vysvětlí vaše volby a strukturu.

4. **Odevzdejte svou práci**
   - Nahrajte svůj návrh/náčrt a svůj HTML soubor.
   - Volitelně připojte krátkou reflexi (2–3 věty) o svých návrhových rozhodnutích.

## Hodnotící kritéria

| Kritérium        | Vynikající                                                                                 | Přiměřené                                                                      | Potřebuje zlepšení                                                              |
|------------------|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Vizuální návrh   | Jasný, detailní návrh s označenými sekcemi a promyšleným rozvržením                        | Základní návrh s některými označenými sekcemi                                   | Minimální nebo nejasný návrh; chybí označení sekcí                              |
| HTML prvky       | Používá 10+ sémantických HTML prvků; prokazuje pochopení struktury a osvědčených postupů   | Používá 5–9 HTML prvků; částečně sémantická struktura                           | Používá méně než 5 prvků; chybí sémantická struktura                             |
| Kvalita kódu     | Dobře organizovaný, čitelný kód s komentáři; dodržuje HTML standardy                       | Většinou organizovaný kód; málo komentářů                                       | Neorganizovaný kód; chybí komentáře                                             |
| Reflexe          | Smysluplná reflexe o návrhových rozhodnutích a výzvách                                    | Základní reflexe                                                                | Žádná reflexe nebo postrádá relevanci                                           |

## Tipy

- Používejte sémantické HTML značky pro lepší přístupnost a SEO.
- Organizujte svůj kód pomocí odsazení a komentářů.
- Odkazujte na [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) pro inspiraci.
- Přemýšlejte o tom, jak by vaše rozvržení mohlo být rozšířeno nebo stylizováno v budoucích úkolech.

---

**Prohlášení**:  
Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.