Vandaag de dag is het overgrote deel van de websites gebaseerd op een CMS. Kennis van HTML is in de meeste gevallen dan ook niet echt noodzakelijk meer. De meeste CMS'en bevatten namelijk wel een WYSIWYG-editor waarmee je je webpagina's makkelijk en snel kunt opmaken. Kun je omgaan met een tekstverwerker, dan kun je vaak ook een WYSIWYG-editor bedienen en je webpagina's opmaken.

Toch is het best handig om de nodige HTML-kennis in huis te hebben. De meeste WYSIWYG-editors hebben namelijk een beperkte keuze aan opmaakmogelijkheden. Je kunt bijvoorbeeld tekst schuin- of vetgedrukt maken of een HTML-lijst maken, al dan niet met bullets of cijfers.

Maar wat nu als je bijvoorbeeld een stuk tekst wilt doorhalen en de WYSIWYG-editor in jouw CMS heeft hier geen handig knopje voor? Hoe ga je dan te werk? Dan is het dus fijn als je toch de nodige HTML-kennis paraat hebt. Je kunt die kennis halen uit boeken, alleen, welk boek heb je dan nodig? Er zijn er al zoveel op de markt verschenen.

Dan maar het internet raadplegen, maar waar begin je? Bij Google bijvoorbeeld, maar zelfs dan zie je door de bomen het bos niet meer.

Laat ik je even op weg helpen door een leuke website te noemen die ik onlangs ben tegengekomen, namelijk http://www.htmlplayground.com/. Deze website is ideaal om snel te weten te komen wat een bepaalde HTML-tag of een CSS-eigenschap precies doet, inclusief uitgebreide voorbeelden die ook nog eens aan te passen zijn.

Bij het openen van de site krijg je gelijk een demo voorgeschoteld. Kijk er even naar en kijk dan op 'Close' om het venster te sluiten. Het hoofdscherm is opgedeeld in 4 delen. Linksboven staat het overzicht van tags. Je kunt bij 'Select Reference' kiezen welk overzicht je wilt laten zien. Standaard worden de XHTML-tags getoond. Verder kun je nog een overzicht van XHTML-attributen en CSS-eigenschappen tonen.

Rechtsboven wordt vervolgens uitleg gegeven over de tag die je in het overzicht links hebt geselecteerd. Een voorbeeld: tekst doorhalen gaat via de < STRIKE>-tag. Laten we die eens selecteren. Je ziet nu een uitleg verschijnen over die tag. Rechtsonder verschijnt tevens de HTML-code van een voorbeeldpagina waarin de tag is verwerkt, plus het resultaat zoals het er in een browser zou uitzien. De HTML-code kun je zelfs aanpassen en door op 'Try code' te klikken te testen hoe jouw wijzigingen er uitzien.

Als je in de HTML-code op de gekleurde tags klikt, dan zie je links van dit vlak de eigenschappen verschijnen die deze tag ondersteunt. Als we bijvoorbeeld op de < strike>-tag klikken, verschijnt er links een overzicht van een aantal eigenschappen die je kunt toepassen op de < STRIKE>-tag.

Laten we eens op het plusje achter de 'onclick'-eigenschap klikken. Er verschijnt een popup met de code voor een javascript-popup. Die kun je overigens ook wijzigen. Door te klikken op de javascript-code wordt die toegevoegd aan de < STRIKE>-tag in de voorbeeldcode links.

Klik je vervolgens op 'Try code' en daarna op de doorgestreepte tekst in het voorbeeld, dan zie je de javascript-popup verschijnen. Zo kun je dus eigenschappen toevoegen aan HTML-tags.

Weet je dus even niet hoe een bepaalde HTML-tag werkt of hoe je een bepaalde CSS-eigenschap moet toepassen, ga dan naar deze website en je kunt meteen aan de slag met de voorbeeldcode. Kortom, deze website verdient zeker een plaatsje tussen jouw favorieten als je bezig bent met het bouwen van websites, al dan niet via HTML of via een CMS.

Succes!