Webbdesignskola: Del 1

I denna del tänkte jag förklara hur den grundläggande strukturen av ett HTML-dokument ska/kan se ut. Jag kommer även beröra hur du kan strukturera upp din webbplats innehåll med hjälp av DIV:ar. Här kommer ett exempel på hur alla dina HTML-dokument i grunden ska/kan se ut:

<html>
<head>
<meta name=”title” content=”Hemsidans namn samt mycket kortfattad information/nyckelord”></meta>
<meta name=”description” content=”Beskrivning av webbplatsen”>
<meta name=”keywords” content=”Nyckelord separerade med mellanslag”>
<meta name=”robots” CONTENT=”all, index, follow”>
<meta name=”GOOGLEBOT” content=”all, index, follow”>
<meta name=”revisit-after” CONTENT=”2 days”>
<meta name=”copyright” content=”T.ex ditt namn eller webbplatsens domän”>
<meta name=”distribution” content=”Global”>
<meta name=”language” content=”sv”>
<link href=”style.css” type=”text/css” rel=”stylesheet”>

<title>Din sida – En sida om bla bla</title> 
</head>

<body>
     Här kommer sidans innehåll läggas
</body>
</html> 

Det enda som ska vara unikt för vare enskild HTML-sida är <title>-taggen. Gör en ny för varje avdelning eller liknande som beskriver den aktuella avdelningen på ett bra och sammanfattat sätt. Helst så kortfattat som t.ex ”Dinsida.se – Information” eller ”Dinsida.se – Kontakt”.

Här nedan går jag in lite kort på hur du kan strukturera upp innehållet på din webbplats med hjälp av DIV:ar. Jag hoppar direkt in mellan <body>-taggarna i detta exempel.

<body>
<div class=”main”> DIV:en main påbörjas
        <div class=”left_column”> DIV:en main påbörjas
        </div> DIV:en left_column avslutas

        <div class=”right_column”> DIV:en right_column påbörjas
        </div> DIV:en right_column avslutas
</div> DIV:en main avslutas
</body> 

Genom att tilldela dessa DIV:ar ett ”class-namn” kan vi ge dem alla de egenskaper vi vill i en separat CSS-fil. Det är en mall eller instruktion till webbläsaren för hur informationen ska presenteras. Men det går jag igenom i nästa del.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *