In diesem Teil wird auf die Möglichkeiten von Dynamic HTML (DHTML) als Kombination aus HTML, Cascading Style Sheets und JavaScript eingegangen.
Eine exakte Definition bzw. einen Standard von DHTML gibt es nicht. Das Ziel von DHTML ist, flexible Web-Seiten realisieren zu können; Elemente einer Seite sollen ihre Position oder ihr Aussehen verändern können, ohne das ein erneuter Zugriff auf den Web-Server erforderlich ist.
Das W3C beschreibt DHTML als als Kombination aus HTML, Cascading Style Sheets (CSS) und JavaScript.
Hier wird auf die wichtigsten Eigenschaften von CSS eingegangen. Die unterschiedlichen Versionen (CSS-1, CSS-2) werden nicht diskutiert. Auch die JavaScript Style Sheets (JSSS:Style Sheet Definitionen in JavaScript) werden nicht behandelt, da sie sich nicht durchgesetzt haben.
Eine Style Sheet Definition wird innerhalb des Tag "<style>" angegeben.
Hier sind Style Sheet Definitionen für den Hintergrund des Dokumentkörpers und Schriftfarbe für "Heading1" angegeben.
Damit läst sich das Aussehen von HTML Objekten, die durch Tags spezifiziert sind, bestimmen. Nach dem Tagname seht in geschweiften Klammern eingeschlossen, eine Liste von Attribut-Werte Paaren, durch ":" getrennt. Ein Definition, die Links ohne Unterstreichung darstellt, wäre etwa:
<style type="text/css">
A {text-decoration: none}
</style>
Durch das Definieren von Klassen bewirken, dass nur bestimmte Ausprägungen eines Tag das gewünschte Aussehen haben. Die folgende Definition bestimmt, dass nur Headings, die zur Klasse "myClass" gehören, Gelb werden.
Eine Definition einer Klasse, die auf alle Tags anwendbar ist, wird durch ".Name" eingeleitet.
Soll das Aussehen von nur einem Tag bestimmt werden, so kann man dem Tag einen Namen geben und für diesen Namen eine CSS Definition angeben:
Da normalerweise das Aussehen in Abhängigkeit von einem Tag definiert ist, könnte man das Aussehen von Bereichen eines Dokumentes, für die kein eigenes Tag angegeben werden kann, nicht beeinflussen. Deshalb existiert das Tag "<SPAN>", das überall eingestreut werden kann und keine spezielle Bedeutung hat. Damit hat man aber ein Tag, dessen Aussehen definierbar ist:
Das Tag "<DIV>" ist ein so genanntes Block-Level Element. Es ist mit SPAN vergleichbar, es wird aber ein Zeilenumbruch erzeugt.
Neben der Verwendung des Tag <STYLE> können Definitionen auch in Dateien abgelegt und durch das <LINK> Tag verfügbar gemacht werden:
<LINK rel="stylesheet" href="Test.css TYPE="text/css>
Hier ist die Datei "Test.css" die Quelle der CSS Definitionen. Weiterhin lassen sich CSS Definitionen importieren:
<style>
<!--
@import "kurs.css";
-->
</style>
Einfache CSS Definitionen kann man auch direkt in den HTML Text eingeben:
Durch die Verwendung der o.a. unterschiedlichen Methoden der CSS Definitionen kann es zu Konflikten kommen, wenn eine Definition "überschrieben" wird. In einem solchen Fall gilt die spezielle Definition vor der allgemeinen (vgl. http://www.w3.org).
Zum Positionieren wird ein XY-Koordinatensystem mit Ursprung in der linken oberen Ecke des Anzeigebereiches im Browserfenster verwendet.
Damit kann man einen Text wie folgt Pixelgenau plazieren:
Die DIV Tags können geschachtelt werden; dadurch kann man Pixelgenau relativ zum umgebenden DIV Tag positionieren:
Bilder lassen sich genauso wie Text positionieren:
Durch Clipping kann man nur einen Teil eines positionierten Elementes anzeigen.
In der Definition "clip: rect(top, right, botton, left)" wird die obere linke (top-left) und unter rechte (botton-right) Ecke des sichtbaren Bereiches angegeben.
Man kann mehrere Objekte übereinander positionieren. Dabei wird das Objekt angezeigt, dass den größten z-Index hat. Durch die z-Ebene werden mehrere x-y Koordinatensysteme übereinander gelegt.
Um mit Hilfe von CSS die Positionierung von JavaScript aus durchführen zu können, muss man auf die Elemente eines Dokuments zugreifen. Dazu wird zunächst DOM Level 2 vorgestellt.
Der Zugriff und die Manipulation werden an folgendem Beispiel demonstriert:
Der zum o.a. Beispiel gehörende DOM Level 2 Baum hat folgendes Aussehen:
Der Zugriff auf einzelnen Elemente des DOM Baums und ihre Manipulation werden nun am o.a. Beispiel demonstriert.
Das document-Objekt bietet die Methoden
um auf Elemente zuzugreifen.
Ein Element kann auch über das Array childNodes angesprochen werden. Dabei wird das Kind i eines Knotens x mit x.childNodess[i] referenziert. Die Eigenschaft fistChild und lastChild repräsentieren das erste und letzte Kind. Das "Durchhangeln" durch den DOM Baum mit nur diesem Array ist sehr umständlich. Eine Kombination mit den Methode getElementById wird oft verwendet. Den Wert eines Knotens liefert die Eigenschaft "nodeValue".
So kann auf den Text "Test" im Beispiel innerhalb von JavaScript etwa durch
var x1 = document.getElementById("a2");
var y1 = x1.childNodes[1].childNodes[0];
alert(y1.nodeValue);
zugegriffen werden.
Eine Veränderung wird im o.a. Beispiel dann durch folgende Zuweisung realisiert:
y1.nodeValue = "Versuch";
Nach der Ausführung des obigen Programms sieht unser DOM-Baum wie folgt aus:
Im letzten Beispiel wurde die Struktur des DOM-Baums nicht verändert. Das nächste Beispiel zeigt, wie durch die Methoden "createTextNode()" und "appendChild()" Elemente hinzugefügt werden können, so dass folgender Baum entsteht:
Neben dem Zufügen von Textelementen, können auch andere HTML Elemente eingefügt werden, etwa ein Bold-Tag mit Text:
Attribute eines Knotens können mit der Methode "setAttribute()" des document-Objektes bestimmt werden. Im Folgenden wird ein IMG-Knoten in den Baum gehängt und das SRC-Attribut mit der Quelle für das Bild gesetzt. Dadurch entsteht der DOM-Baum:
Das Entfernen von Knoten aus dem DOM-Baum wird mit der Methode "removeChild()" veranlasst.
Im Beispiel wird der ganze Ast mit ab dem Knoten "b1" gelöscht. Dadurch entsteht der DOM-Baum:
Weitere Methoden zur Manipulation des DOM-Baums sind z.B.:
Eine Liste aller Eigenschaften und Methoden ist unter www.w3.org zu finden.
In den letzten Beispielen sieht man die Änderungen in neueren Browsern direkt. Ältere Versionen lassen keine Änderung an der Struktur des DOM-Baums zu, wenn der Browser die Elemente einmal "gezeichnet" hat.
Das folgende Beispiel demonstriert, wie man CSS Eigenschaften dynamisch Ändern kann. Darin wird ein Link im Aussehen geändert, wenn das Ereignis "onMouseOver" eintritt. Realiseirt ist die Änderung über verschiedene CSS Klassen.
Durch das style-Objekt kann man HTML-Objekte beeinflussen. Im folgenden Beispiel wird die Farbe eines Textes geändert, wenn ein Button gedrückt wird.
Neben der Eigenschaft "color" hat das style-Objekt andere Eigenschaften. Die aktuelle Liste der Eigenschaften ist ebenfalls unter www.w3.org ersichtlich. Einige sind in der nachfolgenden Tabelle beschrieben:
| Eigenschaft | Bedeutung |
| left | x-Koordinate des Elements |
| top | y-Koordinate des Elements |
| zIndex | Stapelreihenfolge |
| visibility | gibt an,ob das Objekt sichtbar ("vivible") oder nicht ("hidden") ist. "inherit" bedeutet, dass die Sichtbarkeit vom Elternknoten übernommen wird. |
Die Eigenschaften "left" und "top" werden verwendet, um im nächsten Beispiel einen Text über den Bildschirm zu bewegen.
Die Eigenschaft "clip" des style-Objekts findet Verwendung, wenn man z.B. ein Bild nicht sofort ganz anzeigen will, sondern einen Effekt erzielen will, wie er von Powerpoint bekannt ist: das Bild wird langsam aufgebaut. Dies wird erreicht, indem der sichtbare Bereich langsam vergrößert wird.
Durch einen Timer wird der initial gesetzte Clipping-Bereich kontinuierlich vergrößert.
Durch iFRames ist es möglich, mehrere HTML Seiten in einem Fenster anzuzeigen. Durch das iFrame-Objekt kann man ein solches "Minifenster" exakt positionieren. Dies wird analog zum div-Objekt durchgeführt: