Grunder i HTML
Hur man bygger upp ett HTML-dokument
Här följer lite grunder i HTML och ett exempel på det i stort sett enklaste HTML-dokument man kan skapa. Det är kanske inte särskilt spännande men viktigt.
Börja HTML-dokumentet med att skriva <!DOCTYPE html>. En doctype berättar för den som läser koden att nu handlar det om ett HTML-dokument. I det här fallet ett standard-HTML5-dokument. Denna nya HTML5-doctype är mycket kortare än tidigare doctypes och fungerar bra i alla webbläsare, även om du inte kommer använda några nya HTML5-objekt förövrigt i dokumentet. Om man inte anger en doctype kan visa webbläsare gå in i ”quirks mode” (T.ex. IE) och förvrida layouten.
Lägg nu till taggen <head> och avsluta den med </head>. Innanför head-taggarna kan man sedan lägga in title, meta-taggar, stylesheets, javascript m.m.
Om vi lägger till title, några meta-taggar, ett enkelt javascript och ett stylesheet (CSS) så har vi nu alltså följande grunder i dokumentet.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
<script src="script.js>
<title> Grunder i HTML </title>
</head>
För att lite snabbt förklarar vad ovanstående innebär är <meta charset=”utf-8″> en metatagg som definierar en teckenkod så t.e.x. bokstäverna ÅÄÖ visas på rätt sätt. <link href="style.css" rel="stylesheet"> visar att HTML-dokumentet ska hämta sin CSS, sitt Stylesheet från ett dokument som heter style.css. <script src="script.js> hänvisar till en fil där javascript-kod som ska användas i HTML-dokumentet kommer hämtas. Innehållet i <title> är det som visas i webbläsarens namnlista längst upp och det som visas som rubrik i sökresultat hos bland annat Google.
Nu ska vi bara få in lite innehåll i dokumentet och det gör vi med taggarna <body>,<p> och <img>. <body> är starttaggen för allt innehåll och innehållet ska avslutas med taggen </body>. <p> är en paragraf som innehåller text och <img> är en tagg för en bild. Attributet alt är en beskrivning av bilden som används av bland annat sökmotorer och kommunikationshjälpmedel.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
<script src="script.js>
<title> Grunder i HTML </title>
</head>
<body>
<p>Lite text om grunderna i HTML...</p>
<img src="grunderihtml.jpg" alt="En bild om grunder i HTML">
</body>
Det där var de absoluta grunderna i HTML. Hoppas det var till någon hjälp. Kontakta gärna mig om du behöver hjälp med din HTML eller CSS!