1 / 25

Vortrag HTML, XHTML, DHTML

Vortrag HTML, XHTML, DHTML. Seminar Internettechnologie Christian Mielke 04. November 2004. HTML Erklärung Aufbau Beispiele XHTML Aufbau Vorteile HTML vs. XHTML. DHTML Erklärung Zusammenfassung Vorteile Nachteile Literatur. Übersicht. Was ist HTML?.

nen
Download Presentation

Vortrag HTML, XHTML, DHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Vortrag HTML, XHTML, DHTML Seminar Internettechnologie Christian Mielke 04. November 2004

  2. HTML Erklärung Aufbau Beispiele XHTML Aufbau Vorteile HTML vs. XHTML DHTML Erklärung Zusammenfassung Vorteile Nachteile Literatur Übersicht

  3. Was ist HTML? • Bedeutet HyperText Markup Language • Basiert auf der Metasprache SGML • Hauptsprache des Internet • Wurde vom Begründer des WWW, Tim Bernes-Lee1989 festgelegt • Heute durch das World Wide Web Konsortium in verschiedenen Versionen standardisiert (www.W3.org)

  4. Wofür HTML? • Erfolgreichstes und meist verbreitetes Dateiformat der Welt • Ist ein Klartextformat • Lässt sich daher auch wunderbar von Programmen generieren (Skripte bei Suchmaschinen) • Dient zur Auszeichnung von Textelementen zu Elementen • Weiterleitung zu anderen Dokumenten • Einbindung von Grafiken

  5. HTML Aufbau: Allgemein Jede HTML Seite besteht aus den drei Komponenten: • Doctype Deklaration • HTML-Kopf • HTML-Körper

  6. HTML Aufbau: Grundgerüst <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Titel der Webseite </title> </head> <body> </body> </html>

  7. HTML Aufbau: DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Strict: Transitional: Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  8. HTML Aufbau:Kopf (HEAD) • Gekennzeichnet durch: <head> und </head> • Informationen über die Seite, die nicht zur Darstellung gebraucht werden • Browserintern oder in Suchmaschinen • verschiedene Elemente: <title>, <meta>, <base>, <link>, <script>, <style>, <object>

  9. HTML Aufbau: HEAD Bsp. <head> <meta name="author" content=„Max"> <meta name="keywords" content="HTML, Autos, Geld, Spielzeug "> </head>

  10. HTML Aufbau: Körper (BODY) • Gekennzeichnet durch <body> und </body> • Eigentlicher Inhalt der Seite • Zum Inhalt gehören: Überschriften, Textabsätze, Listen, Tabellen, Verweise, Formulare

  11. BODY Inhalt: Überschriften • Es gibt 6 Ebenen von Überschriften • Damit lassen sich Hierarchieverhältnisse darstellen <body> <h1>Ueberschrift 1. Ordnung</h1> <h2>Ueberschrift 2. Ordnung</h2> <h3>Ueberschrift 3. Ordnung</h3> <h4>Ueberschrift 4. Ordnung</h4> <h5>Ueberschrift 5. Ordnung</h5> <h6>Ueberschrift 6. Ordnung</h6> </body>

  12. BODY Inhalt: Verweise • Verweise bieten die beste Möglichkeit zur Strukturierung eines Web-Projektes • Verweise zu eigenen HTML-Seiten, oder zu einer Stelle auf der gleichen HTML-Seite, oder aber auch zu anderen Homepages • Syntax für Verweise immer die gleiche Bsp. für einen Link zu einer anderen Homepage: Bsp. für einen Link zu einer anderen eigenen Seite: <a href="http://www.google.de">GOOGLE</a> <a href="zweiteSeite.html">Hier lang!</a>

  13. BODY Inhalt:Grafiken einbinden <body> <h1>Hier ist ein Bild:</h1> <img src="computer.gif" alt="Kein Bild da"> </body> • Grafiken werden auch referenziert • Am besten eignen sich GIF und JPEG • Bilder werden mit den Standalone Tag <img> eingebunden. Kein Gültigkeitsbereich und kein End-Tag. • Beinhaltet zwei Attribute die Pflicht sind: src und alt • Weitere Attribute können noch angegeben werden, wie z.B. Höhe und Breite um schon vor dem Laden Platz zu schaffen.

  14. Wofür HTML nicht ist • Anforderungen im Web wachsen. HTML bietet aber nur eine gewisse Strukturierung und auch die Einbindung von mehr Dateiformaten muss ermöglicht werden => XHTML • HTML 4.0 Standard erlaubt keine optische Gestaltung von Text (3.2 tut das noch) und Interaktion fehlt => DHTML

  15. Von HTML zu XHTML • HTML dient zur Strukturierung basierend auf SGML • XHTML ist Neuformulierung von HTML basierend auf XML • XHTML 1.0 verwendet die HTML 4.01 Tags in den XHTML-DTDs • Durch Modularisierung abspecken oder erweitern möglich (extensible) • XHTML 1.1 nur noch die STRICT DTD von HTML und somit nicht mehr abwärtskompatibel

  16. Vorteile von XHTML • Durch Formulierung einer XML-DTD ist es erlaubt Tools zu verwenden die auf XML basieren • Hersteller von Browsern müssen strenge Regeln von XML einhalten. Verdrängt nicht-standardkonforme Seiten. Browser benötigen nicht mehr so viel Speicherplatz • XML erlaubt Modularisierung. Dadurch Erweitern oder Beschränken möglich

  17. Aufbau von XHTML <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Text des Titels</title> </head> <body> </body> </html>

  18. HTML vs. XHTML: Unterschiede • Wohlgeformtheit • Groß- und Kleinschreibung • Attributwerte • Keine abgekürzten Attribute • Leerzeichen • Dateinamen

  19. Unterschiede: Beispiele Abgekürzte Attribute: In HTML: <hr noshade> In XHTML: <hr noshade=„noshade“ /> Leere Elemente: In HTML: <hr> In XHTML: <hr></hr> oder kurz <hr /> Wohlgeformt: In HTML toleriert: <i> text <b> text2 </i> </b> In XHTML: <i> text <b> text2 </b> </i> In HTML: <p> Absatz <p> noch einer In XHTML: <p> Absatz </p> <p> noch einer </p>

  20. Optische Gestaltung und Interaktion: DHTML • Keine HTML Erweiterung • Elemente der Seite „dynamisch“ ändern • Riesengroße Möglichkeiten • Programmieren in JavaScript • Browser setzen dynamisches HTML unterschiedlich um • Erfordert mehr Kenntnisse

  21. DHTML:Document Object Model (DOM) • Eine Norm mit der Scriptsprachen auf Elemente einer Auszeichnungssprache zugreifen können • Definiert Objekte, Eigenschaften und Methoden • In MS IE 5.0 und Netscape 6.0 • Dadurch vorgegeben wie DHTML in Zukunft aussehen soll

  22. DHTML:Funktion von DOM • Sprache als Baumstruktur darstellbar • Zentrales Objekt von DOM ist node • Elementknoten, Attributknoten, Textknoten • Knoten lassen sich dann durch Methoden in JavaScript verändern • Dadurch ist es möglich einzelne Elemente einer Seite zu verändern.

  23. Zusammenfassung: Positiv • HTML: • Strukturierung von Textteilen • Verweise, Grafiken, Tabellen, Formulare, Frames • XHTML: • Nutzt HTML Tags • Einhaltung von Standards • Kann erweitert werden, mehr Möglichkeiten • DHTML: • Erlaubt grafische Gestaltung • Erlaubt dem Nutzer Interaktion • Kürzere Ladezeiten

  24. Zusammenfassung: Negativ • HTML: • Kein grafisches Design • Keine anwendungsspezifischen Lösungen • Zu komplex für „kleine Geräte“ • XHTML: • Erfordert Kenntnisse im Erstellen von DTDs • Erfordert hohe Aufmerksamkeit beim Editieren • DHTML: • Programmierkenntnisse in Scriptsprachen gefragt • Sehr aufwendig • „Browserkrieg“

  25. Literatur und Links • Literatur: • „HTML & Web-Publishing Handbuch“ (Franzis) • „HTML & XHTML“ (DPunkt) • „HTML & XHTML: Definitive Guide (O‘Reilly) • Links: • http://www.w3.org • http://www.selfhtml.org

More Related