8.3 KiB

Raw Blame History Unescape Escape

HTML Praktická úloha: Vytvorenie návrhu blogu

Ciele učenia

Použite svoje znalosti HTML na navrhnutie a kódovanie kompletnej štruktúry úvodnej stránky blogu. Táto praktická úloha posilní vaše znalosti o semantickom HTML, najlepších praktikách prístupnosti a profesionálnych zručnostiach v organizácii kódu, ktoré budete používať počas svojej cesty webového vývoja.

Splnením tejto úlohy:

Precvičíte si plánovanie rozloženia webových stránok pred kódovaním
Správne použijete semantické HTML prvky
Vytvoríte prístupný a dobre štruktúrovaný kód
Rozviniete profesionálne návyky v kódovaní pomocou komentárov a organizácie

Požiadavky na projekt

Časť 1: Plánovanie návrhu (vizuálny návrh)

Vytvorte vizuálny návrh úvodnej stránky blogu, ktorý obsahuje:

Hlavičku s názvom stránky a navigáciou
Hlavnú obsahovú oblasť s minimálne 2-3 ukážkami blogových príspevkov
Bočný panel s doplnkovými informáciami (sekcia o autorovi, posledné príspevky, kategórie)
Pätičku s kontaktnými informáciami alebo odkazmi

Možnosti vytvorenia návrhu:

Ručne kreslený návrh: Použite papier a ceruzku, potom svoj návrh odfoťte alebo naskenujte
Digitálne nástroje: Figma, Adobe XD, Canva, PowerPoint alebo akákoľvek aplikácia na kreslenie
Nástroje na tvorbu wireframov: Balsamiq, MockFlow alebo podobný softvér na tvorbu wireframov

Označte sekcie svojho návrhu HTML prvkami, ktoré plánujete použiť (napr. "Hlavička - <header>", "Blogové príspevky - <article>").

Časť 2: Plánovanie HTML prvkov

Vytvorte zoznam, ktorý mapuje každú sekciu vášho návrhu na konkrétne HTML prvky:

Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>

Povinné prvky, ktoré musíte zahrnúť: Váš HTML musí obsahovať minimálne 10 rôznych semantických prvkov z tohto zoznamu:

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <a>
<img>, <time>, <blockquote>, <strong>, <em>

Časť 3: Implementácia HTML

Napíšte kód úvodnej stránky blogu podľa týchto štandardov:

Štruktúra dokumentu: Zahrňte správny DOCTYPE, html, head a body prvky
Semantické značkovanie: Používajte HTML prvky na ich určený účel
Prístupnosť: Zahrňte správny alt text pre obrázky a zmysluplný text odkazov
Kvalita kódu: Používajte konzistentné odsadenie a zmysluplné komentáre
Obsah: Zahrňte realistický obsah blogu (môžete použiť zástupný text)

Ukážková štruktúra HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Časť 4: Reflexia

Napíšte krátku reflexiu (3-5 viet), ktorá sa zaoberá:

Ktoré HTML prvky ste používali najistejšie?
Aké výzvy ste stretli pri plánovaní alebo kódovaní?
Ako vám semantický HTML pomohol organizovať obsah?
Čo by ste urobili inak pri vašom ďalšom HTML projekte?

Kontrolný zoznam na odovzdanie

Pred odovzdaním sa uistite, že máte:

Vizuálny návrh s označenými HTML prvkami
Kompletný HTML súbor so správnou štruktúrou dokumentu
Použitých minimálne 10 rôznych semantických HTML prvkov správne
Zmysluplné komentáre vysvetľujúce štruktúru vášho kódu
Platnú syntax HTML (otestujte v prehliadači)
Napísanú reflexiu, ktorá odpovedá na otázky v zadanej úlohe

Hodnotiaca tabuľka

Kritérium	Vynikajúce (4)	Dostačujúce (3)	Rozvíjajúce sa (2)	Začiatočnícke (1)
Plánovanie a návrh	Detailný, dobre označený návrh ukazujúci jasné pochopenie rozloženia a semantickej štruktúry HTML	Jasný návrh s väčšinou sekcií správne označených	Základný návrh s niektorými označeniami, ukazuje všeobecné pochopenie	Minimálny alebo nejasný návrh, chýba správna identifikácia sekcií
Použitie semantického HTML	Používa 10+ semantických prvkov správne, demonštruje hlboké pochopenie štruktúry HTML a prístupnosti	Používa 8-9 semantických prvkov správne, ukazuje dobré pochopenie semantického značkovania	Používa 6-7 semantických prvkov, niektoré nejasnosti o správnom použití	Používa menej ako 6 prvkov alebo nesprávne používa semantické prvky
Kvalita a organizácia kódu	Výnimočne dobre organizovaný, správne odsadený kód s komplexnými komentármi a dokonalou syntaxou HTML	Dobre organizovaný kód s dobrým odsadením, užitočnými komentármi a platnou syntaxou	Väčšinou organizovaný kód s niektorými komentármi, drobné problémy so syntaxou	Slabá organizácia, minimálne komentáre, viaceré chyby v syntaxe
Prístupnosť a najlepšie praktiky	Vynikajúce zohľadnenie prístupnosti, zmysluplný alt text, správna hierarchia nadpisov, dodržiava všetky moderné najlepšie praktiky HTML	Dobré prvky prístupnosti, vhodné použitie nadpisov a alt textu, dodržiava väčšinu najlepších praktík	Niektoré zohľadnenia prístupnosti, základný alt text a štruktúra nadpisov	Obmedzené prvky prístupnosti, slabá štruktúra nadpisov, nedodržiava najlepšie praktiky
Reflexia a učenie	Premyslená reflexia demonštrujúca hlboké pochopenie HTML konceptov a dôkladnú analýzu procesu učenia	Dobrá reflexia ukazujúca pochopenie kľúčových konceptov a určitú sebareflexiu učenia	Základná reflexia s obmedzeným pohľadom na HTML koncepty alebo proces učenia	Minimálna alebo chýbajúca reflexia, ukazuje málo pochopenia naučených konceptov

Zdroje na učenie

Základné referencie:

MDN HTML Elements Reference - Kompletný sprievodca všetkými HTML prvkami
HTML5 Semantic Elements - Pochopenie semantického značkovania
Web Accessibility Guidelines - Tvorba prístupného webového obsahu
HTML Validator - Kontrola syntaxe HTML

Tipy pre úspech:

Začnite s návrhom predtým, než začnete písať kód
Používajte nástroje prehliadača na kontrolu štruktúry HTML
Testujte svoju stránku na rôznych veľkostiach obrazovky (aj bez CSS)
Čítajte svoj HTML nahlas, aby ste skontrolovali, či štruktúra dáva logický zmysel
Zvážte, ako by čítačka obrazovky interpretovala štruktúru vašej stránky

💡 Pamätajte: Táto úloha sa zameriava na štruktúru a semantiku HTML. Nemusíte sa obávať vizuálneho štýlu – na to slúži CSS! Vaša stránka môže vyzerať jednoducho, ale mala by byť dobre štruktúrovaná a zmysluplná.

Zrieknutie sa zodpovednosti:
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.

8.3 KiB Raw Blame History Unescape Escape