0251 / 590 837 15
info@a-coding-project.de

DHTML – Tutorial, Tipps & Tricks

Viele benutzen es, alle reden darüber, nur Sie wissen immer noch nicht was DHTML nun eigentlich ist und wie man es benutzt? Dann wird Ihnen dieser Artikel gerade recht kommen. Sie sollten allerdings die Grundlagen von HTML, CSS und JavaScript beherrschen. Des weiteren wären Vorkentnisse zum Document Object Modell von Vorteil.

Was ist DHTML?

Allgemein gesagt ist DHTML nichts weiter als die Verknüpfung von HTML, CSS, JavaScript und dem DOM. Im Grunde könnte man es auch so ausdrücken: Mit HTML und CSS wird etwas definiert was dann mit JavaScript und dem DOM verändert und somit dynamisch wird.

HTML

HTML an sich sollte Ihnen nichts neues sein. Es ist quasi die Ursprache des World Wide Web und das Grundgerüst so ziemlich jeder Website. Man definiert damit indirekt das Aussehen eines Dokumentes. Indirekt deshalb, weil es letztlich dem Browser überlassen ist, ob und vor allem wie er das HTML-Dokument anzeigt.

CSS

CSS, oder Cascadings StyleSheets, ist eine Sprache die der Beschreibung von HTML- und XML-Dokumenten dient. Sie gibt dem Browser die Anweisungen wie dieser die einzelnen Elemente darzustellen hat und wie sich dieses auf andere Elemente auszuwirken hat.

JavaScript

Mit JavaScript kommt erstmals eine interaktive Komponente mit ins Spiel. Die Sprache dient allgemein gesagt dazu ein HTML-Dokument aufzufrischen. Dies kann z.B. in Form von Bildwechseln, Formular-Prüfern oder eben als Komponente von DHTML sein. Außerdem trägt es zur Interaktion der Seite (besser gesagt: des Browser) mit dem Benutzer bei.

DOM

DOM steht für Document Object Modell und ist ein vom W3C geschaffenes Modell, das das Verhalten, den Zugriff und die Behandlung von Objekten bzw. Elementen eines HTML- oder XML-Dokumentes beschreibt. Innerhalb von DHTML übernimmt das DOM die Regelung des Zugriffs auf die Einzelnen Objekte.

Layer und Browser

Die Grundlage von DHTML auf der Seite von HTML sind die sogenannten Layer. Diese kann man sich in etwa wie eine eigene kleine Schicht innerhalb eines Dokumentes vorstellen die (in der Draufsicht) überhalb der anderen Elemente liegt. Ziel von DHTML ist es meist, diese Layer so zu manipulieren, dass sich deren Aussehen, Inhalt oder Verhalten ändert. Die größte Schwierigkeit sind dabei immer noch die Browser. Da die führenden Browserhersteller (Microsoft, Netscape, Opera) keine einheitlichen Systeme für den Zugriff und die Definition bieten wird man häufig gezwungen sein zwischen den einzelnen Browsern zu unterscheiden und Scripte ggf. in mehreren Versionen schreiben zu müssen.

Dynamischer Inhalt und Positionierung

Die zwei wichtigsten Aufgaben von DHTML sind die Erzeugung von dymanischem Inhalt und dessen Positionierung.

Events

Events, oder zu deutsch Ereignisse, sind ein weiterer wichtiger Bestandteil von DHTML. Sie ermöglichen es dem Programmierer auf eine bestimmte Situation oder ein bestimmtes Verhalten des Benutzers zu reagieren. Leider muss auch hierbei zwischen den einzelnen Browsern unterschieden werden. Der Netscape Navigator übergibt beim Aufruf eines Events z.B. das dazugehörige Event-Objekt – bei Microsofts Browser muss dieses über window.event abgefragt werden. Aber mal der Reihe nach:

HTML Behaviors

Weitere Infos