You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4.1 KiB
4.1 KiB
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
-
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).
-
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ď.).
- Vytvorte zoznam HTML prvkov, ktoré plánujete použiť pre každú sekciu (napr.
-
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.
-
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 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. 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.