msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'af4caf666d'
${ noResults }
Web-Dev-For-Beginners/translations/cs/3-terrarium/1-intro-to-html/assignment.md

4.2 KiB
Raw Blame History Escape

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