Lär dig koda HTML
Jag har länge funderat på att skriva tutorials inom webbutveckling och de närliggande områdena. Det är väldigt roligt att lära ut och det är mycket givande att dela med sig av sin kunskap och erfarenhet som man samlat på sig under sina år som utvecklare.
Vi är alla nybörjare i början och vi drivs ofta av en nyfikenhet av hur något fungerar. Jag har själv lärt mig väldigt mycket genom att gå olika tutorials och googla fram svar på t ex StackOverflow. Nu är det min tur att ge tillbaka lite av den kunskap jag besitter och jag tänkte att varför inte börja med internets stomme, nämligen HTML (HyperText Markup Language).
”Men vadå? Varför ska man lära sig koda nu när AI finns?”
Det är en bra fråga och något som fick mig att tveka att skapa utbildningsmaterial inom ämnet faktiskt. Men man kan aldrig ha för mycket kunskap och det är aldrig fel att kunna tyda den kod du får tillbaka ifrån din AI-prompt. Känslan är ovärderlig, att med kritiska ögon kunna granska det som du får genererat till dig och förstå hur och varför koden är utformad som den är men viktigast av allt, kunna ställa krav på koden din AI levererar. Sen tror jag att de flesta vill ha en djupare förståelse och inte bara ”vibe-koda”. Man kan aldrig lära sig för mycket och kunskap väger ingenting.
Vad är HTML?
HTML är en av många viktiga grundpelare till det internet vi känner till idag och man kan i stort sett säga att allt du interagerar med på webben består av just HTML. Man kan på ett förenklat sätt beskriva HTML som ett språk för att märka upp sitt innehåll i olika sorters element, ungefär som att du stryker under olika stycken i din text med en överstrykningspenna. I HTML markerar du vad som är rubrik, stycke, länkar osv.
Hur ser ett HTML-dokument ut?
Det krävs egentligen inte mer än det som visas i koden nedan. Översta raden berättar för webbläsaren att dokumentet den håller på att läsa in är ett HTML 5 dokument. Dokumentet består sedan av så kallade HTML-taggar av olika slag. Taggar som placeras inom <head></head> är vanligtvis meta-data som dokumentets <title>Hej världen!</title> men kan även innehålla inladdning av JavaScript eller t ex CSS. Själva innehållet på sidan placeras inom <body></body> taggen. Som du ser så öppnar vi en tagg och stänger en tagg.
<!doctype html>
<html>
<head>
<title>Hej världen!</title>
</head>
<body>
Mitt innehåll...
</body>
</html>Börja koda
För att börja koda din egen HTML, ladda ner VS Code, om du inte redan har den installerad. När du öppnat VS Code, kan du skapa en ny fil som heter index.html och spara den på skrivbordet på din dator. Kopiera koden ovanför och klistra in den i din html-fil och spara. Högerklicka sedan på din index.html på skrivbordet och välj att öppna denna med din webbläsare. Du tittar nu på din första HTML-sida. Den ser inte mycket till världen ut, så låt oss göra något åt det!
Några justeringar innan vi börjar…
Eftersom vårt innehåll är på svenska så är det rekommenderat att ange ett ”lang”-attribut på html-taggen, som berättar för webbläsaren och användaren att detta dokument är på språket svenska. Skriver du på engelska fyller du i ”en”, ”en-GB” eller ”en-US” som värde istället.
Låt oss även ange en meta-tagg i <head>, för att sätta vilken ”encoding” detta dokument använder. Detta gör vi för att försäkra oss om att alla tecken, framförallt specialtecken, visas som de ska i webbläsaren. Vi har angett "UTF-8" som encoding och vi kan vara säkra på att tecken som Å, Ä och Ö visas som de ska. Notera att denna meta-tagg stänger sig själv: <meta charset="UTF-8" />, ett så kallat ”void element”. Detta är vanligt för de meta-taggar man lägger till inom <head>.
Nu ser vårt dokument ut så här:
<!doctype html>
<html lang="sv-SE">
<head>
<meta charset="UTF-8" />
<title>Hej världen!</title>
</head>
<body>
Mitt innehåll...
</body>
</html>Rubriker i HTML
Dags att fylla på dokumentet med lite mer innehåll. Du kan skriva ditt eget innehåll eller skriva samma som vi gör här i guiden, det är helt upp till dig.
Ett HTML-dokument skall endast ha en <h1> rubrik, varken mer eller mindre. Detta är sidans huvudrubrik. Efterföljande rubriker ska vara av storlek <h2> och behöver vi skriva underrubriker till dessa h2:or så ska dessa vara <h3>, <h4>, <h5> och <h6>. Tänk på att alltid följa ordningen, man ska alltså inte hoppa över ett led utan alltid välja den rubrikstorlek baserat på vad rubriken är underrubrik till. H2:an är dock vanligast och du ska endast använda de lägre storlekarna vid underrubriker till h2:an eller någon lägre i rangordningen.
<!doctype html>
<html lang="sv-SE">
<head>
<meta charset="UTF-8" />
<title>Hej världen!</title>
</head>
<body>
<h1>Detta är huvudrubriken</h1>
<h2>Detta är en underrubrik till huvudrubriken</h2>
<h2>Detta är ytterligare en underrubrik till huvudrubriken</h2>
<h2>Detta är ytterligare en underrubrik till huvudrubriken</h2>
<h2>Detta är ytterligare en underrubrik till huvudrubriken</h2>
<h3>Detta är en underrubrik till h2:an</h3>
<h4>Detta är en underrubrik till h3:an</h4>
<h5>Detta är en underrubrik till h4:an</h5>
<h6>Detta är en underrubrik till h5:an</h6>
</body>
</html>
När du skrivit in rubrikerna ovan, i ditt HTML-dokument så bör din ”hemsida” se ut något i stil med bilden nedan. Som du ser så får rubrikerna ett standardutseende från din webbläsare, för att även visuellt, kunna särskilja de olika rubrikernas hierarki. Typografin kan vi justera med hjälp av CSS, men detta kommer vi gå igenom i en senare artikel.
Textstycken
Låt oss snygga till innehållet lite grann nu när vi lärt oss de olika rubrikstorlekarna. Vi rensar upp och lägger även till några textstycken. Dessa placerar vi inuti <p>-taggar, även kallat ”paragraph” och dessa används för löpande brödtext.
<!doctype html>
<html lang="sv-SE">
<head>
<meta charset="UTF-8" />
<title>Hej världen!</title>
</head>
<body>
<h1>Huvudrubrik</h1>
<p>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a
ante venenatis dapibus posuere velit aliquet.
</p>
<h2>Underrubrik</h2>
<p>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a
ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur
purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.
Curabitur blandit tempus porttitor.
</p>
<p>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a
ante venenatis dapibus posuere velit aliquet.
</p>
<h2>Underrubrik</h2>
<p>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a
ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur
purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.
Curabitur blandit tempus porttitor.
</p>
</body>
</html>
Bra jobbat! Om din hemsida ser ut enligt bilden nedan, har du lyckats med uppgiften. Som du ser så har även textstyckena en viss standardtypografi som är satt av din webbläsare. Varje nytt <p>-element har bl a marginaler upptill och nertill, likaså rubrikerna.
Formatering av text
Ibland behöver man formatera sin text, precis som i ett vanligt ordbehandligsprogram. Man kan då bl a markera vissa ord i fet <b> (bold) eller kursiv <i> (italic) stil, glöm inte att stänga taggen där du vill att stilen ska upphöra. Man kan även välja att lägga in radbrytningar <br> eller <br /> på väl välda ställen om det så krävs, denna tagg är ett så kallat void-element och behöver inte stängas.
<!doctype html>
<html lang="sv-SE">
<head>
<meta charset="UTF-8" />
<title>Hej världen!</title>
</head>
<body>
<h1>Huvudrubrik</h1>
<p>
Donec ullamcorper nulla non <b>metus</b> auctor <i>fringilla</i>. Integer
posuere erat a ante venenatis dapibus posuere velit aliquet.
</p>
<h2>Underrubrik</h2>
<p>
Donec ullamcorper nulla non metus auctor fringilla.<br />Integer posuere
erat a ante venenatis dapibus posuere velit aliquet. Cras mattis
consectetur purus sit amet fermentum.<br /><br />Etiam porta sem malesuada
magna mollis euismod. Curabitur blandit tempus porttitor.
</p>
</body>
</html>
Länkar
Vad vore HTML och framförallt internet, om man inte kunde länka vidare till undersidor och externa webbplatser? Låt oss lägga in en <a> (länk) i vårat innehåll, du väljer själv vilken hemsida du vill länka till. Genom att omsluta ett eller flera ord med en ”ankar”-tagg (anchor) och ange en webbadress i href-attributet så har vi numera en länk.
<!doctype html>
<html lang="sv-SE">
<head>
<meta charset="UTF-8" />
<title>Hej världen!</title>
</head>
<body>
<h1>Huvudrubrik</h1>
<p>
Donec ullamcorper nulla non <b>metus</b> auctor <i>fringilla</i>. Integer
posuere erat a ante
<a href="https://borgenfalkskott.se/">venenatis dapibus</a> posuere velit
aliquet.
</p>
<h2>Underrubrik</h2>
<p>
Donec ullamcorper nulla non metus auctor fringilla.<br />Integer posuere
erat a ante venenatis dapibus posuere velit aliquet. Cras mattis
consectetur purus sit amet fermentum.<br /><br />Etiam porta sem malesuada
magna mollis euismod. Curabitur blandit tempus porttitor.
</p>
</body>
</html>
Glimrande! ✨ Vad roligt att du vill lära dig HTML!
I nästa del kommer vi lära oss att lägga in bilder och lite annat smått och gott.
Kika tillbaka snart igen för att läsa nästa del!