HTML – wo bleibt das Design? - Bachelor Journalismus und PR

Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
HTML – wo bleibt das Design?
Alles in „Times New Roman“?
Unser erster HTML-Code ist einfach ausgefallen. Und das sieht man ihm
auch an: Alle Texte auf der Side sind gesetzt in einer einzigen Schrift.
Das Prinzip der logischen Auszeichnungssprache HTML
Design-Überlegungen waren keine Triebfeder bei der Entwicklung des
”Ur-HTML“. HTML war – und ist im Grundsatz bis heute – konzipiert als
„logische Auszeichnungssprache“.
Was aber ist eine logische Auszeichnungssprache?
Eine logische Auszeichnungssprache definiert Text-Bestandteile nach
ihrer strukturellen Eigenart, nach ihrer Informations-Funktion – und eben
NICHT nach ihrem Aussehen, ihrer Farbe, ihrer Schriftart.
Logik-Beispiele
Eine Überschrift erster Ordnung wird – wie gezeigt – beispielsweise in
HTML bezeichnet mit <h1>, ein Absatz mit <p>, ein Link mit <a>.
Damit ist aber nur die Text-Eigenschaft geklärt – nicht ihr Aussehen! Es
zählt bei der HTML-Definition also nicht die Optik, sondern die inhaltlichstrukturelle Funktion (die inhaltliche LOGIK) des jeweils definierten
Abschnitts.
Diese Schlichtheit der Bezeichnung war erst die Voraussetzung für den
Siegeszug des Internets. Denn nur durch diese Schlichtheit konnte HTML
zur „Weltsprache“ werden. Weil HTML eben Texte und Seiten auf ihr
schlichtes „Struktur-Gerippe“ reduziert. Und deswegen mit jedem simplen
Text-Editor geschrieben werden kann. Was wiederum heißt: Um Webseiten zu schreiben, braucht es kein teures Programm.
Physische Beispiele
Das Gegenteil der „logischen“ HTML-Auszeichnung ist die „physische“.
Beispiele sind die (heute ungebräuchlichen) Tags <b> („bold“ – fett), <i>
(„italic“ – kursiv) oder <font> (Schriftart), die Mitte der 1990er aufkamen. Diese Tags beschreiben nicht mehr die Text-Eigenschaft, sondern das
Text-Aussehen. Damit aber sind sie (unerwünschterweise) „physisch“.
Logische Auszeichnung vs. physische Auszeichnung
Wo eine Überschrift nur mit <h1> bezeichnet wird, ist Design-Kontrolle
kaum möglich. Folge: Anfang der 1990er Jahre stellten manche Browser
zum Beispiel den Tag <h1> gefettet dar, manche mager, manche riesengroß, manche dezent vergrößert. Und alle Browser stellten <h1> in der
Schriftart dar, die der Browser-Besitzer als Standardschriftart eingestellt
hatte; meistens war das „Times New Roman“.
Designer und Werber fordern: Design-Kontrolle!
Die wenigen Webdesigner und Werbechefs, die sich Mitte der 1990er mit
Webdesign befassten, forderten zunehmend: Kontrolle übers Design!
Schließlich wurde das Web kommerzieller: Optische Zuverlässigkeit war
gefragt. Die HTML-Erfinder – die meisten Informatiker, nicht Designer –
reagierten zurückhaltend.
12
Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
1992: Das Netz wird physisch
Netscapes Revolution
Da gründete ein junger Programmierer namens Marc Andreesen 1992
eine Firma, nannte sie „Netscape“, und erfand einfach neue Tags. Da der
HTML-Code ja „open source“ war und ist, fiel ihm dies nicht schwer. So
kannte der wirklich revolutionäre Browser „Netscape Navigator“ zum
Beispiel das Tag <font> – eine Definition der Schrift, in der ein Abschnitt
dargestellt werden sollte.
Mit logischer Auszeichnung hatte das nichts mehr zu tun. Die HTML-Pioniere protestierten. Aber Netscape hatte schon 1995 einen Marktanteil von
96 % mit dem „Navigator“. Der Weg ins gestalterische Web war geebnet.
Mitte der 1990er: Alles fliegt auseinander
Ein Logik-Physis-Mischmasch
Der Browser-Krieg
Etwa ab 1995 gab es de facto kein einheitliches HTML mehr. Neben
Netscape trat der „Internet Explorer“ auf den Markt und eroberte dank der
Koppelung an „Windows 95“ rasch Marktanteile.
Da die Browser-Herstellung von Tim Berners-Lee bewusst offen („open
source“) konzipiert war, führten beide Browser stetig neue, meist „physische“ Tags in ihre Browser ein. Das W3C konnte nur zusehen, wie HTML
in immer mehr „Dialekte“ diffundierte – und immer mehr „physische“
Befehle sich mit „logischen“ vermischten.
Für Webdesigner hieß das damals: Jede Seite zwei Mal konstruieren.
Einmal für Netscape, einmal für den Internet Explorer.
Achtung: dies ist ein N E G A T I V E S Beispiel !!! Nicht zu Hause nachmachen !!! O U T !!!
Mitte bis Ende der 90-er Jahre war die Ära der „Monstercodes“.
Aufgeblähte Codes
Netscape hat 1995 den Tag <font> eingeführt – gegen den Widerstand
des W3C. Die Folge waren ziemlich aufgeblähte Quelltexte:
<font face=“Arial,Helvetica“ size=“5“ color=“#ff0000“
align=“center“>
Merkel besucht Bush
</font>
<br>
<font face=“Times“ size=“1“ color=“#000000“>
Die Kanzlerin hat den US-Praesidenten besucht.
</font>
... und dieser Tag-Wust musste für jeden typografischen Stilwechsel neu
definiert werden.
Das W3C räumt auf
Eine Lösung musste her, das war allen Beteiligten klar. Das W3C gewann
schrittweise die Deutungshoheit zurück. Mit einer guten Idee: Physisches
und logisches HTML wieder so klar wie möglich zu trennen.
1997 stellte das W3C die „Cascading Style Sheets“ (CSS) vorgestellt. Die
zweite Web-Revolution.
13
Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
Die Lösung: Cascading Style Sheets (CSS)
Trennung von Logik und Physis
Back to the roots
1997 stellte das W3C die „Cascading Style Sheets“ (CSS) vor. Der wichtigste Erfolg dieser Neuerung: Logische und physische Angaben wurden
wieder konsequent voneinander getrennt im Quellcode.
Zunächst einmal freilich sieht alles nur ein bisschen anders aus als oben:
Beispiel
<h1 style=“font-family:Arial,Helvetica; fontsize:20px; color:#ff0000;text-allign=“center“>Merkel
besucht Obama</h1>
Beispiel
<p style=“font-family:Georgia; font-size:12px;
color:“#000000“;text-align=“left“>Die Kanzlerin hat
den US-Praesidenten besucht.</p>
Der entscheidende Vorteil: Auslagerung von Stilen
Schlanker Code
Der entscheidende Vorteil von CSS ist, dass Stile prinzipiell nur einmal
definiert werden müssen, und nicht in jedem Tag aufs Neue. Nach einmaliger Definition können Sie beliebig oft angewendet werden. Das macht
den Code schlank und übersichtlich. Und ein Relaunch kann ganz schnell
gehen.
Style Sheets sind also beispielsweise den „Absatzformaten“ in InDesign
sehr verwandt.
Beispiel
Im folgenden Beispiel werden die Tags h1 und p zentral im head-Bereich
des HTML-Codes definiert (hier: h1 bekommt die Schriftart „Arial“, p die
Schriftart „Georgia“). Einmal definiert, werden diese Vorgaben bei jedem
Auftreten von h1 beziehungsweise p im weiteren Quellcode angewandt.
<head>
<style type=“text/css“>
h1 { font-family:Arial; }
p { font-family:Georgia; }
</style>
</head>
<body>
<h1>Merkel besucht Obama.</h1>
<p>Die Kanzlerin besucht US-Praesidenten.</p>
</body>
Definitions-Orte für CSS
Drei Orte für Ihre CSS-Definition
Webdesign ohne Verwendung von CSS gilt heute als unprofessionell.
Doch wo sollten Sie Ihre Anweisungen platzieren? Es gibt drei Varianten:
•
•
•
direkt im Tag (gilt als unelegant und umständlich)
<h1 style=“color:blue;“>Guten Tag</h1>
im Kopfbereich der HTML-Seite (im Bereich <head> also, zweite Wahl)
h1 { color:blue; font-weight:bold; }
in einer externen CSS-Datei (gilt heute als Standard)
h1 { color:yellow; font-style:italic; }
14
Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
Definitions-Orte für CSS (Fortsetzung)
Variante 1: Stil direkt im Tag definieren
Unelegant, ineffizient Die uneleganteste und am schwersten zu beherrschende Variante. Entscheidender Nachteil: Es muss immer wieder die gesamte Definition
geschrieben werden. Fehleranfällig, mühsam, sorgt für große Quellcodes.
Beispiel
<h1 style=“font-family:Arial;“>Headline in Arial</h1>
Variante 2: Stile im HTML-Kopf definieren
Besser, aber nicht gut Verbreitete und bewährte Methode. Nachteil: Bei Änderungen muss auf
JEDER Seite eines Webauftritts der <style>-Bereich geändert werden.
Die Definitionen des Bezugs-Befehls (h1 bzw. .vorspann in diesem
Beispiel) nennt man „Selektoren“. Steht innerhalb des Tags head:
Beispiel
<style type=“text/css“>
h1 {
font-family:Georgia,Times New Roman;
}
.vorspann {
font-family:Verdana,Arial;
}
</style>
<body>
<h1>Headline in Georgia</h1>
</body>
Variante 3: Stile in separater CSS-Datei definieren
Gängig und elegant
Gängigste Methode. Entscheidender Vorteil: Änderungen müssen nur in
der externen CSS-Datei vorgenommen werden und wirken dann sofort auf
alle Seiten, die sich auf diese Datei beziehen.
Beispiel CSS-Datei
Hier der Inhalt der separaten CSS-Datei namens „mein_stil.css“. Die Definitionen des Bezugs-Befehls (h1 in diesem Beispiel) nennt man „Selektoren“.
h1 {
font-family:Georgia,Times New Roman;
font-size:18px;
}
Beispiel HTML-Datei Aufruf der Stildatei meine_stile.css in der eigentlichen HTML-Datei:
<head>
<link rel=“stylesheet“ type=“text/css“
href=“mein_stil.css“>
</head>
Mix der Varianten: möglich
Keine oder obigen drei Varianten schließt eine andere aus. Sie können
also Teile der CSS-Anweisungen in einer eigenen Datei ablegen und einige direkt im HTML-Code nachschieben.
Widersprechen sich zwei Anweisungen, so gilt stets diejenige, die dem
Aufruf in HTML zeilenräumlich am nächsten steht.
15
Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
CSS-Definitionen zuweisen
Drei Formen der CSS-Zuweisung
Es existieren drei Formen von CSS-Zuweisungen:
• Zuweisung an einen HTML-Tag
• Zuweisung an eine Klasse
• Zuweisung an eine ID
1. Zuweisung an einen HTML-Tag
Sie können CSS-Zuweisungen an einen klassischen HTML-Tag anbinden.
Beispiel mit h1 als „Selektor“ und Definition in geschweiften Klammern:
Beispiel
<head>
<style type=“text/css“>
h1 {
font-family:Georgia;
font-size:18px;
}
</style>
</head>
...
<h1>Headline in Georgia, 18 Pixel</h1>
2. Zuweisung an eine Klasse
Oft möchte man mehrere Stilformen eines Tags bestimmen. So kann ein
Text beispielsweise einen Vorspann und einen Haupttext besitzen – aber
beides sind Absätze, gehören also formal korrekt zum Tag <p>.
In derlei Fällen ist es unmöglich, nur den Tag <p> einmalig zu beschreiben. Also definiert man so genannte „Klassen“, deren Namen Sie frei
erfinden können.
Der Punkt ist wichtig! Beachten Sie den Punkt, der jede Klasse erst als solche definiert!
Man spricht ASCII!
Auch bei der Klassen-Benennung gilt: Halten Sie sich an die Beschränkungen des ASCII-Codes. Nennen Sie also eine Klasse nie „überschrift“ oder
„fließtext“ – „ü“ und „ß“ sind NICHT Teil des ASCII-Codes. „ueberschrift“
und „fliesstext“ muss es heißen.
Keine Leerzeichen!
Klassen-Namen sollten immer zusammenhängende Zeichenketten sein
– ohne Leerzeichen. Also NICHT: „kleine schlagzeile“ als Klassen-Name,
sondern, z.B. „kleine_schlagzeile“ oder „kleineSchlagzeile“ oder „klSchZ“.
Beispiel
Beispiel mit .vorspann und .haupttext als so genannten Selektoren:
<style type=“text/css“>
.vorspann {
font-family:Arial;
font-size:13px;
font-weight:bold;
}
.haupttext {
font-family:Georgia;
font-size:11px;
font-weight:normal;
}
</style>
...
<p class=“vorspann“>Vorspann in Arial 13 px fett.</p>
<p class=“haupttext“>Text in Georgia 11 px mager.</p>
16
Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
CSS-Definitionen zuweisen (Fortsetzung)
3. Zuweisung an eine ID
Eine ID ist vergleichbar mit einer Klasse in Ihrem HTML-Dokument – einziger, aber bedeutender Unterschied: eine Klasse darf beliebig oft im Code
stehen, eine ID nur EINMAL (ist also eindeutig zuzuweisen).
Die Raute ist wichtig! Beachten Sie die Raute (#), die jede ID erst als solche definiert!
Beispiel
Beispiel mit #vorspann als so genanntem Selektor:
<style type=“text/css“>
#vorspann {
font-family:Arial;
font-size:13px;
}
</style> ...
<p id=“vorspann“>Vorspann in Arial 13 px.</p>
Abwägung Klasse–ID Im Rahmen reinen HTML/CSS-Designs sind IDs nicht von herausragender
Bedeutung. Ich empfehle Ihnen, zunächst nur Klassen zu verwenden.
Maßeinheiten in HTML/CSS
Viele Bezeichnungen
So viele Einheiten
Grundsätzlich gibt es in CSS kaum eine Maßeinheit, die es nicht gibt.
<p style=“font-size:12px;“>Text in 12 Pixel.</p>
<p style=“width:90.5pt;“>Absatz 90,5 Punkt breit.</p>
<p style=“height:10.2cm;“>Absatz 10,2 Zentimeter.</p>
Ich empfehle Ihnen, vorläufig ausschließlich mit der Maßeinheit „Pixel“
(„px“) zu arbeiten. Maßeinheiten-Mixe sorgen oft für Unübersichtlichkeit.
Übersicht über die HTML/CSS-Maßeinheiten
Folgende Einheiten werden offiziell von HTML/CSS „verstanden“:
px
pt
pc
in
cm
mm
em
%
ex
Pixel (1 Bildschirmpunkt)
Punkt (0,356 Millimeter)
Pica (12 Punkt)
Inch (Zoll, 2,54 Zentimeter)
Zentimeter
Millimeter
Grundeinheit, bezogen auf eingestellte Größe der Standardschrift
Prozent, bezogen auf voreingestellte Größe der Standardschrift
Höhe des Kleinbuchstabens
Vorsicht bei Dezimalwerten!
Halbe Pixel?
Meiden Sie in der Maßeinheit „Pixel“ („px“) Dezimalangaben – „halbe“
Bildschirmpunkte gibt es nicht!
In anderen Einheiten Vergessen Sie nicht, dass im Englischen Dezimaltrennungen mit einem
Punkt bezeichnet werden und nicht, wie im Deutschen, mit einem Komma.
Also NICHT
<p style=“font-size:12,4pt;“>
SONDERN
<p style=“font-size:12.4pt;“>
17
Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
Das HTML/CSS-Boxmodell
HTML-Elemente als „Boxen“
Rechtecke
In HTML bilden sämtliche Elemente ausnahmslos ein Rechteck aus: <p>
beispielsweise, jedoch auch alle <h>-Überschriften, selbstverständlich
die <div>-Tags, ebenso <img>.
Auch, wenn diese Rahmen nicht immer sichtbar sind, so sind sie doch
existent, sobald ein Tag gesetzt ist. Es gibt keinen HTML-Tag ohne Box!
HTML-Boxen sind – so sie Text enthalten – grundsätzlich so hoch, wie es
ihr Inhalt erfordert, und so breit, wie es die Browserfläche zulässt. BildBoxen nehmen grundsätzlich Breite und Höhe des referenzierten Bilds an.
Box-Eigenschaften
Die wichtigsten Eigenschaften einer Box sind, im Schema verdeutlicht:
width: Die Breite des Inhalts
height: Die Höhe des Inhalts
padding: Der Innenabstand (Abstand Boxrand zu Inhalt)
border: Randstärke und -beschaffenheit der Box
margin: Der Außenabstand (Abstand Boxrand zu Nachbar-Element)
Die Besonderheit
Die Gesamtabmessungen einer Box ergeben sich im HTML-Modell so:
Box-Gesamtbreite
Box-Gesamthöhe
Beispiel
Wenn Sie also eine Box einrichten möchten,
• die insgesamt 500 Pixel breit ausfallen soll laut Vorlage
• einen Innenabstand von 12 Pixeln rechts und links aufweisen soll
• und einen umgebenden Rand von durchgehend 2 Pixeln ...
... so sind folgende Angaben korrekt:
=
=
width + padding + border
height + padding + border
width: 472px
padding-left: 12px;
padding-right: 12px;
border: 2px solid black;
Denn: 472px Breite + 12px Innenabstand links und rechts + Randstärke
2px umlaufend ergibt die erwünschten 500px Gesamtbreite!
18
Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
Das HTML/CSS-Boxmodell (Fortsetzung)
Manipulation von Boxen
Abmessungen
Sie können jede der oben angegebenen Eigenschaften über CSS-Anweisungen steuern.
Keine Angaben?
Wenn Sie eine Box nicht selbst (oder nicht komplett) definieren, hat sie
„aus sich selbst heraus“ folgende Eigenschaften:
width: gesamte verfügbare Breite der Browser-Fläche (außer <img>)
height: gesamte für die Darstellung des Box-Inhalts nötige Höhe
padding: null
border: null
margin: bei <p> und <h?> zwischen 6 und 8 Pixel nach oben und
unten (hängt vom Browser ab), ansonsten null
Sonderfall „body“
Bitte beachten Sie: Auch <body> (als Tag der „gesamten für den Nutzer
sichtbaren Fläche“) kennt einen margin (6 bis 8 Pixel, je nach Browser).
Mit der CSS-Anweisung ...
body {
margin: 0px;
}
... stellen Sie sicher, dass Ihr HTML-Inhalt unmittelbar am Browserrand
beginnt und nicht leicht „einrückt“.
Notationen
Einzelnotation
width und height kennen je nur ein Ausmaß, einen Wert.
Anders sieht es bei padding und margin aus: diese Angaben kennen potenziell je vier Dimensionen: oben, rechts, unten und links.
Beispiel
Der Innenabstand soll oben 5px betragen, rechts 3px, unten 2px und links
6px. Dies lässt sich in CSS wie folgt notieren:
Langvariante
padding-top: 5px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 6px;
Die Reihenfolge der Angaben spielt dabei keine Rolle. Anders sieht es aus
in der Kurzvariante dieser Angabe:
Kurzvariante
padding: 5px 3px 2px 6px;
Hier werden de Angaben „top“, „right“, „bottom“ und „left“ in genau
dieser Reihenfolge in einer einzigen Zeile notiert. Dies spart Platz und ist
übersichtlicher.
Umlaufender Rand
Ein umlaufender Rand ist folgendermaßen notierbar:
border: 2px solid black;
Rand nur unten
Ein Rand nur unten (dies als Beispiel) ist auf diese Weise notierbar:
border-bottom: 2px dotted green;
19
Website-Erstellung
Martin Liebig, Institut für Journalismus und PR
Westfälische Hochschule, Wintersemester 2012/2013
Inline- und Block-Elemente in HTML
Mal Absatz, mal Textfluss
Manche Tags in HTML erzeugen automatisch einen Zeilensprung, also
einen Absatz. Andere Tags reihen sich dagegen in den Textfluss ein.
Inline-Elemente
Kein Zeilensprung
Diese Tags erzeugen KEINEN Zeilensprung nach ihrer Beendigung
(Inline-Elemente). Der Textfluss läuft also weiter bei Verwendung dieser
Tags.
Wichtige Beispiele<span>
<a>
<img>
Textbereiche
Verlinkungen
Bilder
Block-Elemente
Zeilensprung
Diese Tags erzeugen IMMER einen Zeilensprung nach ihrer Beendigung
(Block-Elemente).
Wichtige Beispiele <h1>...<h6>
<p>
<div>
<ul>
<li>
<hr />
Alle Überschriften
Absatz
Boxen
Listen
Listenelemente
Horizontale Linie
Umkehrung der Element-Sorte
Wenn Sie ein Inline-Element als Block- oder ein Block als Inline-Element
wünschen (Beispiel: Listenelemente per float nebeneinander und nicht
als Blockelemente untereinander setzen):
Beispiel
<h1 style=“display:inline“>
Block- wird zu Inline-Elemente
Beispiel
<a style=“display:block“>
Inline- wird zu Block-Element
Eine nützliche Voreinstellung
Sämtliche Abstands-Angaben abschalten
Block-Elemente (also vor allem Überschriften und Absätze/paragraphs)
bekommen in verschiedenen Browsern ungefragt Abstände nach oben
und unten zugeteilt. Und zwar in jedem Browser andere Abstände!
Um sicher zu layouten, sollten Sie daher folgende Anweisung an den
Beginn jeder CSS-Datei stellen:
body, p, h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
}
So sorgen Sie dafür, dass zunächst einmal jedes Block-Element ohne jeden Rahmen dargestellt wird. Detailanpassungen können Sie dann später
vornehmen.
20
Martin Liebig, Institut für Journalismus und PR
Website-Erstellung
Westfälische Hochschule, Wintersemester 2012/2013
Kaskadierende Style-Sheets
Das Prinzip der Vererbung
CSS-Anweisungen können „kaskadieren“ – also Eigenschaften an untergeordnete Anweisungen (die so genannten „Tochteranweisungen“) quasi
„wasserfallartig“, also „kaskadierend“ weitergeben.
Folge: kürzere Codes Das ist praktisch, denn so muss man nicht für zwei Stile, die sich nur in
wenigen Eigenschaften – oder gar nur einer – unterscheiden, zwei komplett neue Klassen definieren.
Beispiel CSS-Code
.elternklasse {
font-family:Verdana;
font-size:12px;
margin-top:10px;
}
.elternklasse.tochter {
margin-top:24px;
}
Die Elternklasse .elternklasse vererbt zunächst automatisch alle ihre
Eigenschaften an die Tochter .elternklasse.tochter.
Die Tochterklasse .elternklasse.tochter hat dewegen wie ihre
„Vorfahr“-Klasse .elternklasse die Eigenschaften „Schriftart Verdana“ sowie „Schriftgröße 12 Pixel“. Nur in einem Aspekt unterscheidet sich
.elternklasse.tochter von der Elternklasse: dem Abstand nach
oben („margin-top“).
Der Aufruf von .elternklasse.tochter in einem HTML-Dokument
erfolgt nur bedingt nachvollziehbar, denn hier fallen alle Punkte aus der
Klassen-Benennung weg – und werden durch Leerzeilen ersetzt.
Beispiel HTML-Code <p class=“elternklasse tochter“>Erstes Element</p>
<p
<p
<p
<p
class=“elternklasse“>Zweites Element</p>
class=“elternklasse“>Drittes Element</p>
class=“elternklasse“>Viertes Element</p>
class=“elternklasse“>Fünftes Element</p>
21