vortrag html, xhtml, dhtml seminar internettechnologie christian mielke 04. november 2004
Post on 05-Apr-2015
110 Views
Preview:
TRANSCRIPT
Vortrag HTML, XHTML, DHTML
Seminar Internettechnologie
Christian Mielke
04. November 2004
Übersicht
HTML Erklärung Aufbau Beispiele
XHTML Aufbau 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:
1. Doctype Deklaration
2. HTML-Kopf
3. HTML-Körper
HTML Dokument
HTMLDoctype
Deklaration
HEAD BODY
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>
Strict:
Transitional:
Frameset:
HTML Aufbau: DTD<!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: BeispieleWohlgeformt:
In HTML toleriert:<i> text <b> text2 </i> </b>In XHTML:<i> text <b> text2 </b> </i>
In HTML:<p> Absatz <p> noch einerIn XHTML:<p> Absatz </p> <p> noch einer </p>
Leere Elemente:
In HTML:<hr>In XHTML:<hr></hr> oder kurz <hr />
Abgekürzte Attribute:
In HTML:<hr noshade>In XHTML:<hr noshade=„noshade“ />
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: „HTML & Web-Publishing Handbuch“ (Franzis) „HTML & XHTML“ (DPunkt) „HTML & XHTML: Definitive Guide (O‘Reilly)
Links: http://www.w3.org http://www.selfhtml.org
top related