Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Vortrag HTML, XHTML, DHTML
Seminar Internettechnologie Christian Mielke 04. November 2004
2
Übersicht HTML XHTML DHTML Zusammenfassung Literatur Erklärung Aufbau
Beispiele XHTML Vorteile HTML vs. XHTML DHTML Erklärung Zusammenfassung Vorteile Nachteile Literatur
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 (
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" " <html> <head> <title> Titel der Webseite </title> </head> <body> </body> </html>
7
HTML Aufbau: DTD Strict: <!DOCTYPE HTML PUBLIC
Transitional: Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
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=" <a href="zweiteSeite.html">Hier lang!</a>
13
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>
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" " <html xmlns=" <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
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 />
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: Links:
„HTML & Web-Publishing Handbuch“ (Franzis) „HTML & XHTML“ (DPunkt) „HTML & XHTML: Definitive Guide (O‘Reilly) Links:
Ähnliche Präsentationen
