Dynamic HTML

Dynamic HTML of DHTML is een term die gebruikt wordt voor interactieve webpagina's. Deze pagina's maken gebruik van een combinatie van HTML, een scripttaal in de browser zoals JavaScript, en CSS.

[bewerk] Inleiding

DHTML is geen officiële standaard, maar een marketingterm die gebruikt werd bij de introductie van de 4.x browserversies door Netscape en Microsoft. Eerdere browsers dan de 4.x-versies van Netscape en Microsoft Internet Explorer hadden ook (zeer) beperkte mogelijkheden om een webpagina dynamisch te maken. Om dynamische onderdelen in een webpagina in te bouwen werd vooral gebruikgemaakt van java-applets.

De eerste browserfabrikant die dhtml (met kleine letters) implementeerde was Netscape. Kort daarna volgde Microsoft met DHTML (hoofdletters). Beide systemen waren allesbehalve compatibel en de introductie van DHTML betekende min of meer een voorlopig einde aan het internetprincipe dat alle webpagina's door alle browsers te bezoeken zijn.

Het World Wide Web Consortium beschrijft DHTML als: Een term die door verschillende (browser-)producenten wordt gebruikt om een combinatie van HTML, stylesheets en scripts te beschrijven die het mogelijk maakt documenten te animeren.

<script>
function DoeIets(plaatje) {
  plaatje.src='anderplaatje.gif';
}
</script>
<img src="plaatje.gif" onclick="DoeIets(this);">

[bewerk] De basis van DHTML

De belofte van DHTML is dat webpagina's dynamisch kunnen worden gemaakt. Dat betekent dat webpagina's een soort van programma's worden die in de browser draaien. Hierdoor kan de informatie of het design van de pagina's veranderen zonder dat er een nieuwe pagina wordt geladen. De programma-pagina's reageren op gebeurtenissen (in het Engels events genaamd), zoals muisbewegingen, muisklikken en toetsaanslagen.

Een dergelijke pagina bestaat voor een deel uit programmacode, meestal in de vorm van JavaScript, en voor een ander deel uit traditionele HTML en uit stylesheets. Events kunnen worden geregistreerd door bijvoorbeeld "onclick" in een HTML-tag te zetten:

Om dynamische pagina's mogelijk te maken, veranderde een HTML-pagina van tekst-met-opmaak naar een verzameling elementen (plaatjes, form-velden, en een aantal nieuwe HTML-elementen als layer, span en div) die individueel konden worden benaderd en individueel worden aangepast. Deze ontwikkeling was al eerder ingezet. Met de 4.x-browsers bood het echter zoveel mogelijkheden dat de term Dynamic HTML werd gelanceerd.

In dezelfde tijd werd de ondersteuning van stylesheets door browsers een stuk beter (hoewel nog verre van perfect). De lay-out van delen van de tekst kon ook dynamisch worden aangepast door de referentie aan de stylesheet met behulp van Javascript aan te passen.

[bewerk] Document Object Model

De bovenstaande ontwikkeling van HTML-pagina's van tekst-met-opmaak naar een verzameling elementen, heeft later geresulteerd in het Document Object Model (DOM), de object-georiënteerde webpagina's die door de latere browsers wordt ondersteund.

[bewerk] Concurrerende technologieën

Er zijn een aantal andere manieren om webpagina's te voorzien van dynamische elementen. Deze vereisen over het algemeen dat er een plugin wordt geïnstalleerd in de browser. Bij gebruik van plugin-gebaseerde technologieën is niet de gehele pagina dynamisch, maar uitsluitend een (rechthoekig) deel van de pagina dat in de HTML is toegewezen aan aan de plugin.

• Java-applets. Dit is de oudste manier om webpagina's dynamisch te maken. Het biedt meer mogelijkheden dan DHTML. Als nadeel heeft het dat de Java Virtual Machine moet worden opgestart, waardoor webpagina's met java-applets traag laden en veel geheugen kosten. De toepassing van java-applets is daarom alleen aan te raden als DHTML te kort schiet.
• Macromedia Flash. Deze technologie is breed beschikbaar voor vele browsers en besturingssystemen en wordt veel op het web gebruikt. In de praktijk is de toepassing voornamelijk voor filmpjes, animaties en spelletjes.
• Scalable Vector Graphics. Een op XML gebaseerde technologie voor statische en dynamische vectorafbeeldingen. Dit wordt nog door weinig browsers ondersteund.

[bewerk] Externe links

• Introduction to DHTML (www.w3schools.com, Engels)
• De W3C over het Document Object Model (Engels)