Dynamic HTML (DHTML) ist eine Kombination von Technologien, die verwendet wird, um interaktive und dynamische Webinhalte zu erstellen. Es ist kein eigenständiger Standard oder eine Programmiersprache, sondern eine Sammlung von Techniken und Tools, die zusammenarbeiten. Mit DHTML können Websites dynamisch und interaktiv gestaltet werden, ohne dass die gesamte Seite neu geladen werden muss.

Die Bestandteile von DHTML

1. HTML (Hypertext Markup Language)
   Die Grundstruktur der Website.

2. CSS (Cascading Style Sheets)
   Steuert das Aussehen und das Layout der Webseite. Mit CSS können Stile dynamisch verändert werden, z. B. durch Hover-Effekte oder das Ändern von Farben und Positionen.

3. JavaScript
   Ermöglicht das Hinzufügen von Interaktivität und dynamischem Verhalten, wie das Aktualisieren von Inhalten, ohne die Seite neu zu laden.

4. DOM (Document Object Model)
   Eine Programmierschnittstelle, die den Zugriff auf und die Manipulation der Struktur der Webseite ermöglicht. JavaScript interagiert mit dem DOM, um Inhalte zu ändern oder neue Elemente hinzuzufügen.

Was macht DHTML besonders?

• Interaktivität: Inhalte und Stile können auf Benutzereingaben reagieren.
• Animationen: Elemente wie Text oder Bilder können sich bewegen oder animiert werden.
• Veränderte Inhalte: Teile der Webseite können dynamisch aktualisiert werden, ohne die Seite neu zu laden.
• Benutzerfreundlichkeit: Verbessert die Nutzererfahrung durch Echtzeit-Aktionen.

Beispiel für DHTML:

Ein einfaches Beispiel wäre ein Button, der beim Anklicken den Text auf der Seite ändert.

<!DOCTYPE html>
<html>
<head>
    <style>
        #text {
            color: blue;
            font-size: 20px;
        }
    </style>
    <script>
        function changeText() {
            document.getElementById("text").innerHTML = "Text geändert!";
            document.getElementById("text").style.color = "red";
        }
    </script>
</head>
<body>
    <p id="text">Originaler Text</p>
    <button onclick="changeText()">Klicke mich</button>
</body>
</html>

Vorteile von DHTML:

• Erhöht die Interaktivität und Dynamik einer Website.
• Reduziert die Serverbelastung, da weniger Seiten-Neuladen erforderlich ist.
• Ermöglicht individuelle Anpassungen für Benutzer.

Nachteile:

• Kann bei älteren Browsern oder Geräten zu Inkompatibilitäten führen.
• Erfordert mehr Entwicklungsaufwand und komplexeres Debugging.
• Abhängig von JavaScript, das von Benutzern deaktiviert sein könnte.

Heutzutage hat DHTML durch modernere Techniken wie AJAX und Frameworks (z. B. React, Vue.js) an Bedeutung verloren, war jedoch ein wichtiger Schritt in der Entwicklung interaktiver Webanwendungen.

Das Document Object Model (DOM) ist eine standardisierte Schnittstelle, die von Webbrowsern bereitgestellt wird, um strukturierte Dokumente – insbesondere HTML- und XML-Dokumente – darzustellen und programmatisch zu manipulieren. Es beschreibt die hierarchische Struktur eines Dokuments als Baum, wobei jeder Knoten ein Element, Attribut oder einen Text darstellt.

Hauptmerkmale des DOM:

1. Baumstruktur:

   • Ein HTML-Dokument wird als hierarchischer Baum dargestellt. Die Wurzel ist das <html>-Element, mit untergeordneten Knoten wie <head>, <body>, <div>, <p> usw.

2. Objektorientierte Darstellung:

   • Jedes Element im Dokument wird als Objekt repräsentiert, das über Methoden und Eigenschaften angesprochen werden kann.

3. Interaktivität:

   • Das DOM erlaubt Entwicklern, Inhalte und Stile einer Webseite zur Laufzeit zu ändern. Beispielsweise können JavaScript-Skripte den Text eines <p>-Elements ändern oder ein <div>-Element einfügen.

4. Plattform- und Programmiersprachenunabhängig:

   • Obwohl es oft mit JavaScript verwendet wird, kann das DOM auch von anderen Sprachen wie Python, Java oder PHP genutzt werden.

Beispiele für DOM-Manipulation:

1. Zugriff auf ein Element:

let element = document.getElementById("meinElement");

2. Ändern des Inhalts:

element.textContent = "Neuer Text";

3. Hinzufügen eines neuen Elements:

let neuerKnoten = document.createElement("div");
document.body.appendChild(neuerKnoten);

Wichtig:

Das DOM wird durch Standards des W3C (World Wide Web Consortium) definiert und ständig weiterentwickelt, um moderne Webtechnologien zu unterstützen.

XHTML (Extensible Hypertext Markup Language) ist eine Variante von HTML (Hypertext Markup Language), die auf XML (Extensible Markup Language) basiert. XHTML kombiniert die Flexibilität von HTML mit der Strenge und Struktur von XML. Hier sind einige wichtige Aspekte und Merkmale von XHTML:

1. Struktur und Syntax:

   • Well-formedness: XHTML-Dokumente müssen wohlgeformt sein, das heißt, sie müssen alle Regeln von XML einhalten. Dies bedeutet unter anderem, dass alle Tags korrekt verschachtelt und geschlossen sein müssen.
   • Elemente und Attribute: Alle Elemente und Attribute in XHTML müssen in Kleinbuchstaben geschrieben werden.
   • Schließende Tags: Alle Tags müssen geschlossen werden, entweder mit einem entsprechenden End-Tag (z.B. <p></p>) oder als selbstschließendes Tag (z.B. <img />).

2. Kompatibilität:

   • XHTML ist so konzipiert, dass es abwärtskompatibel mit HTML ist. Viele Webbrowser können XHTML-Dokumente rendern, auch wenn sie ursprünglich für HTML-Dokumente entwickelt wurden.
   • XHTML-Dokumente werden als XML-Dokumente behandelt, was bedeutet, dass sie von XML-Parsern analysiert werden können. Dies erleichtert die Integration von XHTML mit anderen XML-basierten Technologien.

3. Doctype-Deklaration:

   • Ein XHTML-Dokument beginnt mit einer Doctype-Deklaration, die den Dokumenttyp und die verwendete XHTML-Version angibt. Zum Beispiel:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4. Verwendung in der Praxis:

   • XHTML wurde entwickelt, um die Mängel von HTML zu beheben und eine strengere Struktur zu bieten, die die Interoperabilität und die Verarbeitung von Dokumenten verbessert.
   • Obwohl XHTML viele Vorteile bietet, hat es sich nicht vollständig durchgesetzt. HTML5, die neueste Version von HTML, hat viele der Vorteile von XHTML übernommen und gleichzeitig die Flexibilität und Benutzerfreundlichkeit von HTML beibehalten.

5. Verschiedene XHTML-Profile:

   • XHTML 1.0: Die erste Version von XHTML, die drei verschiedene DTDs (Document Type Definitions) anbietet: Strict, Transitional und Frameset.
   • XHTML 1.1: Eine weiterentwickelte Version von XHTML, die eine modularere Struktur und bessere Unterstützung für internationale Anwendungen bietet.
   • XHTML Basic: Eine abgespeckte Version von XHTML, die speziell für mobile Geräte und andere eingeschränkte Umgebungen entwickelt wurde.

Zusammenfassend lässt sich sagen, dass XHTML eine strengere und besser strukturierte Variante von HTML ist, die auf XML basiert und in bestimmten Anwendungsbereichen Vorteile bietet. Es wurde entwickelt, um die Interoperabilität und Standardisierung im Web zu verbessern, hat sich jedoch aufgrund der Einführung von HTML5 nicht vollständig durchgesetzt.