SELFHTML/Quickbar Dynamisches HTML

| ## Allgemeines zu Dynamischem HTML
| Das "Dynamische" an Dynamischem HTML Das "Document Object Model" Microsoft, Netscape und das W3-Konsortium Informationen im WWW

## Das "Dynamische" an Dynamischem HTML

Dynamisches HTML (engl. "Dynamic HTML" oder abgekürzt "DHTML") ist eine Erfindung von Marktstrategen, sagen Kritiker. In der Tat ist Dynamisches HTML keine klassische HTML-Erweiterung in Gestalt neuer HTML-Tags. Es ist auch keine neue Sprache. Dynamisches HTML ist vielmehr der Sammelbegriff für verschiedene Lösungen, um dem Autor einer WWW-Seite zu ermöglichen, beliebige Elemente der WWW-Seite während der Anzeige dynamisch zu ändern, sei es automatisch oder durch Einwirken des Anwenders. Dazu dienen neuere Technologien wie Style-Sheets, vor allem aber bestimmte neuere Befehle in Scriptsprachen wie JavaScript. Die Basis von allem bleibt jedoch HTML, also strukturierte WWW-Seiten.

### Beispiel:

    <p onClick="this.innerHTML='Sehen Sie - ich habe es ja gesagt!'">Ich bin dynamisch</p>

### Erläuterung:

Das kleine Beispiel zeigt Dynamisches HTML nach dem Ansatz des MS Internet Explorers 4.x. Es dient hier nur dem Zweck, das "Typische" an Dynamischem HTML zu verdeutlichen. In dem Beispiel wird mit `<p>...</p>` ein gewöhnlicher HTML-Textabsatz definiert. Am Bildschirm steht dann: `Ich bin dynamisch`. Damit der Textabsatz sein Versprechen auch halten kann, enthält er im einleitenden `<p>`-Tag einen sogenannten Event-Handler, im Beispiel den Event-Handler `onClick=`. Dieser Event-Handler tritt in Aktion, wenn der Anwender mit der Maus auf den angezeigten Text klickt. Im Beispiel verwandelt sich nach dem Anklicken des Textes dessen Inhalt in: `Sehen Sie - ich habe es ja gesagt!`.

Wie Sie an dem Beispiel erkennen, können Sie also bestimmte angezeigte Inhalte austauschen, ohne dafür jedesmal vollständige neue Seiten laden zu müssen. Das ist eine charakteristische Eigenschaft von Dynamischem HTML. Eine Web-Seite verhält sich also plötzlich wie ein Anwendung, die einmal in den Arbeitsspeicher geladen wird und dann durch Interaktion mit dem Anwender das Geschehen am Bildschirm bestimmt.

Dynamisches HTML bietet Gestaltern anspruchsvoller WWW-Seiten schier unerschöpfliche Möglichkeiten bei der Kontrolle über das Geschehen am Bildschirm. Es fängt mit Kleinigkeiten wie dem obigen Beispiel an. Es geht weiter mit animierten Grafiken, die über den angezeigten Inhalt gleiten oder hüpfen - manche Web-Seiten versuchen, ganze Aquarien abzubilden. Und es geht hin bis zu der Möglichkeit, mit Hilfe von Grafiken und anderen Elementen komplexe, interaktive Spiele oder Lernsituationen oder auch selbstablaufende Animationen zu programmieren. Der Phantasie sind kaum mehr Grenzen gesetzt. Das Anzeigefenster eines WWW-Browsers kann sich durch massiven Einsatz von Dynamischem HTML in ein bewegtes Spektakel verwandeln. Der Anwender kann beim Anzeigen einer dynamischen HTML-Datei auch mit viel mehr Reaktionen konfrontiert werden als beim Betrachten einer normalen HTML-Datei. Das hat - wie fast alle neueren Features beim Web-Publishing - Vor und Nachteile. Es kommt immer darauf an, wie man die Features nutzt, ob zur bloßen Selbstdarstellung und Angeberei, oder zum Nutzen des Anwenders.

Microsoft führt im Zusammenhang mit Dynamischem HTML zwei neue Konzepte ein, die ziemlich spektakulär sind: Datenanbindung und Filter-Scripting.
Bei der Datenanbindung ist es einer HTML-Datei möglich, auf externe Datenquellen zuzugreifen und Daten daraus kontrolliert innerhalb der Datei anzuzeigen. Wenn dieses Konzept erst einmal voll ausgereift ist, wird es vor allem Teile der CGI-Programmierung ersetzen. Im Gegensatz zu CGI ist das Konzept der Datenanbindung nämlich nicht vom HTTP-Protokoll abhängig und funktioniert deshalb beispielsweise auch auf CD-ROMs.
Filter-Scripting - das ist die dynamische Behandlung der MS-prorietären Style-Sheet- Filter. Damit sind allerdings so wunderbare grafische Effekte - auch mit normalem HTML-Text - möglich, daß Web-Designern eine riesige neue Spielwiese zur Verfügung steht.

"Programmieren" ist jedoch bei allem angesagt, was mit Dynamischem HTML zu tun hat: fortgeschrittene Programmierkenntnisse in Scriptsprachen wie JavaScript sind Voraussetzung. Natürlich gibt es im WWW immer fertige Lösungen zum Abkupfern, aber wer sich ernsthaft mit der Materie beschäftigen will, um eigene kreative Lösungen zu entwickeln, kommt um die Programmierung nicht herum. Das soll jedoch keine Entmutigung sein. Es gibt durchaus nützliche und pfiffige Anwendungsmöglichkeiten von Dynamischem HTML, die ohne allzugroßen Programmieraufwand auskommen.

## Das "Document Object Model"

Die Aufgabe einer Script-Sprache wie JavaScript ist es, nachträglich auf Elemente und aktuelle Zustände einer WWW-Seite zuzugreifen. Herkömmliches JavaScript ist dabei jedoch ziemlich beschränkt. So können Sie damit zwar beispielsweise auf einzelne Formularelemente zugreifen, nicht aber auf Überschriften, Textabsätze oder Tabellenzellen. Es bleibt dem Zufall überlassen, welche Features sich Browser-Hersteller als nächstes einfallen lassen, und auf welche das Volk der Entwickler weiter vergeblich wartet.

Zu diesem Zweck hat man das "Document Object Model" (Abkürzung "DOM") ersonnen. Das hängt sehr eng mit der Philosophie der objektorientierten und ereignisorientierten Programmierung zusammen. Alle HTML-Elemente einer WWW-Seite bilden einen "Objektbaum". So ist das `<body>`-Tag beispielsweise der Vater oder die Mutter aller anzeigbaren Elemente wie Überschriften, Grafiken, Verweise oder Tabellen. Ein mit `<div>`...`</div>` formatierter Bereich ist das Elternteil aller Elemente, die innerhalb dieses Bereichs vorkommen. Jede Tabellenzelle gehört zu einer Tabelle usw. Aber auch das Anzeigefenster des Browsers mit seinen aktuellen Eigenschaften gehört dazu, sowie Maus- und Tastaturaktionen innerhalb des Anzeigefensters. Das Document Object Model ist der Versuch, alle relevanten Bestandteile einer angezeigten WWW-Seite als eine Objekthierarchie abzubilden. Diese Objekthierarchie sollte sich dann idealerweise in webseiten-bezogenen Programmiersprachen wie JavaScript wiederfinden.

Das W3-Konsortium, das für die Normierung von WWW-Technologien verantwortlich ist, hat mittlerweile eine Spezifikation zum Document Object Model veröffentlicht. Das betreffende Dokument müssen Sie sich vorstellen als eine Spezifikation für Scriptsprachen-"Hersteller". Es enthält Empfehlungen für die Objekthierarchie, die eine webseiten-orientierte Scriptsprache realisieren sollte. Bei vollständiger Umsetzung der empfohlenen Objekthierarchie wäre dann zugleich eine standardisierte Grundlage für Dynamisches HTML geschaffen.

## Microsoft, Netscape und das W3-Konsortium

Dynamisches HTML wird von Netscape ab Version 4.0 und vom MS Internet Explorer ab Version 4.0 interpretiert. Leider ist das Thema "Dynamic HTML" jedoch zu einem Kriegsschauplatz im Duell der beiden führenden WWW-Browser geworden. Denn die Realisierungen sind in beiden Browsern grundverschieden. Ist das Erstellen von WWW-Seiten mit Dynamischem HTML bereits nicht ganz einfach, so wird es durch die weitgehend inkompatiblen Lösungen der Browser in den 4er-Versionen doppelt und dreifach schwer. Vieles muß man für beide Browser getrennt kodieren (mit doppeltem Kenntnisaufwand), wenn man für beide Browser schreiben will. Vieles funktioniert überhaupt nur mit dem einen oder mit dem anderen Browser. Die "Szene" sitzt angesichts dieser Situation in den Startlöchern und lauert auf Vereinheitlichung.

Beim Bemühen um Vereinheitlichung zeichnet sich ab, daß Netscape diesmal das Nachsehen hat, denn der Ansatz von Microsoft ist deutlich ausgereifter und näher an den Standards des W3-Konsortiums orientiert. Während der MS Internet Explorer 4.x das Document Object Model weitgehend umsetzt, kann davon bei Netscape Netscape 4.x kaum die Rede sein. Netscape hat das mittlerweile selbst zugegeben und für seine Browser-Version 5 eine bessere Umsetzung des Document Object Models versprochen. Inwieweit Dynamisches HTML aber auch weiterhin als Schlachtfeld für Anwenderanteile im Milliardenmarkt Internet herhalten muß, ist derzeit noch nicht absehbar.

Das W3-Konsortium sieht die Notwendigkeit, in Sachen Dynamischem HTML an einer einheitlichen Lösung mitzuwirken, muß jedoch der Gefahr ausweichen, einfach nur die bereits realisierten Features eines bestimmten Browsers abzusegnen. Andererseits haben die Browser-Entwickler erkannt, daß das W3-Konsortium eine wichtige Institution für den Rückhalt bei Neuentwicklungen ist. Denn herkömmliche, herstellerspezifische Programmier-Lösungen oder Datenformate sind im Zeitalter des Internet-Booms nicht mehr gefragt und auf die Dauer zum Aussterben verurteilt.

In der vorliegenden Dokumentation werden zunächst beide Ansätze (Microsoft und Netscape) getrennt beschrieben ( Die Ansätze von Microsoft und Netscape). Denn nur wenn Sie beide Konzepte klar unterscheiden können, sind Sie in der Lage, Dynamisches HTML so zu schreiben, daß es mit beiden Browsern funktioniert. Im zweiten Schritt können Sie dann sehen, wie sich Dynamisches HTML für beide Browser realisieren läßt ( Lösungen für die Praxis).

## Informationen zu "DHTML" im WWW

Die folgenden Internet-Adressen sollten Sie besuchen, um weiterführende Informationen rund um Dynamisches HTML zu erhalten:

Dynamic HTML (Microsoft)
Original-Dokumentation von Microsoft

Dynamic HTML in Netscape
Original-Dokumentation von Netscape

Document Object Model
Spezifikation des W3-Konsortiums

DHTML Seite
Beispiele, Beschreibungen, Verweise, Tips und Tricks

Inside DHTML
Workshop mit Demos, Beispiele - auch downloadbar - und Verweisen

DHTML Zone
Workshop mit dokumentierten Beispielen, Verweise usw.

weiter: | Dynamischer Zugriff auf HTML-Elemente (Microsoft)
zurück: | Verweisliste als Auswahlliste

SELFHTML/Quickbar Dynamisches HTML

© 1998 Stefan Münz, muenz@csi.com