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

3.9 KiB
Raw Blame History Escape

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