En väldigt simpel hemsida
En webbplats är på många sätt jämförbar med en tidning. Först är det en fräsig framsida (startsida) som ska sälja in själva tidningen (webbplatsen). Sen består tidningen av en massa tidningssidor (webbsidor). På en sida kan det finnas bilder och text. Det kan finnas reklam, notiser, artiklar och lite allt möjligt. Sen kan man också ta sig från en sida till en annan—antingen genom att man bläddrar i tidningen eller klickar på en länk på webbsidan.
Hur skapar man då en hemsida? Först så måste man berätta för datorn att det är en webbsida man gör (du behöver ta fram pappret att trycka på). Det gör man först med raden:
<!DOCTYPE html>som säger att det här är den senaste sortens html-sida. Sen får man berätta för datorn vart det hela egentligen börjar. Det gör man med taggen:
<html>någon rad nedanför. Vi säger att vi har öppnat html-taggen. Sen måste man också berätta vart det hela slutar. Då stänger vi vår html-tagg så här:
</html>Nu ser hela vår fil ut så här:
<!DOCTYPE html>
<html>
</html>
Om vi nu öppnar den med vår favorit-webbläsare så kommer vi att få en helt
vit hemsida. Nästa steg är att berätta för webbläsaren vad det här är för
sida. Då får vi lägga till en header, eller en
head-tagg, mellan html-taggarna så att det hamnar i vår
"tidning".
<head>
</head>
Det är en bra rutin när man öppnar en tagg att man direkt också stänger
den. Sen kan man skriva det man vill ha mellan taggarna. Mellan
head-taggarna ska man skriva sånt som inte kommer att synas
på sidan men som kan vara nödvändigt för att sidan ska bete sig som man
vill. Först vill vi ge sidan ett namn.
<title>Webbutveckling :)</title>
Nu har vi öppnat en title-tagg, skrivit ett namn på vår sida
och stängt vår titel. Om vi nu sparar och uppdaterar vår sida. Vad har
förändrats?
Nu vill vi lägga till något som faktiskt ska synas på sidan. Om vi fortsätter med tidningsliknelsen så kan vi säga att vi skriver en artikel (vi kan också jämföra det med en uppsats). Då kommer vi att behöva en rubrik på vår sida. Men först måste vi plocka fram pappret.
<body>
</body>
Mellan body-taggarna ska allt som ska synas på sidan
ligga. Om vi vill lägga till en rubrik så finns det en familj med taggar
vi kan använda oss av: h1, h2, ...
h6. h1 är huvudrubriken och h6 är
den minst viktiga rubriken, typ. (Jämför du med LaTeX så är typ h1=title,
h2=part, h3=chapter, h4=section, h5=subsection, h6=subsubsection.) Så om
vi vill sätta en rubrik på vår sida skriver vi så här:
<h1>Oj vad kul det här året ska bli</h1>Nu borde vår kod se ut så här:
<!DOCTYPE html>
<html>
<head>
<title>Webbutveckling :)</title>
</head>
<body>
<h1>Oj vad kul det här året ska bli</h1>
</body>
</html>Notera indenteringen den hjälper oss att hålla koll på vad som hör ihop med vad.
Nu vill vi lägga till någon text till hemsidan. Då använder vi elementet
p som står för engelskans paragraph.
<p>Här kan du skriva om allt kul som du ser fram emot under hösten och året.</p>
Om bokstäverna å, ä och ö inte syns som dem ska finns det två
inställningar att göra. I Notepad++ ska man gå till menyn
Format och välja Koda i UTF-8. Sen kan vi också lägga
till en rad i vår head:
<meta charset="utf-8" />
Den raden läggs förslagsvis till före titeln. Notera nu att vi gjorde
något konstigt. Vi stängde inte taggen som vi gjort med andra taggar.
Och vi skrev mer mellan < och > än
tidigare. Vi kallar elementet meta för ett tomt element.
charset kallas för ett attribut och det tilldelar vi
ett värde med lika-med-tecknet. utf-8 är en sorts
teckenkodning, alltså hur datorn ska tolka bokstäver, siffror och andra
tecken. utf-8 är den standard man ska använda på webben, om
inte särskilda skäl föreligger.