|
|
<!--
|
|
|
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. |
