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.

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 goed weergegeven en bruikbaar 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.

Het registreren van events in DHTML

Events in een DHTML-pagina kunnen worden geregistreerd door speciale attributen in een HTML-tag te zetten. Bijvoorbeeld de toevoeging 'onclick="DoeIets();"' aan een plaatje zorgt ervoor dat de functie genaamd "DoeIets" wordt aangeroepen als de gebruiker op het plaatje klikt. Elders in de pagina staat dan de code van die functie. De functie kan bijvoorbeeld een ander plaatje laten zien. 

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

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 programmapagina'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, formuliervelden 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 zo veel 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.

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 objectgeoriënteerde webpagina's die door de latere browsers worden ondersteund.

HTML5

HTML5 kan gezien worden als "opvolger" voor DHTML. Alhoewel HTML5 staat voor versie 5 van de HTML-specificatie, wordt ook vaak de groep van technologieën bedoeld van HTML5, Javascript, CSS3, SVG, XML en JSON. De werking van HTML5 verschilt wezenlijk niets van DHTML; het verschil is alleen dat alle onderliggende technieken een update hebben gekregen.

Concurrerende technologieën

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

  • 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 tekortschiet in functionaliteit.
  • Adobe 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.
  • Silverlight. Technologie van Microsoft die concurreert met Adobe Flash en gebaseerd is op .NET-technologie.

Zie ook

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