We gaan eerst beginnen met de standaard html.
- Code: Alles selecteren
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Titel van je document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<center> // deze gebruik ik om de site in het midden te zetten
<body>
</body>
</center>
</html>
Hierboven dus de standaard opmaak. En ik heb dus xHTML gebruikt bovenin om te zorgen dat de layout in zoveel mogelijk browsers het zelfde weergeeft.
We gaan nu de style sheets in het document plaatsen. Natuurlijk hoef je niet persé de stylesheets
op te roepen binnen het html bestand. Je kan ze ook vanuit een ander bestand oproepen, dan gebruik je
<link rel="stylesheet" type="text/css" href="style.css" />
- Code: Alles selecteren
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Titel van je document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background: #ffffff;
font-size: 11px;
font-family: verdana;
}
#container {
background: #777777;
width: 794px;
overflow: hidden;
margin: 0px auto;
margin-left: 3px;
margin-right: 3px;
}
#header {
width: 800px;
height: 140px;
background: #000000;
}
-->
</style>
</head>
<center> // deze gebruik ik om de site in het midden te zetten
<body>
<div id="header"></div>
<div id="container">
inhoud van de div
</div>
</body>
</center>
</html>
Even een korte uitleg over de div:
# voor de stylenaam = oproepen als: <div id="stylenaam">inhoud</div>
. voor de stylenaam = oproepen als: <div class="stylenaam">inhoud</div>
Dit was je eerste onderhouds layout in kleur codes!
binnenkort gaan we een uitgebreide layout basen.
Geschreven door : http://www.paulvanbeek.net
