# Terrarium-prosjekt del 1: Introduksjon til HTML ```mermaid journey title Din HTML-læringsreise section Grunnlag Lag HTML-fil: 3: Student Legg til DOCTYPE: 4: Student Strukturér dokument: 5: Student section Innhold Legg til metadata: 4: Student Inkluder bilder: 5: Student Organiser oppsett: 5: Student section Semantikk Bruk riktige tagger: 4: Student Forbedre tilgjengelighet: 5: Student Bygg terrarium: 5: Student ``` ![Introduksjon til HTML](../../../../translated_images/no/webdev101-html.4389c2067af68e98.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) HTML, eller HyperText Markup Language, er grunnlaget for alle nettsider du noen gang har besøkt. Tenk på HTML som skjelettet som gir struktur til nettsider – det definerer hvor innhold går, hvordan det organiseres, og hva hver del representerer. Mens CSS senere "kler opp" ditt HTML med farger og oppsett, og JavaScript bringer det til liv med interaktivitet, gir HTML den nødvendige strukturen som gjør alt annet mulig. I denne leksjonen skal du lage HTML-strukturen for et virtuelt terrarium-grensesnitt. Dette praktiske prosjektet vil lære deg grunnleggende HTML-konsepter mens du bygger noe visuelt engasjerende. Du vil lære hvordan du organiserer innhold med semantiske elementer, jobber med bilder, og lager grunnlaget for en interaktiv webapplikasjon. Ved slutten av denne leksjonen vil du ha en fungerende HTML-side som viser plantebilder i organiserte kolonner, klar for styling i neste leksjon. Ikke bekymre deg om det ser enkelt ut i starten – det er akkurat slik HTML skal være før CSS legger til den visuelle poleringen. ```mermaid mindmap root((HTML Grunnleggende)) Structure DOCTYPE-erklæring HTML-element Hode seksjon Kropp innhold Elements Tagger & Attributter Selv-lukkende tagger Innlagte elementer Blokk vs Inline Content Tekstelementer Bilder Beholdere (div) Lister Semantics Meningsfulle tagger Tilgjengelighet Skjermlesere SEO Fordeler Best Practices Korrekt innrykk Gyldig markup Beskrivende alt-tekst Organisert struktur ``` ## Quiz før forelesning [Quiz før forelesning](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Se og lær**: Se denne nyttige videooversikten > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Sette opp prosjektet ditt Før vi dykker inn i HTML-koden, la oss sette opp et ordentlig arbeidsområde for terrarium-prosjektet ditt. Å lage en organisert mappestruktur fra begynnelsen er en viktig vane som vil tjene deg godt gjennom hele webutviklingsreisen. ### Oppgave: Lag prosjektstrukturen din Du skal lage en dedikert mappe for terrarium-prosjektet ditt og legge til din første HTML-fil. Her er to ulike metoder du kan bruke: **Alternativ 1: Bruke Visual Studio Code** 1. Åpne Visual Studio Code 2. Klikk "File" → "Open Folder" eller bruk `Ctrl+K, Ctrl+O` (Windows/Linux) eller `Cmd+K, Cmd+O` (Mac) 3. Opprett en ny mappe kalt `terrarium` og velg den 4. I Explorer-panelet, klikk på ikonet for "New File" 5. Gi filen navnet `index.html` ![VS Code Explorer showing new file creation](../../../../translated_images/no/vs-code-index.e2986cf919471eb9.webp) **Alternativ 2: Bruke terminalkommandoer** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Dette oppnår disse kommandoene:** - **Oppretter** en ny katalog kalt `terrarium` for prosjektet ditt - **Går inn i** terrarium-mappen - **Oppretter** en tom `index.html` fil - **Åpner** filen i Visual Studio Code for redigering > 💡 **Proftips**: Filnavnet `index.html` er spesielt i webutvikling. Når noen besøker en nettside, leter nettlesere automatisk etter `index.html` som standardside å vise. Det betyr at en URL som `https://mysite.com/projects/` automatisk vil vise `index.html`-filen i `projects`-mappen uten at du trenger å spesifisere filnavnet i URL-en. ## Forstå HTML-dokumentstruktur Hvert HTML-dokument følger en spesifikk struktur som nettlesere må forstå og vise riktig. Tenk på denne strukturen som et formelt brev – den har påkrevde elementer i en bestemt rekkefølge som hjelper mottakeren (nettleseren) med å prosessere innholdet på riktig måte. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Overskrift"] G --> I["<div> Beholdere"] G --> J["<img> Bilder"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` La oss starte med å legge til det essensielle grunnlaget som hvert HTML-dokument trenger. ### DOCTYPE-deklarasjonen og rootelementet De to første linjene i en hvilken som helst HTML-fil fungerer som dokumentets "introduksjon" til nettleseren: ```html <!DOCTYPE html> <html></html> ``` **Forstå hva denne koden gjør:** - **Deklarerer** dokumenttypen som HTML5 med `<!DOCTYPE html>` - **Oppretter** rootelementet `<html>` som vil inneholde alt innhold på siden - **Etablerer** moderne webstandarder for korrekt nettleserrendering - **Sikrer** jevn visning på tvers av ulike nettlesere og enheter > 💡 **VS Code tips**: Hold musepekeren over en hvilken som helst HTML-tag i VS Code for å se nyttig informasjon fra MDN Web Docs, inkludert bruker-eksempler og nettleserkompatibilitet. > 📚 **Lær mer**: DOCTYPE-deklarasjonen hindrer nettlesere i å gå i "quirks mode," som ble brukt for å støtte svært gamle nettsider. Moderne webutvikling bruker den enkle `<!DOCTYPE html>` deklarasjonen for å sikre [standard-kompatibel rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagogisk sjekk** **Pause og reflekter**: Før du fortsetter, sørg for at du forstår: - ✅ Hvorfor hvert HTML-dokument trenger en DOCTYPE-deklarasjon - ✅ Hva rootelementet `<html>` inneholder - ✅ Hvordan denne strukturen hjelper nettlesere med å gjengi sidene riktig **Rask selvtest**: Kan du forklare med dine egne ord hva "standard-kompatibel rendering" betyr? ## Legge til essensiell dokumentmetadata `<head>`-delen i et HTML-dokument inneholder viktig informasjon som nettlesere og søkemotorer trenger, men som besøkende ikke ser direkte på siden. Tenk på det som "bak kulissene"-informasjonen som hjelper nettsiden din å fungere riktig og vises korrekt på ulike enheter og plattformer. Denne metadataen forteller nettlesere hvordan de skal vise siden, hvilken tegnkoding de skal bruke, og hvordan de skal håndtere ulike skjermstørrelser – alt essensielt for å lage profesjonelle, tilgjengelige nettsider. ### Oppgave: Legg til dokumenthode Sett inn denne `<head>`-seksjonen mellom dine åpne og lukkede `<html>`-tagger: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Hva hvert element gjør:** - **Setter** sidetittel som vises i nettleserfaner og søkeresultater - **Spesifiserer** UTF-8 tegnkoding for riktig visning av tekst over hele verden - **Sikrer** kompatibilitet med moderne versjoner av Internet Explorer - **Konfigurerer** responsivt design ved å sette viewporten til enhetsbredde - **Kontrollerer** startzoomen for å vise innhold i naturlig størrelse > 🤔 **Tenk over dette**: Hva ville skjedd hvis du satt en viewport-meta tag som dette: ``? Dette ville tvinge siden til alltid å være 600 piksler bred, og bryte responsivt design! Lær mer om [korrekt viewport-konfigurasjon](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Bygge dokumentets kropp ``-elementet inneholder alt synlig innhold på nettsiden – alt brukeren ser og kan interagere med. Mens ``-delen ga instruksjoner til nettleseren, inneholder `` den faktiske innholdet: tekst, bilder, knapper og andre elementer som lager brukergrensesnittet. La oss legge til kroppens struktur og forstå hvordan HTML-tagger samhandler for å lage meningsfylt innhold. ### Forstå HTML-taggstruktur HTML bruker parvise tagger for å definere elementer. De fleste tagger har en åpningstagg som `

` og en avslutningstagg som `

`, med innhold mellom: `

Hei, verden!

`. Dette lager et paragraf-element som inneholder teksten "Hei, verden!". ### Oppgave: Legg til body-elementet Oppdater HTML-filen din til å inkludere ``-elementet: ```html Welcome to my Virtual Terrarium ``` **Dette gir den komplette strukturen:** - **Etablerer** det grunnleggende HTML5 dokumentrammeverket - **Inkluderer** essensiell metadata for korrekt nettleserrendering - **Lager** en tom kropp klar for synlig innhold - **Følger** moderne webutviklings beste praksis Nå er du klar til å legge til synlige elementer i terrariet ditt. Vi bruker `
`-elementer som beholdere for å organisere forskjellige innholdsseksjoner, og ``-elementer for å vise plantebildene. ### Jobbe med bilder og layout-beholdere Bilder er spesielle i HTML fordi de bruker "selvlukkende" tagger. I motsetning til elementer som `

` som omslutter innhold, inneholder ``-taggen all nødvendig informasjon innenfor seg selv ved hjelp av attributter som `src` for bildefil-lokasjon og `alt` for tilgjengelighet. Før du legger til bilder i HTML-en din, må du organisere prosjektfilene dine riktig ved å lage en mappe for bilder og legge til plantegrafikkene. **Først, sett opp bildene dine:** 1. Lag en mappe kalt `images` inne i terrarium-prosjektmappen din 2. Last ned plantebildene fra [løsningsmappen](../../../../3-terrarium/solution/images) (14 plantebilder totalt) 3. Kopier alle plantebildene over i den nye `images`-mappen ### Oppgave: Lag layout for plantevisning Legg nå til plantebildene organisert i to kolonner mellom dine ``-tagger: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Steg for steg, dette skjer i koden:** - **Oppretter** en hovedsidebeholder med `id="page"` for å holde alt innhold - **Etablerer** to kolonnebeholdere: `left-container` og `right-container` - **Organiserer** 7 planter i venstre kolonne og 7 planter i høyre kolonne - **Pakker** hvert plantebilde i en `plant-holder` div for individuell posisjonering - **Bruker** konsekvente klassenavn for CSS-styling i neste leksjon - **Tildeler** unike ID-er til hvert plantebilde for JavaScript-interaksjon senere - **Inkluderer** riktige filbaner som peker til bilder-mappen > 🤔 **Tenk over dette**: Legg merke til at alle bildene har samme alternative tekst "plant" akkurat nå. Dette er ikke ideelt for tilgjengelighet. Skjermlesere vil høre "plant" 14 ganger uten å vite hvilke spesifikke planter hvert bilde viser. Kan du tenke deg bedre, mer beskrivende alt-tekster for hvert bilde? > 📝 **HTML-elementtyper**: `
`-elementer er "blokknivå" og tar opp full bredde, mens ``-elementer er "inline" og tar kun opp nødvendig bredde. Hva tror du ville skjedd hvis du endret alle disse `
`-taggene til ``-tagger? ### 🔄 **Pedagogisk sjekk** **Forståelse av struktur**: Ta et øyeblikk til å gjennomgå HTML-strukturen din: - ✅ Kan du identifisere hovedbeholderne i layouten din? - ✅ Forstår du hvorfor hvert bilde har en unik ID? - ✅ Hvordan vil du beskrive formålet til `plant-holder`-divene? **Visuell inspeksjon**: Åpne HTML-filen i en nettleser. Du skal se: - En enkel liste med plantebilder - Bilder organisert i to kolonner - Enkel, ustylet layout **Husk**: Dette enkle utseendet er akkurat hvordan HTML skal se ut før CSS-styling! Med denne markupen lagt til vil plantene vises på skjermen, selv om det ikke ser polert ut ennå – det er CSS sin jobb i neste leksjon! For nå har du et solid HTML-grunnlag som ordentlig organiserer innholdet ditt og følger beste praksis for tilgjengelighet. ## Bruke semantisk HTML for tilgjengelighet Semantisk HTML betyr å velge HTML-elementer basert på deres mening og hensikt, ikke bare utseende. Når du bruker semantisk markup, kommuniserer du struktur og mening av innholdet ditt til nettlesere, søkemotorer og hjelpemidler som skjermlesere. ```mermaid flowchart TD A[Trenger å legge til innhold?] --> B{Hvilken type?} B -->|Hovedoverskrift| C["

"] B -->|Underoverskrift| D["

,

, osv."] B -->|Avsnitt| E["

"] B -->|Liste| F["

    ,
      "] B -->|Navigasjon| G["