HTML
Was ist HTML?
HTML ist eine Seitenbeschreibungssprache, die zum Austausch von aufeinander
verweisenden Dokumenten entwickelt wurde.
Wissenschaftliche Dokumente sollten in einem einheitlichen, vernetzten
Format ausgetauscht werden und auf allen Systemen, ANSI-Schwarzweißterminals
genauso wie High-End-Systemen, dargestellt werden können.
Geschichte: Vom Zeitungssatz (Kommunikation zwischen Editor und
Setzer, Layoutkonventionen) über die Anfänge des
elektronischen Publishing bis zur Entwicklung des WWW durch
Tim Berners-Lee 19XX.
HTML 1 enthielt keine Formatierungsmöglichkeiten, nur Struktur.
Alle Tags waren semantisch, d.h. sie sagten etwas über
die Bedeutung des Inhalts aus.
<title>...</title>
Zuerst Netscape und später auch Microsoft erfanden Erweiterungen, um
der Konkurrenz voraus zu sein:
Definition von Schriftarten, Farben, Bilder, Video, blinkender Text, Laufschrift...
Behauptung: Viele dieser proprietären Erweiterungen wiedersprachen
den Wurzeln und dem Sinn von HTML und schadeten der Entwicklung des
Web nachhaltig.
Anstatt auf Standards für eine seperate Layoutsprache (also Stylesheets)
zu setzen, wurden neue HTML-Tags erschaffen: Struktur und Präsentation
wurden vermischt.
Das W3C (World Wide Web Consortium) bemühte
sich um einheitliche Standards – mit mäßigem Erfolg.
Erst in den letzten Jahren wurde der Grad der Einhaltung der gemeinsam
entwickelten Standards immer besser.
Microsoft, IBM, Sun und viele andere Browserhersteller und Internetfirmen
sind im Konsortium vertreten.
→
W3C Homepage
Semantik vs Layout
<strong>Wichtiger Text</strong>
Dem Browser bleibt überlassen, wie er den Inhalt anzeigt:
Fett, gross, bunt, betont,...
Dieser Tag hat z.B. auch eine Bedeutung für Browser mit Sprachausgabe.
<b>Fett geschriebener Text</b>
Ist nicht mehr semantisch, sondern eine Layoutanweisung ohne
inhaltliche Bedeutung.
HTML+Layout
HTML ist nicht PDF, war nie zum Layouten gedacht.
Die Möglichkeiten sind eingeschränkt, das Medium hat seine eigenen
Regeln.
Man suchte Wege, mit HTML genau zu formatieren, wie Designer
es vom Papier gewohnt waren. Die Methoden:
- Tabellen in Tabellen in Tabellen in ...
- Blind GIFs (durchsichtig, 1x1px)
Ein durchsichtiges GIF kann man ohne Speicher- oder Ladeaufwand
auf eine beliebige Größe strecken und als
Abstandhalter, Zwischenraum usw. verwenden.
Ein großer Nachteil von Tabellen: Anstatt dass sich die Seite
progressiv aufbaut, werden sie werden erst dann angezeigt, wenn ihr
gesamter Inhalt geladen ist.
Solche Hacks lieferten selten auf allen Browsern die
exakt gleichen Ergebnisse ⇒ Kopfweh! Teilweise wurden
unterschiedliche Versionen für unterschiedliche Browser nötig.
Enter XHTML.
Neue Alternative: (X)HTML+CSS.
Trennung von Inhalt+Design.
Semantisches Markup.
HTML 4 von 1997 ist die endgültig letzte Version der
Sprache, aber immer noch die meistverwendete im Web.
Aktuell sind XHTML 1.0 und 1.1 sowie CSS1 und CSS2.
Die Unterschiede zwischen HTML 4 und XHTML 1 sind gering
und leicht zu lernen. XHTML ist quasi ein »strengeres« HTML4.
XHTML beschreibt Inhalt
CSS beschreibt welcher Inhalt wie aussieht
Vorteile
Erhöhte Maschinenlesbarkeit
→ Suchmaschinen, vorlesende Browser für Blinde,...
Möglichkeit, das gleiche Dokument mit unterschiedlichem
Design zu verwenden
→ Versionen für PDA & Handy, Druckversion (automatisch),
benutzerwählbare Skins,...
Ein Stylesheet formatiert die gesamte Website
→ Einfacheres Updaten des Designs, geringere Ladezeit
Rückwärtskompatibilität
Auch ohne CSS ist der Inhalt logisch strukturiert lesbar
Genaueres Design
CSS bietet pixelgenaue Positionierung, Zeilen- und
Zeichenabstände, usw.
...ist die Zukunft!
→ große XHTML-konforme Websites sind noch selten,
werden aber immer mehr.
Nachteile
Unterstützung durch alte Browser:
Netscape 4 macht nur Unsinn
IE 5 hat gewisse Eigenheiten
Unterstützung durch aktuelle Browser:
IE 6 hat zwar eine gute Basis, ist aber momentan am weitesten
hinten, leider noch mind. 2 Jahre
WYSINWYG
Keiner der aktuellen Editoren unterstützt oder vereinfacht
die Methode ausreichend.
???
Web vs. Print
Man kann sich im Web auf nichts verlassen:
Auflösung, Fenstergröße, Schriftarten, Farbtiefe, installierte Plugins, Gamma,...
User hat Einfluss auf Aussehen: Fenstergröße, Schriftgröße,...
Diesen Einfluss kann man nicht unterbinden, man sollte ihn
schon bei der Konzeption beachten.
Genauso kann man übrigens nicht verhindern, dass jedes
ins Web gestellte Bild und jede Zeile HTML-Code kopiert
und abgespeichert werden können.
Flüssiges Design ist möglich
***Beispiele
Interaktivität & Animation
Farben: »Webfarben« sollen überall gleich aussehen —
mittlerweile ziemlich vernachlässigbar
Popups mit fixer Größe sind kein Ausweg:
Usability!
Erklärung
Navigation & Struktur
Auf jeder Seite muss man sehen:
- Wo bin ich
- Was gibt es hier
- Wo kann ich hin
»Mystery meat«-Navigation vermeiden
Hervorhebung der aktuellen Seite im Menü
...in CSS:
Breadcrumbs:
Seitenname > Kategorie > Unterkategorie > Seitentitel
Hyperlinks
Aussagekräftige Wörter verlinken
Spielplan statt Um unseren Spielplan zu sehen klicken Sie hier.
Von normalem Text abheben, nichts anderes unterstreichen