Skapa div och id - Skapa behållarelement och ID på din webbsida

I den här artikeln lägger vi till områden till den startsida som du skapade i förra artikeln. Vi tilldelar även dessa områden olika id:n för att du ska kunna formatera dessa med regler som vi lägger till i tillhörande CSS-fil.

Exemplen är i början mycket enkla men förklarar principen för hur webbsidor byggs upp. Efter att du följt guiden och provat att bygga på egen hand så kommer du själv att kunna börja experimentera med mer avancerade designer.

Skapa olika div-element

1. Öppna upp startsidan (index.html) som du skapade i förra artikeln.

2. Leta upp taggarna <body> och </body>.

Ta bort den gamla exempeltexten "Hello world - jag kan skriva å ä och ö" som vi lagt där sedan tidigare för att testa sidan.

Lägg istället upp följande kod mellan öppningstaggen och stängningstaggen.

<div>
<div>Navigation / sidhuvud </div>
<div>Huvudtext</div>
<div>Sidfot</div>
</div>

Div-elementen har inga marginaler eller padding eftersom vi tog bort dessa när vi skapade stilmallen i föregående artikel. Om du tittar på sidan i en webbläsare kommer den bara att lista tre rader i övre vänstra hörnet.

Förklaringar till div-uppdelningarna

Ett div-område som ska fungera som navigation/sidhuvud. Jämför med de "färggranna" länkarna du ser längst upp på den här sidan.
Ett div område som ska hålla artikeltexten, jämför med den text som du läser precis nu.
Ett div-område som ska fungera som sidfot. Bra exempel på information att lägga i sidfoten kan vara kontaktinformation och copyright.
Ett omslutande div-element ska hålla de övriga på plats. Det är en s.k wrapper. En wrapper används oftast till att centrera andra inneslutna element. I övrigt så kan du formatera wrappern som vilket annat element som helst med CSS. Kantlinjer, bakgrundsbilder, padding är några exempel.

Tilldela id

Vi vill märka upp områdena för sidhuvud, artikeltext och sidfot med id för att dessa ska kunna identifieras som unika områden och formateras på olika sätt beroende på deras id.

Lägg in id för dina div-element så att din kod ser ut så här:

<div id="wrapper">
<div id="sidhuvud">Navigation / sidhuvud </div>
<div id="huvudtext">Huvudtext</div>
<div id="sidfot">Sidfot</div>
</div>

Ändringar markerade med rött

Direktlänkning med id

Med id kan du även direktlänka till en plats på en webbsida. Om du har ett unikt id på en webbsida med filnamnet filnamn.html och id kurt så kan du länka direkt till kurt med länken filnamn.html#kurt.