Vortrag HTML, XHTML, DHTML Seminar Internettechnologie Christian Mielke 04. November 2004
Übersicht HTML XHTML DHTML Zusammenfassung Literatur Erklärung Aufbau Beispiele XHTML Vorteile HTML vs. XHTML DHTML Erklärung Zusammenfassung Vorteile Nachteile Literatur
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)
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
HTML Aufbau: Allgemein Jede HTML Seite besteht aus den drei Komponenten: Doctype Deklaration HTML-Kopf HTML-Körper
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>
HTML Aufbau: DTD Strict: <!DOCTYPE HTML PUBLIC Transitional: Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!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">
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>
HTML Aufbau: HEAD Bsp. <head> <meta name="author" content=„Max"> <meta name="keywords" content="HTML, Autos, Geld, Spielzeug "> </head>
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
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>
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>
BODY Inhalt: Grafiken einbinden 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. <body> <h1>Hier ist ein Bild:</h1> <img src="computer.gif" alt="Kein Bild da"> </body>
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
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
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
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>
HTML vs. XHTML: Unterschiede Wohlgeformtheit Groß- und Kleinschreibung Attributwerte Keine abgekürzten Attribute Leerzeichen Dateinamen
Unterschiede: Beispiele 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 <p> Absatz </p> <p> noch einer </p> Abgekürzte Attribute: In HTML: <hr noshade> In XHTML: <hr noshade=„noshade“ /> Leere Elemente: In HTML: <hr> In XHTML: <hr></hr> oder kurz <hr />
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
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
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.
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
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“
Literatur und Links Literatur: Links: „HTML & Web-Publishing Handbuch“ (Franzis) „HTML & XHTML“ (DPunkt) „HTML & XHTML: Definitive Guide (O‘Reilly) Links: http://www.w3.org http://www.selfhtml.org