Välkommen till din första lektion i HTML-kodning! Vi ska dyka ner i grunderna och börja vår resa mot att bygga webbsidor. HTML är som byggstenarna till internet; det ger struktur och innehåll till webbsidor. Denna lektion kommer att förklara vad HTML är, varför det är viktigt, och visa dig hur du skriver din första webbsida. Häng med så börjar vi!
Vad är HTML?
HTML står för HyperText Markup Language. Det är språket som används för att skapa och strukturera innehållet på webben. Tänk dig HTML som ett skelett för en webbsida; det ger sidorna deras grundläggande struktur. Innehållet kan vara allt från rubriker och stycken till bilder och länkar. HTML är alltså själva grunden som alla webbsidor bygger på.
Enkelt uttryckt fungerar HTML genom att använda taggar för att beskriva olika delar av en webbsida. Dessa taggar talar om för webbläsaren hur innehållet ska presenteras. Exempelvis används en rubriktagg för att markera att något är en rubrik, medan en styckestagg används för att markera vanlig text.
När du besöker en webbsida använder din webbläsare HTML för att tolka och visa sidan. Med HTML kan vi skapa allt från enkla informationssidor till mer komplexa layoutstrukturer med formulär, tabeller och multimedia. HTML i sig står inte för designen av sidan, utan den fokuserar på att definiera innehållets struktur. För att få en fin layout och design använder vi andra teknologier som CSS (Cascading Style Sheets), som vi kommer att introducera senare i kursen.
HTML är enkelt att lära sig och en bra utgångspunkt för att börja bygga webbsidor. Även om HTML är ett relativt grundläggande språk så är det avgörande för att förstå hur webben fungerar och är uppbyggd. Så låt oss börja från början!
Grundläggande HTML-struktur
Innan vi börjar skriva vår första kod, låt oss titta på hur HTML är uppbyggt. Här är en enkel HTML-sida:
<!DOCTYPE html>
<html>
<head>
<title>Min Första Webbsida</title>
</head>
<body>
<h1>Välkommen till min första webbsida!</h1>
<p>Det här är min första HTML-kod och jag är redan på väg att bli en webbutvecklare!</p>
</body>
</html>Låt oss gå igenom den här koden steg för steg:
<!DOCTYPE html>: Detta är en deklaration som berättar för webbläsaren att vi använder den senaste versionen av HTML, som är HTML5. Denna rad är alltid den första i ett HTML-dokument.<html>: Detta är rot-elementet för HTML-sidan. All HTML-kod kommer att finnas inom denna tagg. Det talar om att allt som är inuti detta element är en del av HTML-dokumentet.<head>:<head>-taggen innehåller metadata för sidan, vilket innebär information som inte direkt syns på själva webbsidan men som är viktigt för hur sidan fungerar. Här kan vi t.ex. sätta en titel, länka till externa stilmallar, och inkludera annan information som påverkar sidan.<title>:<title>-elementet anger titeln för webbsidan som visas i webbläsarens flik. Här har vi gett vår sida titeln ”Min Första Webbsida”.<body>:<body>-elementet innehåller själva innehållet som ska visas på sidan, som rubriker, text, bilder, länkar och allt annat synligt innehåll. Det är alltså den del som användarna kommer att se och interagera med.<h1>och<p>: Dessa är exempel på HTML-element.<h1>används för rubriker och<p>för stycken av text.<h1>är den viktigaste rubriken på sidan, och används oftast för huvudrubriker.<p>står för ”paragraph” och används för att skapa textblock.
Din första HTML-sida
Nu är det dags för dig att skriva din egen HTML-sida. Följ instruktionerna nedan och skapa en enkel webbsida som innehåller en rubrik och ett stycke.
Övning: Skapa din första webbsida
- Öppna en texteditor: Du kan använda vilken texteditor som helst, t.ex. Notepad, VS Code, eller Atom.
- Skriv följande HTML-kod:
<!DOCTYPE html> <html> <head> <title>Min Första Webbsida</title> </head> <body> <h1>Hej världen!</h1> <p>Det här är min första HTML-sida och jag tycker att det är riktigt kul!</p> </body> </html> - Spara filen: Spara filen med filnamnet
min_första_sida.html. Se till att spara den med filändelsen.htmlså att din dator vet att det är en webbsida. - Öppna filen i en webbläsare: Öppna filen genom att dubbelklicka på den eller genom att dra den till en webbläsare (t.ex. Chrome, Firefox, Edge). Nu ser du din första webbsida! Grattis!
Att skapa och öppna din första HTML-sida är ett viktigt steg mot att förstå hur webben fungerar. Genom att skriva kod själv får du en djupare förståelse och mer praktisk erfarenhet.
Förklaring av HTML-element
HTML består av olika element som hjälper till att strukturera innehållet på en webbsida. Ett HTML-element består av en öppningstagg, innehåll, och en stängningstagg. Taggarna är inskrivna inom vinkelparenteser (< och >).
Låt oss kika på några grundläggande element:
<html>: Detta är huvudelementet som alla HTML-element finns inom. Det representerar hela HTML-dokumentet.<head>: Detta innehåller metadata för sidan, t.ex. information om teckenkodning och länkning till stilmallar (CSS). Det påverkar inte det visuella innehållet direkt, men är mycket viktigt för hur sidan fungerar.<body>: Här placeras alla element som syns på sidan. Detta inkluderar rubriker, stycken, bilder, listor och mer.<h1> - <h6>: Rubrikelementen, där<h1>är den viktigaste rubriken och<h6>är minst viktig. Rubriker används för att organisera och tydliggöra sidans struktur. Tänk på rubriker som kapitelrubriker i en bok.<p>: Står för ”paragraph” och används för att skapa stycken av text. Det är ett av de vanligaste elementen när man skriver text på en webbsida.
Andra viktiga HTML-element
<a>: Används för att skapa länkar. Länkar är en av de viktigaste delarna av webben, eftersom de låter användare navigera mellan olika sidor.<img>: Används för att lägga till bilder på en sida. Detta element är ett så kallat självstängande element, vilket betyder att det inte har en separat stängningstagg.<ul>och<ol>: Används för att skapa listor.<ul>står för unordered list (oordnad lista), medan<ol>står för ordered list (ordnad lista).<li>: Står för list item och används för att definiera ett objekt i en lista, oavsett om det är en ordnad eller oordnad lista.
Utveckla din kunskap
För att bli bekväm med HTML är det viktigt att experimentera och skriva mycket kod själv. Här är en uppgift för att hjälpa dig att förstå mer om de grundläggande HTML-elementen.
Uppgift: Skapa en personlig presentationssida
- Skapa en ny HTML-fil som du kallar
presentation.html. - I
<head>-delen, ge sidan titeln ”Min presentation”. - I
<body>, skapa följande:
- En rubrik (
<h1>) med ditt namn. - Ett stycke (
<p>) som berättar lite om dig själv. Berätta om dina intressen, var du bor, eller varför du vill lära dig HTML. - En till rubrik (
<h2>) med texten ”Mina intressen”. - En lista (
<ul>eller<ol>) med minst tre av dina intressen eller hobbys.
Här är ett exempel på hur din kod kan se ut:
<!DOCTYPE html>
<html>
<head>
<title>Min presentation</title>
</head>
<body>
<h1>Mitt namn är [Ditt Namn]</h1>
<p>Jag är en nybörjare inom HTML och älskar att lära mig nya saker. När jag inte kodar, gillar jag att laga mat och spela fotboll. Jag hoppas att lära mig mer om hur webbsidor fungerar så att jag kan bygga egna projekt.</p>
<h2>Mina intressen</h2>
<ul>
<li>Laga mat</li>
<li>Spela fotboll</li>
<li>Läsa böcker</li>
</ul>
</body>
</html>Spara filen och öppna den i en webbläsare. Nu har du skapat en personlig presentationssida! Du kan använda denna sida som en grund för att lägga till mer information och testa nya element när vi går vidare i kursen.
Sammanfattning
I den här lektionen har du fått lära dig grunderna i HTML, skapat din första webbsida och bekantat dig med några grundläggande HTML-element. Vi har pratat om vad HTML är, hur dess grundstruktur ser ut, och du har fått praktiska exempel för att komma igång med kodandet.
HTML är grunden för alla webbsidor, och genom att förstå dess struktur kan du börja skapa egna webbsidor från grunden. När du skriver HTML är det viktigt att komma ihåg att det handlar om att skapa en tydlig och logisk struktur för innehållet. Design och utseende kan läggas till senare med hjälp av CSS.
Ta tid att öva, experimentera och ha kul med det du lärt dig. Nästa gång kommer vi att fördjupa oss i fler HTML-element och lägga till mer innehåll till våra sidor. Vi kommer även att börja titta på hur vi kan använda CSS för att göra våra sidor snyggare och mer intressanta.
Lycka till med kodandet och kom ihåg: varje rad kod är ett steg närmare att behärska HTML och bygga fantastiska webbsidor!
