Ik kan nog goed herinneren dat we in 1995 onze eerste internet aansluiting kregen. We gingen het internet op met Netscape 1.0 of Internet Explorer 2.0. De meeste websites waren een simpele pagina met zwarte tekst op een witte achtergrond. Als je mazzel had stond er een foto op met 256 kleuren. Tenminste, als je de optie afbeeldingen weergeven had in geschakeld in je browser. Ik typte het adres van de website in en moest dan 5 á 10 minuten wachten voordat de pagina geladen was over mijn mega snelle 33.6k modem. Er is sinds die tijd een hoop veranderd.

Geschiedenis

HTML was in het begin ontwikkeld voor wetenschappers die hun onderzoeken wouden delen. Het was een simpele taal om de tekst te kunnen definiëren. Wat is deze zin? Is het een koptekst, een citaat, of deel van een paragraaf? Niets was gericht op ontwerp. Ze hadden gewoon een medium nodig om de informatie te delen. Toen de World Wide Web werd ontdekt als commercieel platform kwam er ook de behoefte om websites ook visueel aantrekkelijk te maken. Men wilde meer dan alleen die zwarte tekst op een witte achtergrond en een komische geanimeerde GIF. Dus begon men te kijken naar de visuele weergave van de HTML elementen in plaats van naar de definitie van deze elementen. Tabellen werden gebruikt voor de lay-out, om kolommen te maken of afbeeldingen te positioneren. Als je de tekst wou laten inspringen gebruikte je <blockquote>. De betekenis van de HTML werd verloren, alleen de visuele waarde bleef over. Maar omdat HTML hier niet voor was ontwikkeld schoot het als ontwerp taal al snel tekort. Er rees een behoefte naar een taal die geschikt was om te ontwerpen om HTML terug te laten keren naar zijn originele taak, de inhoud definiëren. Men zocht een taal die ontwerpers de vrijheid bood om het ontwerp over de HTML te laten vloeien. Cascading Style Sheets of CSS was het antwoord

CSS power

CSS geeft ontwerpers de macht om de weergave en gedrag van elk HTML element te bepalen. Men kan niet alleen elk verschillend element anders opmaken, je kan zelfs met behulp van ID’s, class en omringende elementen het zelfde element in een andere situatie anders opmaken. We kunnen zelfs een stap verder gaan. Als je een extern CSS bestand gebruikt kan je alle HTML bestanden er aan koppelen en continuïteit in het ontwerp creëren over de gehele website. De voordelen van externe CSS bestanden worden pas echt duidelijk wanneer je iets wilt wijzigen in een bestaande website. Stel je hebt een website met 50 pagina’s die elk een stuk of tien alinea’s hebben. De alinea’s zijn opgemaakt met Times New Romans en je wilt deze veranderen naar Arial. Wanneer deze zijn opgemaakt in HTML met het element: <font face=”Times New Roman, Times, serif”> dan zou je deze in elk van de 10 alinea’s op alle 50 pagina’s moeten wijzigen naar <font face=”Arial, Helvetica, sans-serif”>. Maar als de opmaak met CSS is gemaakt, hoef je alleen maar het CSS bestand te openen en p { font-family: “Times New Roman”, Times, serif; } te veranderen in: p { font-family: Arial, Helvetica, sans-serif; }. Ja ja dat is alles, maar één verandering op één plek.

Waarom niet?

Het is dus heel erg duidelijk dat het scheiden van inhoud en presentatie verre weg de meest praktische en minste tijd rovende techniek is om websites te ontwerpen. Dus waarom niet? Waarom zijn er nog zoveel beginner HTML cursussen die het nog op oude manier leren. Waarom zijn er nog steeds zoveel zakelijke websites die nog tabellen gebruiken voor de Lay-out. Waarom scheiden ze de presentatie niet van de inhoud? Waarom niet?

C$$

De tijd die je spaart met het volgen van de W3C aanbevelingen, zelfs al moet je alles over doen, is meer waard dan het geld in je zak. Het maakt een eind aan de oneindig herhalend coderen, spaart je ontelbaar veel uren van controleren op continuïteit in het ontwerp op de verschillende pagina’s, laat die frustraties liggen veroorzaakt door ingeklapte tabellen die je voor lay-out gebruikt. Als je door krijgt tot welke graad deze scheiding jou creativiteit stimuleert en hoeveel deuren naar innovatieve ontwerpen open gaan, zal je nooit meer een pagina op de oude mannier schrijven.

Oké, je hebt gelezen dat je veel tijd en moeite kunt besparen als je de inhoud (HTML) en de presentatie (CSS) scheid. Maar hoe doe je dat in de praktijk? Hoe voorkom ik dat ik dat ik mijn HTML documenten toch gewijzigd moeten
worden als ik het ontwerp van de website wil veranderen? Het antwoord is eigenlijk veel makkelijker dan dat veel mensen denken. Als je continuïteit wil hebben in het ontwerp van je pagina moet die continuïteit ook in de XHTML zitten. De XHTML moet het raamwerk vormen waar de CSS – de stilering en lay-out, aan wordt opgehangen. In meeste gevallen bestaat een pagina uit een kop, inhoud, navigatie (links) en een voet. Je zou het kunnen vergelijken met een vrouw en hoe ze zich kleed. De vrouw zelf is de XHTML en haar kleding, make-up, accessoires en schoenen zijn de CSS. Mocht een vrouw dit lezen, wil ik duidelijk maken dat ik de term kop niet gebruik om beledigend te zijn maar om verwarring te vermeiden met het hoofd element (<head>) in de pagina. Deze vergelijking slaat op wat zich binnen het <body> element bevind. De navigatie links moet je hier zien als een accessoire omdat die niet een vaste plek heeft op het lichaam. Soms worden de navigatie links tussen de kop en de inhoud geplaatst en steeds vaker tussen de inhoud en de voet of helemaal op het eind. De verschillende onderdelen worden elk tussen <div> elementen geplaatst en krijgen elk een uniek "id" zoals in het volgende voorbeeld.

Voorbeeld

Dit maakt het mogelijk om gelijkwaardige elementen in de verschillende <div>‘s een andere opmaak te geven. Om extra controle te geven over de pagina in zijn geheel plaats je all deze <div>‘s binnen een andere <div> zodat de het XHTML document er als volgt uitziet.

XHTML

Het CSS bestand zou er dan zou uit kunnen zien.

CSS

In andere artikels wordt in gegaan waarom men dit op deze wijze doet.