<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T10:00:01+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "da"
}
-->
# 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 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](https://github.com/Azure/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.