For faster navigation, this Iframe is preloading the Wikiwand page for Dynamic HTML.

Dynamic HTML

Uit Wikipedia, de vrije encyclopedie

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

{{bottomLinkPreText}} {{bottomLinkText}}
Dynamic HTML
Listen to this article

This browser is not supported by Wikiwand :(
Wikiwand requires a browser with modern capabilities in order to provide you with the best reading experience.
Please download and use one of the following browsers:

This article was just edited, click to reload
This article has been deleted on Wikipedia (Why?)

Back to homepage

Please click Add in the dialog above
Please click Allow in the top-left corner,
then click Install Now in the dialog
Please click Open in the download dialog,
then click Install
Please click the "Downloads" icon in the Safari toolbar, open the first download in the list,
then click Install
{{::$root.activation.text}}

Install Wikiwand

Install on Chrome Install on Firefox
Don't forget to rate us

Tell your friends about Wikiwand!

Gmail Facebook Twitter Link

Enjoying Wikiwand?

Tell your friends and spread the love:
Share on Gmail Share on Facebook Share on Twitter Share on Buffer

Our magic isn't perfect

You can help our automatic cover photo selection by reporting an unsuitable photo.

This photo is visually disturbing This photo is not a good choice

Thank you for helping!


Your input will affect cover photo selection, along with input from other users.

X

Wikiwand 2.0 is here 🎉! We've made some exciting updates - No worries, you can always revert later on