DHTML: Dynamische Webcodierung

• April 24, 2024

DHTML steht für D.ynamic H.yperT.ext M.Arkup L.Sprache und kann als die Kunst definiert werden, HTML-Webseiten durch Kombination von HTML mit Javascript und Cascading Style Sheets (CSS) dynamisch zu gestalten. Im Gegensatz zu den anderen vier HTML-Variationen, die in den vorherigen vier Artikeln dieser Reihe untersucht wurden, ist DHTML kein vom W3-Konsortium definierter Standard. Es handelt sich vielmehr um einen "Marketingbegriff, der von Netscape und Microsoft verwendet wurde, um die neuen Technologien zu beschreiben, die die Browser der 4.x-Generation unterstützen würden" (W3-Konsortium). In HTML 4.0 wurden zunächst zwei wichtige Komponenten eingeführt, die der Struktur von DHTML inhärent sind:

• Cascading Style Sheets (CSS)
• Dokumentobjektmodelle (DOM)

Machen Sie Ihren Code dynamisch

CSS bietet Stil- und Layoutmodelle, während DOM Dokumentinhaltsmodelle für HTML-Dokumente bereitstellt. JavaScript und VBScript bieten die Möglichkeit, Skriptcode zur Steuerung von HTML-Elementen zu schreiben. Zusammen ergeben diese drei Komponenten dynamische HTML-Seiten. Eine wichtige Abschreckung ist die Inkompatibilität des Browsers. Netscape und Microsoft haben sich immer noch nicht darauf geeinigt, was in ihren Browsern implementiert werden soll. Daher kann es schwierig sein, DHTML-Seiten zu schreiben, die in beiden Browsern gut funktionieren. Um sich selbst davon zu überzeugen, können Sie online auf Microsoft- und Netscape-Standards zugreifen:

• MSDN-Bibliothek bei Microsoft
• Dynamisches HTML in Netscape Communicator

"DHTML zeichnet sich durch die Erstellung von Effekten mit geringer Bandbreite aus, die die Funktionalität einer Webseite verbessern. Es kann verwendet werden, um Animationen, Spiele und Anwendungen zu erstellen, neue Möglichkeiten für die Navigation durch Websites bereitzustellen und außergewöhnliche Seitenlayouts zu erstellen, die einfach nicht vorhanden sind." Mit nur HTML ist dies nicht möglich. Obwohl viele der Funktionen von DHTML entweder mit Flash oder Java dupliziert werden können, bietet DHTML eine Alternative, die keine Plugins erfordert und sich nahtlos in eine Webseite einbettet. "(Dan Steinman, 1998).

Um die Komplexität von DHTML zu verstehen, ist es hilfreich, seine Komponenten genauer zu untersuchen.

Cascading Style Sheets

CSS sind ausgefeilte Codes, die Webinhalte von der Webdarstellung trennen - Stil, Positionierung, Farben, Schriftarten usw. CSSP- oder CSS-Positionierung ermöglicht die Steuerung der Positionierung von HTML-Elementen auf Pixelebene. Die Trennung des Präsentationsstils von Webdokumenten vom Inhalt mit CSS2 (CSS Level 2) vereinfacht das Web-Authoring und die Site-Wartung. "CSS2 unterstützt medienspezifische Stylesheets, sodass Autoren die Präsentation ihrer Dokumente an visuelle Browser, Hörgeräte, Drucker, Braille-Geräte, Handheld-Geräte usw. anpassen können. Diese Spezifikation unterstützt auch die Positionierung von Inhalten, herunterladbare Schriftarten, Tabellenlayout und Funktionen für Internationalisierung, automatische Zähler und Nummerierung sowie einige Eigenschaften im Zusammenhang mit der Benutzeroberfläche "(W3 Consortium). Das W3C bietet ein hervorragendes Tutorial zum Erlernen von CSS2 mit dem Namen: CSS2-Spezifikation.

JavaScript

JavaScript ist eine spezielle, auf Browsern basierende Skriptsprache, mit der HTML-Elemente gesteuert und Formularen, Frames, Fenstern, Bild-Rollovers, Audio-Video-Steuerelementen Funktionen hinzugefügt und DHTML bearbeitet werden können. Netscape nannte dieses Skript zuerst JavaScript, daher entwickelte Microsoft den Begriff JScript für seine spezielle Marke für Skripte. Das Ergebnis? Zwei Versionen von JavaScript, die ärgerlich inkompatibel sein können. Um dieses Problem genauer zu untersuchen, besuchen Sie Netscape's JavaScript Central und Microsoft JScript Ressourcenseite. Das Geheimnis der dynamischen Effekte von JavaScript-Inhalten ist die Verwendung von Ebenenobjekten. Ebenenobjekte ändern den Text, wenn die Maus darüber fährt. Dadurch bewegen sich Bilder oder Text auf der Webseite. Außerdem werden Dropdown-Menüs angezeigt. Ebenenobjekte sind in div-Tags angeordnet und definieren Merkmale wie Farbe, Position und Sichtbarkeit.

Sie zusammenfügen

DHTML wird normalerweise angewendet, um drei Aufgaben zu erfüllen:

• Position oder Platzieren von Inhaltsblöcken auf der Seite und Verschieben dieser
• Stiländerungen die das Erscheinungsbild der Seite ändern
• Handhabung des Events oder Benutzerereignisse mit Änderungen in der Positionierung oder anderen Stiländerungen in Verbindung zu bringen

In neueren Versionen von Internet Explorer und Netscape (Versionen 5, 6 und höher) wird das DOM zum Code der Wahl für die meisten DHTML-Codierungen. Nach dem Mastering kann das DOM Webdesignern helfen, die Dokumentcodierung zu bearbeiten, hinzuzufügen, zu löschen und zu bearbeiten, die sich auf alle Stile, Attribute (z. B. eine href) und Elemente (z. B. HTML-Tags) auf der Seite bezieht. Das bedeutet, dass auf jedes Tag und Attribut eines HTML-Dokuments über das DOM zugegriffen werden kann. Derzeit werden die Dokumentobjektmodellstufen 0 und 1 von W3C empfohlen. Level 2 ist ebenfalls in Arbeit, wurde jedoch noch nicht als Standard für die DHTML-Codierung beworben.

Eine hilfreiche Gruppe von Tutorials ist über HTML Goodies verfügbar DHTML- und Layer-Tutorial.

Die in diesem Artikel enthaltenen Links bieten Einführungen und Anleitungen, um Ihre Reise zur Beherrschung dieser neuesten Entwicklung in der HTML-Codierung zu beginnen.Jede schnelle Suche bei Google macht Sie auf viele weitere Ressourcen aufmerksam, die Ihnen jederzeit zur Verfügung stehen. Da Browserhersteller an ihrer Inkompatibilität arbeiten und die Verwendung von Browsern höherer Versionen immer häufiger wird, wird DHTML zu einem obligatorischen Bestandteil der Reiseroute eines professionellen Designers.

HTML Highlight Article Series

TEIL 1: Sollte ein glaubwürdiger Designer HTML kennen?
TEIL 2: HTML 3.2 - Die Geburt von Wilbur
TEIL 3: HTML 4.0 UND 4.01 - Mehr Gutes!
TEIL 4: XHTML: Webcodierung für verfeinertes Design
TEIL 5: DHTML: Dynamische Webcodierung

Video-Anleitungen: Javascript Tutorial (German)[HD] part 9 - DHTML bzw DOM (April 2024).