XHTML deel 2 – Hoe maak je een eenvoudige pagina met CSS?
Bob Broen |
2007-03-21 |
Inhoud
Heb je het eerste artikel kunnen lezen in een serie over XHTML? Deze keer gaan we weer een stapje verder. Je gaat ontdekken hoe je een pagina kunt opmaken met CSS.
Om te beginnen pakken we een basisstukje XHTML. Deze pagina wijkt niet veel af van deel 1. Wat opvalt is dat er een < DIV> tag om de inhoud is gezet. Hiermee heb je meer controle, waardoor je bijvoorbeeld de opmaak van dat gedeelte beter kunt beïnvloeden. Het is verstandig om diverse tags rond een samenhangende groep tags te zetten. Wat ook opvalt is dat de < BR />tag een afsluitende schuine streep heeft (een 'slash'), dit geeft aan dat er geen sluitende tag meer komt voor dit element. In HTML was dit niet nodig, in strikt XHTML wel.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML gebruiken - deel
2</title>
</head>
<body>
<div class="voorbeeld">
<h2>XHTML gebruiken
- deel 2</h2>
<h3>Mijn
voorbeeldartikel</h3>
<p>
Dit is
een voorbeeldpagina die is opgebouwd met 'normale' (x)html tags. De opmaak van
de pagina wordt overgelaten aan de browser, die elk de tags op een eigen wijze
weergeven. <br />
Tenzij
we een beetje CSS toevoegen...
</p>
<h4>Bob Broen - 5
maart 2007</h4>
</div>
</body>
</html>
De opmaak is nu eenvoudig, maar wel duidelijk. Niet alleen de vormgeving is duidelijk, maar de code ook. Deze code kan probleemloos gelezen worden door software die gebruikt wordt door bezoekers met een visuele beperking.
In HTML werd vroeger standaard een < font> tag gebruikt om de opmaak van tekst te regelen. In XHTML is er een sterke voorkeur om alle opmaak met CSS te regelen. Hieronder staat een stukje code dat je kunt plakken onder de < title> tag, misschien herken je de opmaak.
<style type="text/css" media="screen">
body {
background-color: white;
color: #000366;
font-size: 9pt;
font-family: Arial, sans-serif;
margin: 20px 40px;
}
.voorbeeld {
background-color: #F0F2FF;
padding: 4px 10px;
border-bottom: 2px solid #ABBEDE;
}
h2 { font-size: 12pt; }
h3 { font-size: 9pt; }
p { font-size: 9pt; }
h4 { font-size: 9pt; padding-bottom: 10px; }
</style>
Door deze CSS-code in de HTML-pagina te plakken verandert de opmaak, maar blijft de paginastructuur gelijk. De < style> tags geven aan dat het hier om CSS-code gaat voor het beeldscherm ('screen'), maar er kan ook CSS-code meegegeven worden om bijvoorbeeld een print te maken.
In dit voorbeeld begin ik met een body {} declaratie, alle opmaak tussen de {} - haken geldt voor de < body> tag. In de eerste regel van deze declaratie zet ik de achtergrondkleur (background-color) op wit (white). Let op de dubbele punt tussen de eigenschap en de waarde, die gevolgd wordt door een punt-komma.
Om alle mogelijke aspecten van CSS uit te leggen zou een serie van 100 artikelen geschreven moeten worden. Omdat deze serie over XHTML gaat zal ik een aantal eigenschappen toelichten, met name de eigenschappen die de oude < font> tags verzorgden.
Met 'color' wordt de kleur van de tekst op #000366 gezet, een blauwe kleur. Wat misschien duidelijker is voor sommigen: "color: rgb(0,3,102); ".
De grootte van het letterype kan ingesteld worden met "font-size: 9pt;". In plaats van een waarde in punten, mag ook een waarde in pixels (px) of procenten (%) gegeven worden.
Het lettertype zelf wordt ingesteld met: "font-family: Arial, sans-serif;". Het is verstandig om hier een aantal lettertypes op te geven, omdat het niet zeker is dat iedereen het bedoelde lettertype heeft. Om zeker te zijn dat mensen een schreefloze letter krijgen is hier 'sans-serif' toegevoegd, een familie waartoe de Arial, Helvetica en Verdana behoren.
De margin- en padding-eigenschappen behandel ik in het volgende artikel.
Het ".voorbeeld" element geeft de eigenschappen weer die ik gebruikt heb in de < div> tag. Behalve een achtergrondkleur, heb ik een rand gemaakt aan de onderkant van het blok. Deze rand is 2 pixels dik, aaneengesloten (solid) en heeft de kleur "#ABBEDE", oftewel rgb(171,190,222), oftewel blauw-grijs.
Dit artikel is een instapper in de wereld van CSS. Ik zal in deze XHTML-serie nog veel meer CSS laten zien en uitleggen. Een complete CSS-cursus zal dit echter niet worden. Hieronder heb ik nog een voorbeeld gegeven. Vervang de eerder genoemde CSS-code door dit blok, misschien herken je de opmaak. Probeer zelf de waardes te veranderen om een pagina te maken met de opmaak die je bevalt.
<style type="text/css" media="screen">
body {
background-color: white;
color: black;
font-size: 10pt;
font-family: Arial, sans-serif;
margin: 20px 40px;
}
.voorbeeld {
padding: 4px 10px;
}
h2 {
font-size: 12pt;
background-color: #E5ECF9;
border-top: 1px solid #3366CC;
padding: 2px 4px;
}
h3 {
font-size: 11pt;
color: #0000CC;
font-weight: normal;
margin: 1px 0 2px 0;
text-decoration: underline;
}
p {
font-size: 10pt;
margin: 1px 0 2px 0;
}
h4 {
font-size: 10pt;
color: #008000;
font-weight: normal;
margin: 1px 0 2px 0;
}
</style>
Succes!
