# Terrarium Projekt Del 1: Introduktion til HTML
> Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, eller HyperText Markup Language, er fundamentet for alle hjemmesider, du nogensinde har besøgt. Tænk på HTML som skelettet, der giver struktur til websider – det definerer, hvor indholdet skal placeres, hvordan det er organiseret, og hvad hver del repræsenterer. Mens CSS senere vil "klæde" din HTML med farver og layout, og JavaScript vil bringe det til live med interaktivitet, giver HTML den essentielle struktur, der gør alt andet muligt.
I denne lektion vil du oprette HTML-strukturen til en virtuel terrarium-grænseflade. Dette praktiske projekt vil lære dig grundlæggende HTML-koncepter, mens du bygger noget visuelt engagerende. Du vil lære, hvordan man organiserer indhold ved hjælp af semantiske elementer, arbejder med billeder og skaber fundamentet for en interaktiv webapplikation.
Ved slutningen af denne lektion vil du have en fungerende HTML-side, der viser plantebilleder i organiserede kolonner, klar til styling i næste lektion. Bare rolig, hvis det ser enkelt ud i starten – det er præcis, hvad HTML skal gøre, før CSS tilføjer den visuelle finish.
## Quiz før lektionen
[Quiz før lektionen](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **Se og lær**: Tjek denne nyttige videooversigt
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## Opsætning af dit projekt
Før vi dykker ned i HTML-koden, lad os oprette et ordentligt arbejdsområde til dit terrarium-projekt. At skabe en organiseret filstruktur fra starten er en vigtig vane, der vil gavne dig gennem hele din webudviklingsrejse.
### Opgave: Opret din projektstruktur
Du vil oprette en dedikeret mappe til dit terrarium-projekt og tilføje din første HTML-fil. Her er to metoder, du kan bruge:
**Mulighed 1: Brug af Visual Studio Code**
1. Åbn Visual Studio Code
2. Klik på "File" → "Open Folder" eller brug `Ctrl+K, Ctrl+O` (Windows/Linux) eller `Cmd+K, Cmd+O` (Mac)
3. Opret en ny mappe kaldet `terrarium` og vælg den
4. I Explorer-panelet skal du klikke på ikonet "New File"
5. Navngiv din fil `index.html`
**Mulighed 2: Brug af terminalkommandoer**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**Her er, hvad disse kommandoer gør:**
- **Opretter** en ny mappe kaldet `terrarium` til dit projekt
- **Navigerer** ind i terrarium-mappen
- **Opretter** en tom `index.html`-fil
- **Åbner** filen i Visual Studio Code til redigering
> 💡 **Pro Tip**: Filnavnet `index.html` er specielt i webudvikling. Når nogen besøger en hjemmeside, leder browsere automatisk efter `index.html` som standard-siden, der skal vises. Det betyder, at en URL som `https://mysite.com/projects/` automatisk vil vise `index.html`-filen fra `projects`-mappen uden at skulle angive filnavnet i URL'en.
## Forstå HTML-dokumentstruktur
Hvert HTML-dokument følger en specifik struktur, som browsere skal forstå og vise korrekt. Tænk på denne struktur som et formelt brev – det har nødvendige elementer i en bestemt rækkefølge, der hjælper modtageren (i dette tilfælde browseren) med at behandle indholdet korrekt.
Lad os starte med at tilføje det essentielle fundament, som hvert HTML-dokument har brug for.
### DOCTYPE-deklarationen og roden
De første to linjer i enhver HTML-fil fungerer som dokumentets "introduktion" til browseren:
```html
```
**Forstå, hvad denne kode gør:**
- **Deklarerer** dokumenttypen som HTML5 ved hjælp af ``
- **Opretter** rod-elementet ``, der vil indeholde alt sideindhold
- **Etablerer** moderne webstandarder for korrekt browsergengivelse
- **Sikrer** ensartet visning på tværs af forskellige browsere og enheder
> 💡 **VS Code Tip**: Hold musen over ethvert HTML-tag i VS Code for at se nyttige oplysninger fra MDN Web Docs, inklusive eksempler på brug og browserkompatibilitet.
> 📚 **Lær mere**: DOCTYPE-deklarationen forhindrer browsere i at gå ind i "quirks mode", som blev brugt til at understøtte meget gamle hjemmesider. Moderne webudvikling bruger den enkle ``-deklaration for at sikre [standards-kompatibel rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
## Tilføjelse af essentiel dokumentmetadata
Sektionen `` i et HTML-dokument indeholder vigtig information, som browsere og søgemaskiner har brug for, men som besøgende ikke ser direkte på siden. Tænk på det som "bag kulisserne"-information, der hjælper din webside med at fungere korrekt og vises korrekt på tværs af forskellige enheder og platforme.
Denne metadata fortæller browsere, hvordan de skal vise din side, hvilken tegnkodning der skal bruges, og hvordan de skal håndtere forskellige skærmstørrelser – alt sammen essentielt for at skabe professionelle, tilgængelige websider.
### Opgave: Tilføj dokumentets hoved
Indsæt denne ``-sektion mellem dine åbning og lukning ``-tags:
```html
Welcome to my Virtual Terrarium
```
**Gennemgang af, hvad hvert element gør:**
- **Indstiller** sidens titel, der vises i browserfaner og søgeresultater
- **Angiver** UTF-8 tegnkodning for korrekt tekstvisning verden over
- **Sikrer** kompatibilitet med moderne versioner af Internet Explorer
- **Konfigurerer** responsivt design ved at indstille viewport til at matche enhedens bredde
- **Kontrollerer** initial zoom-niveau for at vise indhold i naturlig størrelse
> 🤔 **Tænk over dette**: Hvad ville der ske, hvis du indstillede en viewport meta-tag som denne: ``? Dette ville tvinge siden til altid at være 600 pixels bred, hvilket ville ødelægge responsivt design! Lær mere om [korrekt viewport-konfiguration](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## Opbygning af dokumentets krop
Elementet `` indeholder alt det synlige indhold på din webside – alt, hvad brugerne vil se og interagere med. Mens sektionen `` gav instruktioner til browseren, indeholder sektionen `` det faktiske indhold: tekst, billeder, knapper og andre elementer, der skaber din brugergrænseflade.
Lad os tilføje kropsstrukturen og forstå, hvordan HTML-tags arbejder sammen for at skabe meningsfuldt indhold.
### Forstå HTML-tagstruktur
HTML bruger parrede tags til at definere elementer. De fleste tags har et åbningstag som `
` og et lukningstag som `
`, med indhold imellem: `
Hello, world!
`. Dette skaber et afsnitselement, der indeholder teksten "Hello, world!".
### Opgave: Tilføj kropselementet
Opdater din HTML-fil for at inkludere elementet ``:
```html
Welcome to my Virtual Terrarium
```
**Her er, hvad denne komplette struktur giver:**
- **Etablerer** den grundlæggende HTML5-dokumentramme
- **Inkluderer** essentiel metadata for korrekt browsergengivelse
- **Opretter** en tom krop klar til dit synlige indhold
- **Følger** moderne webudviklings bedste praksis
Nu er du klar til at tilføje de synlige elementer i dit terrarium. Vi vil bruge `
`-elementer som beholdere til at organisere forskellige sektioner af indhold og ``-elementer til at vise plantebilleder.
### Arbejde med billeder og layoutbeholdere
Billeder er specielle i HTML, fordi de bruger "selvlukkende" tags. I modsætning til elementer som ``, der omslutter indhold, indeholder ``-tagget alle de oplysninger, det har brug for, inden for selve tagget ved hjælp af attributter som `src` til billedfilens sti og `alt` for tilgængelighed.
Før du tilføjer billeder til din HTML, skal du organisere dine projektfiler korrekt ved at oprette en billedmappe og tilføje plantegrafikken.
**Først skal du opsætte dine billeder:**
1. Opret en mappe kaldet `images` inde i din terrarium-projektmappe
2. Download plantebillederne fra [løsningsmappen](../../../../3-terrarium/solution/images) (14 plantebilleder i alt)
3. Kopier alle plantebillederne ind i din nye `images`-mappe
### Opgave: Opret plantevisningslayoutet
Tilføj nu plantebillederne organiseret i to kolonner mellem dine ``-tags:
```html
```
**Trin for trin, her er hvad der sker i denne kode:**
- **Opretter** en hovedsidebeholder med `id="page"` til at holde alt indhold
- **Etablerer** to kolonnebeholdere: `left-container` og `right-container`
- **Organiserer** 7 planter i venstre kolonne og 7 planter i højre kolonne
- **Omslutter** hvert plantebillede i en `plant-holder` div for individuel positionering
- **Anvender** konsistente klassenavne til CSS-styling i næste lektion
- **Tildeler** unikke ID'er til hvert plantebillede for JavaScript-interaktion senere
- **Inkluderer** korrekte filstier, der peger på billedmappen
> 🤔 **Overvej dette**: Bemærk, at alle billeder i øjeblikket har den samme alt-tekst "plant". Dette er ikke ideelt for tilgængelighed. Brugere af skærmlæsere ville høre "plant" gentaget 14 gange uden at vide, hvilken specifik plante hvert billede viser. Kan du tænke på bedre, mere beskrivende alt-tekst for hvert billede?
> 📝 **HTML-elementtyper**: `
`-elementer er "blokniveau" og optager fuld bredde, mens ``-elementer er "inline" og kun optager nødvendig bredde. Hvad tror du, der ville ske, hvis du ændrede alle disse `
`-tags til ``-tags?
Med denne markup tilføjet vil planterne vises på skærmen, selvom de endnu ikke ser polerede ud – det er det, CSS er til i næste lektion! For nu har du et solidt HTML-fundament, der organiserer dit indhold korrekt og følger bedste praksis for tilgængelighed.
## Brug af semantisk HTML for tilgængelighed
Semantisk HTML betyder at vælge HTML-elementer baseret på deres betydning og formål, ikke kun deres udseende. Når du bruger semantisk markup, kommunikerer du strukturen og betydningen af dit indhold til browsere, søgemaskiner og hjælpemidler som skærmlæsere.
Denne tilgang gør dine hjemmesider mere tilgængelige for brugere med handicap og hjælper søgemaskiner med bedre at forstå dit indhold. Det er et grundlæggende princip for moderne webudvikling, der skaber bedre oplevelser for alle.
### Tilføjelse af en semantisk sidetitel
Lad os tilføje en ordentlig overskrift til din terrarium-side. Indsæt denne linje lige efter dit åbningstag ``:
```html
My Terrarium
```
**Hvorfor semantisk markup er vigtig:**
- **Hjælper** skærmlæsere med at navigere og forstå sidestruktur
- **Forbedrer** søgemaskineoptimering (SEO) ved at tydeliggøre indholdshierarki
- **Øger** tilgængeligheden for brugere med synshandicap eller kognitive forskelle
- **Skaber** bedre brugeroplevelser på tværs af alle enheder og platforme
- **Følger** webstandarder og bedste praksis for professionel udvikling
**Eksempler på semantiske vs. ikke-semantiske valg:**
| Formål | ✅ Semantisk valg | ❌ Ikke-semantisk valg |
|---------|-------------------|------------------------|
| Hovedoverskrift | `
` |
> 🎥 **Se det i aktion**: Se [hvordan skærmlæsere interagerer med websider](https://www.youtube.com/watch?v=OUDV1gqs9GA) for at forstå, hvorfor semantisk markup er afgørende for tilgængelighed. Bemærk, hvordan korrekt HTML-struktur hjælper brugere med at navigere effektivt.
## Oprettelse af terrarium-beholderen
Lad os nu tilføje HTML-strukturen til selve terrariet – glasbeholderen, hvor planter senere vil blive placeret. Denne sektion demonstrerer et vigtigt koncept: HTML giver struktur, men uden CSS-styling vil disse elementer endnu ikke være synlige.
Terrarium-markupen bruger beskrivende klassenavne, der vil gøre CSS-styling intuitiv og vedligeholdelsesvenlig i næste lektion.
### Opgave: Tilføj terrarium-strukturen
Indsæt denne markup over det sidste `
`-tag (før lukningstaget for sidebeholderen):
```html
```
**Forstå denne terrarium-struktur:**
- **Opretter** en hovedterrarium-beholder med et unikt ID til styling
- **Definerer** separate elementer for hver visuel komponent (top, vægge, jord, bund)
- **Inkluderer** indlejrede elementer for glaseffekter (glossy elementer)
- **Bruger** beskrivende klassenavne, der tydeligt angiver hvert elements formål
- **Forbereder** strukturen til CSS-styling, der vil skabe glas-terrarium-udseendet
> 🤔 **Bemærk noget?**: Selvom du har tilføjet denne markup, ser du ikke noget nyt på siden! Dette illustrerer perfekt, hvordan HTML giver struktur, mens CSS giver udseende. Disse `
`-elementer eksisterer, men har endnu ingen visuel styling – det kommer i næste lektion!
---
## GitHub Copilot Agent Udfordring
Brug Agent-tilstand til at fuldføre følgende udfordring:
**Beskrivelse:** Opret en semantisk HTML-struktur til en planteplejevejledning, der kunne tilføjes til terrarium-projektet.
**Prompt:** Opret en semantisk HTML-sektion, der inkluderer en hovedoverskrift "Guide til plantepleje", tre underafsnit med overskrifterne "Vanding", "Lyskrav" og "Jordpleje", hver med et afsnit om planteplejeinformation. Brug korrekte semantiske HTML-tags som ``, `
`, `
` og `
` til at strukturere indholdet korrekt.
Lær mere om [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) her.
## Udforsk HTML-historieudfordring
**Lær om webudviklingens historie**
HTML har udviklet sig markant, siden Tim Berners-Lee skabte den første webbrowser på CERN i 1990. Nogle ældre tags som `
