{"id":31887,"date":"2024-11-12T12:39:23","date_gmt":"2024-11-12T12:39:23","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31887"},"modified":"2025-03-18T13:53:46","modified_gmt":"2025-03-18T13:53:46","slug":"DHTML","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/DHTML","title":{"rendered":"DHTML"},"content":{"rendered":"

Verwendung von DHTML<\/span><\/h2>\n

DHTML wird eingesetzt, um Effekte wie etwa kleine Animationen und interaktive Schaltfl\u00e4chen\/Men\u00fcs zu erzeugen. So kann beispielsweise ein Dropdown-Men\u00fc 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.\n<\/p>\n

Die vier Elemente von DHTML<\/span><\/h2>\n

DHTML besteht generell aus vier Elementen, n\u00e4mlich HTML, CSS, JavaScript und DOM (Document Object Model). Im Folgenden findet sich eine Zusammenfassung dessen, was jedes dieser einzelnen Elemente bewirkt:\n<\/p>\n

HTML<\/span><\/h3>\n

HTML steht f\u00fcr HyperText Markup Language und ist f\u00fcr das Erstellen von Websites die wichtigste Markup-Sprache. Im Allgemeinen wird HTML verwendet, um die Struktur und das Layout einer Webseite zu erstellen.\n<\/p>\n

Diese Programmiersprache arbeitet mit Elementen, von denen jedes f\u00fcr eine andere Art von Inhalt verwendet wird. So kann HTML beispielsweise mit dem <h>-Tag anzeigen, dass eine bestimmte Zeile eine \u00dcberschrift ist, oder dass Textbl\u00f6cke mit dem <p>-Tag einen Absatz bilden.\n<\/p>\n

HTML wurde im Jahr 1991 entwickelt. Die aktuelle Version HTML5.2 steht seit 2017 zur Verf\u00fcgung.\n<\/p>\n

CSS<\/span><\/h3>\n

CSS steht f\u00fcr 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\u00e4t erm\u00f6glicht.\n<\/p>\n

CSS wurde urspr\u00fcnglich entwickelt, um die Gestaltung von Websites zu vereinfachen. \u00c4nderungen lassen sich damit auf der gesamten Website durchf\u00fchren. Mit einer externen CSS-Datei lassen sich die Schriftart, die Hintergrundfarbe und vieles mehr f\u00fcr die gesamte Website festlegen. F\u00fcr Webentwickler bedeutet dies eine enorme Zeitersparnis. Vor der Einf\u00fchrung von CSS mussten derartige \u00c4nderungen jeweils Seite f\u00fcr Seite vorgenommen werden.\n<\/p>\n

JavaScript<\/span><\/h3>\n

JavaScript ist eine Skriptsprache, die es dem Nutzer erm\u00f6glicht, mit einer Webseite zu interagieren. Neben HTML und CSS handelt es sich dabei um eine der wichtigsten Programmiersprachen f\u00fcr Websites.\n<\/p>\n

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<\/a> Probleme verursachen, wenn bei der Optimierung gewisse Fehler unterlaufen. Dies kann sich unter Umst\u00e4nden negativ auf die Suchmaschinen<\/a>-Performance einer Website auswirken.\n<\/p>\n

DOM<\/span><\/h3>\n

DOM steht f\u00fcr 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\u00e4ndert werden.\n<\/p>\n

Das DOM erm\u00f6glicht es, den HTML-Code mithilfe von JavaScript dynamisch zu gestalten, da HTML-Elemente mittels JavaScript ver\u00e4ndert werden k\u00f6nnen. Unter anderem kann es auch das CSS auf einer Seite \u00e4ndern.\n<\/p>\n

Beispiel<\/span><\/h2>\n

Im folgenden Beispiel wird der Text \u201eBeispielText\u201c mithilfe von JavaScript in den Body der HTML-Seite eingef\u00fcgt:[1]<\/a><\/sup>\n<\/p>\n

<HTML>  \r\n<head>  \r\n<title>DHTML mit JavaScript<\/title>  \r\n<\/head>  \r\n<body>  \r\n<script type=\"text\/javascript\">  \r\ndocument.write(\"BeispielText\");  \r\n<\/script>  \r\n<\/body>  \r\n<\/html><\/pre>\n
Hier ist ein weiteres Beispiel, bei dem mithilfe von CSS der Style der H1-\u00dcberschrift ver\u00e4ndert wird:\n<\/p>\n
<html>  \r\n<head>  \r\n<title>DHTML mit CSS<\/title>  \r\n<\/head>  \r\n<body>  \r\n<center>  \r\n<h1 onclick=\"this.style.color='blue'\">Das ist eine H1-\u00dcberschrift<\/h1>  \r\n<center>  \r\n<\/body>  \r\n<\/html><\/pre>\n
Der Unterschied zwischen HTML und DHTML<\/span><\/h2>\n
Der Hauptunterschied zwischen HTML und DHTML besteht darin, dass HTML eine Markup-Sprache ist, w\u00e4hrend DHTML eine Gruppe von Programmiersprachen umfasst, die in Kombination miteinander verwendet werden.\n<\/p>\n
Mit HTML k\u00f6nnen Webentwickler eine statische Webseite erstellen, welche die Struktur einer Website bildet. Mittels weiterer Technologien lassen sich HTML-Seiten dynamisch und funktional gestalten.\n<\/p>\n
DHTML eignet sich gut f\u00fcr die Erstellung dynamischer Webseiten, da es alle daf\u00fcr erforderlichen Technologien umfasst. Bei der Erstellung von Webseiten wird dadurch mehr Flexibilit\u00e4t erm\u00f6glicht.\n<\/p>\n
Bedeutung f\u00fcr die SEO<\/span><\/h2>\n
Da DHTML JavaScript einsetzt, ist es f\u00fcr die SEO wichtig dessen Funktionsweise zu verstehen. Eine falsche Implementierung von JavaScript kann bei Suchmaschinen-Crawlern zu Problemen beim Rendern der Inhalte f\u00fchren, was die Leistung einer Seite in den SERPs<\/a> beeintr\u00e4chtigen kann.\n<\/p>\n
Die fehlerhafte Implementierung von Elementen, die in DHTML-Seiten verwendet werden, kann zudem im Zusammenhang mit der User Experience<\/a> zu Schwierigkeiten f\u00fchren. So kann eine Website zum Beispiel langsam werden oder bestimmte Ressourcen nicht korrekt anzeigen.\n<\/p>\n
Die Leistung einer Website kann mit DHTML deutlich verbessert werden, wenn sichergestellt wird, dass die verwendeten Funktionen von den wichtigsten Browsern unterst\u00fctzt werden. Dazu ist allerdings ein gewisses Verst\u00e4ndnis der verschiedenen Elemente und Best Practices erforderlich.\n<\/p>\n
Einzelnachweise<\/span><\/h2>\n
    \n
  1. \u2191<\/a><\/span> DHTML Tutorial<\/a> JavaTpoint. Abgerufen am 16. Juni 2021.<\/span>\n<\/li>\n<\/ol>\n
    Weiterf\u00fchrende Links<\/span><\/h2>\n