# HTML-øvelse: Lag en bloggmockup ## Læringsmål Bruk HTML-kunnskapene dine til å designe og kode en komplett blogg-hjemmeside. Denne praktiske oppgaven vil styrke forståelsen av semantisk HTML, beste praksis for tilgjengelighet, og profesjonelle ferdigheter innen kodeorganisering som du vil bruke gjennom hele din webutviklingsreise. **Ved å fullføre denne oppgaven vil du:** - Øve på å planlegge nettsidelayout før koding - Bruke semantiske HTML-elementer på riktig måte - Lage tilgjengelig og godt strukturert markup - Utvikle profesjonelle kodevaner med kommentarer og organisering ## Prosjektkrav ### Del 1: Designplanlegging (Visuell mockup) **Lag en visuell mockup av blogg-hjemmesiden din som inkluderer:** - Header med nettstedets tittel og navigasjon - Hovedinnholdsområde med minst 2-3 forhåndsvisninger av blogginnlegg - Sidebar med tilleggsinformasjon (om-seksjon, nylige innlegg, kategorier) - Footer med kontaktinformasjon eller lenker **Alternativer for å lage mockup:** - **Håndtegnet skisse**: Bruk papir og blyant, og ta deretter bilde eller skann designet ditt - **Digitale verktøy**: Figma, Adobe XD, Canva, PowerPoint eller andre tegneprogrammer - **Wireframe-verktøy**: Balsamiq, MockFlow eller lignende wireframe-programvare **Merk mockup-seksjonene dine** med HTML-elementene du planlegger å bruke (f.eks. "Header - `

`", "Blogginnlegg - `

`"). ### Del 2: Planlegging av HTML-elementer **Lag en liste som kobler hver seksjon i mockupen til spesifikke HTML-elementer:** ``` Example: - Site Header →

- Main Navigation →