Sidebar
Les 3 - Een simpele pagina maken met XHTML en CSS
Nu je redelijke kennis hebt van HTML en CSS en je weet hoe je een design kunt opdelen, wordt het tijd om al je kennis te gebruiken bij het maken van een simpele pagina met XHTML en CSS.
We beginnen weer met het standaard HTML bestand:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>De titel van je pagina</title>
</head>
<body>
</body>
</html>
Nu gaan we ervoor zorgen dat de DIV-tags goed staan:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>De titel van je pagina</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Website titel - Pagina titel</h1>
</div>
<div id="content">
<p>Tussen deze tag komt je tekst te staan</p>
</div>
<div id="footer">
<h6>Copyright (c) 2009 Jouwnaam</h6>
</div>
</div>
</body>
</html>
Zo. Het begin is er. Ga nu kort even na of het "leesbaar" is voor normale mensen en of je opbouw klopt en of je de juiste tags op de juiste plaats hebt gesloten.
Nu moet je een stylesheet maken en invoegen. Dat kan je doen op 2 manieren: binnen de HTML pagina of in een apparte stylesheet. Als je maar 1 pagina hebt, dan kan je binnen je HTML pagina de volgende code toevoegen in de HEAD-sectie van je pagina:
<!--
-->
</style>
Tussen de <!-- en de --> kan je nu je CSS schrijven. Als je een website hebt met meerdere pagina's, maak dan een apparte stylesheet en zet de link naar deze stylesheet in de HEAD-sectie van je pagina:
Nu kunnen we doorgaan met de CSS. We gaan eerst het saaie Times New Roman lettertype vervangen door Arial/Helvetica. De kleur stellen we ook in, maar niet op helemaal zwart, maar op de kleurencode "#111111" want anders kunnen op oudere beeldschermen de letters inbranden. De grootte stellen we in op 1em.
font-family: arial, helvetica, sans-serif;
font-size: 1em;
color: #111111;
}
Met onze pagina is nog weinig gebeurt, alleen de tekst is gewijzigd. Maar we gaan nu door met de DIV specificaties in de stylesheet. We willen dat onze pagina 600 pixels breed, de header 100 pixels hoog en de footer 20 pixels hoog worden. We stellen ze in op allemaal een andere kleur grijs:
width: 600px;
margin-left: auto;
margin-right: auto
}
#header {
width: 600px;
height: 100px;
background-color: #A8A8A8;
}
#content {
width: 600px;
background-color: #888888;
}
#footer {
width: 600px;
height: 20px;
background-color: #707070;
}
Zoals je kunt zien is de verdeling van de blokken goed. Alleen zit er wat ruimte tussen de blokken. Dit kan je makkelijk verhelpen door deze code aan de CSS toe te voegen:
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
Nu gaan we even de tekst wat beter uitlijnen en de positie van de titels veranderen. Eerst moet je iets weten over de koppen: Koppen worden gebruikt om titels te maken en om ervoor te zorgen dat je webpagina makkelijk vindbaar is door zoekmachines. Je hebt kop 1 t/m 6, waarbij 1 de "belangrijkste" is en 6 de minst belangrijke. Daarom gebruik je h1 meestal maar 1x in je pagina, omdat je die voor de titel wilt gebruiken. Omdat je niet wilt dat alle koppen op dezelfde positie komen te staan, veranderen we niets aan de h# tags, maar aan de DIV tags waarvan we de titelpositie op een aangepaste plaats willen hebben. In dit geval zijn dat de header en de footer:
width: 600px;
height: 100px;
background-color: #A8A8A8;
text-align: center;
line-height: 5em;
}
#footer {
width: 600px;
height: 20px;
background-color: #707070;
text-align: center;
}
Nu je HTML-basis en je stylesheet klaar zijn, kan je beginnen met tekst toe te voegen aan je website. Daarvoor kan je de <h#> tags, <p> tag en <br /> tag gebruiken.
Nu is je pagina en je stylesheet helemaal klaar! Hier kan je een voorbeeld zien zoals het eruit hoort te zien.