Konzept

CERN
Hypertext-Dokumente im Internet
plattformunabhängig

Name: WWW

Mosaic Browser

einfaches HTML

viele Erweiterungen
heute ein gängiger Standard

HTML definiert durch eine XML Dokument-Typ-Definition

wichtigste Erweiterungen im Bereich CSS (Animationen) und JavaScript (Client-lokaler Speicher)

Frühe Entwicklung wie bei BASIC:
jede Firma baut ihren eigenen Dialekt,
während des Browserkriegs Ende der '90er Jahre insbesondere MS & Netscape

beschreibt die Struktur eines Dokuments
nicht die Darstellung

von Struktur und Präsentation

dies war die ursprüngliche Idee

diese Idee ist mit der Kommerzialisierung des WWW systematisch zerstört worden

Cascading Style Sheets (CSS) bieten wieder die Möglichkeit, Struktur und Layout sauber zu trennen

im Dokument beschrieben

im Browser
Fonts, Farben, Bilder, Zeilenumbruch, Textausrichtung, ...

ASCII Terminals: Lynx

Bildschirmauflösung beliebig
640x480, 800x600, 1024x968, 1280x1024, ...

im Dokument reiner 7-Bit ASCII Text
keine Ligaturen, keine Umlaute im zu Grunde gelegten Zeichensatz

in XHTML: Beliebige Zeichencodierung durch Codierungsattribut möglich

Strukturinformation und Inhalt gemischt

Strukturinformation streng hierarchisch

kein WYSIWIG

Gefahr bei WYSIWIG:

WYSIATI

What You See Is All There Is
Strukturinformation nicht mehr vorhanden

<elemName attrName="value">...</elemName>

Strukturinformation besteht aus Klammerstruktur von tags

sehr viele Elemente

unterschiedliche Attribute und Attribut-Wert Paare

tags müssen korrekt geschachtelt sein
Rümpfe dürfen nicht überlappen,
sondern müssen ineinander enthalten sein

bei HTML

Groß- und Kleinschreibung bei Elementnamen nicht signifikant

Groß- und Kleinschreibung bei Attributnamen nicht signifikant

in XML und damit auch in XHTML ist Groß- und Kleinschreibung signifikant

Groß- und Kleinschreibung bei Werten signifikant
insbesondere bei Dateinamen in Attributwerten bei a-Elementen

Ende-tags: </name>

einfache Elemente: kein Ende-tag (nicht in XML erlaubt)

Beispiele: <br> <img ...> <p>

in XML keine einfachen Elemente, nur eine Abkürzung für Elemente mit leerem Rumpf

<name attr="value"/>

als Abkürzung für

<name attr="value"></name>

im Text müssen durch Ersatzsequenzen beschrieben werden

&lt;

&gt;

&quot;

&amp;

&apos;

dieses sind die einzigen in XML vordefinierten Ersatzsequenzen

&Auml; &Ouml; &Uuml; &auml; &ouml; &uuml; &szlig;

und viele Zeichen mehr sind in HTML und XHTML vordefiniert

numerische Angaben:

&#zahl;

alle Elemente und Attribute, die nicht bekannt sind, werden vom Browser ignoriert

jeder Browser verarbeitet jedes Dokument
keine Fehlermeldungen

jeder Browser verarbeitet Dokumente unterschiedlich
viele syntaktisch falsche HTML-Seiten

jeder Hersteller baut eigene Elemente und Attribute dazu, um "besser" als die Konkurenz zu sein

die gute Darstellung wird Browser-abhängig

viele WWW hosts enthalten mehrere Versionen ihrer Seiten optimiert für MS oder Netscape/Mozilla

Standards benutzen
Standards benutzen
Standards benutzen

Layout wird ausschließlich vom Browser festgelegt

keine Annahmen über ...

... die Breite und Höhe des Papiers

... die Größe der Schrift

... die Art der Schrift

HTML ist keine Seitenbeschreibungssprache

von Layout-Anweisungen

(geschachtelte) Tabellen

1 pixel transparentes GIF

<img width="..." height="...">

<font size="..." face="...">

diese HTML-Elemente und Attribute sollten nicht mehr verwendet werden

die Struktur eines Dokuments wird durch die Pseudo-Layout-Anweisungen zerstört

für den Entwurf von HTML Seiten

keine absoluten Maße für Seitenaufteilung und Schriftgrößen verwenden, sondern immer mit relativen Maßen arbeiten

keine feste Schrift definieren, sondern nur allgemeine Schriftarten:
mit/ohne Serifen, feste/variable Buchstabenbreite

Formatierungsanweisungen nur mit CSS realisieren und in Stylesheet Dateien auslagern

keine Browser-Weichen in HTML-Seiten

Keep It Simple and Stupid

besser

Keep It Simple and Elegant

Gutes Design ist immer einfach und elegant

Man ist fertig mit einem Design, wenn man nichts mehr weglassen kann.