Vortrag HTML, XHTML, DHTML

Download Report

Transcript Vortrag HTML, XHTML, DHTML 

Vortrag
HTML, XHTML, DHTML
Seminar Internettechnologie
Christian Mielke
04. November 2004
Übersicht
HTML




Erklärung
Aufbau
Beispiele






Aufbau
Vorteile
HTML vs. XHTML


Erklärung
Zusammenfassung

XHTML

DHTML
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
HTML
HEAD
Doctype
Deklaration
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>
HTML Aufbau: DTD
Strict:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Frameset:
<!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:
<a href="http://www.google.de">GOOGLE</a>
Bsp. für einen Link zu einer anderen eigenen Seite:
<a href="zweiteSeite.html">Hier lang!</a>
BODY Inhalt:
Grafiken einbinden
<body>
Grafiken
werden auch referenziert
<h1>Hier ist ein Bild:</h1>
 Am besten eignen sich GIF und JPEG
<img src="computer.gif" alt="Kein Bild da">
 Bilder werden mit den Standalone Tag <img>
</body>
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.
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/xhtml1transitional.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:
Abgekürzte
Attribute:
Leere
Elemente:
In HTML
HTML:toleriert:
<i>
<b> text2 </i> </b>
<hr text
noshade>
<hr>
In XHTML:
<i>
<b>
</b>
<hr text
noshade=„noshade“
<hr></hr>
odertext2
kurz <hr
/></i>
In HTML:
<p> Absatz <p> noch einer
In XHTML:
<p> Absatz </p> <p> noch einer </p>
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:




XHTML:



Kein grafisches Design
Keine anwendungsspezifischen Lösungen
Zu komplex für „kleine Geräte“
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