|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T10:03:11+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "no"
|
|
|
}
|
|
|
-->
|
|
|
# HTML-øvelse: Lag en bloggmockup
|
|
|
|
|
|
## Mål
|
|
|
|
|
|
Design og håndkod HTML-strukturen for en personlig blogghjemmeside. Denne oppgaven hjelper deg med å øve på semantisk HTML, planlegging av layout og organisering av kode.
|
|
|
|
|
|
## Instruksjoner
|
|
|
|
|
|
1. **Design din bloggmockup**
|
|
|
- Lag en visuell skisse av blogghjemmesiden din. Inkluder viktige seksjoner som header, navigasjon, hovedinnhold, sidebar og footer.
|
|
|
- Du kan bruke papir og skanne skissen, eller bruke digitale verktøy (f.eks. Figma, Adobe XD, Canva eller til og med PowerPoint).
|
|
|
|
|
|
2. **Identifiser HTML-elementer**
|
|
|
- Lag en liste over HTML-elementene du planlegger å bruke for hver seksjon (f.eks. `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` osv.).
|
|
|
|
|
|
3. **Skriv HTML-markup**
|
|
|
- Håndkod HTML for din mockup. Fokuser på semantisk struktur og beste praksis.
|
|
|
- Inkluder minst 10 forskjellige HTML-elementer.
|
|
|
- Legg til kommentarer for å forklare valgene dine og strukturen.
|
|
|
|
|
|
4. **Send inn arbeidet ditt**
|
|
|
- Last opp skissen/mockupen og HTML-filen din.
|
|
|
- Valgfritt: Skriv en kort refleksjon (2–3 setninger) om designvalgene dine.
|
|
|
|
|
|
## Vurderingskriterier
|
|
|
|
|
|
| Kriterier | Fremragende | Tilfredsstillende | Trenger forbedring |
|
|
|
|------------------|------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
|
|
|
| Visuell mockup | Klar, detaljert mockup med merkede seksjoner og gjennomtenkt layout | Enkel mockup med noen merkede seksjoner | Minimal eller uklar mockup; mangler seksjonsmerking |
|
|
|
| HTML-elementer | Bruker 10+ semantiske HTML-elementer; viser forståelse for struktur og beste praksis | Bruker 5–9 HTML-elementer; noe semantisk struktur | Bruker færre enn 5 elementer; mangler semantisk struktur |
|
|
|
| Kvalitet på kode | Velorganisert, lesbar kode med kommentarer; følger HTML-standarder | For det meste organisert kode; få kommentarer | Uorganisert kode; mangler kommentarer |
|
|
|
| Refleksjon | Innsiktsfull refleksjon om designvalg og utfordringer | Enkel refleksjon | Ingen refleksjon eller mangler relevans |
|
|
|
|
|
|
## Tips
|
|
|
|
|
|
- Bruk semantiske HTML-tagger for bedre tilgjengelighet og SEO.
|
|
|
- Organiser koden din med innrykk og kommentarer.
|
|
|
- Se [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) for veiledning.
|
|
|
- Tenk på hvordan layouten din kan utvides eller styles i fremtidige oppgaver.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Ansvarsfraskrivelse**:
|
|
|
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi tilstreber nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. |
