Skapa en hemsida – Del 2 – Strukturen (HTML/CSS)

När jag skapar en hemsida brukar jag börja med grunden, benstommen. Detta gör vi med HTML.

HTML bygger på att man öppnar och stänger tags. T.ex:

<b>Detta är fet text</b>

Som du ser i exemplet ovan så öppnar vi, och stänger, <b>. Allt som finns mellan öppningen och stängningen är påverkat.

Öppna index.php, som vi skapade i föregående guide, med valfri textredigerare och ersätt nuvarande innehåll med nedan kod:

<html>
<head>
<title>Min Sida</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Min Sida</h1></div>
<div id="left"><h2>Senaste</h2></div>
<div id="content"><h2>Nyheter</h2></div>
</div>
</body>
</html>

Det vi gör i ovan kod är att vi öppnar <html> för att förbereda din hemsida på att vi ska skriva ut HTML kod. Sedan öppnar vi <head> som kommer att innehålla vissa inställningar och även filinkluderingar till vår sida.

Vi öppnar och stänger <title>, allt som står däremellan kommer att visas som sidans rubrik i din webbläsare.
Vi öppnar en metatag där vi deffinerar ett s.k charset. Detta bestämmer hur vår sida ska tolka tecken. För att svenska tecken som å,ä och ö skall fungera så måste vi använda UTF-8.
Vi inkluderar en s.k stylesheet som senare kommer att innehålla CSS kod som bestämmer hur sidans alla delar ska se ut.
Vi stänger <head> och öppnar <body>, som kommer att innehålla allt som visas på själva sidan.

Vi har sedan fyra olika <div> som kommer att vara tre olika block på sidan som hålls på plats av den fjärde, wrappern. En meny (heaer), ett vänsterjusterat flöde (left) och sedan det höger/mitten-justerade innehållet (content). I varje div har vi <h1> och <h2> som är olika storlekar av rubriker. Desto högre slutsumma, desto mindre är rubriken. Den största rubriken är <h1>.

Vi stänger vår <body> när vi är klara med innehållet och sist stänger vi även <html>

Nu har vi gjort vår grunstruktur i HTML. Nu ska vi skapa vår stylesheet.

Öppna en blank sida i din textredigerare och klistra in nedan kod

<style> /* Förbereder webbläsaren för CSS input */
 body,html { /* design för taggarna &lt;html&gt; och &lt;body&gt; */
 height: 100%; /* Bestämmer att din hemsida ska fylla ut hela webbläsarfältet på höjden */
 width: 100%; /* Bestämmer att din hemsida ska fylla ut hela webbläsarfältet på bredden */
 }
 #wrapper { /* design för diven wrapper */
 width: 1000px; /* innehållets fulla bredd */
 height: 1500px; /* innehållets fulla höjd */
 margin: auto; /* Gör innehållet centrerat */
 }
 #header { /* design för diven header */
 height: 150px; /* innehållets fulla höjd */
 width: 1000px; /* innehållets fulla bredd */
 background-color: #595959; /* ger innehållet en mörk-grå bakgrund */
 float: left; /* bestämmer att innehållet ska justeras till vänster */
 margin-bottom: 5px; /* bestämmer att underliggande divs ska skjutas ned 5 pixlar */
 }
 #left { /* design för diven left */
 height: 650px; /* innehållets fulla höjd */
 width: 300px; /* innehållets fulla bredd */
 background-color: #cccccc; /* ger innehållet en grå bakgrund */
 float: left; /* bestämmer att innehållet ska justeras till vänster */
 }
 #content { /* design för diven content */
 height: 800px; /* innehållets fulla höjd */
 width: 672px; /* innehållets fulla bredd */
 margin-left: 20px; /* bestämmer att hela diven ska skjutas 20 pixlar åt höger från divs till vänster */
 background-color: #e6e6e6; /* ger innehållet en grå bakgrund */
 float: left; /* bestämmer att hela diven ska justeras till vänster */
 }
 h2 { /* Design för taggen h2 (rubriker med viss fördeffinerad design) */
 padding: 4px; /* Bestämmer att innehållet i taggen ska skjutas inåt från alla kanter med 4 pixlar */
 margin: 0; /* Bestämmer att innehållet i taggen inte ska skjuta omkringliggande html åt något håll */
 width: 100%; /* Bestämmer att denna tag ska ha 100% bredd av den tag det ligger i */
 background-color: black; /* sätter innehållets bakgrund till svart */
 color: white; /* sätter textfärgen till vit */
 }
 h1 { /* Design för taggen h1 (rubriker med viss fördeffinerad design) */
 padding: 20px; /* Bestämmer att innehållet i taggen ska skjutas inåt från alla kanter med 20 pixlar */
 color: white; /* sätter textfärgen till vit */
 text-decoration: underline; /* sätter underline på texten */
 }
 /* Stänger taggen style då vi är klara med CSS */
</style>

Allt som står inom efter snedstreck och stjärna är kommentarer i koden som inte påverkar utan endast finns där för att underlätta kodningen. Jag rekommenderar att du använder massvis med kommentarer i din kod för att underlätta för dig själv

Skapa en mapp med namnet css i din rootmapp och spara denna kod med namnet style.css i undermappen.

Det vi har gjort nu är att vi satt bakgrundsfärger, storlekar och placering på våran HTML kod. För att se resultatet, skriv localhost i adressfältet på din webbläsare.
Sidan bör nu ha tagit form och se lite ut som hemsidor brukar göra.

Vi är nu klara med vår grund och kan börja fokusera mer på de individuella delarna, så som inloggning, nyheter, mm…