DHTML
Inhaltsverzeichnis
DHTML
DHTML steht für Dynamic HyperText Markup Language und beschreibt verschiedene Programmiersprachen, die zur interaktiven Gestaltung von Webseiten verwendet werden. Die Programmiersprachen, auf die DHTML sich zumeist bezieht sind HTML, CSS, JavaScript und DOM (Document Object Model). Stattdessen können aber auch einige weitere Technologien eingesetzt werden.
Der Begriff DHTML wurde im Jahr 1997 eingeführt und gilt mittlerweile bereits als veraltet. Heute werden eher die Begriffe „DOM-Scripting“ und „Unobtrusive JavaScript“ gebraucht.
Verwendung von DHTML
DHTML wird eingesetzt, um Effekte wie etwa kleine Animationen und interaktive Schaltflächen/Menüs zu erzeugen. So kann beispielsweise ein Dropdown-Menü mit DHTML animiert werden. Auch komplexere Animationen lassen sich mithilfe von DHTML realisieren, z. B. bewegte Bilder und Texte auf einer Seite. Auf diese Weise konnten in der Vergangenheit auch Spiele mit DHTML entwickelt werden.
Die vier Elemente von DHTML
DHTML besteht generell aus vier Elementen, nämlich HTML, CSS, JavaScript und DOM (Document Object Model). Im Folgenden findet sich eine Zusammenfassung dessen, was jedes dieser einzelnen Elemente bewirkt:
HTML
HTML steht für HyperText Markup Language und ist für das Erstellen von Websites die wichtigste Markup-Sprache. Im Allgemeinen wird HTML verwendet, um die Struktur und das Layout einer Webseite zu erstellen.
Diese Programmiersprache arbeitet mit Elementen, von denen jedes für eine andere Art von Inhalt verwendet wird. So kann HTML beispielsweise mit dem <h>-Tag anzeigen, dass eine bestimmte Zeile eine Überschrift ist, oder dass Textblöcke mit dem <p>-Tag einen Absatz bilden.
HTML wurde im Jahr 1991 entwickelt. Die aktuelle Version HTML5.2 steht seit 2017 zur Verfügung.
CSS
CSS steht für Cascading Style Sheets und wird zur Gestaltung von Webseiten verwendet. CSS teilt dem Browser mit, wie der HTML-Code auf einer Seite dargestellt werden soll. Dadurch wird mehr Flexibilität ermöglicht.
CSS wurde ursprünglich entwickelt, um die Gestaltung von Websites zu vereinfachen. Änderungen lassen sich damit auf der gesamten Website durchführen. Mit einer externen CSS-Datei lassen sich die Schriftart, die Hintergrundfarbe und vieles mehr für die gesamte Website festlegen. Für Webentwickler bedeutet dies eine enorme Zeitersparnis. Vor der Einführung von CSS mussten derartige Änderungen jeweils Seite für Seite vorgenommen werden.
JavaScript
JavaScript ist eine Skriptsprache, die es dem Nutzer ermöglicht, mit einer Webseite zu interagieren. Neben HTML und CSS handelt es sich dabei um eine der wichtigsten Programmiersprachen für Websites.
Eingesetzt werden kann JavaScript etwa, um Newsfeeds automatisch zu aktualisieren und beispielsweise Kontaktformulare oder Buttons zum Laufen zu bringen. JavaScript ist extrem dynamisch, kann aber bei Suchmaschinen-Crawlern Probleme verursachen, wenn bei der Optimierung gewisse Fehler unterlaufen. Dies kann sich unter Umständen negativ auf die Suchmaschinen-Performance einer Website auswirken.
DOM
DOM steht für Document Object Model. Es beschreibt die Eigenschaften aller HTML-Elemente und wie auf diese zugegriffen werden kann. Durch DOM kann der HTML-Code auf einer Seite gefunden und verändert werden.
Das DOM ermöglicht es, den HTML-Code mithilfe von JavaScript dynamisch zu gestalten, da HTML-Elemente mittels JavaScript verändert werden können. Unter anderem kann es auch das CSS auf einer Seite ändern.
Beispiel
Im folgenden Beispiel wird der Text „BeispielText“ mithilfe von JavaScript in den Body der HTML-Seite eingefügt:[1]
<HTML>
<head>
<title>DHTML mit JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("BeispielText");
</script>
</body>
</html>
Hier ist ein weiteres Beispiel, bei dem mithilfe von CSS der Style der H1-Überschrift verändert wird:
<html> <head> <title>DHTML mit CSS</title> </head> <body> <center> <h1 onclick="this.style.color='blue'">Das ist eine H1-Überschrift</h1> <center> </body> </html>
Der Unterschied zwischen HTML und DHTML
Der Hauptunterschied zwischen HTML und DHTML besteht darin, dass HTML eine Markup-Sprache ist, während DHTML eine Gruppe von Programmiersprachen umfasst, die in Kombination miteinander verwendet werden.
Mit HTML können Webentwickler eine statische Webseite erstellen, welche die Struktur einer Website bildet. Mittels weiterer Technologien lassen sich HTML-Seiten dynamisch und funktional gestalten.
DHTML eignet sich gut für die Erstellung dynamischer Webseiten, da es alle dafür erforderlichen Technologien umfasst. Bei der Erstellung von Webseiten wird dadurch mehr Flexibilität ermöglicht.
Bedeutung für die SEO
Da DHTML JavaScript einsetzt, ist es für die SEO wichtig dessen Funktionsweise zu verstehen. Eine falsche Implementierung von JavaScript kann bei Suchmaschinen-Crawlern zu Problemen beim Rendern der Inhalte führen, was die Leistung einer Seite in den SERPs beeinträchtigen kann.
Die fehlerhafte Implementierung von Elementen, die in DHTML-Seiten verwendet werden, kann zudem im Zusammenhang mit der User Experience zu Schwierigkeiten führen. So kann eine Website zum Beispiel langsam werden oder bestimmte Ressourcen nicht korrekt anzeigen.
Die Leistung einer Website kann mit DHTML deutlich verbessert werden, wenn sichergestellt wird, dass die verwendeten Funktionen von den wichtigsten Browsern unterstützt werden. Dazu ist allerdings ein gewisses Verständnis der verschiedenen Elemente und Best Practices erforderlich.
Einzelnachweise
- ↑ DHTML Tutorial JavaTpoint. Abgerufen am 16. Juni 2021.
Weiterführende Links
- https://www2.informatik.hu-berlin.de/Themen/www/selfhtml/dhtml/beispiele/dhtml_bibliothek.htm
- https://developer.mozilla.org/de/docs/conflicting/Web/API/Document_Object_Model
Ähnliche Artikel
| Über den Autor |
 |