Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Vortrag HTML, XHTML, DHTML Seminar Internettechnologie Christian Mielke 04. November 2004."—  Präsentation transkript:

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

2 Übersicht HTML Erklärung Aufbau Beispiele XHTML Aufbau 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 (www.W3.org)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: 1. Doctype Deklaration 2. HTML-Kopf 3. HTML-Körper HTML Dokument HTML HEADBODY Doctype Deklaration

6 HTML Aufbau: Grundgerüst Titel der Webseite

7 Strict: Transitional: Frameset: HTML Aufbau: DTD

8 HTML Aufbau:Kopf (HEAD) Gekennzeichnet durch: und Informationen über die Seite, die nicht zur Darstellung gebraucht werden Browserintern oder in Suchmaschinen verschiedene Elemente:,,,,,,

9 HTML Aufbau: HEAD Bsp.

10 HTML Aufbau: Körper (BODY) Gekennzeichnet durch und 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 Ueberschrift 1. Ordnung Ueberschrift 2. Ordnung Ueberschrift 3. Ordnung Ueberschrift 4. Ordnung Ueberschrift 5. Ordnung Ueberschrift 6. Ordnung

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: GOOGLE Hier lang!

13 BODY Inhalt: Grafiken einbinden Grafiken werden auch referenziert Am besten eignen sich GIF und JPEG Bilder werden mit den Standalone Tag 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. Hier ist ein Bild:

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 Text des Titels

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

19 Unterschiede: Beispiele Wohlgeformt: In HTML toleriert: text text2 In XHTML: text text2 In HTML: Absatz noch einer In XHTML: Absatz noch einer Leere Elemente: In HTML: In XHTML: oder kurz Abgekürzte Attribute: In HTML: In XHTML:

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 (OReilly) Links:


Herunterladen ppt "Vortrag HTML, XHTML, DHTML Seminar Internettechnologie Christian Mielke 04. November 2004."

Ähnliche Präsentationen


Google-Anzeigen