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