Våra första webbsidor
Nu har vi alla byggklossar som krävs för att skapa vår första webbsida (visserligen en mycket tråkig sådan). Här följer koden för en basal webbsida:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Första sidan</title>
</head>
<body>
<h1>Första sidan</h1>
</body>
</html>
Med hjälp av det du läst hitintills, borde du relativt lätt kunna gissa hur denna sida kommer att se ut. Vi får en i det närmaste blank webbsida, det enda som syns är rubriken ”Första sidan”. Detta kommer även att vara den titel som visas på webbfönstret eller -fliken (nej, ”Första sidan” är definitivt inte en bra titel på en webbsida, men du kommer väl knappast att lägga ut denna sida på nätet? :-)). Vi hade förstås inte behövt ange samma rubrik som sidtitel.
Försök att redan nu lägga dig till med att indentera HTML-koden på ett snyggt och logiskt vis. Det kommer du att tjäna på i längden! Dock så är det som så att indenteringen inte spelar någon som helst roll för själva webbläsaren. Den hade glatt svalt koden även om den sett ut så här:
<!DOCTYPE html><html><head><title>Första sidan</title></head><body><h1>Första sidan</h1></body></html>
Det vill säga allt på en enda rad. Men du kan ju tänka dig hur svårläst det skulle bli om man skrev all kod så! Så gör inte så med kod som du håller på att utveckla! För kod som ska ut i produktion gäller dock lite andra regler...
Det faktum att inte webbläsaren behöver en massa mellanslag/tabbar/return/osv, gör att man kan komprimera sin sida, så att det blir mindre antal bytes som måste skickas till slutanvändaren. När man gör stora webbsidor (t.ex. Aftonbladets-sidor), kan man spara in väldigt mycket plats genom att dra ner på överflödiga tecken. I såna fall bör man skilja på utvecklingskod och den distribuerade produktionskoden som man lägger upp på sin webbserver. Man har alltså en uppsättning snyggt formaterad kod som man jobbar med och sedan använder man ett verktyg som minimerar den koden som sedan läggs upp på ens sajt. Lägg märke till att detta är något man låter ett verktyg sköta och inget man gör för hand!
Faktum är att webbläsaren har lite speciellt hantering för hur den hanterar så kallad ”white space”, dvs saker som mellanslag, tabb, enter, osv – alltså tecken som inte ”syns”. Rent generellt kan man säga att webbläsaren försöker dra ihop allt white space så långt som möjligt och ”kastar bort” det som inte behövs. Ett exempel på detta:
<h1> En rubrik </h1>
skulle visas likadant som:
<h1>En rubrik</h1>
Det här gör så att ibland så försvinner formateringen som man gjort, till exempel:
Ett ord på varje rad
skulle visas som:
Ett ord på varje rad
Vilket kanske inte alls var det man tänkt sig. Det finns olika sätt att komma runt detta, men vi återkommer till det senare.
Nej, nu är det dags för en ny tagg, så vi kan göra vår sida lite mer innehållsrik!
<p>
Taggnamnet "p" är en förkortning av engelskans ”paragraph”, dvs. svenskans ”stycke”. När vi vill ha vanlig text, så kallad löptext, i ett dokument så sätter vi den inom p-taggar. Detta gör att webbläsaren förstår att det är ett sammanhängande textstycke. Ett exempel på dess användning:
<p>Stycken är till för att dela upp löptext.</p>
<p>Man kan också ha olika stycken!</p>
Ovanstående skulle skapa två stycken. Varje p-element skulle bli att innehålla respektive exempeltext. Vanligtvis påbörjas varje stycke på en helt egen rad, dvs p-taggen ger en radbrytning. Detta går dock att styra med hjälp av CSS, så man kan få till vilket utseende som helst på ett p-element.
Här är det dock viktigt att tänka på den så kallade semantiken. Varje tagg har ett specifikt syfte, dvs det finns en mening med den och vi ska enbart använda taggarna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en p-tagg uppför sig med hjälp av CSS, så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den så som något som är relaterat till ett stycke – det vill säga dess semantiska betydelse. Vill jag ha något slags beteende som det inte finns en tagg för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de taggar som inte har en semantisk betydelse; <div> och <span>. Vi återkommer till dem lite senare. Men, kom ihåg, det finns en tanke bakom varje tagg, använd dem för det de är till för!
P-taggen är en av de taggar som inte alltid behöver en sluttagg. I de flesta fall kommer allt att fungera även om vi utelämnar den. Men i några specialfall kommer det inte att fungera och därför är det, som nämnts tidigare, bäst att alltid skriva dit sluttaggarna. De flesta verktyg har funktionalitet som gör det väldigt enkelt att skriva dit sluttaggarna, direkt du skriver ”</” så fyller ditt verktyg antagligen i resten med korrekt tag som ska stängas. Så var inte lat och utelämna avslutande taggar!
En sida med mer innehåll
Nu provar vi att lägga med vår senaste tagg i en enkel sida. Något sånt här kan det bli:
<!DOCTYPE html>
<html>
<head>
<title>Den andra sidan</title>
</head>
<body>
<h1>Den andra sidan</h1>
<p>Det här är den andra sidan vi skapat</p>
<p>Det är en väldigt spartansk sida</p>
<p>Men det blir bättre med tiden...</p>
</body>
</html>
Nu har vi åstadkommit en webbsida som knappt skulle varit OK i början av 1990-talet. I nästa aktivitet ska vi gå vidare med lite fler taggar, så vi kan åstadkomma något lite roligare...