HTML-struktur: byggstenarna
Förstå den grundläggande strukturen hos ett HTML-dokument.
HTML-struktur: byggstenarna är en gratis lektion i HTML for Kids på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för HTML for Kids, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML for Kids innehåller totalt 4 lektioner.
HTML-struktur: byggstenarna
Välkommen till den andra lektionen! I dag ska vi lära oss om strukturen hos ett HTML-dokument och hur dess delar hänger ihop. Tänk på det som att lära sig skelettet hos en webbsida.
HTML-dokumentets struktur
Ett HTML-dokument har en särskild struktur som webbläsaren förstår. Det är som ett recept som talar om för webbläsaren vad den ska göra.
De grundläggande delarna i ett HTML-dokument är:
- Doctype-deklaration: Talar om för webbläsaren att detta är ett HTML-dokument.
- HTML-tagg: Innehåller allt innehåll på sidan.
- Head: Innehåller information om sidan, till exempel titeln.
- Body: Innehåller det innehåll som är synligt för användaren.
Hur ser strukturen ut?
Så här ser den grundläggande strukturen hos ett HTML-dokument ut:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
Doctype-deklarationen
Deklarationen <!DOCTYPE html> finns högst upp i varje HTML-dokument. Den talar om för webbläsaren att den ska förvänta sig HTML5, den senaste versionen av HTML.
Tänk på den som startpunkten i Ert HTML-recept!
HTML-taggen
Taggen <html> är huvudbehållaren för all kod i dokumentet. Den talar om för webbläsaren: ”Allt här inuti är HTML.”
Så här ser den ut:
<html>
<!-- All other HTML tags go here -->
</html>
Head-sektionen
Sektionen <head> innehåller information om webbsidan som inte är synlig på själva sidan. Till exempel:
- Titel: Texten som visas på webbläsarfliken.
- Metainformation: Ytterligare detaljer, till exempel en beskrivning av sidan.
Exempel:
<head>
<title>My Cool Web Page</title>
</head>
Body-sektionen
Sektionen <body> innehåller allt som är synligt för användaren, till exempel text, bilder och länkar. Det här är huvudinnehållsområdet.
Exempel:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
Sätt ihop allt
Här är ett komplett exempel på ett HTML-dokument med alla delar vi nyss har lärt oss:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
Bra jobbat!
Grattis! Ni har lärt Er strukturen hos ett HTML-dokument. Nu vet Ni hur alla delar hänger ihop för att skapa en webbsida. I nästa lektion börjar vi lägga till riktigt innehåll på våra sidor. Gör Er redo att bygga Ert första webbmÄsterverk!
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 16
- Lektioner
- 35
Vanliga frågor
Är lektionen ”HTML-struktur: byggstenarna” gratis?
Ja – hela texten till ”HTML-struktur: byggstenarna” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i HTML for Kids, kan Ni uppgradera till CoddyKit PRO. Kursen i HTML for Kids innehåller totalt 4 lektioner.
Vad lär jag mig i ”HTML-struktur: byggstenarna”?
Förstå den grundläggande strukturen hos ett HTML-dokument. Ni övar på HTML for Kids med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML for Kids?
Du behöver inga förkunskaper. Utbildningen i HTML for Kids på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”HTML-struktur: byggstenarna”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML for Kids-lektionen?
Ja. Varje HTML for Kids-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Vad är HTML?
- HTML-struktur: byggstenarna
- HTML-taggar och element
- Skapa er första HTML-sida