# Terrarium Project Del 1: Introduktion till HTML ```mermaid journey title Din HTML-läranderesa section Grundläggande Skapa HTML-fil: 3: Student Lägg till DOCTYPE: 4: Student Strukturera dokument: 5: Student section Innehåll Lägg till metadata: 4: Student Inkludera bilder: 5: Student Organisera layout: 5: Student section Semantik Använd rätt taggar: 4: Student Förbättra tillgänglighet: 5: Student Bygg terrarium: 5: Student ``` ![Introduktion till HTML](../../../../translated_images/sv/webdev101-html.4389c2067af68e98.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) HTML, eller HyperText Markup Language, är grunden för varje webbplats du någonsin besökt. Tänk på HTML som skelettet som ger struktur åt webbsidor – det definierar var innehåll ska placeras, hur det organiseras och vad varje del representerar. Medan CSS senare kommer att "klä upp" din HTML med färger och layouter, och JavaScript kommer att ge liv åt den med interaktivitet, tillhandahåller HTML den grundläggande strukturen som gör allt annat möjligt. I den här lektionen kommer du att skapa HTML-strukturen för ett virtuellt terrariumgränssnitt. Det här praktiska projektet kommer att lära dig grundläggande HTML-koncept samtidigt som du bygger något visuellt engagerande. Du kommer att lära dig hur du organiserar innehåll med hjälp av semantiska element, arbetar med bilder och skapar grunden för en interaktiv webbapplikation. I slutet av denna lektion kommer du att ha en fungerande HTML-sida som visar växtbilder organiserade i kolumner, redo att stylas i nästa lektion. Oroa dig inte om det ser grundläggande ut till en början – det är precis så HTML ska vara innan CSS lägger till det visuella putsningen. ```mermaid mindmap root((HTML Grundläggande)) Struktur DOCTYPE-deklaration HTML-element Huvudsektion Brödtextinnehåll Element Taggar & Attribut Självstängande taggar Inbäddade element Block vs Inline Innehåll Textelement Bilder Behållare (div) Listor Semantik Meningsfulla taggar Tillgänglighet Skärmläsare SEO-fördelar Bästa metoder Korrekt inbäddning Giltig markup Beskrivande alt-text Organiserad struktur ``` ## För-kurs Quiz [För-kurs quiz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Titta och lär dig**: Kolla in denna hjälpsamma videogenomgång > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Sätta upp ditt projekt Innan vi dyker in i HTML-kod, låt oss skapa en ordnad arbetsyta för ditt terrariumprojekt. Att skapa en organiserad mappstruktur från början är en avgörande vana som kommer att gynna dig genom hela din webbapputvecklingsresa. ### Uppgift: Skapa din projektstruktur Du kommer att skapa en dedikerad mapp för ditt terrariumprojekt och lägga till din första HTML-fil. Här är två sätt du kan använda: **Alternativ 1: Använda Visual Studio Code** 1. Öppna Visual Studio Code 2. Klicka på "File" → "Open Folder" eller använd `Ctrl+K, Ctrl+O` (Windows/Linux) eller `Cmd+K, Cmd+O` (Mac) 3. Skapa en ny mapp som heter `terrarium` och välj den 4. I Explorerpanelen klicka på ikonen "New File" 5. Namnge din fil `index.html` ![VS Code Explorer som visar skapande av ny fil](../../../../translated_images/sv/vs-code-index.e2986cf919471eb9.webp) **Alternativ 2: Använda terminalkommandon** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Det här uppnår dessa kommandon:** - **Skapar** en ny katalog som heter `terrarium` för ditt projekt - **Navigerar** in i terrarium-katalogen - **Skapar** en tom `index.html`-fil - **Öppnar** filen i Visual Studio Code för redigering > 💡 **Proffstips**: Filnamnet `index.html` är speciellt inom webbutveckling. När någon besöker en webbplats letar webbläsare automatiskt efter `index.html` som standardsida att visa. Det betyder att en URL som `https://mysite.com/projects/` automatiskt kommer att servera `index.html`-filen från `projects`-mappen utan att du behöver ange filnamnet i URL:en. ## Förstå HTML-dokumentstruktur Varje HTML-dokument följer en specifik struktur som webbläsare behöver förstå för att visa korrekt. Tänk på denna struktur som ett formellt brev – det har obligatoriska element i en viss ordning som hjälper mottagaren (i det här fallet webbläsaren) att bearbeta innehållet ordentligt. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta teckenuppsättning>"] C --> F["<meta vy>"] B --> G["<body>"] G --> H["<h1> Rubrik"] G --> I["<div> Behållare"] G --> J["<img> Bilder"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Låt oss börja med att lägga till den grundläggande basen som varje HTML-dokument behöver. ### DOCTYPE-deklarationen och rootelementet De första två raderna i en HTML-fil fungerar som dokumentets "introduktion" till webbläsaren: ```html <!DOCTYPE html> <html></html> ``` **Så här fungerar denna kod:** - **Deklarerar** dokumenttypen som HTML5 med `<!DOCTYPE html>` - **Skapar** rootelementet `<html>` som kommer innehålla allt innehåll på sidan - **Etablerar** moderna webbstandarder för korrekt rendering i webbläsare - **Säkerställer** konsekvent visning över olika webbläsare och enheter > 💡 **Tips i VS Code**: Håll muspekaren över någon HTML-tagg i VS Code för att se hjälpsam information från MDN Web Docs, inklusive användningsexempel och webbläsarkompatibilitet. > 📚 **Läs mer**: DOCTYPE-deklarationen förhindrar att webbläsare går in i "quirks mode", som användes för att stödja väldigt gamla webbplatser. Modern webbutveckling använder den enkla `<!DOCTYPE html>`-deklarationen för att säkerställa [standardkompatibel rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagogisk kontroll** **Pausa och reflektera**: Innan du fortsätter, se till att du förstår: - ✅ Varför varje HTML-dokument behöver en DOCTYPE-deklaration - ✅ Vad rootelementet `<html>` innehåller - ✅ Hur denna struktur hjälper webbläsare att rendera sidor korrekt **Snabb självtest**: Kan du förklara med egna ord vad "standardkompatibel rendering" betyder? ## Lägga till viktig dokumentmetadata `<head>`-sektionen i ett HTML-dokument innehåller avgörande information som webbläsare och sökmotorer behöver, men som besökare inte ser direkt på sidan. Tänk på det som "bakom scenen"-information som hjälper din webbsida att fungera korrekt och visas rätt på olika enheter och plattformar. Denna metadata berättar för webbläsare hur sidan ska visas, vilken teckenkodning som ska användas och hur olika skärmstorlekar ska hanteras – allt viktigt för att skapa professionella, tillgängliga webbsidor. ### Uppgift: Lägg till dokumentets head Infoga denna `<head>`-sektion mellan dina öppnande och stängande `<html>`-taggar: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Så här fungerar varje element:** - **Sätter** sidans titel som visas i webbläsarflikar och sökresultat - **Specificerar** UTF-8 teckenkodning för korrekt visning av text globalt - **Säkerställer** kompatibilitet med moderna versioner av Internet Explorer - **Konfigurerar** responsiv design genom att anpassa viewport till enhetens bredd - **Kontrollerar** initial zoomnivå för att visa innehållet i naturlig storlek > 🤔 **Tänk på detta**: Vad skulle hända om du satte en viewport-meta-tagg som denna: ``? Det skulle tvinga sidan att alltid vara 600 pixlar bred, vilket förstör responsiv design! Läs mer om [korrekt konfiguration av viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Bygga dokumentets body ``-elementet innehåller allt synligt innehåll på din webbsida – allt som användare kommer att se och interagera med. Medan ``-sektionen gav instruktioner till webbläsaren, innehåller `` det faktiska innehållet: text, bilder, knappar och andra element som skapar ditt användargränssnitt. Låt oss lägga till body-strukturen och förstå hur HTML-taggar arbetar tillsammans för att skapa meningsfullt innehåll. ### Förstå HTML-tagstruktur HTML använder parvisa taggar för att definiera element. De flesta taggar har en öppningstagg som `

` och en stängningstagg som `

`, med innehåll emellan: `

Hej, världen!

`. Det skapar ett stycke som innehåller texten "Hej, världen!". ### Uppgift: Lägg till body-elementet Uppdatera din HTML-fil för att inkludera ``-elementet: ```html Welcome to my Virtual Terrarium ``` **Denna kompletta struktur ger:** - **Etablerar** den grundläggande HTML5-dokumentstrukturen - **Inkluderar** viktig metadata för korrekt rendering i webbläsare - **Skapar** en tom body redo för ditt synliga innehåll - **Följer** moderna webbpraksiser Nu är du redo att lägga till de synliga elementen i ditt terrarium. Vi kommer att använda `
`-element som behållare för att organisera olika innehållssektioner, och ``-element för att visa växtbilderna. ### Arbeta med bilder och layoutbehållare Bilder är speciella i HTML eftersom de använder "självstängande" taggar. Till skillnad från element som `

` som omsluter innehåll, innehåller ``-taggen all information den behöver inom taggen själv via attribut som `src` för bildfilens sökväg och `alt` för tillgänglighet. Innan vi lägger till bilder i din HTML behöver du organisera dina projektfiler korrekt genom att skapa en bilder-mapp och lägga till växtgrafiken. **Börja med att ställa in dina bilder:** 1. Skapa en mapp som heter `images` inne i din terrariummapp 2. Ladda ner växtbilderna från [lösningsmappen](../../../../3-terrarium/solution/images) (14 växtbilder totalt) 3. Kopiera alla växtbilder till din nya `images`-mapp ### Uppgift: Skapa växtvisningslayout Lägg nu till växtbilder organiserade i två kolumner mellan dina ``-taggar: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Steg för steg, här händer detta i koden:** - **Skapar** en huvudbehållare för sidan med `id="page"` som håller allt innehåll - **Etablerar** två kolumnbehållare: `left-container` och `right-container` - **Organiserar** 7 växter i vänsterkolumnen och 7 växter i högerkolumnen - **Omsluter** varje växtbild i en `plant-holder`-div för individuell placering - **Tillämpa** konsekventa klassnamn för CSS-styling i nästa lektion - **Tilldelar** unika ID:n till varje växtbild för JavaScript-interaktion senare - **Inkluderar** korrekta sökvägar till bilder-mappen > 🤔 **Fundera på detta**: Notera att alla bilder för närvarande har samma alt-text "plant". Det är inte optimalt för tillgänglighet. Skärmläsaranvändare skulle höra "plant" 14 gånger utan att veta vilken specifik växt varje bild visar. Kan du tänka dig bättre, mer beskrivande alt-texter för varje bild? > 📝 **HTML-elementtyper**: `
`-element är "blocknivå" och tar upp full bredd, medan ``-element är "inline" och tar bara upp nödvändig bredd. Vad tror du skulle hända om du ändrade alla dessa `
`-taggar till ``-taggar? ### 🔄 **Pedagogisk kontroll** **Strukturförståelse**: Ta en stund att granska din HTML-struktur: - ✅ Kan du identifiera huvudbehållarna i din layout? - ✅ Förstår du varför varje bild har ett unikt ID? - ✅ Hur skulle du beskriva syftet med `plant-holder`-divarna? **Visuell inspektion**: Öppna din HTML-fil i en webbläsare. Du bör se: - En grundläggande lista med växtbilder - Bilder organiserade i två kolumner - Enkel, ostylad layout **Kom ihåg**: Det här enkla utseendet är precis hur HTML ska se ut innan CSS-styling! Med denna markup tillagd kommer växterna att visas på skärmen, även om de inte ser polerade ut än – det är det CSS är till för i nästa lektion! För nu har du en stabil HTML-grund som ordentligt organiserar ditt innehåll och följer tillgänglighetsbästa praxis. ## Använda semantisk HTML för tillgänglighet Semantisk HTML innebär att välja HTML-element baserat på deras betydelse och syfte, inte bara deras utseende. När du använder semantisk markup kommunicerar du innehållets struktur och innebörd till webbläsare, sökmotorer och hjälpmedelstekniker som skärmläsare. ```mermaid flowchart TD A[Behöver du lägga till innehåll?] --> B{Vilken typ?} B -->|Huvudrubrik| C["

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

,

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

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

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