# Terrarium Projekt Del 1: Introduktion til HTML ```mermaid journey title Din HTML læringsrejse section Fundament Opret HTML fil: 3: Student Tilføj DOCTYPE: 4: Student Strukturér dokument: 5: Student section Indhold Tilføj metadata: 4: Student Inkludér billeder: 5: Student Organisér layout: 5: Student section Semantik Brug korrekte tags: 4: Student Forbedr tilgængelighed: 5: Student Byg terrarium: 5: Student ``` ![Introduktion til HTML](../../../../translated_images/da/webdev101-html.4389c2067af68e98.webp) > Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac) HTML, eller HyperText Markup Language, er fundamentet for enhver hjemmeside, du nogensinde har besøgt. Tænk på HTML som skelettet, der giver struktur til websider – det definerer, hvor indholdet skal være, hvordan det organiseres, og hvad hvert enkelt element repræsenterer. Mens CSS senere "pynter" din HTML med farver og layouts, og JavaScript bringer det til live med interaktivitet, giver HTML den essentielle struktur, som gør alt andet muligt. I denne lektion vil du lave HTML-strukturen til en virtuel terrariumgrænseflade. Dette hands-on projekt vil lære dig grundlæggende HTML-koncepter, samtidig med at du bygger noget visuelt engagerende. Du lærer, hvordan du organiserer indhold ved hjælp af semantiske elementer, arbejder med billeder og laver 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. Vær ikke bekymret, hvis det ser grundlæggende ud til at starte med – det er præcis, hvad HTML skal gøre, før CSS tilføjer det visuelle finish. ```mermaid mindmap root((HTML Grundlæggende)) Structure DOCTYPE Deklaration HTML Element Head Sektion Body Indhold Elements Tags & Attributter Selv-lukkende Tags Indlejrede Elementer Block vs Inline Content Tekstelementer Billeder Containere (div) Lister Semantics Betydningsfulde Tags Tilgængelighed Skærmlæsere SEO Fordele Best Practices Korrekt Indlejring Gyldig Markup Beskrivende Alt Tekst Organiseret Struktur ``` ## Forud-forelæsningstest [Forud-forelæsningstest](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Se og lær**: Tjek denne hjælpsomme videooversigt > > [![HTML Grundprincipper Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Opsætning af dit projekt Før vi dykker ned i HTML-koden, lad os sætte et passende arbejdsområde op til dit terrariumprojekt. At skabe en organiseret filstruktur fra starten er en vigtig vane, der vil gavne dig gennem hele din webudviklingsrejse. ### Opgave: Opret din projektstruktur Du skal oprette en dedikeret mappe til dit terrariumprojekt 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, klik på ikonet "New File" 5. Navngiv din fil `index.html` ![VS Code Explorer viser oprettelse af ny fil](../../../../translated_images/da/vs-code-index.e2986cf919471eb9.webp) **Mulighed 2: Brug af terminalkommandoer** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Det er, hvad disse kommandoer gør:** - **Opretter** en ny mappe kaldet `terrarium` til dit projekt - **Navigerer** ind i terrarium-mappen - **Opretter** en tom fil ved navn `index.html` - **Åbner** filen i Visual Studio Code til redigering > 💡 **Pro-tip**: Filnavnet `index.html` er specielt i webudvikling. Når nogen besøger en hjemmeside, søger browseren automatisk efter `index.html` som standard side at vise. Det betyder, at en URL som `https://mysite.com/projects/` automatisk åbner `index.html`-filen i `projects`-mappen uden at skulle specificere filnavnet i URL’en. ## Forståelse af 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, som hjælper modtageren (i dette tilfælde browseren) med at behandle indholdet korrekt. ```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> Billeder"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Lad os starte med at tilføje det essentielle fundament, som hvert HTML-dokument har brug for. ### DOCTYPE-deklarationen og rootelementet De første to linjer i en hvilken som helst HTML-fil fungerer som dokumentets "introduktion" til browseren: ```html <!DOCTYPE html> <html></html> ``` **Sådan fungerer denne kode:** - **Deklarerer** dokumenttypen som HTML5 ved hjælp af `<!DOCTYPE html>` - **Opretter** root-`<html>` elementet, som skal indeholde alt sideindhold - **Etablerer** moderne webstandarder for korrekt browsers rendering - **Sikrer** konsistent visning på tværs af forskellige browsere og enheder > 💡 **VS Code-tip**: Hold musen over en HTML-tag i VS Code for at se nyttige oplysninger fra MDN Web Docs, inklusive brugseksempler og browserkompatibilitet. > 📚 **Lær mere**: DOCTYPE-deklarationen forhindrer browsere i at gå i "quirks mode", som blev brugt til at understøtte meget gamle hjemmesider. Moderne webudvikling bruger den simple `<!DOCTYPE html>`-deklaration for at sikre [standard-kompatibel rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pædagogisk status** **Pause og refleksion**: Før du fortsætter, skal du sikre dig, at du forstår: - ✅ Hvorfor hvert HTML-dokument har brug for en DOCTYPE-deklaration - ✅ Hvad `<html>`-root-elementet indeholder - ✅ Hvordan denne struktur hjælper browsere med at vise sider korrekt **Hurtig selvtest**: Kan du forklare med dine egne ord, hvad "standard-kompatibel rendering" betyder? ## Tilføjelse af essentiel dokumentmetadata `<head>`-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"-informationen, der hjælper din webside med at fungere korrekt og vises rigtigt på forskellige enheder og platforme. Denne metadata fortæller browserne, hvordan de skal vise din side, hvilken tegnkodning der skal bruges, og hvordan forskellige skærmstørrelser håndteres – alt sammen essentielt for at lave professionelle, tilgængelige websider. ### Opgave: Tilføj sidehovedet Indsæt denne `<head>`-sektion mellem dine åbnings- og lukningstags `<html>`: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Hvad hvert element gør:** - **Sætter** sidetitlen, som vises i browsertabs og søgeresultater - **Specificerer** UTF-8 tegnkodning for korrekt visning af tekst verden over - **Sikrer** kompatibilitet med moderne versioner af Internet Explorer - **Konfigurerer** responsivt design ved at sætte viewport til at matche enhedens bredde - **Styrer** startzoom for at vise indhold i naturlig størrelse > 🤔 **Tænk over dette**: Hvad ville der ske, hvis du satte en viewport meta-tag som denne: ``? Det ville tvinge siden til altid at være 600 pixels bred, hvilket bryder det responsive design! Læs mere om [korrekt viewport-konfiguration](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Bygning af dokumentets krop ``-elementet indeholder alt synligt indhold på din webside – alt brugerne vil se og interagere med. Mens ``-sektionen giver instruktioner til browseren, indeholder ``-sektionen det faktiske indhold: tekst, billeder, knapper og andre elementer, der udgør brugerfladen. Lad os tilføje kroppens struktur og forstå, hvordan HTML-tags arbejder sammen for at skabe meningsfuldt indhold. ### Forståelse af HTML-tagstruktur HTML bruger parrede tags til at definere elementer. De fleste tags har en åbnings-tag som `

` og en luknings-tag som `

`, med indhold imellem: `

Hello, world!

`. Det skaber et afsnitselement, der indeholder teksten "Hello, world!". ### Opgave: Tilføj body-elementet Opdater din HTML-fil til at inkludere ``-elementet: ```html Welcome to my Virtual Terrarium ``` **Denne komplette struktur giver:** - **Etablerer** det grundlæggende HTML5-dokumentrammeværk - **Inkluderer** vigtig metadata for korrekt browser-gengivelse - **Skaber** 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 bruger `
`-elementer som containere til at organisere forskellige sektioner af indhold, og ``-elementer til at vise plantebilleder. ### Arbejde med billeder og layoutcontainere Billeder er specielle i HTML, fordi de bruger "self-closing" tags. I modsætning til elementer som `

`, der omslutter indhold, indeholder ``-taget al den nødvendige information i selve tagget ved hjælp af attributter som `src` for 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 plantegrafikkerne. **Først, sæt dine billeder op:** 1. Opret en mappe kaldet `images` inde i din terrariumprojektmappe 2. Download plantebillederne fra [løsningsmappen](../../../../3-terrarium/solution/images) (14 plantebilleder i alt) 3. Kopier alle plantebilleder ind i din nye `images`-mappe ### Opgave: Opret plantevisningslayoutet Tilføj nu plantebillederne organiseret i to kolonner mellem dine ``-tags: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Her sker der trin for trin i koden:** - **Opretter** en hovedside-container med `id="page"` til at holde alt indhold - **Etablerer** to kolonnecontainere: `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 til individuel placering - **Anvender** konsekvente klassenavne til CSS-styling i næste lektion - **Tildeler** unikke ID’er til hvert plantebillede til JavaScript-interaktion senere - **Indeholder** korrekte filstier, der peger på billedmappen > 🤔 **Overvej dette**: Bemærk, at alle billeder i øjeblikket har samme alt-tekst "plant". Det er ikke optimalt for tilgængelighed. Brugere med skærmlæsere vil høre "plant" gentaget 14 gange uden at vide, hvilken specifik plante hvert billede viser. Kan du tænke på bedre, mere beskrivende alt-tekster for hvert billede? > 📝 **HTML-elementtyper**: `
`-elementer er "blokniveau" og fylder hele bredden, mens ``-elementer er "inline" og kun fylder nødvendig bredde. Hvad tror du der ville ske, hvis du ændrede alle disse `
`-tags til ``-tags? ### 🔄 **Pædagogisk status** **Strukturforståelse**: Tag et øjeblik til at gennemgå din HTML-struktur: - ✅ Kan du identificere hovedcontainerne i dit layout? - ✅ Forstår du, hvorfor hvert billede har en unik ID? - ✅ Hvordan vil du beskrive formålet med `plant-holder` div’erne? **Visuel inspektion**: Åbn din HTML-fil i en browser. Du burde se: - En basal liste af plantebilleder - Billeder organiseret i to kolonner - Simpelt, ustylet layout **Husk**: Dette simple udseende er præcis, hvordan HTML skal se ud, før CSS styling! Med denne markup tilføjet vil planterne vises på skærmen, selvom de endnu ikke ser polerede ud – det er hvad CSS er til i næste lektion! For nu har du et solidt HTML-fundament, der korrekt organiserer dit indhold og følger bedste praksis for tilgængelighed. ## Brug af semantisk HTML til 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 indholdets struktur og betydning til browsere, søgemaskiner og hjælpemetoder som skærmlæsere. ```mermaid flowchart TD A[Skal der tilføjes indhold?] --> B{Hvilken type?} B -->|Hovedoverskrift| C["

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

,

, etc."] B -->|Afsnit| E["

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

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