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 '5fb78cc2d1'
${ noResults }
Web-Dev-For-Beginners/translations/da/3-terrarium/1-intro-to-html/assignment.md

4.0 KiB
Raw Blame History Escape

HTML Øvelsesopgave: Byg en Blog Mockup

Formål

Design og håndkod HTML-strukturen til en personlig blog-hjemmeside. Denne øvelse vil hjælpe dig med at øve semantisk HTML, layoutplanlægning og kodeorganisering.

Instruktioner

  1. Design Din Blog Mockup

    • Lav en visuel skitse af din blog-hjemmeside. Inkluder nøglesektioner som header, navigation, hovedindhold, sidebar og footer.
    • Du kan bruge papir og scanne din skitse, eller bruge digitale værktøjer (f.eks. Figma, Adobe XD, Canva eller endda PowerPoint).

  2. Identificer HTML-elementer

    • Lav en liste over de HTML-elementer, du planlægger at bruge til hver sektion (f.eks. <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a> osv.).

  3. Skriv HTML Markup

    • Håndkod HTML til din mockup. Fokusér på semantisk struktur og bedste praksis.
    • Inkluder mindst 10 forskellige HTML-elementer.
    • Tilføj kommentarer for at forklare dine valg og struktur.

  4. Indsend Dit Arbejde

    • Upload din skitse/mockup og din HTML-fil.
    • Valgfrit: Tilføj en kort refleksion (2–3 sætninger) om dine designbeslutninger.

Bedømmelseskriterier

Kriterier Fremragende Tilstrækkelig Kræver Forbedring
Visuel Mockup Klar, detaljeret mockup med markerede sektioner og gennemtænkt layout Grundlæggende mockup med nogle markerede sektioner Minimal eller uklar mockup; mangler sektionmærker
HTML-elementer Bruger 10+ semantiske HTML-elementer; viser forståelse for struktur og bedste praksis Bruger 5–9 HTML-elementer; nogen semantisk struktur Bruger færre end 5 elementer; mangler semantisk struktur
Kvalitet af Kode Velorganiseret, læsbar kode med kommentarer; følger HTML-standarder Mest organiseret kode; få kommentarer Uorganiseret kode; mangler kommentarer
Refleksion Indsigtsfuld refleksion over designvalg og udfordringer Grundlæggende refleksion Ingen refleksion eller mangler relevans

Tips

  • Brug semantiske HTML-tags for bedre tilgængelighed og SEO.
  • Organisér din kode med indrykning og kommentarer.
  • Se MDN HTML Elements Reference for vejledning.
  • Tænk over, hvordan dit layout kan udvides eller styles i fremtidige opgaver.

Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.