Met HTML kun je de inhoud en de structuur van een web-document beschrijven. Je doet dit aan de hand van elementen die een bepaalde rol en betekenis hebben. Uiteindelijk wil je het document ook weergeven op het scherm van een computer of van een mobiel apparaat, of op papier. Hoe kun je het document daarvoor vormgeven?
Voor deze vormgeving gebruik je een aparte taal: CSS (Cascading Style Sheets). In dit (en het volgende) hoofdstuk maken we kennis met CSS; voor een verdere uitwerking kun je een volgende module volgen.
Bij de vormgeving van een web-document hebben we te maken met de volgende aspecten:
Aan elk van deze onderdelen besteden we een apart hoofdstuk.
Opdrachten:
Als eerste voorbeeld behandelen we de vormgeving van de kopjes - de elementen h1, h2, enz. We kunnen de vormgeving van een element aangeven door middel van een style-attribuut. De waarde van een style-attritbuut bestaat uit een reeks property:value; - paren. Voorbeeld:
<h1 style="font-family: sans-serif; color: blue;">
Welkom op mijn pagina
</h1>
Hiermee geven we aan:
font-family:sans-serif; - gebruik een schreefloos lettertype voor deze kop;color:blue; - gebruik blauw als kleur voor de letters voor deze kop.In een document willen we graag een consistente vormgeving gebruiken. Voor alle h1-elementen gebruiken we bij voorkeur dezelfde stijl. Als we dit zouden doen door de style-properties bij elk h1-element te herhalen, hebben we mogelijk een probleem:
Een betere oplossing is als we de stijl van alle h1-elementen op één plaats kunnen beschrijven. We moeten dan wel een manier hebben om de stijl en de elementen te koppelen. Dit doen we met behulp van CSS-selectoren. De eenvoudigste daarvan is de naam van het element-type (de tag-name). Voorbeeld:
<style>
h1 {
font-family: sans-serif;
color: blue;
}
</style>
...
<h1> Welkom op mijn pagina </h1>
...
<h1> Mijn hobbies </h1>
In dit voorbeeld hebben we een apart style-element, met daarin een aantal CSS-regels van de vorm: selector(en) {prop:value ...}. Dit style-element plaatsen we bij voorkeur in het head-element, voorin het document. (We zullen later zien dat het vaak handiger is om deze CSS-regels in een apart bestand te plaatsen.)
Er zijn meer redenen waarom we zo inhoud en vormgeving willen scheiden: de vormgeving kan heel erg van het apparaat en van de omgeving van de gebruiker afhangen; bovendien kan de vormgeving onafhankelijk van de inhoud veranderen. In de meeste gevallen blijft de vormgeving gelijk (consistentie is belangrijk). Maar soms blijft de inhoud gelijk, en willen we de vormgeving veranderen. Ook zijn hiervoor vaak verschillende personen verantwoordelijk. Het is dan handig als deze twee aspecten ook fysiek gescheiden zijn - in verschillende delen van een document, of liever nog, in verschillende bestanden.
Samenvattend: we scheiden inhoud en opmaak ("presentation") om