Das Studienheft und seine Teile sind …. INT03B...INT03B 1 Einleitung INT03BCSS – Cascading Stylesheets1115A04 Dieses Studienheft beschäftigt sich mit Cascading Stylesheets (Kaskadierende

$

Das Studienheft und seine Teile sind urheberrechtlich geschützt. JedeNutzung in anderen als den gesetzlich zugelassenen Fällen ist nichterlaubt und bedarf der vorherigen schriftlichen Zustimmung desRechteinhabers. Dies gilt insbesondere für das öffentliche Zugänglich-machen via Internet, Vervielfältigungen und Weitergabe. Zulässig istdas Speichern (und Ausdrucken) des Studienheftes für persönlicheZwecke.

INT03B

Internet-Grundlagen

CSS – Cascading Stylesheets

1115A04

Simone Zimmermann

©

Falls wir in unseren Studienheften auf Seiten im Internet verweisen, haben wir diese nach sorgfäl-tigen Erwägungen ausgewählt. Auf Inhalt und Gestaltung haben wir jedoch keinen Einfluss. Wir distanzieren uns daher ausdrücklich von diesen Seiten, soweit darin rechtswidrige, insbesondere jugendgefährdende oder verfassungsfeindliche Inhalte zutage treten sollten.

1115

A04

© SGD, 17.01.16, Dorn, Hans-Peter (772587)

INT03B

CSS – Cascading Stylesheets

Inhaltsverzeichnis 1115A04

Einleitung ....................................................................................................................... 1

1 Vorwissen /Grundlegendes ..................................................................................... 3

1.1 Was ist CSS? ................................................................................................ 3

1.2 Entstehungsgeschichte / Versionen ............................................................ 3

1.3 CSS und HTML ........................................................................................... 4

1.4 Vorteile / Grenzen von CSS ......................................................................... 5

1.5 Aufbau einer CSS-Deklaration .................................................................. 6

1.6 CSS einbinden ............................................................................................. 6

1.6.1 Integration von CSS als separate, externe CSS-Datei .............................. 6

1.6.2 Integration von CSS im Dateikopf (head) einer HTML-Datei ................ 8

1.6.3 Integration von CSS innerhalb einer HTML-Datei im Dateikörper (body) ...................................................................................... 9

1.7 Kaskaden ...................................................................................................... 10

1.8 Zentrale Formate definieren ...................................................................... 11

1.8.1 Formate für HTML-Tags definieren .......................................................... 11

1.8.2 Benutzerdefinierte Stile (Klassen) erstellen .............................................. 12

1.8.3 Individualformate (ID) definieren ............................................................. 14

1.8.4 Pseudoformate verwenden ......................................................................... 15

1.9 Verschachtelung/Vererbung ....................................................................... 16

1.10 Kommentare ................................................................................................ 18

Wiederholungsaufgaben .......................................................................................... 19

2 Elemente .................................................................................................................... 20

2.1 Block- und Inline-Elemente (Textlevel-Elemente) ................................... 20

2.2 Box-Modell .................................................................................................. 20

2.3 Elemente positionieren ............................................................................... 21

2.3.1 Positionierung fix, absolut oder relativ ..................................................... 21

2.3.2 Textfluss ....................................................................................................... 23


3 Die Web-Visitenkarte ............................................................................................... 25

3.1 Der Handzettel als Vorlage ......................................................................... 25

3.2 Das geplante Layout ................................................................................... 26

3.3 Strukturierung der Layoutbereiche ........................................................... 27

3.3.1 HTML5 Strukturelemente .......................................................................... 27

3.3.2 Strukturierung der Inhaltsbereiche ........................................................... 28

3.3.3 Strukturierung der Textauszeichnungen mit HTML ............................... 29

INT03B

Inhaltsverzeichnis


3.4 Erstellung der HTML-Datei ........................................................................ 31

3.4.1 Allgemeine Angaben ................................................................................... 31

3.4.2 Übernahme der Strukturierung der Layoutbereiche ................................ 31

Wiederholungsaufgaben ........................................................................................... 40

4 CSS-Formatierungen ............................................................................................... 41

4.1 Größenangaben/numerische Angaben ...................................................... 41

4.1.1 Absolute Angaben ....................................................................................... 41

4.1.2 Relative Angaben ......................................................................................... 41

4.1.3 Schlüsselwörter ............................................................................................ 42

4.2 Farbangaben ................................................................................................. 43

4.3 Breite (width) ............................................................................................... 44

4.3.1 minimale Breite (min-width) /maximale Breite (max-width) ................. 44

4.4 Overflow ....................................................................................................... 47

4.5 Höhe (height) ............................................................................................... 47

4.5.1 minimale Höhe (min-height) / maximale Höhe (max-height) ................ 47

4.6 Positionsart (position) ................................................................................. 48

4.7 Schichtung (z-index) ................................................................................... 49

4.8 Anzeigeart (display) ..................................................................................... 49

4.9 Textfluss (float) ............................................................................................ 50

4.10 Textfluss beenden (clear) ............................................................................ 50

4.11 Hintergründe ................................................................................................ 53

4.11.1 Hintergrundfarben (background-color) ..................................................... 53

4.11.2 Deckkraft/Transparenz (opacity bzw. filter) ............................................. 53

4.11.3 Hintergrundgrafiken (background-image) ................................................ 53

4.11.4 Bildschirmfüllendes Hintergrundbild (background-size) ........................ 54

4.11.5 Farbverläufe (gradient) ................................................................................ 54

4.11.6 Hintergrundbild-Position (background-position) ..................................... 55

4.11.7 Wiederholung (background-repeat) .......................................................... 55

4.12 Schriftformatierung ..................................................................................... 59

4.12.1 Schriftart (font-family) ................................................................................ 59

4.12.2 Schriftgröße (font-size) ............................................................................... 61

4.12.3 Schrift-/Textfarbe (color) ............................................................................ 61

4.12.4 Schriftstil (font-style) .................................................................................. 61

4.12.5 Schriftgewicht (font-weight) ...................................................................... 61

4.13 Textdekoration (text-decoration) ............................................................... 66

4.14 Textausrichtung ........................................................................................... 66

4.14.1 Horizontale Ausrichtung (text-align) ........................................................ 66

4.14.2 Vertikale Ausrichtung (vertical-align) ....................................................... 66

4.15 Textumbruch (white-space) ........................................................................ 67

4.16 Texteinrückung (text-indent) ...................................................................... 67

4.17 Schatten (text-shadow/box-shadow) ......................................................... 68

4.18 Zeichenabstand (letter-spacing) ................................................................. 68

4.19 Wortabstand (word-spacing) ...................................................................... 70

4.20 Zeilenhöhe (line-height) ............................................................................. 71

INT03B

Inhaltsverzeichnis


4.21 Listen ............................................................................................................ 72

4.21.1 Darstellungstyp (list-style-type) ................................................................ 72

4.21.2 Darstellungstyp: eigenes Bild (list-style-image) ....................................... 73

4.21.3 Listeneinrückung (list-style-position) ....................................................... 73

4.22 Außenabstand (margin) .............................................................................. 74

4.22.1 Außenabstand nach oben (margin-top) .................................................... 74

4.22.2 Außenabstand nach rechts (margin-right) ............................................... 74

4.22.3 Außenabstand nach unten (margin-bottom) ............................................ 74

4.22.4 Außenabstand nach links (margin-left) .................................................... 74

4.23 Innenabstand (padding) .............................................................................. 78

4.23.1 Innenabstand nach oben (padding-top) .................................................... 78

4.23.2 Innenabstand nach rechts (padding-right) ............................................... 78

4.23.3 Innenabstand nach unten (padding-bottom) ............................................ 78

4.23.4 Innenabstand nach links (padding-left) .................................................... 79

4.24 Rahmen (border) ......................................................................................... 83

4.24.1 Rahmentyp (border-style) .......................................................................... 83

4.24.2 Rahmendicke (border-width) ..................................................................... 84

4.24.3 Rahmenfarbe (border-color) ...................................................................... 85

4.24.4 Rahmen – Bilder (border-image) ............................................................... 85

4.24.5 Rahmen – abgerundete Ecken (border-radius) ........................................ 86

4.25 Zeitliche Übergänge (transition) ................................................................ 88

4.26 Transformieren (transform) ....................................................................... 89

4.27 Der „Pfiff“ zum Schluss .............................................................................. 89


5 Überprüfung der Darstellung ................................................................................. 93

5.1 Validatoren ................................................................................................... 93

5.2 Browser ........................................................................................................ 94


Anhang

A. Lösungen zu den Wiederholungsaufgaben ............................................... 109

B. Literaturverzeichnis .................................................................................... 112

C. Abbildungsverzeichnis ............................................................................... 115

D. Sachwortverzeichnis ................................................................................... 116

E. Einsendeaufgabe ......................................................................................... 119

INT03B


INT03B


INT03BCSS – Cascading Stylesheets1115A04

Einleitung

Dieses Studienheft beschäftigt sich mit Cascading Stylesheets (Kaskadierende Stilvor-lagen), abgekürzt CSS. Es werden Ihnen die wichtigsten und gebräuchlichsten CSS-An-gaben vorgestellt und anhand praktischer Beispiele erläutert.

Fundierte Kenntnisse zu CSS sind für Sie, wenn Sie mit HTML zu tun haben, von sehr großer Bedeutung. Denn HTML erhält erst in Verbindung mit CSS seine volle Wir-kungskraft.

Meist gibt es mehrere Wege, die zu einem gewünschten Ziel führen. Manchmal finden sich die betreffenden Angaben schnell, eventuell muss man aber auch erst Verschiedenes ausprobieren, bis man die richtige Kombination gefunden hat.

Bei CSS-Angaben gilt, ebenso wie für HTML: Ausprobieren!

Neben der unumgänglichen Theorie zu CSS und dem Zusammenspiel mit HTML wird, um die Theorie etwas aufzulockern, zur praktischen Übung begleitend eine Web-Visi-tenkarte für das fiktive Umzugsunternehmen „ReinInsNeueHeim GmbH“ erstellt.

Da je nach Unterstützung neuer auf dem Markt erscheinender Browserversionen und CSS-Versionen in unregelmäßigen Abständen neue CSS-Angaben hinzukommen oder interessant werden, weil sie von immer mehr Browsern verarbeitet werden können, er-hebt das Studienheft keinen Anspruch auf Vollständigkeit. Vielmehr hilft es beim Ein-stieg in die Thematik und schafft ein solides Basiswissen, das jedoch die regelmäßige Weiterbildung anhand einschlägiger Referenzen nicht ersetzen kann.

Umfangreiche Informationen, Hilfen und Referenzen finden Sie beispielsweise auf den Websites

http://www.css4you.de/

http://wiki.selfhtml.org/wiki/Startseite

http://www.w3schools.com/cssref/default.asp

http://www.drweb.de/magazin/category/design/html-css/

Zur Web-Visitenkarte einige Vorabinformationen:

Eine Web-Visitenkarte zeichnet sich dadurch aus, dass sie einfach gehalten und meist auf eine oder lediglich sehr wenige Seiten beschränkt Informationen über das Unterneh-men und seine Dienstleistungen liefern soll.

Die fertige Web-Visitenkarte ist unter http://www.ReinInsNeueHeim.de/2.0 erreichbar.

Die beiden Grafiken, die für die Erstellung der Web-Visitenkarte benötigt werden, fin-den Sie im heftbezogenen Downloadbereich Ihrer Online-Lernplattform.

Und nun viel Spaß mit dem vorliegenden Studienheft!

INT03B 1





http://www.ReinInsNeueHeim.de/2.0

Einleitung


2 INT03B

1


1 Vorwissen /Grundlegendes

Bevor man HTML und CSS praktisch umsetzen kann, ist es wichtig, sich ein we-nig theoretisches Grundwissen anzueignen, um die Zusammenhänge zu verste-hen. Die praktische Arbeit geht umso besser von der Hand, je genauer man das Zusammenspiel zwischen HTML und CSS versteht.

Außerdem muss man die Struktur und den Aufbau von CSS und CSS-Definitio-nen verstehen, um syntaktische Fehler bei der Arbeit zu vermeiden.

Also zunächst ein paar Grundlagen!

1.1 Was ist CSS?

Bei CSS („Cascading Stylesheets“, übersetzt „Kaskadierende Stilvorlagen“ bzw. „Format-vorlagen“) handelt es sich um eine Formatierungssprache, die primär als Ergänzungs-sprache zu HTML eingesetzt wird. Beim Einsatz von CSS werden Formatvorlagen defi-niert und genutzt, um Funktionalitäten von HTML zu erweitern. Mit ihnen kann man weiterreichende Formateigenschaften einzelner HTML-Elemente definieren. Der ent-scheidende Vorteil liegt dabei darin, dass nicht für jedes HTML-Tag bzw. für jedes Ele-ment innerhalb eines HTML-Dokuments eine eigene Formatvorlage erstellt werden muss, sondern eine einmal erstellte Formatvorlage für mehrere HTML-Tags genutzt werden kann.

Will man bspw. die Schriftfarbe für alle Überschriften der 2. Ordnung <h2> innerhalb eines oder sogar mehrere HTML-Dokumente einheitlich gleich, z. B. grün definieren, ge-nügt es diese CSS für das <h2>-Tag einmal in einer separaten CSS-Datei zu definieren und diese mit den entsprechenden HTML-Dokumenten zu verknüpfen. Alle in den HTML-Dokumenten vorkommenden Überschriften, die mit <h2> ausgezeichnet worden sind, erscheinen dann einheitlich grün! Ebenso wirkt sich eine erneute Änderung oder Ergänzung dieser CSS-Angabe dann auch auf alle <h2>-Überschriften aus!

1.2 Entstehungsgeschichte / Versionen

Zuständig für die Standardisierung und Spezifizierung ist das W3-Konsortium (World Wide Web Consortium, http://www.w3.org/), das auch HTML-Standards verabschiedet.

CSS in der Form, die heute genutzt wird, wurde 1994 von Håkon Wium Lie vorgeschla-gen. Ziel war es „Regeln zu definieren, die über mehrere Stylesheets hinweg vererbt wer-den konnten“.

Ende 1996 wurde in Zusammenarbeit mit dem W3C CSS1 dann veröffentlicht. Es folgte Mitte 1998 CSS2, sowie die Zwischenversion CSS2.1, die die fehlerhafte Darstellung bzw. Nichtinterpretation einiger Techniken durch die Browser korrigieren sollte. An CSS3 wird seit 2000 gearbeitet.1

Im Gegensatz zu CSS1 und CSS2 ist CSS3 modular aufgebaut. Es wird für CSS3 dement-sprechend keine allgemeingültige Spezifikation geben, vielmehr werden einzelne Teil-techniken in Modulen zusammengefasst weiterentwickelt und mit Versionsnummern

1. Quelle: Wikipedia, http://de.wikipedia.org/wiki/Cascading_Style_Sheets, Stand 09/2015

INT03B 3

http://www.w3.org/

http://de.wikipedia.org/wiki/Cascading_Style_Sheets



versehen standardisiert werden. Deshalb ist es auch nicht weiter verwunderlich, dass Vertreter der CSS-Arbeitsgruppe des W3C betonen, dass es kein CSS4 geben wird, son-dern eine Weiterentwicklung der einzelnen Module.

Viele neue Funktionen von CSS3 werden bereits von modernen Browsern interpretiert, allerdings handelt es sich hierbei um unterschiedliche Browser und unterschiedliche Funktionen. Bis alle Browser soweit in der Lage sein werden alle Funktionen korrekt darzustellen wird es noch einige Zeit dauern.

Informationen zu CSS3, dem Entwicklungsstand einzelner Module und zur Browserun-terstützung finden Sie bspw. unter http://www.w3schools.com/cssref/css3_browsersupport.asphttp://www.w3.org/Style/CSS/current-work.de.html.

1.3 CSS und HTML

Während man mit HTML ein Dokument strukturiert und logisch einteilt, dient CSS der individuellen Anpassung des Erscheinungsbildes einer HTML-Datei.

HTML-Dokumente lassen sich selbstverständlich auch ohne CSS erstellen und im Brow-ser darstellen, die optische Gestaltung ist dann jedoch weitestgehend von den Vorein-stellungen und der Interpretation des Browsers abhängig, der sie darstellt. Wenn Sie z. B. für ein Dokument einen Text definieren, wird dieser in der Schriftgröße angezeigt, die entweder voreingestellt wurde oder die der User individuell über die Einstellungen im Browser ausgewählt hat.

CSS-Angaben haben eine höhere Priorität als die standardmäßig im Browser eingestell-ten Werte für z. B. Schriften (Schriftart/-größe; Hintergrund-/Textfarbe etc.). Dies er-möglicht eine genaue Definition des Erscheinungsbildes von Seitenelementen (z. B. Ab-sätze, Listen) und typografischen Elementen (z. B. Laufweite von Schriften, farbige Hervorhebungen).

Mit HTML strukturieren Sie einen Text in Textbereiche, Überschrift(en), Absätze, Listen, Tabellen, Zitate, Grafiken, Bilder, etc. Dies erfolgt durch den Einsatz semantisch logi-scher HTML-Tags. Mit CSS geben Sie diesem strukturierten Text dann ein ansprechen-des, benutzerfreundliches Erscheinungsbild.

Es gab zwar früher einige Tags, wie beispielsweise das <font>-Tag und das <center>-Tag, die einen Einfluss auf das Erscheinungsbild eines HTML-Dokuments hatten, diese wur-den aber ab der Version HTML 4 abgeschafft.

Während Hochkommata bei Attributen von HTML-Tags bei HTML standardkonform sind, werden bei CSS-Definitionen Attribute nicht in Hochkommata gesetzt. Ausnahme ist die Angabe von Schriftarten, die im Namen Leerzeichen enthalten, wie beispielsweise „Times New Roman“.

Hinweis:

Da HTML bei Element- und Attributnamen zwischen Groß- und Kleinschreibung unterscheidet, ist es sinnvoll, alle Codeangaben durchgängig klein zu schreiben, um Fehler zu vermeiden! Eine Ausnahme bildet hier die Schriftart, deren Name nach wie vor groß geschrieben werden kann.

4 INT03B

http://www.w3.org/Style/CSS/current-work.de.html

http://www.w3schools.com/cssref/css3_browsersupport.asp

Vorwissen /Grundlegendes 1


1.4 Vorteile / Grenzen von CSS

Die Vorteile, die die Arbeit mit CSS bieten, liegen auf der Hand:

• Verringerung der Ladezeiten, da Formatvorlagen nur einmal aufgerufen und geladen werden

• Ein HTML-Dokument kann mehrere CSS enthalten, ein CSS aber auch für mehrere HTML-Dokumente genutzt werden (seitenübergreifend einsetzbar).

• Möglichkeit, bestehende HTML-Dokumente nachträglich mit Tag-Formatierungen zu versehen

• Einheitliche Gestaltung, Erweiterung und Pflege der Website wird vereinfacht

• Ab CSS2 können die Stylesheets für verschiedene Medien entworfen werden (z. B. Bildschirmausgabe oder Druckerausgabe).

• Es können Stile (engl. Style = Stil, Format) für einzelne Elemente, aber auch für Gruppen definiert werden.

• Beim Einsatz externer CSS-Dateien wird der Quellcode der HTML-Datei(en) kleiner.

• Die Einheitlichkeit des Textlayouts ist leichter zu realisieren und zu pflegen.

• CSS bieten umfangreichere Layoutmöglichkeiten als nur HTML.

• CSS in Verbindung mit HTML ermöglicht validen (entsprechend der W3C-Stan-dards korrekt erstellten) standardkonformen Code.

• Es lassen sich rein CSS-basierte Animationen erstellen, bei denen auf JavaScript oder Flash verzichtet werden kann.

Neben den Vorteilen gibt es einige Grenzen, denen CSS unterworfen ist. Hier wird be-wusst nicht von Nachteilen gesprochen, da CSS prinzipiell ein sehr gutes Konzept dar-stellt.

Die Grenzen liegen zum einen in den Browsern begründet. Nicht alle CSS-Angaben wer-den von allen Browsern einheitlich interpretiert und dargestellt. Besonders ältere Brow-ser stoßen schnell an ihre Grenzen, weil sie mit neueren CSS-Angaben nichts anfangen können. Aber auch neue, aktuelle Browser sind meist nicht in der Lage ausnahmslos alle CSS-Angaben vollständig und korrekt anzuzeigen.

Darüber hinaus gibt es bei fast allen Browsern Fehler (sogenannte Bugs) in der Darstel-lung bestimmter CSS-Angaben oder bestimmter Kombinationen verschiedener CSS-An-gaben.

Deshalb ist es wichtig, die Darstellung in verschiedenen Browsern und Browserversio-nen zu überprüfen und ggf. für spezielle Browser anzupassen.

Im Internet gibt es jedoch zahlreiche Websites, die die häufigsten Bugs und ihre Behe-bung (sogenannte Workaround) beschreiben.

INT03B 5



1.5 Aufbau einer CSS-Deklaration

Der Aufbau eines CSS ist immer identisch:

Selektor { Eigenschaft: Wert; Eigenschaft: Wert; }

Eine CSS-Definition für das <h2>-Tag kann bspw. folgendermaßen aussehen:

h2 {font-family:Verdana;font-size:30px;font-style:normal;font-weight:normal;color:#666666;

}

Variante Kurzschrift

CSS können auch in einer Kurzschriftform geschrieben werden.

Oben gezeigte CSS-Definition für das <h2>-Tag in Kurzschrift:

h2 {font:Verdana 30px normal;color:#666;

}

Bei Verwendung der Kurzschrift werden den ausgelassenen Werten automatisch ihre Standardwerte zugewiesen.

1.6 CSS einbinden

Es gibt drei Möglichkeiten der Integration von CSS:

• Als separate, externe CSS-Datei, verknüpft mit einer HTML-Datei,

• im Dateikopf (head) einer HTML-Datei,

• innerhalb einer HTML-Datei im Dateikörper (body).

Alle drei Möglichkeiten können auch gemischt werden, was man jedoch vermeiden soll-te, da dadurch der Vorteil der Übersichtlichkeit und leichten Pflege verloren geht.

1.6.1 Integration von CSS als separate, externe CSS-Datei

In der Regel wird man einheitliche Formate für alle HTML-Dateien eines Projekts wol-len. In diesem Fall müssen die Angaben nicht in jeder Datei wiederholt werden. Die CSS werden in einer externen CSS-Datei definiert und in jede gewünschte HTML-Datei ein-gebunden. Wenn Angaben in dieser separaten Datei geändert werden, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen diese CSS-Datei eingebunden wurde.

Innerhalb der externen CSS-Datei (eine Textdatei mit der Endung .css) stehen lediglich die CSS-Definitionen ohne weitere HTML-Befehle, also nur CSS-Definitionen und Kommentare, nichts anderes.

6 INT03B



Die externe CSS-Datei wird über einen <link>-Tag (engl. link = Verweis) im Dateikopf der HTML-Datei eingebunden.

Dieser <link>-Tag enthält die Angaben href="***.css" (engl. hyper reference = Hyper-text-Referenz), rel="stylesheet" (engl. relation = Bezug) sowie type="text/css" (engl. type = Typ).

Ein Beispiel einer CSS-Definition für das <h2>-Tag, innerhalb einer externen CSS-Datei (hier test.css):

h2 {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:30px;font-style:normal;font-weight:normal;color:#666666;

}

Inhalt der dazugehörigen HTML-Datei:

<!doctype html><html><head><meta charset="utf-8"><title>CSS in separater Datei definieren und einbinden</title><link href="test.css" rel="stylesheet" type="text/css"></head><body><h2> Überschrift 2. Ordnung in grau </h2></body></html>

Wenn in eine HTML-Datei eine externe CSS-Datei eingebunden ist, wird der <style>…</style>-Bereich im Dateikopf nicht benötigt, außer man möchte in dieser HTML-Datei weitere, zusätzliche CSS-Definitionen machen, die nur diese Datei betreffen.

Dies sollte man allerdings vermeiden, sonst gehen die Vorteile der leichten Pflegbarkeit und Übersicht sowie des kleineren Quellcodes schnell wieder verloren und man verzet-telt sich!

Natürlich kann eine HTML-Datei auch mit mehreren externen CSS-Dateien verknüpft werden. So ist es bspw. möglich, für den Ausdruck einer Datei Formatvorlagen zu defi-nieren, die unwichtige Elemente ausblenden, Elemente neu anordnen, für den Druck ge-eignetere Farben darstellen usw. Kurz gesagt eine druck-freundliche Version des Inhalts bereitstellen.

…<title>CSS in separater Datei definieren und einbinden</title><link href="main.css" rel="stylesheet" type="text/css" media="screen"><link href="druck.css" rel="stylesheet" type="text/css" media="print"></head>…

INT03B 7



Folgende Angaben sind seit CSS2 prinzipiell möglich, werden aber von älteren Browsern teilweise nicht korrekt interpretiert2:

Eine weitere Möglichkeit der Verknüpfung einer HTML-Datei mit externen CSS-Datei-en besteht in der Einbindung mittels @import-Anweisung. Dazu wird im Kopf der HTML-Datei jedoch wieder der <style>…</style>-Bereich benötigt.

Auch hier können eine oder mehrere externe CSS-Dateien eingebunden werden.

…<title>CSS in separater Datei definieren und einbinden</title><style type="text/css">@import url("main.css") screen;@import url("druck.css") print;</style></head>…

Die beiden anderen Möglichkeiten, CSS-Angaben für eine Datei zu machen, werden der Vollständigkeit halber nun auch noch beschrieben. Am sinnvollsten ist es aber, konse-quent auf den Einsatz externer CSS-Dateien zu setzen, weil dies für die Erstellung und Pflege am besten und in Kombination mit HTML standardkonform ist.

Hinweis:

Lediglich zur Veranschaulichung und leichteren Erläuterung wurde bei den Beispie-len in diesem Kapitel die Einbindung der CSS-Definitionen im Dateikopf gewählt.

1.6.2 Integration von CSS im Dateikopf (head) einer HTML-Datei

Es ist möglich, innerhalb einer HTML-Datei CSS-Angaben zu definieren. Mit dem Be-fehl <style>…</style> im Kopf der HTML-Datei wird ein Bereich für die entsprechenden CSS-Definitionen bestimmt.

Im einleitenden <style>-Tag wird der Typ der Formatdefinition angegeben. Hier ge-schieht dies durch die Angabe type="text/css".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!doctype html><html><head><meta charset="utf-8"><title>CSS in einer HTML-Datei im Dateikopf</title><style type="text/css">h2 {

font-family:Verdana, Arial, Helvetica, sans-serif;font-size:30px;

2. Quelle: SELFHTML, http://wiki.selfhtml.org/wiki/CSS/Media_Queries, 2014

media="all" für alle Medientypen, Standardwertmedia="print" für Druckermedia="screen" für Bildschirmemedia="speech" für Sprachsynthesizer

8 INT03B

http://wiki.selfhtml.org/wiki/CSS/Media_Queries



font-style:normal;font-weight:normal;color:#666666;

}</style></head><body><h2> Überschrift 2. Ordnung in grau </h2></body></html>

Eine solche CSS-Definition im Dateikopf ist für die entsprechenden Tags innerhalb die-ser Datei (und nur für diese Datei) anwendbar!

1.6.3 Integration von CSS innerhalb einer HTML-Datei im Dateikörper (body)

Möchte man innerhalb einer HTML-Datei nur ein bestimmtes HTML- oder Text-Ele-ment in seinem Erscheinungsbild ändern, kann man dies über ein CSS an der entspre-chenden Stelle im Dateikörper. Die CSS-Definition wird mittels des Attributs „style=“ direkt in das entsprechende Tag eingefügt. Nach „style=“ werden dann die gewünschten Formatierungen notiert.

Eine solche CSS-Definition im Dateikörper ist aber nur an der Stelle der Definition und nur für dieses Tag anwendbar!

Deshalb sollte man diese Form der Einbindung einer CSS-Definition gar nicht einsetzen, weil sie sehr aufwändig in der Pflege ist und durch die Vermischung von Inhalt und Er-scheinungsbild auch nicht standardkonform!

<!doctype html><html><head><meta charset="utf-8"> <title>CSS innerhalb einer HTML-Datei im Dateikörper</title></head><body>…<h2 style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:30px; font-style:normal; font-weight:normal; color:#666666;">Überschrift 2. Ordnung in grau </h2>…</body></html>

Ebenfalls nicht empfehlenswert, aber möglich, ist es, CSS-Definitionen an beliebigen Stellen innerhalb des normalen Textes einzufügen. Dafür steht das <span>-Tag (engl. span = spannen) zur Verfügung, es ermöglicht bestimmten Textteilen oder Elementen eine CSS-Zuweisung. Mit <span style="…">… </span> können also bspw. Textabschnitte innerhalb anderer HTML-Tags formatiert werden.

<!doctype html><html>

INT03B 9



<head><meta charset="utf-8"> <title>CSS innerhalb einer HTML-Datei mittels Span-Tag</title></head><body>…<h2> Überschrift 2. Ordnung dank span-Tag ab <span style="font-weight:bold; color:#66ff00;"> hier nun fett und hellgrün!</span></h2>…</body></html>

Das <span>-Tag ist beispielsweise für den Einsatz unabhängiger Klassen sehr nützlich. Die CSS-Angaben werden jedoch in der externen CSS-Datei notiert.

1.7 Kaskaden

Kaskadierend bedeutet im Zusammenhang mit Cascading Stylesheets, dass mehrere An-gaben zur Definition des Erscheinungsbildes eines Elements vom Browser „nacheinan-der“ abgearbeitet werden.

Sind CSS für verschiedene Medientypen vorhanden, werden zunächst alle CSS-Defini-tionen für den aktuellen Medientyp gesucht.

Danach werden alle Standardformatierungen des Browsers für Tags (bspw. für die Dar-stellung der Überschriften), für die entsprechende CSS-Angaben explizit mittels CSS de-finiert worden sind, überschrieben. Hier gibt es jedoch eine Einschränkung: In den meis-ten Browsern kann der Betrachter eigene Angaben, u. a. zur Schriftart und Schriftgröße machen und explizit untersagen, dass diese Angaben von CSS-Definitionen überschrie-ben werden.

Als Nächstes wird überprüft, wie spezifisch die CSS-Angaben sind. Wird bspw. eine all-gemeine CSS-Definition für eine ungeordnete Liste (ul) gemacht, erhalten alle in der HTML-Datei vorkommenden Listen das gleiche Erscheinungsbild. Wird aber darüber hinaus bspw. für eine Liste im Kontaktbereich (#kontakt ul) ein anderes Erscheinungs-bild definiert, ist diese Angabe spezifischer als die allgemeine CSS-Definition für Listen und erhält dementsprechend die spezifischere CSS-Angabe.

Zu guter Letzt wird noch die Reihenfolge der Definitionen überprüft. Das heißt, die je-weils zuletzt gegebene Definition für ein Element hat Vorrang vor den anderen.

Wenn bspw. – wovon allerdings abzuraten ist – für ein Element eine CSS-Definition in-nerhalb einer externen CSS-Datei gemacht wird und außerdem sowohl im Dateikopf der HTML-Datei als auch innerhalb des Dateikörpers weitere CSS-Definitionen für dieses Element eingefügt werden, dann gilt: Inline vor zentral vor extern!

Die direkt im Code eingefügten CSS-Definitionen überschreiben die im Dateikopf ein-gefügten Angaben, sowie die Angaben der externen CSS-Datei.

Oder anders herum: Die Angaben der externen CSS-Datei werden zuerst von den An-gaben im Dateikopf und dann von den Angaben im Dateikörper überschrieben.

10 INT03B



Somit wird auch deutlich, warum man diese Arten der Einbindung von CSS-Definitio-nen nicht mischen sollte. Man kann sich schnell heillos verzetteln, wenn Änderungen nicht angezeigt werden, weil man sie an der falschen Stelle gemacht hat.

1.8 Zentrale Formate definieren

Es gibt verschiedene Möglichkeiten, CSS innerhalb von HTML zu benutzen:

• Formate für HTML-Tags definieren

Hier wird die Standardformatierung eines HTML-Tags (bspw. des schon oben ge-nannten <h2>-Tags) um eigene CSS-Definitionen erweitert.

• Benutzerdefinierte Stile (Klassen) erstellen

Bei einem benutzerdefinierten Stil handelt es sich um eine Klasse, die mit einem selbst gewählten Namen neu erstellt und innerhalb des HTML-Dateikörpers mittels des Attributs class="…" für Text-Elemente bzw. HTML-Elemente angewendet wer-den kann. Man kann hier unterscheiden zwischen Format- Unterklassen und unab-hängigen Klassen.

• Individualformate (ID) definieren

Individualformate dienen der Kennzeichnung eindeutiger Elemente und werden ty-pischerweise für die Definition von Formaten für Bereiche (Boxen, Container, etc.) genutzt. Wichtig: Die Kennzeichnung darf in einer Datei nur einmal vorkommen.

• Pseudoformate verwenden

Pseudoformate werden für Elemente definiert, die sich nicht durch ein eindeutiges HTML-Tag ausdrücken lassen. In der Regel handelt es sich um die differenzierteren Angaben a:link, a:visited, a:focus, a:hover und a:active des <a>-Tags für Verweise (Links).

Hinweis:

Die Reihenfolge der oben genannten Linkangaben ist wichtig, um eine korrekte Dar-stellung zu erreichen.

Diese Formate werden im Folgenden näher erläutert.

1.8.1 Formate für HTML-Tags definieren

Es können für fast alle HTML-Tags Formate definiert werden, die das grundlegende Er-scheinungsbild verändern und erweitern. Wenn das entsprechende HTML-Tag in der HTML-Datei verwendet wird, werden die Eigenschaften, die für dieses HTML-Tag mit-tels CSS definiert wurden, angewendet.

Dabei gibt es verschiedene Schreibweisen.

Man kann jede Eigenschaft eines HTML-Tags getrennt voneinander definieren.

h3 { color:#0000ff; }h3 { font-family:"Times New Roman"; }h3 { font-style:italic; }

INT03B 11



Es können die verschiedenen Eigenschaften eines HTML-Tags auch gruppiert werden, was die Übersichtlichkeit erhöht und den Quellcode verringert.

h3 {color:#0000ff;font-family:"Times New Roman";font-style:italic;

}

Es ist sogar möglich, mehrere verschiedene HTML-Tags und CSS-Formate zu gruppie-ren.

h2,h3 {color:#0000ff;font-family:"Times New Roman";font-style:italic;

}

In diesem Beispiel werden die CSS für das <h2>-Tag, das <h3>-Tag und das <em>-Tag im HTML-Dateikopf definiert.

<!doctype html><html><head><meta charset="utf-8"> <title> Formate für HTML-Tags definieren </title><style type="text/css">h2 { color:#666666; }em,h3 {color:#0000ff;font-style:italic;}</style></head><body>…<h1>…</h1><h2> Überschrift 2. Ordnung in grau </h2><h3> Überschrift 3. Ordnung in blau, kursiv </h3><p> Dies ist ein Text, der <em>innerhalb dieses em-Tags ebenfalls blau und kursiv dargestellt wird!</em></p>…</body></html>

1.8.2 Benutzerdefinierte Stile (Klassen) erstellen

Für HTML-Tags können zusätzlich Format-Unterklassen definiert werden.

So können beispielsweise für das <p>-Tag zwei Varianten erzeugt werden, etwa eine Va-riante rot und fett und eine Variante grün und kursiv.

Dazu werden Namen für die entsprechenden Unterklassen vergeben.

12 INT03B



Genauer gesagt wird zuerst das Tag (der Selektor) notiert und dann, durch einen Punkt getrennt, der Name der Unterklasse, der frei gewählt werden kann (er darf nur keine Leerzeichen oder Umlaute beinhalten und sollte klein geschrieben werden).

p.rot {color:#ff0000;font-weight:bold;

}

p.gruen {color:#006600;font-style:italic;

}

Innerhalb des Dateikörpers werden diese Unterklassen dann eingesetzt, indem das ent-sprechende Tag mit dem Attribut class=" " und dahinter dem Namen der Klasse notiert wird.

<!doctype html><html><head><meta charset="utf-8"> <title> Formate für HTML-Tags definieren </title><style type="text/css">p.rot {

color:#ff0000;font-weight:bold;

}p.gruen {

color:#006600;font-style:italic;

}</style></head><body>…<p class="rot"> Der Text in diesem Absatz wird rot und fett dargestellt!</p><p class="gruen"> Der Text in diesem Absatz wird grün und kursiv dargestellt!</p>…</body></html>

Ein anderes als das <p>-Tag würde, selbst wenn es class="rot" bzw. class="gruen" als At-tribut erhalten würde, den Text nicht rot bzw. grün darstellen!

Neben der oben beschriebenen Möglichkeit, Unterklassen für bestimmte Tags zu defi-nieren, ist es auch möglich, unabhängige Klassen zu erstellen. Der entscheidende Vor-teil liegt hier in der Unabhängigkeit, d. h., diese Klassen sind nicht an ein bestimmtes Tag gebunden, sondern können mit vielen verschiedenen Tags verknüpft werden.

Sie sind also nicht nur für ein Tag festgelegt und nur für dieses nutzbar, sondern wieder verwendbar.

INT03B 13



.blau { color:#0000ff; }

.durch { text-decoration:line-through; }

Innerhalb des Dateikörpers wird eine unabhängige Klasse eingesetzt, indem für ein be-liebiges, zulässiges Tag das Attribut class="…" und dahinter der Name der Klasse notiert wird.

<!doctype html><html><head><meta charset="utf-8"><title>Benutzerdefinierte Stile (Klassen) erstellen</title><style type="text/css">.blau { color:#0000ff; }.durch { text-decoration:line-through; }</style></head><body>…<ul><li class="blau">Ein Listenpunkt in blau </li><li class="durch">Ein Listenpunkt durchgestrichen</li>

</ul><h3 class="blau"> Eine Überschrift 3. Ordnung in blau </h3><p class="durch">Der Text in diesem Absatz wird ebenfalls durchgestrichen!</p>…</body></html>

Da es sich hier um unabhängige Klassen handelt, können auch andere Tags, wie hier z. B. das <p>-Tag das Attribut class="blau" bzw. class="durch" erhalten!

1.8.3 Individualformate (ID) definieren

Neben der Möglichkeit, unabhängige Klassen mit einem vorangestellten Punkt zu erstel-len (bspw. .blue), können Formate auch mittels eines vorangestellten Rautenzeichens (#) definiert werden. Dann handelt es sich um ein sogenanntes Individualformat.

#gelbeebene {position:absolute;top:0px;left:0px;width:300px;height:60px;background-color:#ffff00;

}

Innerhalb des Dateikörpers wird ein Individualformat mittels des Attributs id="…" no-tiert.

Bei diesem Universalattribut id="…" (engl. identifier = Bezeichner) handelt es sich um einen dokumentweit eindeutigen Namen, also um eine zentrale Formatdefinition für das eine Element mit diesem id-Namen. Wichtig: Ein id-Name kann bzw. darf innerhalb ei-ner Datei immer nur für ein Element benutzt werden.

14 INT03B



Da Individualformate eingesetzt werden, um eindeutige Elemente zu definieren, werden sie beispielsweise für Container genutzt. So wird z. B. ein <div>-Tag, das in einer Website immer die Kontaktinformationen enthält, eindeutig benannt (#kontakt, #kontaktdaten o. ä.). Hat man in einer Website verschiedene Dateien mit den gleichen Kontaktangaben, sollte man diese immer in das <div>-Tag mit derselben id packen.

Dieses Beispiel zeigt die CSS-Definition für eine 300 Pixel breite und 60 Pixel hohe Ebe-ne mit gelbem Hintergrund und einer absoluten Position von 0px zum linken Rand und 0px zum oberen Rand.

<!doctype html><html><head><meta charset="utf-8"> <title> Individualformate definieren </title><style type="text/css">#gelbeebene {

position:absolute;top:0px;left:0px;width:300px;height:60px;background-color:#ffff00;

}</style></head><body><div id="gelbeebene">Eine gelbe Ebene, die ohne Abstand am oberen linken Browserfensterrand absolut positioniert ist! </div></body></html>

1.8.4 Pseudoformate verwenden

Pseudoformate werden für Elemente innerhalb einer HTML-Datei verwendet, die sich nicht durch ein eindeutiges HTML-Tag ausdrücken lassen. Meist werden sie in Verbin-dung mit dem <a>-Tag für Verweise benutzt.

Die Namen hinter dem Doppelpunkt sind nicht frei wählbar, wie bei Klassen, sondern feste, vorgegebene Schlüsselwörter! Wichtig: Die Reihenfolge der Pseudo-Klassen (link – visited – focus – hover – active) muss eingehalten werden, damit sie korrekt im Browser dargestellt werden.

<!doctype html><html><head><meta charset="utf-8"> <title> Pseudoformate verwenden </title><style type="text/css">a:link {

color:blue;text-decoration:none;

}a:visited {

color:black;

INT03B 15



text-decoration:none;}a:focus {

color:red;text-decoration:underline;

}a:hover {

color:red;text-decoration:underline;

}a:active {

color:green;text-decoration:underline;

}</style></head><body>…<p><a href="http://www.reininsneueheim.de/2.0">Verweis</a></p>…</body></html>

Der Verweis im obigen Beispiel erscheint:

• blau, wenn er noch nicht gedrückt worden ist (a:link);

• rot und unterstrichen, wenn man mit der Tabulator-Taste diesen Punkt anspringt (a:focus);

• rot und unterstrichen, wenn man mit der Maus darüber fährt (a:hover);

• grün und unterstrichen, während er gedrückt wird (a:active);

• schwarz, wenn er schon einmal gedrückt worden ist (a:visited).

1.9 Verschachtelung/Vererbung

Wird ein HTML-Tag, für das eine CSS-Definition existiert, in den Dateikörper eingefügt, erhält es die entsprechenden Eigenschaften. Befindet sich nun innerhalb dieses einlei-tenden und abschließenden Tags ein weiteres HTML-Tag, übernimmt es die Eigenschaf-ten des umschließenden Tags (Vererbung) und fügt, wenn eine eigene CSS-Definition vorhanden ist, diese noch hinzu.

Über CSS lässt sich allerdings bestimmen, dass ein solches, in ein anderes HTML-Tag eingefügtes HTML-Tag, nur dann dessen Eigenschaften übernimmt, wenn es sich um ein bestimmtes HTML-Tag handelt.

Hier zur Veranschaulichung ein Beispiel mit den Tags <p> und <em>.

p em { color:#cc3300; }

Die CSS-Definition für das <em>-Tag beinhaltet die Darstellung in einer roten Farbe, aber nur innerhalb eines <p>-Tags!

16 INT03B



Irrtümlicherweise werden das <em>-Tag und das <i>-Tag (ebenso wie das <strong>-Tag und das <b>-Tag) synonym benutzt. Während das <i>-Tag jedoch als Textformatierung gedient und den Text kursiv dargestellt hat (deshalb wurde es jetzt auch aus dem HTML-Code verbannt), zeichnet das <em>-Tag einen Text bzw. Textteil als „betont wichtig“ aus. Die meisten Browser stellen dies zwar kursiv dar, es ist aber keine vorgeschriebene For-matierung, sondern eine logische Textauszeichnung. <strong> bietet dann die Steige-rung als „stark betont“, ersetzt das <b>-Tag und stellt Texte bzw. Textteile in der Regel, ebenfalls aber nicht zwingend, fett dar!

Hier ist beispielsweise die extra erstellte CSS-Definition für das <em>-Tag rot, aber nur innerhalb eines <p>-Tags!

<!doctype html><html><head><meta charset="utf-8"> <title> CSS für verschachtelte HTML-Tags definieren</title><style type="text/css">p {

font-family:Verdana, Arial, Helvetica, sans-serif;font-size:0.8em;color:#333333;

}p em {

color:#CC3300;}</style></head><body>…<p> Ein Absatz, der <em> zusätzlich eine Auszeichnung als betont, wichtig erhält und eine rote Farbe!</em> </p><h1>Innerhalb dieser Überschrift führt die Benutzung desem-Tags lediglich dazu, dass der Text <em> nun hervorgehoben dargestellt wird, nicht aber rot!</em></h1>…</body></html>

Weitere Möglichkeiten der Verschachtelung:

h2 > em { color:#cc3300; }

Hier erhalten <em>-Tags, wenn sie innerhalb eines <h2>-Bereichs vorkommen, die zu-sätzliche Eigenschaft rot.

Aber nur dann, wenn das <em>-Tag innerhalb des <h2>-Bereichs direkt nach dem <h2>-Tag (also eine Ebene unterhalb) eingefügt wird:

<h2><em></em></h2>div * em { color:#cc3300; }

Auch hier erhalten <em>-Tags, wenn sie innerhalb eines <div>-Bereichs vorkommen, die zusätzliche Eigenschaft rot. In diesem Fall jedoch nur dann, wenn das <em>-Tag inner-halb des <div>-Bereichs nach mindestens einem weiteren Element direkt nach dem <div>-Tag (also mindestens zwei Ebenen unterhalb) eingefügt wird, beispielsweise:

INT03B 17



<div><p><em></em></p></div>

Hinweis:

Bei der Verschachtelung von Elementen ist darauf zu achten, dass nicht alle Elemen-te auf diese Weise miteinander kombiniert werden dürfen (siehe hierzu Abschnitt 2.1).

Das Sternchen ist übrigens ein Universalselektor und wird als eine Art universeller Stellvertreter für Selektoren genutzt.

1.10 Kommentare

Innerhalb von <style>…</style> kann mit einem Schrägstrich und einem Sternzeichen „/*“ ein Kommentar eingeleitet werden. Mit der umgekehrten Zeichenfolge „*/“ wird der Kommentar beendet. Genauso werden Kommentare in externen CSS-Dateien eingefügt.

<!doctype html><html><head><meta charset="utf-8"> <title>CSS mit Kommentar</title><style type="text/css">p { color:blue; } /* Format für blauen Text.*/</style></head><body><h2> Überschrift 2. Ordnung </h2><p>Ein Absatz für blauen Text </p></body></html>

HTML-Kommentare hingegen werden folgendermaßen im Quellcode notiert:



Zusammenfassung

Die Kombination von HTML und CSS ermöglicht die Trennung von Struktur und Inhalt und verhilft so zu einem schlanken HTML-Quellcode, sowie zu einer leichten Pflegbar-keit des Erscheinungsbildes eines HTML-Dokuments.

Die Vorteile der Nutzung von CSS wiegen hier weit schwerer als die Grenzen, mit denen man bei der Arbeit mit CSS konfrontiert wird. Es erfordert zwar ein wenig Übung und Erfahrung, um das Zusammenspiel zwischen HTML und CSS auch im Detail zu beherr-schen, man wird jedoch mit einer übersichtlichen Struktur der Dateien und Zeiterspar-nis bei der Pflege entschädigt.

Eine CSS-Angabe besteht immer aus einem Selektor, mindestens einem Attribut und ei-nem Wert.

CSS können in eine oder mehrere externe CSS-Datei(en) ausgelagert werden, diese Me-thode ist die Beste und immer zu empfehlen. Man kann CSS-Angaben aber auch im Kopf einer HTML-Datei notieren oder sogar im Dateikörper.

18 INT03B



CSS-Anweisungen werden kaskadierend, also entsprechend ihres Vorkommens und ih-rer Wichtigkeit von den Browsern nacheinander interpretiert und dargestellt.

Man kann CSS-Angaben für bereits vorhandene HTML-Tags definieren, aber auch un-abhängige Klassen erstellen, sowie Individualformate für eindeutige Elemente festlegen oder Pseudo-Elemente gestalten.

Viele CSS-Angaben lassen sich vererben, sind also nicht nur für ein (Eltern-)Element von Bedeutung, sondern haben auch Einfluss auf dessen untergeordnete (Kind-)Elemen-te.

Wiederholungsaufgaben

1.1 Wie ist eine CSS-Deklaration aufgebaut? Bringen Sie die Einzelteile in ihre korrekte Reihenfolge:

• {

• }

• Eigenschaft

• Selektor

• :

• ;

• Wert

1.2 Warum sollte man CSS-Angaben nicht innerhalb einer HTML-Datei im Datei-körper machen, sondern die Auslagerung in eine externe CSS-Datei vorziehen?

1.3 Nennen Sie die in diesem Kapitel vorgestellten Pseudoformate in der korrekten Reihenfolge.

INT03B 19

2


2 Elemente

Um mit CSS arbeiten zu können, muss man neben der rein formalen Struktur/Syntax auch die beiden Gruppen von Elementen kennen, in die alle Elemente ein-geteilt werden. Ebenso wichtig ist es, das Box-Modell kennenzulernen, sozusagen das gedankliche Modell einer Box, denn als solche werden Elemente bei CSS an-gesehen und behandelt.

2.1 Block- und Inline-Elemente (Textlevel-Elemente)

Elemente lassen sich in zwei Gruppen unterteilen. Die größere Gruppe stellen die Block-Elemente dar, beispielsweise Überschriften, Absätze, Tabellen, Formulare, Lis-ten, Boxen etc. (address, blockquote, div, dl, fieldset, form, h1– h6, hr, noscript, ol, p, pre, table, ul, usw.). Diese werden durch einen Zeilenumbruch voneinander getrennt und da-durch untereinander angeordnet.

Sogenannte Inline-Elemente (auch Textlevel-Elemente genannt), wie Bilder, fett, kur-siv, Links, etc. (a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, text-area, tt, var, usw.), bewirken keinen Zeilenumbruch und werden nebeneinander ange-ordnet. Block-Elemente können Inline-Elemente beinhalten, Inline-Elemente können ebenfalls Inline-Elemente enthalten, jedoch keine Block-Elemente.

Elemente innerhalb einer HTML-Datei werden entsprechend eines (Text-)Flusses ange-ordnet im Browser dargestellt. Dabei werden Elemente allgemein von links nach rechts und von oben nach unten interpretiert und angezeigt.

2.2 Box-Modell

In CSS werden die meisten Elemente als Box (Kasten) dargestellt und behandelt (Abb. 2.1). Jede Box besteht zunächst aus dem Inhalt (dem eigentlichen Element) und ei-nem Rahmen (border), der um diesen Inhalt gezogen werden kann, dem sogenannten Box-Modell. Dies dürfte Ihnen schon von Tabellen oder Grafiken bekannt sein.

Abb. 2.1: Box-Modell grafisch dargestellt

Außenabstand (margin)Rahmen (border)

Innenabstand (padding)

Inhaltsbereich

20 INT03B

Elemente 2


Nun gibt es aber zusätzlich zwischen Inhalt und Rahmen einen Innenabstand (padding), mit dem ein Abstand zwischen Inhalt und Rahmen angegeben werden kann. Das ist bei-spielsweise nützlich, wenn man innerhalb einer Box einen Text einfügt, der nicht direkt links, oben, rechts oder unten an der Boxbegrenzung kleben soll. Zwischen Element und Nachbarelement bzw. Browserfensterrand kann man ebenfalls einen Abstand definie-ren, diesmal einen Außenabstand (margin). Dieser Abstand gibt an, wie viel Platz zwi-schen dem Element und seinem Nachbarelement liegen soll.

Innen- und Außenabstände sind generell transparent.

Ältere Browser, besonders der Internet Explorer bis Version 5.5, hatten hiermit Probleme und den sogenannten Box-Modell-Fehler produziert. Hier wurde der Innenabstand und die Rahmenstärke nicht zur Breite hinzugezählt, sondern von der Boxbreite abgezogen mit der Folge, dass sich die Boxbreite im Gegensatz zur Darstellung in anderen Browsern verändert hat. Der Außenabstand wurde korrekt hinzugezählt.

Es gibt verschiedene Möglichkeiten, diesen Fehler zu umgehen. Da der Internet Explorer 5.5 jedoch nur noch eine Nutzung von ca. 1,3 % hat3, wird hier darauf verzichtet, die verschiedenen Möglichkeiten zu erläutern.

Nähere Informationen zur Beseitigung des Box-Modell-Fehlers finden Sie bspw. unter http://de.selfhtml.org/css/formate/box_modell.htm.

2.3 Elemente positionieren

Elemente lassen sich zum einen ohne feste Wertangaben „im Fluss“ positionieren. Zum anderen können sie aber auch absolut oder relativ innerhalb einer Datei positioniert werden.

2.3.1 Positionierung fix, absolut oder relativ

Statische Layouts werden pixelgenau erstellt, deren Inhalte in der Regel absolut positio-niert. Ein individuelles Vergrößern oder Verkleinern durch den Betrachter ist nicht er-wünscht, häufig auch nicht möglich und wenn doch, dann führt es meist zum Zerschla-gen des Layouts. Flexible Layouts hingegen können individuell angepasst werden, da sie mit relativen Werten arbeiten.

Will man nicht ausschließlich mit relativen Werten arbeiten, ist eine Mischform die Lö-sung, erfordert jedoch ein wenig Übung. Außerdem sollte die Seite dann permanent in verschiedenen Browsern und bei verschiedenen Browserfenstergrößen überprüft wer-den, um unangenehme Überraschungen, bspw. Elemente, die sich plötzlich ungewollt überlagern, zu vermeiden.

Man kann Elemente also pixelgenau, flexibel in Relation zu anderen Elementen bzw. dem Browserfenster positionieren oder fixieren (siehe hierzu Abschnitt 4.6).

3. Quelle: Web-Barometer unter http://www.webhits.de, 09/2015

INT03B 21

#ERROR

http://de.selfhtml.org/css/formate/box_modell.htm

2 Elemente


Es werden jeweils eine oder zwei Positionsangaben gemacht, wo im Browserfenster ein Element angeordnet wird. Diese Koordinaten beziehen sich als Ausgangspunkt auf den Rand des Browserfensters oder eines übergeordneten positionierten Elements (Eltern-element = das übergeordnete Element, in dem das entsprechende untergeordnete (Kind-)Element enthalten ist).

Möglich sind die Angaben

• links (left)

• oben (top)

• rechts (right)

• unten (bottom)

• links und oben (left top)

• links und unten (left bottom)

• rechts und oben (right top)

• rechts und unten (right bottom)

Bei einer absoluten Positionierung wird das Element vollständig aus dem Textfluss he-rausgenommen und genau gemäß der angegebenen Koordinaten positioniert. Alle Ele-mente, die nicht ebenfalls positioniert werden, ignorieren ein absolut positioniertes Ele-ment (es hat also keinen Einfluss auf die Darstellung dieser Elemente) und werden ebenso ignoriert.

Das Element hinterlässt, nachdem es absolut positioniert worden ist, keinen leeren Platz im Elementfluss.

Durch absolute Positionsangaben können Elemente überlagert werden, was eines der Nachteile der absoluten Positionierung ist, wenn nicht alle Elemente genaue Koordina-ten erhalten und das Browserfenster verkleinert wird. Möchte man diesen Effekt der Überlagerung jedoch nutzen, ist die absolute Positionierung von Vorteil.

Ebenso kann man Elemente fix positionieren, die dann absolut positioniert werden, al-lerdings immer in Abhängigkeit vom Browserfenster und nicht von anderen Elementen. Sie werden ebenfalls aus dem Textfluss herausgenommen. Wird die Seite gescrollt, bleibt das Element jedoch immer am selben Platz und bewegt sich nicht mit der Seite nach oben oder unten.

Bei der relativen Positionierung ist der Ausgangspunkt die eigentliche ursprüngliche Position dieses Elements in Bezug auf die anderen Elemente innerhalb des Dokuments (Ausgangsposition des Elements in Bezug auf den Textfluss vor der relativen Positionie-rung).

Obwohl es nach der Verschiebung (Positionierung) an einer anderen Stelle angezeigt wird, behält es im Textfluss seinen ursprünglichen Platz.

Detaillierte Informationen und anschauliche Beispiele zur Positionierung von Elemen-ten finden Sie bspw. unter

http://www.thestyleworks.de/tut-art/layout_div.shtml

http://wiki.selfhtml.org/wiki/Position

http://www.css4you.de/position.html

22 INT03B




Elemente 2


2.3.2 Textfluss

Bei der Positionierung mittels float (siehe hierzu auch Abschnitt 4.9) wird ein Element ebenfalls aus dem Textfluss herausgenommen und links (left) oder rechts (right) positi-oniert. Allerdings werden hier, im Gegensatz zu den oben genannten Arten der Positio-nierung, keine Koordinatenangaben gemacht. Die Ausrichtungen werden meist über Umwege mittels der Angabe zu Abständen und Rahmen vorgenommen.

Der Inhalt der anderen Block-Elemente wird an der Stelle umgebrochen, an dem sich das gefloatete Element befindet. Es nimmt also einen großen Einfluss auf die Elemente und das gesamte Erscheinungsbild.

Soll ein Element gefloatet werden, muss es immer eine Angabe zur Breite erhalten.

Möchte man das Floaten beenden und zum normalen „Fluss“ zurückkehren, setzt man die Eigenschaft clear ein, wobei hier nur links (left), nur rechts (right) oder bei mehreren gefloateten Elementen innerhalb einer Box auch beide (both) Angaben, aufgehoben werden können.

clear in einem Element bewirkt, dass es unterhalb der gefloateten Elemente liegt und von diesen in seiner Erscheinung nicht mehr beeinflusst wird.

Zum Thema „Floating“ finden Sie im Internet umfangreiche Informationen, unter ande-rem bei:

http://www.webwriting-magazin.de/sogehts/csstutorial/tut1.html

http://wiki.selfhtml.org/wiki/Float

Zusammenfassung

CSS teilt Elemente in Block- und Inline-Elemente (Textlevel-Elemente) auf. Während In-line-Elemente in Block-Elementen enthalten sein können oder selbst Inline-Elemente enthalten können, stehen Block-Elemente für sich und können nicht in Inline-Elemente integriert werden.

Block-Elemente werden automatisch durch Zeilenumbrüche voneinander getrennt und untereinander angeordnet. Inline-Elemente dagegen werden im normalen Textfluss ne-beneinander angeordnet, bis das Browserfenster zu Ende ist und dann automatisch um-gebrochen.

Der Textfluss bzw. Elementefluss einer HTML-Datei verläuft normalerweise, wenn nicht anders definiert von oben links zeilenweise bis unten rechts. Man kann Elemente jedoch aus diesem Fluss herausnehmen und individuell im Browserfenster anordnen.

Elemente werden als viereckige Box dargestellt, der Innen- und Außenabstände, sowie ein Rahmen zugewiesen werden kann.

Im nächsten Schritt werden zunächst die vorhandenen Materialien daraufhin überprüft, inwieweit man sie oder zumindest Teile daraus für die Web-Visitenkarte übernehmen kann. Eine Strukturierung der vorhandenen Elemente ermöglicht dann die Erstellung der HTML-Datei, bevor es mittels CSS an die Auszeichnung/Formatierung der Elemente innerhalb der HTML-Datei geht.

INT03B 23


http://wiki.selfhtml.org/wiki/Float

2 Elemente



2.1 Was unterscheidet Block-Elemente von Inline-Elementen (Textlevel-Elemen-te)?

2.2 Welche dieser Elemente sind Inline-Elemente?

• span

• table

• h3

• cite

• br

• img

2.3 Aus welchen Bestandteilen besteht eine Box (Box-Modell)?

2.4 Mit welcher Eigenschaft kann man float beenden?

24 INT03B

3


3 Die Web-Visitenkarte

Ziel einer Web-Visitenkarte ist es primär, im Internet bei einer Suche als poten-zieller Auftragnehmer gefunden zu werden, alle notwendigen Kontaktdaten be-reit zu stellen und im Gesamtbild einen seriösen vertrauenswürdigen Eindruck zu machen.

Da für das Unternehmen ReinInsNeueHeim GmbH der persönliche Kontakt vor Ort ausschlaggebend ist und die meisten Leistungen sehr individuell sind, wer-den nur die wichtigsten allgemeinen Informationen präsentiert.

3.1 Der Handzettel als Vorlage

Zunächst betrachten wir uns den bereits vorhandenen und vom Unternehmen verteilten Handzettel genauer. Er soll als Basis für die Web-Visitenkarte dienen, weil er bisher an Kunden und Interessenten verteilt worden ist. Außerdem finden sich die verwendeten Farben und die Grafik auch auf dem Briefpapier und den Visitenkarten wieder, sowie auf Anzeigen, die in der Presse geschaltet worden sind. Bei den Farben und der Grafik handelt es sich also um ein Corporate Design (CD), das einen Wiedererkennungswert darstellt, eine Corporate Identity (CI).

Die Aufteilung und Strukturierung der Informationen ist auf dem Handzettel schon sehr gut erkennbar und sicher für einen Handzettel nicht schlecht.

Abb. 3.1: Der Handzettel als Vorlage

Texte werden in der Regel durch Überschriften, Absätze, Bilder, Listen, etc. strukturiert. Auch bei dem Handzettel ist die Einteilung in Bereiche schon erkennbar.

INT03B 25



Es gibt oben einen Kopfbereich, der die größte wichtigste Überschrift, eine untergeord-nete kleinere Überschrift, sowie zwei identische Bilder beinhaltet.

Ein Kontaktbereich links enthält erläuternde Informationen zur Kontaktaufnahme, die Kontaktdaten erscheinen als eigener Bereich rechts oben.

Links unten gibt es einen Bereich, der eine Auflistung der Leistungen enthält, diese Leis-tungen werden im Hauptteil in der Mitte aufgegriffen und erläutert.

Ausgewählte zufriedene Kunden kommen rechts in einem eigenen Bereich zu Wort.

Einige Bereiche enthalten ebenfalls Überschriften (fett markierter Text), die den beiden Überschriften im Kopfbereich untergeordnet sind.

Insgesamt ist schon eine recht gute Strukturierung erkennbar, das Layout wird aber noch ein wenig aufgepeppt und an die Gegebenheiten einer Web-Visitenkarte angepasst.

3.2 Das geplante Layout

Da das Unternehmen bisher hauptsächlich über Empfehlungen zufriedener Kunden weiterempfohlen worden ist, ist der Bereich der Kundenstimmen ein wichtiger Aspekt. Die Kundenzufriedenheit zeigt sich unter anderem in vielen positiven Bewertungen bei Bewertungsportalen. Dies ist ein zusätzlicher Grund für eine Web-Visitenkarte, denn In-teressenten, die diese Bewertungen gelesen haben, können sich schnell über die Web-Vi-sitenkarte einen guten Eindruck verschaffen und Kontakt aufnehmen.

Die beiden Kontaktbereiche werden in der Web-Visitenkarte auf der rechten Seite zu-sammengefasst und optisch hervorgehoben, da sie logisch zusammen gehören.

Die Leistungen erhalten ihren Platz oben links, da es sich hier um wichtige Informatio-nen handelt, die an dieser Stelle schnell gesehen werden. Deshalb wird dieser Bereich, ebenso wie der Kontaktbereich, optisch noch hervorgehoben. Außerdem kann er später, falls es Unterseiten geben sollte, gut als Basis für eine Navigation genutzt werden.

Der Kopfbereich erhält einen angenehmen Blauton, der frischer wirkt als der vorher be-nutzte Braunton und beinhaltet weiterhin die beiden Überschriften. Allerdings wird das Bild nur noch einmal angezeigt, eine Wiederholung ist überflüssig.

Ein sogenannter Fußbereich wird ebenfalls eingefügt, der neben dem Namen noch die notwendigen Angaben des Impressums enthält.

Zu guter Letzt wird, um den relativ klaren, schnörkellosen Rahmen aufzulockern und dem Layout noch ein wenig Pfiff zu geben, die Web-Visitenkarte sozusagen eingerahmt. Lassen Sie sich überraschen (oder schauen Sie sich jetzt schon Abb. 4.14 an), wie dies praktisch aussehen soll.

Die Web-Visitenkarte soll zunächst, wie in Abb. 3.2 gezeigt, realisiert werden.

26 INT03B

Die Web-Visitenkarte 3


Abb. 3.2: Das geplante Layout der Web-Visitenkarte

Die beiden Bereiche Kontakt und Leistungen erhalten jeweils zwei abgerundete Ecken.

Bei allen Browsern, die diese CSS3-Angaben noch nicht interpretieren können, werden diese Bereiche mit Ecken angezeigt.

3.3 Strukturierung der Layoutbereiche

Um die Web-Visitenkarte zu realisieren und den Eindruck der modernen Präsenz auch technisch zu bestätigen, wird valider, zugänglicher, semantisch korrekter Code erstellt, indem man HTML und CSS nutzt und Inhalt und Layout trennt. Dazu gehört im ersten Schritt eine klare Strukturierung der Inhalte.

3.3.1 HTML5 Strukturelemente

Grundlagen bezüglich HTML5 und dessen Strukturelementen wurden Ihnen bereits ver-mittelt. Da die Web-Visitenkarte mit HTML5 und CSS3 erstellt wird, dient die folgende Tabelle lediglich zur Auffrischung der Elemente, die hier Verwendung finden werden.

Vertiefende Informationen zu HTML5 finden Sie bspw. unter http://webkompetenz.wikidot.com/docs:html-handbuch.

INT03B 27

http://webkompetenz.wikidot.com/docs:html-handbuch



Viele Bereiche einer Webseite können mithilfe dieser HTML5 Strukturelemente ausge-zeichnet und semantisch sowie logisch korrekt strukturiert werden. Es ist aber nicht zwingend nötig, unbedingt jeden Teil einer Webseite mit diesen Elementen auszuzeich-nen. Manchmal genügt auch ein <div>-Tag, um Inhalte zusammenzufassen, bspw. um diesen bestimmte CSS-Formatierungen zuzuweisen. Dabei spricht man dann von allge-meinen Bereichen.

3.3.2 Strukturierung der Inhaltsbereiche

Die Inhalte werden zusammengefasst und in Blöcke aufgeteilt. Dafür werden HTML5 Strukturlemente und DIVs, also Block-Elemente, die als Container dienen, verwendet.

header Kopfbereich Logisch und semantisch sinnvolle Inhalte des Kopf-bereichs einer Webseite, bspw. die Site-Überschrift oder ein Logo. Nicht zu verwechseln mit dem HTML-Tag <head>!

Kann auch für sections definiert werden.

nav Navigation Top-/Hauptnavigation

main Haupt-bereich

Beinhaltet den inhaltstragenden Bereich einer Web-seite und kommt nur einmal pro Seite vor. Es wird nicht innerhalb von section, article und aside ver-wendet.

section Abschnitt Logisch und semantisch sinnvoll zusammengefasste Webseitenteile, beinhalten i.d.R. eine (oder mehrere) Überschriften und Inhalt.

article Artikel Eigenständiger logischer Teil einer Webseite, bspw. für Kommentare, Blogeinträge, u. Ä.

aside Seiten-bereich

Zusätzliche, ergänzende Informationen, bspw. auch Werbung oder Anmerkungen

footer Fußbereich Logisch und semantisch sinnvolle Inhalte des Fußbe-reichs einer Webseite, bspw. Links zum Impressum, Adressangaben u. Ä.

Kann auch für sections definiert werden.

Gesamt (Div #gesamt)Kopfbereich (header)

Grafik (Div #bild)Linke Spalte (Div #links)

Navigation (nav)Kundenstimmen (aside)

Hauptbereich/Mittlerer Bereich (main)Fließtexht (section)

Rechter Bereich (Div #rechts)Kontaktaufnahme (aside)

28 INT03B



Abb. 3.3: Die Bereiche des Layouts

3.3.3 Strukturierung der Textauszeichnungen mit HTML

Am sinnvollsten ist es, sich die Strukturierung des Handzettels anzusehen und sich die logischen Textauszeichnungen soweit zu verdeutlichen, dass sie in HTML übertragen werden können. Dabei geht es noch nicht um das Erscheinungsbild, sondern lediglich um die Strukturierung.

Die logische Zuordnung der Elemente zu den entsprechenden HTML-Tags:

Kontaktdaten (Div #adresse)Fußbereich (footer)

INT03B 29



Abb. 3.4: Die Strukturierung/Semantik des HTML-Codes

Die Strukturierung der Überschriften, gemäß ihrer Wichtigkeit und logischen Anord-nung:

ReinInsNeueHeim GmbH größte/wichtigste Überschrift

<h1>

Problemlos ReinInsNeueHeim – Wir ziehen für Sie um! zweitgrößte Über-schrift

<h2>

Unsere Leistungen

Kundenstimmen

Umzug – Professionell, schnell und kostengünstig.

Fernumzug – Auf zu neuen Ufern!

Lagerung – Wohin nur mit den ganzen Sachen?

Möbelmontage – Wo sind denn nur die Schrauben?

drittgrößte Über-schriften

<h3>

30 INT03B



3.4 Erstellung der HTML-Datei

Für die Erstellung der Web-Visitenkarte können sie jeden beliebigen Texteditor nutzen. Dafür sind jedoch umfangreiche Kenntnisse in den Bereichen HTML und CSS erforder-lich, da Sie den gesamten Code von Hand eingeben müssen. Spezielle HTML-Editoren vereinfachen jedoch den Editiervorgang.

Tipp:

Falls Sie noch keinen HTML-Editor nutzen, im Internet gibt es neben den kosten-pflichtigen viele kostenlose Editoren zum Download.

3.4.1 Allgemeine Angaben

Um die oben genannte Strukturierung der Inhalte bzw. des Layouts zu realisieren, wird zunächst eine neue HTML-Datei (HTML5) erstellt.

Zu erkennen ist der Dateityp HTML5 an der notwendigen DOCTYPE-Angabe am An-fang des Dokuments. Während bei (X)HTML-Dateien die DOCTYPE-Angabe noch sehr lang war, besteht sie bei einer HTML5-Datei lediglich noch aus der Angabe „html“.

Außerdem ist der Zeichensatz wichtig (charset), damit alle Sonderzeichen im Browser korrekt angezeigt werden. Hier wird der Zeichensatz „utf-8“ gewählt, die mittlerweile am weitesten verbreitete Kodierung für Unicode-Zeichen.

Um einem sehr häufig gemachten Fehler vorzubeugen (Suchmaschinen finden nach wie vor Hundertausende von Seiten mit dem Titel „Unbenanntes Dokument“), wird in das title-Tag gleich der Titel „ReinInsNeueHeim GmbH – Das kompetente Umzugsunter-nehmen in Musterstadt“ eingetragen.

<!doctype html><head> <meta charset="utf-8"><title>ReinInsNeueHeim GmbH - Das kompetente Umzugsunternehmen in Musterstadt</title><link href="main.css" rel="stylesheet" type="text/css"></head>…

Diese Datei wird als index.html am sinnvollsten in einem Projektordner bspw. namens „reininsneueheim“ abgespeichert.

Als nächstes wird eine CSS-Datei erstellt, die zwar noch ohne Inhalt ist, aber schon mit der HTML-Datei verbunden werden kann (siehe Quellcode oben). Diese CSS-Datei er-hält den Namen main.css.

3.4.2 Übernahme der Strukturierung der Layoutbereiche

Die im Abschnitt 3.3.1 strukturierten Inhaltsbereiche werden nun innerhalb der HTML-Datei in ein logisches HTML-Grundgerüst eingefügt.

INT03B 31



Um die Zuordnung zu erleichtern und später einfacher die entsprechenden Angaben in CSS definieren zu können, werden den Containern, also den Divs, gleich IDs zugewie-sen. Diese IDs werden dann später in die CSS-Datei übernommen und um ihre entspre-chenden Eigenschaften und Werte ergänzt. Sie können die IDs aber auch schon zeit-gleich in die HTML-Datei und die CSS-Datei kopieren, um sie später nicht zu vergessen.

Zur Erinnerung:

Jede ID dient der eindeutigen Kennzeichnung eines Elements, ist also einzigartig und kann innerhalb einer HTML-Datei nur einmal verwendet werden. Es dürfen keine Sonderzeichen benutzt werden und die Benennung erfolgt immer in Kleinbuchsta-ben.

Zuerst wird ein allgemeines Div namens #gesamt erstellt, das alle weiteren Elemente be-inhaltet. Dieses Div ist sinnvoll, um die Webseite bspw. zu positionieren oder um ihr ei-nen Gesamtrahmen zu geben.

...</head><body>

<div id="gesamt">…</div>

</body>

Wichtig: Achten Sie darauf, dass jedes Div immer korrekt geschlossen, also um seinen End-Tag </div> ergänzt wird und die Verschachtelung korrekt ist. Um den Überblick über die endenden Div-Tags nicht zu verlieren, ist es außerdem sinnvoll, diese, wie in obigem Beispiel, mit einem Kommentar zu versehen.

Als Nächstes wird header für den Kopfbereich erstellt.

Der Bereich header enthält zum einen einen Bereich #bild, in den die Grafik header.png eingefügt wird. Dieses Bild befindet sich – wie man anhand des Pfades im Quellcode un-ten sehen kann – in einem Ordner bilder, der als Unterordner des Verzeichnisses ange-legt worden ist, in dem sich die Datei index.html befindet. Zu der Angabe eines Bildes gehören immer auch die Angabe der Breite und Höhe, sowie ein Alternativtext. Dieser wird angezeigt, wenn bspw. die Grafik im Browser einmal nicht angezeigt wird.

Hinweis:

alt-Texte bzw. das alt-Attribut können nur für Bilder verwendet werden und dienen dazu, Informationen zum Bild anzuzeigen, wenn das Bild einmal nicht angezeigt werden sollte. Um weitere Informationen zu einem Bild sichtbar zu machen, wenn sich der Mauszeiger auf dem Bild befindet, wird das Attribut title genutzt. Wenn es sich bei Bildern lediglich um „schmückendes Beiwerk“ ohne wichtige inhaltliche Be-deutung handelt, dann bleibt das alt-Attribut leer, muss aber trotzdem vorhanden sein, um bei der Validierung keine Fehlermeldung zu erzeugen.

Das title-Attribut (nicht zu verwechseln mit dem title-Tag im Kopf einer HTML-Da-tei, das den Titel der Seite in der Titelleiste eines Browsers anzeigt) kann darüber hi-naus aber auch für nahezu alle HTML-Elemente genutzt werden.

32 INT03B



Zu erkennen ist das Vorhandensein dieses Attributs in den meisten Browsern daran, dass das entsprechende Wort /der entsprechende Textbereich gepunktet (unterstri-chen) ist und beim Kontakt mit dem Mauszeiger zuerst ein Fragezeichen zu sehen ist und dann der Inhalt des title-Attributs.

Zum Einsatz kommt es bspw., um die Abkürzung eines Begriffs innerhalb eines Tex-tes zu erklären, indem im title-Attribut die Abkürzung zur Erklärung ausgeschrieben wird. Ebenso können hiermit Verweise zusätzliche Informationen darüber erhalten, wohin genau der Verweis führt.

Bei Bildern, die Informationen beinhalten (Screenshots bspw. beinhalten häufig An-gaben zu Ansichten eines Programms oder Einstellungen), ist es sinnvoll, beide At-tribute zu nutzen. Das alt-Attribut würde entsprechend den Inhalt kurz zusammen-fassen, das title-Attribut sozusagen eine aussagekräftige Überschrift für das Bild nennen.

Ein weiteres Attribut in diesem Zusammenhang ist das Attribut longdesc. Das long-desc-Attribut verweist auf eine HTML-Datei, die eine ausführlichere Beschreibung zu einem Bild enthält, wird allerdings noch nicht von allen Browsern unterstützt.

Der Bereich header enthält neben der Grafik auch die größte/wichtigste und die zweit-größte/zweitwichtigste Überschrift.

…<body><div id="gesamt"> <header> <div id="bild"><img src="bilder/header.png" width="149" height="82" alt="Möbeltransport">

</div> <h1>ReinInsNeueHeim GmbH</h1>

<h2>Problemlos ReinInsNeueHeim - Wir ziehen für Sie um!</h2>

</header>…

Nun werden die Bereiche für die eigentlichen Informationen eingefügt.

Das Div #links, als erstes der drei übergeordneten Bereiche im Hauptbereich, enthält die Navigation nav in Listenform (weil die Planung hier später Unterseiten vorsieht, die aber nicht Teil dieses Hefts sind), sowie den Bereich aside.

…</header><div id="links"> <nav> <h3>Unsere Leistungen</h3> <ul> <li>Umzug</li>

<li>Fernumzug</li> <li>Lagerung</li> <li>Möbelmontage</li> </ul> </nav>…

INT03B 33



Außerdem gibt es innerhalb des Bereichs #links das HTML5 Strukturlement aside. Die-ser Bereich enthält ebenfalls eine Überschrift. Die Kundenstimmen werden als Zitate eingefügt, dafür wird das <blockquote>-Tag benutzt. Außerdem werden Zeilenumbrü-che <br> eingefügt, sowie das <span>-Tag, um die Kundenbeschreibungen später optisch abheben zu können.

…</nav><aside> <h3> Kundenstimmen</h3> <blockquote> Wir bedanken uns vielmals für die professionelle Arbeit, Ihr Team war super schnell und freundlich. <br> <span> Susanne K., Umzug nach Italien, 2-Personen Haushalt, 80qm Wohnfläche, 2.Stock </span> </blockquote> <blockquote> Kein einziges Kunstobjekt wurde beschädigt, alles bestmöglich verpackt, sicher transportiert, Klasse! <br> <span> Martin Z., Umzug von Musterstadt nach Musterdorf, Kunstgalerie, 400qm Wohnfläche </span> </blockquote> <blockquote> Ich hätte nicht gedacht, dass wir alles an einem Tag transportiert und wieder ausgepackt bekommen würden. <br> <span> Linda M., Umzug von Musterstadt nach Musterdorf, 4-Personen Haushalt, 150qm Wohnfläche </span> </blockquote> </aside></div>…

Im HTML5 Strukturelement main werden die eigentlichen Informationen als Text, auf-geteilt in Überschriften <h3>, Abschnitte section, Absätze <p> und Zeilenmbrüche <br>, präsentiert.

…</div><main> <section> <h3>Umzug - Professionell, schnell und kostengünstig.</h3> <p>Unsere Verpackungen sind zu 100% recycelbar und schützen Ihre Möbel und Wertgegenstände optimal. <br> Auf Wunsch packen wir Ihren Hausstand komplett ein, transportieren ihn ReinInsNeueHeim und packen alles wieder aus, wobei das Verpackungsmaterial nach dem Umzug von uns komplett wieder mitgenommen wird. <br> Oder möchten Sie selbst ein- und auspacken? Dann liefern wir Ihnen das Material vor dem Umzug ins Haus und holen es nach dem Umzug, wenn Sie alles ausgepackt haben, ab.

34 INT03B



</p> </section> <section> <h3>Fernumzug - Auf zu neuen Ufern!</h3> <p>Sie ziehen in ein anderes Land? <br> Auch hierbei sind wir Ihnen gerne behilflich. Wir übernehmen alle organisatorischen Aufgaben für Sie, kümmern uns um Zoll- und Einfuhrbestimmungen, verpacken gemäß der Vorgaben des jeweiligen Landes und bringen Ihr Hab und Gut sicher ReinInsNeueHeim. </p> </section> <section> <h3>Lagerung - Wohin nur mit den ganzen Sachen?</h3> <p>Manchmal stehen einem liebe Möbel vorübergehend im Weg. Wohin also mit Omas geliebtem Küchenbuffet oder Ihrem verstimmten Klavier? <br> Wir lagern Möbel für Sie ein, wie lange bestimmen Sie. </p> </section> <section> <h3>Möbelmontage - Wo sind denn nur die Schrauben?</h3> <p>Wir bringen zwar alles ReinInsNeueHeim, aber wer baut die Möbel wieder auf und die Küche ein? <br> Kein Problem für uns, wir bauen Ihre Möbel und Ihre Küche noch am Umzugstag wieder auf, versprochen! </p> </section></main>

Das Div #rechts beinhaltet Kontaktinformationen und die Kontaktdaten. Dazu wird zum einen ein zusätzliches HTML5 Strukturelement aside eingefügt mit einem kurzen Text und zum anderen ein Div #adresse mit den eigentlichen Kontaktdaten. Hier werden ebenfalls eine Überschrift, Absätze und Zeilenumbrüche verwendet, sowie ein <span>-Tag, um den Geschäftsführer optisch abheben zu können.

…</main><div id="rechts"> <aside> <p>Was ist der erste Schritt für Sie um stressfrei ReinInsNeueHeim zu kommen? </p> <p>Rufen Sie uns an oder schicken Sie uns eine Mail und vereinbaren Sie mit uns einen kostenlosen Besichtigungstermin. </p> <p>Vor Ort klären wir die Rahmenbedingungen, Sie erhalten innerhalb von 24 Stunden ein Angebot von uns. </p> <p>Wir freuen uns Sie kennen zu lernen!</p> <div id="adresse"> <p>ReinInsNeueHeim GmbH <br> <span>Geschäftsführer <br> Max Mustermann </span>

INT03B 35



</p> <p>Musterstraße 0 <br> 00000 Musterstadt </p> <p>Tel. 00000-11111 <br> Fax 00000-11110 </p> <p>[email protected] <br> www.ReinInsNeueHeim.de/2.0</p> </div> </aside></div>…

Zu guter Letzt wird noch das HTML5 Strukturelement footer eingefügt, das die Anga-ben, die für ein Impressum nötig sind, enthält.

</div><footer> ReinInsNeueHeim GmbH <span>Registergericht: AG Musterstadt • HRB-Nummer: 00000 • Umsatzsteuerident-Nr.: 123456789 Impressum</span></footer></div></body></html>

Der Quellcode der gesamten HTML-Datei zu diesem Zeitpunkt:

<!doctype html><head> <meta charset="utf-8"><title>ReinInsNeueHeim GmbH - Das kompetente Umzugsunternehmen in Musterstadt</title><link href="main.cs" rel="stylesheet" type="text/css"></head><body><div id="gesamt"> <header> <div id="bild"><img src="bilder/header.png" width="149" height="82" alt="Möbeltransport">

</div> <h1>ReinInsNeueHeim GmbH</h1>

<h2>Problemlos ReinInsNeueHeim - Wir ziehen für Sie um!</h2>

</header><div id="links"> <nav> <h3>Unsere Leistungen</h3> <ul> <li>Umzug</li> <li>Fernumzug</li> <li>Lagerung</li> <li>Möbelmontage</li> </ul> </nav> <aside>

36 INT03B



<h3> Kundenstimmen</h3> <blockquote> Wir bedanken uns vielmals für die professionelle Arbeit, Ihr Team war super schnell und freundlich. <br> <span> Susanne K., Umzug nach Italien, 2-Personen Haushalt, 80qm Wohnfläche, 2.Stock </span> </blockquote> <blockquote> Kein einziges Kunstobjekt wurde beschädigt, alles bestmöglich verpackt, sicher transportiert, Klasse! <br> <span> Martin Z., Umzug von Musterstadt nach Musterdorf, Kunstgalerie, 400qm Wohnfläche </span> </blockquote> <blockquote> Ich hätte nicht gedacht, dass wir alles an einem Tag transportiert und wieder ausgepackt bekommen würden. <br> <span> Linda M., Umzug von Musterstadt nach Musterdorf, 4- Personen Haushalt, 150qm Wohnfläche </span> </blockquote> </aside></div><main> <section> <h3>Umzug - Professionell, schnell und kostengünstig.</h3> <p>Unsere Verpackungen sind zu 100% recycelbar und schützen Ihre Möbel und Wertgegenstände optimal. <br> Auf Wunsch packen wir Ihren Hausstand komplett ein, transportieren ihn ReinInsNeueHeim und packen alles wieder aus, wobei das Verpackungsmaterial nach dem Umzug von uns komplett wieder mitgenommen wird. <br> Oder möchten Sie selbst ein- und auspacken? Dann liefern wir Ihnen das Material vor dem Umzug ins Haus und holen es nach dem Umzug, wenn Sie alles ausgepackt haben, ab. </p> </section> <section> <h3>Fernumzug - Auf zu neuen Ufern!</h3> <p>Sie ziehen in ein anderes Land? <br> Auch hierbei sind wir Ihnen gerne behilflich. Wir übernehmen alle organisatorischen Aufgaben für Sie, kümmern uns um Zoll- und Einfuhrbestimmungen, verpacken gemäß der Vorgaben des jeweiligen Landes und bringen Ihr Hab und Gut sicher ReinInsNeueHeim. </p> </section> <section> <h3>Lagerung - Wohin nur mit den ganzen Sachen?</h3> <p>Manchmal stehen einem liebe Möbel vorübergehend im Weg. Wohin also mit Omas geliebtem Küchenbuffet oder Ihrem verstimmten Klavier? <br>

INT03B 37



Wir lagern Möbel für Sie ein, wie lange bestimmen Sie. </p> </section> <section> <h3>Möbelmontage - Wo sind denn nur die Schrauben?</h3> <p>Wir bringen zwar alles ReinInsNeueHeim, aber wer baut die Möbel wieder auf und die Küche ein? <br> Kein Problem für uns, wir bauen Ihr Möbel und Ihre Küche noch am Umzugstag wieder auf, versprochen! </p> </section></main><div id="rechts"> <aside> <p>Was ist der erste Schritt für Sie um stressfrei ReinInsNeueHeim zu kommen? </p> <p>Rufen Sie uns an oder schicken Sie uns eine Mail und vereinbaren Sie mit uns einen kostenlosen Besichtigungstermin. </p> <p>Vor Ort klären wir die Rahmenbedingungen, Sie erhalten innerhalb von 24 Stunden ein Angebot von uns. </p> <p>Wir freuen uns Sie kennen zu lernen!</p> <div id="adresse"> <p>ReinInsNeueHeim GmbH <br> <span>Geschäftsführer <br> Max Mustermann </span> </p> <p>Musterstraße 0 <br> 00000 Musterstadt </p> <p>Tel. 00000-11111 <br> Fax 00000-11110 </p> <p>[email protected] <br> www.ReinInsNeueHeim.de/2.0</p> </div> </aside></div><footer> ReinInsNeueHeim GmbH <span>Registergericht: AG Musterstadt • HRB-Nummer: 00000 • Umsatzsteuerident-Nr.: 123456789 Impressum</span></footer></div></body></html>

Die Darstellung der HTML-Datei im Browser erfolgt zu diesem Zeitpunkt ohne jegliche Formatierung mittels CSS, es wird also lediglich die Struktur mittels HTML angezeigt (semantischer Code). Da für manche HTML-Tags, wie bspw. für die Überschriften-Tags, schon Standardformatierungen – im Beispiel der Überschriften-Tags eine größere Dar-stellung – vorhanden sind, werden diese auch entsprechend dargestellt.

38 INT03B



Abb. 3.5: Das Erscheinungsbild der HTML-Datei noch ohne CSS

INT03B 39



Nachdem die Struktur der HTML-Datei erstellt worden ist, geht es nun im nächsten Ka-pitel um die CSS-Formatierungen.

Zusammenfassung

Um einen Internetauftritt, sei es in Form einer Web-Visitenkarte oder einer umfangrei-chen Website, zu realisieren, müssen einige Punkte vorab geplant und berücksichtigt werden. Je nach Größe und Vorgaben des Projekts nimmt die Planung natürlich auch an Umfang zu.

Für diese Web-Visitenkarte gibt es lediglich einige Vorgaben bezüglich des Corporate Designs, der Handzettel dient als Ausgangspunkt für die Gestaltung.

Einige Vorüberlegungen bezüglich der logischen Einteilung des vorhandenen Materials bzw. der Elemente in Bereiche helfen bei der Strukturierung der HTML-Datei und der Erstellung des Grundgerüsts. Die eigentliche Gestaltung des Erscheinungsbilds dieser Elemente erfolgt nun mittels CSS.


3.1 Wann wird das title-Tag eingesetzt, wann das title-Attribut?

3.2 Was ist der Unterschied zwischen dem title-Attribut und dem alt-Attribut?

3.3 Welchen Zweck hat das longdesc-Attribut?

40 INT03B

4


4 CSS-Formatierungen

Die formale Struktur und der Aufbau von CSS-Deklarationen sollten Ihnen nun bekannt sein. In diesem Kapitel geht es nun um die gebräuchlichsten CSS-Forma-tierungen, die von allen gängigen Browsern interpretiert und dargestellt werden können.

4.1 Größenangaben/numerische Angaben

Bei nummerischen Angaben innerhalb von Stylesheets, also etwa bei Schriftgrößen, Ab-satzabständen oder Rändern, stehen im Prinzip alle weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute und relative Maßangaben möglich.

4.1.1 Absolute Angaben

Bei absoluten Angaben ist die Größe in allen Ausgabegeräten, also beispielsweise auf verschiedenen Monitoren, gleich.

Absolute Angaben sind:

Pixel nimmt hier einen Sonderfall ein, da es zwar je nach Ausgabegeräte unterschiedlich groß erscheint (also im Prinzip relativ zum Ausgabegerät ist), aber absolut bezogen auf ein spezielles Ausgabegerät, in dem diese Größenangabe immer gleich (also absolut) dargestellt wird.

4.1.2 Relative Angaben

Relative Angaben sind:

Relative Größen beziehen sich auf andere Größen, zu denen sie in Relation/Bezug ste-hen. Bei einer allgemeinen Angabe für Texte im Dateikörper einer Webseite, z. B. body { fontsize:150 %; }, würde sich die Schrift an der Einstellung der Schriftgröße des Browsers eines Betrachters orientieren und dementsprechend immer anders aussehen. Hat der Be-trachter hingegen keine individuelle Schriftgröße angegeben, wird in der Regel 16px als Standard vorgegeben. Aber kontrollieren können Sie dies natürlich nicht.

pt Punkt z. B. h2 { font-size:2.5pt; }pc Pica z. B. h2 { font-size:3pc; }in Inch z. B. h2 { font-size:0.5in; }mm Millimeter z. B. h2 { font-size:12 mm; }cm Zentimeter z. B. h2 { font-size:1.2cm; }(px Pixel z. B. h2 { font-size:26px; })

% Prozent z. B. h2 { font-size:150 %; } Relativ zum übergeordneten Element und dessen angegebener Größe

ex z. B. h2 { font-size:5ex; } Relativ zur Höhe des Buchstaben „x“ in der jeweiligen Schriftart

em z. B. h2 { font-size:2.5em; } Relativ zum übergeordneten Element und dessen angegebener Größe

INT03B 41



Bei relativen Angaben ist außerdem ein besonderes Augenmerk auf die Vererbung zu legen.

Wenn beispielsweise für die allgemeine Textgröße im body ein Wert von 16px definiert wurde, wird der Text in einem Absatz, der 90 % der Textgröße per Definition erhält, eine Größe von 90 % von 16px erhalten.

Eine Klasse, die innerhalb dieses Absatzes aufgerufen wird und eine Textgröße von 85 % in ihrer Definition stehen hat, wird dann den Text nur noch 85 % von der Absatzdefini-tion (als 85 % von den 90 % des Absatzes und nicht von den 16px) an Größe erhalten.

Neben Texten sind auch Größenangaben für andere Elemente, wie bspw. für Divs, Ta-bellen, etc. wichtig, denen eine bestimmte Breite und Höhe zugewiesen werden soll (bei eingebundenen Bildern ist dies auch immer zu tun!).

table { width:400px; }

Diese Tabelle erhält eine Breite von 400 Pixel.

<img src="bilder/infobereich.jpg" alt="logo" width="154" height="78">

Dieses Bild wird mit der Größenangabe für seine Breite (width) und seine Höhe (height) eingebunden.

Tipp:

Unter http://calculator.tobani.com/convert/px-to-em finden Sie einen Rechner, der Pixel in em umrechnet. Da es sich bei em jedoch um eine relative Angabe handelt, geht der Rechner von einer Standardschriftgröße von 16 Pixel aus, wie sie in den meisten Browsern eingestellt ist.

4.1.3 Schlüsselwörter

Neben der numerischen Angabe von Größen können auch Schlüsselwörter verwendet werden. Schlüsselwörter sind xx-small, x-small, medium, large, x-large und xx-large. Diese Angaben beziehen sich auf Schriftgrößen, die vom Browser bestimmt werden. Der Faktor, um den sie sich jeweils erhöhen, sollte bei 1,5 liegen, large sollte als 1,5-mal grö-ßer sein als medium.

Außerdem gibt es noch die relativen Werte larger und smaller, die wieder relativ zum übergeordneten Element und dessen angegebener Größe das gewählte Element größer (larger) oder kleiner (smaller) darstellen.

Für die Definition verschiedener Schriftgrößen innerhalb einer Website kann man bspw. für das <body>-Tag eine CSS-Definition erstellen und dort als Ausgangswert eine Schriftgröße mit Schlüsselwörtern (z. B. medium) definieren.

Alle weiteren Werte werden dann als relative Werte – relativ zu medium – definiert. Dies hat den Vorteil, dass der Betrachter im Browser die Schriftart verändern kann und sich die anderen Werte in der Relation anpassen. Eine Überschrift bleibt damit trotzdem relativ zum Text größer, eine Fußnote dagegen kleiner. Die Größenverhältnisse bleiben also gleich.

42 INT03B

http://calculator.tobani.com/convert/px-to-em

CSS-Formatierungen 4


4.2 Farbangaben

Farbwerte können hexadezimal nach dem Schema #XXXXXX angegeben werden oder es können Farbnamen verwendet werden. Eine weitere Möglichkeit, Farben zu definie-ren, ist das RGB-Farbschema rgb (rrr,ggg,bbb). Der Ausdruck rgb(…) ist dabei immer gleich. Innerhalb der Klammer müssen drei Dezimalwerte oder drei Prozentwerte ste-hen, durch Kommata voneinander getrennt. rrr ist der Rot-Wert, ggg der Grün-Wert und bbb der Blau-Wert. Für alle drei Werte sind entweder absolute Zahlen von 0 bis max. 255 oder Prozentwerte von 0 % bis 100 % erlaubt. Neben diesen Farbangaben kann man nun auch Angaben in HSL (Farbwinkel (H), Farbsättigung (S) und Farbhelligkeit (L)) definie-ren.

Die Zahlen geben das Mischungsverhältnis der jeweiligen Farbe an der Gesamtfarbe an.

body { background-color:rgb(0,0,255); }h2 { color:blue; }li { color:#0000FF; }h3 { color:hsl(240, 100%, 50%); }

In diesem Beispiel ist die Hintergrundfarbe des Dateikörpers mittels des RGB-Farbsche-mas definiert, die Überschrift 2. Ordnung durch einen standardisierten Farbnamen, der Listeneintrag durch einen Hexadezimalwert und die Überschrift 3. Ordnung durch HSL-Werte. Alle vier Elemente erhalten dieselbe Farbe – Blau.

Bei der Verwendung des RGB-Farbschemas ist es außerdem möglich einen Transparent-wert anzugeben, um bspw. teiltransparente Hintergrundfarben zu definieren. Mehr dazu in Abschnitt 4.11.

In der Regel werden Hexadezimal- oder RGB-Werte benutzt, da Farbnamen nur eine sehr begrenzte Anzahl an Farben zulassen.

Es gibt in CSS2 16 standardisierte Farbnamen:

Farbname RGB-Wert Hexadezimal-Wert

Black 0,0,0 #000000

Navy 0,0,128 #000080

Blue 0,0,255 #0000FF

Green 0,128,0 #008000

Teal 0,128,128 #008080

Lime 0,255,0 #00FF00

Aqua 0,255,255 #00FFFF

Maroon 128,0,0 #800000

Purple 128,0,128 #800080

Olive 128,128,0 #808000

Gray 128,128,128 #808080

INT03B 43



Hinweis:

Einen Hexadezimal-RGB-Konverter finden Sie bspw. bei http://easycalculation.com/colorconverter/rgb-color-converter.php.

4.3 Breite (width)

Mit dieser Angabe bestimmt man die Breite eines Elements.

div { width:500px; }

4.3.1 minimale Breite (min-width) /maximale Breite (max-width)

Hat man ein Element, dessen Breite man nicht hundertprozentig festlegen möchte, man jedoch eine Mindestbreite haben möchte, die das Element erhalten soll, dann kann man dies mit min-width und einer numerischen Angabe tun.

Ebenso verhält es sich bei einer maximalen Breite (max-width), die ein Element höchs-tens bekommen soll. Erreicht bspw. ein Text innerhalb eines Div-Elements die maximale Breite, bricht die Zeile um.

div {position:absolute;left:50px;top:100px;min-width:125px;max-width:300px;overflow:hidden;

}

Das Layout der Web-Visitenkarte basiert auf flexiblen Größenangaben sowohl der ein-zelnen Bereiche (Divs), als auch der Schrift. Das hat den Vorteil, dass eine individuelle Vergrößerung und Anpassung durch den Betrachter im Browser möglich ist und zwar sowohl über die Funktion Zoom, als auch über die speziellere Funktion Nur Text zoomen (bspw. des Browser Firefox).

Der Nachteil bei flexiblen Größenangaben (wir benutzen Prozentangaben und em) be-steht darin, dass diese Angaben eben nicht pixelgenau sind und die Größenangaben, be-sonders bei den Breiten und Abständen, dadurch nicht immer einfach zu ermitteln sind.

Silver 208,208,208 #C0C0C0

Red 255,0,0 #FF0000

Fuchsia 255,0,255 #FF00FF

Yellow 255,255,0 #FFFF00

White 255,255,255 #FFFFFF

(Quelle: http://www.farb-tabelle.de/de/farbtabelle-html4.htm)

Farbname RGB-Wert Hexadezimal-Wert

44 INT03B

http://www.farb-tabelle.de/de/farbtabelle-html4.htm

http://easycalculation.com/colorconverter/rgb-color-converter.php



Deshalb ist es wichtig, das Layout immer wieder in verschiedenen Browsern zu testen, um eine korrekte Darstellung (auch bei einer Verkleinerung/Vergrößerung des Layouts/der Texte) zu gewährleisten.

Um die Elemente der Web-Visitenkarte gemäß des Entwurfs anzuordnen, beginnen wir nun mit den eigentlichen CSS-Definitionen.

Dazu werden innerhalb der Datei main.css, die bisher noch leer ist, die Divs und HTML5 Strukturelemente formatiert, die im Quellcode der HTML-Datei bereits eingefügt und (bezogen auf die Divs) mit IDs versehen worden sind.

Zunächst erhält das Div #gesamt eine Breitenangabe.

#gesamt {width:54em;

}

Nimmt man eine Standardschriftgröße von 16 Pixel an, ergibt der Wert 54em umgerech-net eine Gesamtbreite von 864 Pixel.

Das Div #bild erhält als einziges absolute Angaben in Pixel, da es ein Bild beinhaltet, das eine feste Breite und Höhe hat.

#bild {width:149px;high:82px;

}

Die Bereiche #links, main und #rechts erhalten ebenfalls Breitenangaben, aber relative.

#links {width:11.5em;

}

main {width:31em;

}

#rechts {width:11.5em;

}

Das Erscheinungsbild der HTML-Datei scheint sich zunächst noch nicht positiv verän-dert zu haben. Das wird sich aber schnell ändern! Doch zunächst wieder ein wenig The-orie!

INT03B 45



Abb. 4.1: Layout und Breitenangabe (Ausschnitt)

46 INT03B



4.4 Overflow

Um zu beeinflussen, wie sich ein Element bzw. dessen Größe verhält, wenn der Inhalt größer als der zur Verfügung stehende Platz ist, nutzt man overflow.

Möchte man beispielsweise verhindern, dass der Inhalt einer Box (div), wenn er mehr Platz braucht als ihm die Box gibt, die Größe der Box verändert, setzt man overflow auf hidden (der Inhalt wird abgeschnitten).

Die Angabe visible verändert die Größe soweit, dass der gesamte Inhalt angezeigt, das Element also breiter wird. Bei scroll werden Scrollbalken sichtbar, die Größe bleibt un-verändert.

auto überlässt die Entscheidung der Anzeige dem Browser. Möglich sind hierbei nume-rische Angaben.

div {position:absolute;left:50px;top:100px;width:50px;height:50px;overflow:hidden;

}

4.5 Höhe (height)

Ebenso wie die Breite lässt sich auch die Höhe eines Elements mittel height definieren. Auch hier kann overflow genutzt werden mit den gleichen Möglichkeiten, die bei der Breite beschrieben wurden. Diese Angaben sind allerdings nur sinnvoll, wenn sowohl eine Breite als auch eine Höhe angegeben ist. Denn wenn nur ein Wert fest definiert ist (z. B. die Höhe), wird der benötigte Platz automatisch auf den nicht angegebenen Wert verteilt (auf die Breite, die sich automatisch dem Inhalt anpasst). Auch hier werden die Angaben mittels Zahlenwerten gemacht.

Info:

Die Höhenangabe bei einer Tabelle ist kein HTML-Standard, wenn Sie auch von den meisten Browsern unterstützt wird!

div {position:absolute;left:50px;top:100px;height:50px;overflow:auto;

}

4.5.1 minimale Höhe (min-height) / maximale Höhe (max-height)

Bei den Angaben zur minimalen Höhe min-height und der maximalen Höhe max-height gelten die gleichen Vorgaben wie für die minimale und maximale Breite.

INT03B 47



div {position:absolute;left:50px;top:100px;min-height:200px;max-height:300px;overflow:hidden;

}

Was bedeutet das für unsere Web-Visitenkarte?

Für den Kopfbereich header der Web-Visitenkarte wird eine Mindesthöhe definiert, der Kopfbereich wird dann bei einer Verkleinerung nicht niedriger als 82 Pixel. Damit wird zum einen verhindert, dass die Spalten bei einer Verkleinerung (Nur Text zoomen) um-brechen, weil sich die Grafik zu weit nach unten verschiebt und das Layout zerstört. Zum anderen verlagern sich auch die Überschriften nicht aus dem Kopfbereich heraus nach unten.

header {min-height:82px;

}

4.6 Positionsart (position)

Mit position kann bestimmt werden, an welcher Stelle Elemente innerhalb einer Datei dargestellt werden.

Hier gibt es verschiedene Möglichkeiten. Man kann Elemente pixelgenau (absolut) in Bezug auf das Browserfenster oder ein übergeordnetes Element positionieren, wenn die-ses ebenfalls eine Positionsangabe hat (siehe auch Abschnitt 2.3.1).

Dabei wird das Element aus dem normalen Textfluss einer HTML-Datei (von oben links nach unten rechts) herausgenommen.

Ebenso kann man Elemente fixieren (fixed), die dann absolut positioniert werden, aller-dings immer in Abhängigkeit vom Browserfenster und nicht von anderen Elementen. Sie werden ebenfalls aus dem Textfluss herausgenommen. Wird die Seite gescrollt, bleibt das Element immer am selben Platz und bewegt sich nicht mit der Seite nach oben oder unten.

Die Angabe relative ermöglicht eine relative Positionierung, ausgehend von der Nor-malposition desselben Elements.

Die Normaleinstellung, wenn nichts angegeben ist, ist bei einem Element static.

Die Positionsart alleine genügt allerdings nicht, es müssen noch weitere Eigenschaften angegeben werden, die die Positionierung entlang der x-Achse (horizontal) und der y-Achse (vertikal) betrifft.

Mit top wird die Position von oben (Browserrand oder anderem Element) in Bezug auf die linke Ecke des Elements angegeben, mit left die Position von links, mit right die Po-sition von rechts und mit bottom die Position von unten. Die Werte werden dabei nu-merisch angegeben.

48 INT03B



Hinweis:

Es ist nur die Angabe von jeweils zwei Positionen (top und left/right oder bottom und left/right) sinnvoll, denn ein Element mit einer bestimmten Größe kann sich nur anhand zweier Koordinaten orientieren, ohne seine Größe zu verändern.

table {position:absolute;left:100px;top:100px;

}

div {position:absolute;bottom:50px;right:25px;

}

4.7 Schichtung (z-index)

Der z-index kommt zum Tragen, wenn sich mehrere Elemente durch eine Positionie-rung überlappen. Das Element, das sozusagen „über“ dem anderen liegt, erhält einen hö-heren z-index.

#div1 {position:absolute;top:10px;left:10px;z-index:2;

}

#div2 {position:absolute;top:25px;left:5px;z-index:1;

}

In diesem Fall liegt das #div1 über dem Element mit der ID #div2, da sein z-index höher ist.

4.8 Anzeigeart (display)

Mit der Funktion display kann man bestimmen, wie ein Element angezeigt werden soll. So kann bspw. festgelegt werden, dass ein Element zunächst nicht angezeigt und der für dieses Element notwendige Platz auch nicht freigehalten wird (none). Außerdem kann man festlegen, dass das Element einen Block bilden soll, der dann einen Absatz erzeugt, wie alle Block-Elemente (block) oder eben auch nicht (inline). Mit dem Wert inline-block kann man einem Element sozusagen Blockeigenschaften, wie Breite, Höhe und Außenabstand zuweisen, es bleibt jedoch im Textfluss.

h2 { display:inline; }

INT03B 49



Diese Angabe führt dazu, dass die Überschrift zweiter Ordnung nicht mehr als Block-Element behandelt (mit einem Zeilenumbruch nach der Überschrift), sondern wie ein Inline-Element dargestellt wird, bei dem ein nachfolgendes Elemente direkt daneben an-geordnet wird.

4.9 Textfluss (float)

Mit float kann bestimmt werden, wie Block-Elemente von nachfolgenden Elementen umflossen werden (siehe hierzu auch Abschnitt 2.3.2). Dabei sind die Angaben left (Ele-ment ist links positioniert und wird rechts umflossen), right (Element ist rechts positio-niert und wird links umflossen) und none (Element wird nicht umflossen) möglich. Will man ein Element mittels float in seinem Textfluss beeinflussen, muss man ihm erst eine Breite (width) zuweisen.

h1 {width:300px;float:left;

}

4.10 Textfluss beenden (clear)

Will man das Umfließen beenden, benutzt man die Eigenschaft clear. Dabei wird mit left und right die jeweils entsprechende vorher definierte float-Angabe beendet, mit both alle vorherigen Angaben und mit none keine Änderung des float-Wertes (siehe hierzu auch Abschnitt 2.3.2).

div#a {width:250px;float:left;

}

div#b {width:500px;float:right;

}

div#c {width:750px;clear:both;

}

Zur Erinnerung:

Es gibt Block-Elemente und Inline-Elemente, Block-Elemente können Inline-Ele-mente beinhalten, Inline-Elemente jedoch keine Block-Elemente.

Da ältere Browser aber manche neuen HTML5 Strukturelemente nicht als Block-Ele-mente behandeln und darstellen, wird diese Angabe ergänzt, um explizit die Darstellung als Block-Elemente anzuweisen.

footer, header, main, nav, aside, section { display:block;}

50 INT03B

#IDCHDBDBEJ

#IDCHDBDBEJ



Die Elemente der Web-Visitenkarte werden nicht absolut positioniert, sondern mittels float angeordnet. Dabei werden die Divs #bild, #links und das HTML5 Strukturelement main aus dem Textfluss herausgenommen und jeweils links gefloatet, das Div #rechts wird entsprechend rechts gefloatet. Durch das rechts gefloatete Div #rechts können Grö-ßenvarianten der drei Spalten innerhalb der Browser abgefangen werden. Wenn ein Browser die Gesamtbreite der drei Spalten kleiner berechnet und darstellt als die Breite des Kopf- und Fußbereichs, werden die Seitenbereiche links und rechts trotzdem bündig zu dem Kopf- und Fußbereich angeordnet. Lediglich der Abstand zwischen der Spalte main und #rechts vergrößert sich ein wenig.

Innerhalb des HTML5 Strukturelements footer werden diese Floats wieder beendet, da-mit sich der Fußteil unter dem Hauptbereich anordnen kann.

#bild {width:149px;height:82px; float:left;

}

#links {width:11.5em;float:left;

}

main {width:31em;float:left;

}

#rechts {width:11.5em;float:right;

}

footer {clear:both;

}

Jetzt weist die Web-Visitenkarte schon etwas mehr Struktur aus.

INT03B 51



Abb. 4.2: Layout und Textfluss

52 INT03B



4.11 Hintergründe

Als Hintergründe können sowohl Farben als auch Bilder in eine Seite, aber auch in ein-zelne Elemente eingebunden werden.

4.11.1 Hintergrundfarben (background-color)

Für Elemente kann man jeweils eigene Farben definieren (siehe hierzu auch Abschnitt 4.2). Bei Texten sollte der Kontrast zur Hintergrundfarbe ausreichend sein und Farbkom-binationen wie grün-rot vermieden werden (Stichwort: Barrierefreiheit – Grün-Rot-Fehlsichtigkeit).

table { background-color:#336699; }

Bei Hintergründen ist außerdem die Angabe transparent anstelle eines Farbwerts mög-lich, die bspw. bei sich überlagernden Box-Elementen interessante Effekte hervorrufen kann. Dabei kann die Angabe transparent für eine Hintergrundfarbe (background-co-lor), eine Rahmenfarbe (border-color) oder eine Schriftfarbe (color) definiert werden.

4.11.2 Deckkraft/Transparenz (opacity bzw. filter)

Die Deckkraft bzw. Transparenz von Elementen kann auch mittels opacity definiert werden. Für den Internet Explorer gibt es alternativ die Eigenschaft filter.

.beispiel { background-color:#efecef; opacity:.6; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60);}

4.11.3 Hintergrundgrafiken (background-image)

Für Elemente kann man ebenfalls jeweils eigene Hintergrundbilder definieren. Fügt man ein Hintergrundbild ein, ist es ratsam, trotzdem eine Hintergrundfarbe zu definieren, falls das Bild einmal nicht angezeigt werden sollte. Die Hintergrundfarbe sollte der Far-be des Bildes ähneln oder bei sehr farbigen Bildern zumindest die Farbstimmung auf-greifen. In Verbindung mit Texten sorgt dies dann auch ohne Hintergrundbild für eine gute Lesbarkeit. Allgemein sollte bei Texten der Kontrast ausreichend sein und das Hin-tergrundbild nicht zu dominant, sonst stört es den Textfluss. Benutzt werden können GIFs, JPEGs oder PNGs, wobei die Benutzung von PNGs der von GIFs vorzuziehen ist.

table {background-image:url(bg-bild.jpg);background-color:#336699;

}

INT03B 53



4.11.4 Bildschirmfüllendes Hintergrundbild (background-size)

Immer häufiger sieht man Websites, die ein Hintergrundbild haben, dass das gesamte Browserfenster füllt. Mit background-size ist dies möglich.

body { background-image:url(../bilder/bg.png); background-repeat:no-repeat; -moz-background-size:cover; -webkit-background-size:100% 100%; background-size:cover;

}

Cover definiert, dass das Bild das Element, dem es zugewiesen wird, immer ganz aus-füllt. Ist das Element kleiner als das Bild, wird das Bild nicht verzerrt dargestellt, sondern beschnitten.

In diesem Zusammenhang ist es sinnvoll auch alle ggf. durch den Browser standardmä-ßig vorgegebenen Abstände zu entfernen, um unschöne Lücken zu vermeiden.

* { margin:0; padding:0;

border:0; }

Damit das Hintergrundbild in der Höhe und Breite das Browserfenster immer ausfüllt, wird außerdem meist noch folgende Angabe gemacht:

html, body { height:100%; }

4.11.5 Farbverläufe (gradient)

Seit CSS3 ist es möglich einen Farbverlauf komplett mittels CSS zu definieren, ein Gra-fikprogramm wird nicht benötigt. Dazu wird linear-gradient innerhalb der back-ground-image Angabe definiert.

Neben den Verlaufsangaben ist die Angabe einer Hintergrundfarbe sinnvoll, damit, falls der Verlauf in dem einen oder anderen Browser doch nicht dargestellt wird, zumindest eine ähnliche Farbe angezeigt wird. Diese muss jedoch vor den Verlaufsangaben notiert werden, da sie sonst als letzte Angabe alle anderen überschreibt und kein Verlauf mehr zu sehen ist.

Für ältere Browser ist für viele CSS3-Angaben ein Browser-Präfix (-webkit für Safari und Chrome, -moz für Firefox, -o für Opera, -ms für IE) nötig.

Diese CSS3-Angabe zählt dazu.

Wichtig: Die browserspezifischen Präfixe stehen immer über der allgemeinen Angabe.

div { background: #1e5799; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA

54 INT03B



Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lk dGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJl c2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlk PSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3B Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEMCUiPgog ICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3Rv cC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3At Y29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy R3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdo dD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9z dmc+); background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); background: -o-linear-gradient(top, 1e5799 0%,#7db9e8 100%); background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );}

Wie man sieht kann ein mittels CSS3 generierter Farbverlauf sehr viel Code erzeugen. Daher sind Tools, die diese Aufgabe automatisieren, sinnvoll und hilfreich.

4.11.6 Hintergrundbild-Position (background-position)

Mit background-position kann man bestimmen, wo das Hintergrundbild platziert wird. Soll ein Hintergrundbild beispielsweise nicht das gesamte Element ausfüllen, son-dern nur einen Teil, dann sind folgende Werte möglich: top (am oberen Rand, vertikal), bottom (am unteren Rand, vertikal), center (zentriert), left (linksbündig, horizontal) und right (rechtsbündig, horizontal) sowie numerische Angaben.

table {background-image:url(bg-bild.jpg);background-color:#336699;background-position:bottom right;

}

4.11.7 Wiederholung (background-repeat)

Mit background-repeat kann angegeben werden, ob sich ein Hintergrundbild wieder-holen soll (repeat = Standardeinstellung) oder nicht (no-repeat), und ob es sich vertikal (repeat-y) oder horizontal (repeat-x) wiederholen soll.

INT03B 55



table {width:500px;background-image:url(bg_bild.jpg);background-repeat:repeat-x;

}

Diese Angabe ist auch in Verbindung mit background-position sinnvoll, da beispielswei-se ein Bild, das lediglich einen Farbverlauf aufweist, nicht die Größe des Elements haben muss, sondern kleiner sein kann und das Element durch dessen vertikale oder horizon-tale Wiederholung ausfüllt. Der Vorteil besteht zum einen in der geringeren Dateigröße des Bildes, zum anderen darin, dass bei einer Vergrößerung des Bildes entsprechend der vertikalen oder horizontalen Angabe der Hintergrund gleich bleibt, das Hintergrundbild sich einfach dementsprechend wiederholt.

Was brauchen wir hiervon für die Web-Visitenkarte? Zunächst einmal Hintergrundfar-ben für einzelne Bereiche.

body {background-color:#fff;

}

#gesamt {width:54em;background-color:#fff;

}

header {min-height:82px;background-color:#6379ab;

}

nav {background-color:#efece0;

}

#rechts {width:11.5em;float:right;background-color:#d1d6e2;

}

Der Fußbereich bekommt einen Farbverlauf in Brauntönen. Dazu nutzen wir ColorZilla (http://www.colorzilla.com/gradient-editor/).

Mit diesem Farbverlauf-Editor lassen sich Verläufe einfach und schnell definieren, der entsprechende CSS3-Code wird autmatisch generiert und kann mittels Copy&Paste in die eigene CSS-Datei eingefügt werden.

Daneben besteht außerdem die Möglichkeit zusätzlich eine Angabe für den IE9 zu ge-nerieren und in die HTML-Datei einzufügen, damit auch dieser den Farbverlauf korrekt darstellt.

56 INT03B

http://www.colorzilla.com/gradient-editor/



footer {clear:both;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8a6d4c+0,3a2618+97,3a2618+100*/background-color: #8a6d4c; /* Old browsers *//* IE9 SVG, needs conditional override of 'filter' to 'none' */background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhNmQ0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk3JSIgc3RvcC1jb2xvcj0iIzNhMjYxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYTI2MTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #8a6d4c 0%, #3a2618 97%, #3a2618 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a6d4c), color-stop(97%,#3a2618), color-stop(100%,#3a2618)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8a6d4c 0%,#3a2618 97%,#3a2618 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8a6d4c 0%,#3a2618 97%,#3a2618 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #8a6d4c 0%,#3a2618 97%,#3a2618 100%); /* IE10+ */ background: linear-gradient(to bottom, #8a6d4c 0%,#3a2618 97%,#3a2618 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a6d4c', endColorstr='#3a2618',GradientType=0 ); /* IE6-8 */

}

INT03B 57



Abb. 4.3: Layout und Hintergründe

58 INT03B



4.12 Schriftformatierung

Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgröße, Schriftfarbe, Schriftgewicht, Zeichen- und Wortabständen usw. zu verstehen.

4.12.1 Schriftart (font-family)

Mit font-family können Schriftarten angegeben werden, es können hierbei eine oder mehrere Schriftarten bestimmt werden.

Dabei gibt es zwei Arten von Schriften

• Standardschriftenwie z. B. Verdana, Arial, Helvetica (für Mac-User), usw. Wichtig ist hier, dass auf dem System des Betrachters diese Schriftart installiert ist, sonst wird sie nicht ange-zeigt.

Gängige Standardschriftarten sind:

– Times/Times New Roman

– Georgia

– Courier/Courier New

– Arial

– Verdana

– Helvetica

Außerdem weit verbreitet sind die Schriften:

– Arial Black

– Impact

– Comic Sans MS

– Trebuchet

• Webfonts also herunterladbare Schriften, die mittels @font-face Angabe eingebunden werden. Die Angabe @font-face bietet die Möglichkeit, Schriften in den Webauftritt einzu-binden, auch wenn es sich nicht um die gängigen Standardschriftarten handelt.

Da ältere Browser die @font-face Angabe ggf. nicht interpretieren können, sollte man immer auch zumindest eine passende Standardschriftart mit angeben.

Bei der Angabe mehrerer Schriftarten ist die Reihenfolge der Angabe entscheidend. Ist die erste angegebene Schriftart (im Beispiel Verdana) verfügbar, wird diese vom Browser verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart (Arial) verwendet, falls die-se verfügbar ist. Ist keine der angegebenen Schriftarten verfügbar, wird eine Schriftart ausgewählt, die sans-serif ist, also ohne Serifen. So wird zumindest das grundlegende Erscheinungsbild beibehalten.

h1,h2,h3 { font-family:Verdana, Arial, Helvetica, sans-serif; }

INT03B 59



Bei Webfonts muss die gewünschte Schrift zunächst heruntergeladen und dann, wie auch bei Grafiken, eingebunden werden, in diesem Fall innerhalb einer CSS-Angabe. Ebenso muss die Schriftart auf dem Server bereitgestellt werden.

Es gibt verschiedene Websites, die Schriften zum Download anbieten, teils kostenfrei, teils kostenpflichtig. Egal für welche Variante Sie sich entscheiden, sehr wichtig ist hier, auf die Lizenzart zu achten. Gerade bei vermeintlich kostenlosen Angeboten liegt der Teufel manchmal im Detail bzw. in der Lizenzart, bspw. dürfen solche Schriften oft nicht für kommerzielle Zwecke genutzt werden!

Eine sehr gute Anlaufstelle für Fonts, die auch für die kommerzielle Nutzung freigege-ben sind, ist FontSquirrel (http://www.fontsquirrel.com). Trotzdem gilt auch hier: Lesen Sie die Licence!

Für die Web-Visitenkarte wurde ein Webfont Kit (Sammlung der verschiedenen Datei-en dieser Schrift, passend für die gängigen Browser) der Schrift „Liberation Sans“ her-untergeladen, im Projektordner gespeichert und entpackt.

Nicht jede Schrift verfügt über ein Webfont Kit. Ein solches auszuwählen ist aber sinn-voll, damit die von Ihnen gewählte Schrift in den gängigen Browsern angezeigt werden kann.

Nun wird in der CSS-Datei unserer Web-Visitenkarte zunächst die @font-face Angabe definiert.

@font-face { font-family:Liberation; src:url(schriften/Liberation-Sans-fontfacekit/web%20fonts liberationsans_bold_macroman/LiberationSans-Bold- webfont.eot); src:url(schriften/Liberation-Sans-fontfacekit/web%20fonts liberationsans_bold_macroman/LiberationSans-Bold- webfont.svg); src:url(schriften/Liberation-Sans-fontfacekit/web%20fonts liberationsans_bold_macroman/LiberationSans-Bold- webfont.ttf); src:url(schriften/Liberation-Sans-fontfacekit/web%20fonts liberationsans_bold_macroman/LiberationSans-Bold- webfont.woff); }

Genutzt werden soll diese Schrift für die wichtigste Überschrift, als Alternative wird zu-sätzlich eine Standardschrift, sowie sans-serif angegeben.

h1 { font-family:Liberation, Verdana, sans-serif;}

Eine weitere sehr einfache Methode zur Einbindung von Webfonts, ohne die Schriftda-teien herunterladen zu müssen, ist bspw. die Nutzung von Google Web Fonts (https://www.google.com/fonts/). Hier können Sie eine Schrift auswählen und haben über die Funktion „Quick-use“ die Möglichkeit, sich einen Link anzeigen zu lassen, den Sie dann in den header der HTML-Datei einbinden.

<link href='https://fonts.googleapis.com/css?family=Liberation' rel='stylesheet' type='text/css'>

60 INT03B

https://www.google.com/fonts/

http://www.fontsquirrel.com



Danach genügt die Angabe innerhalb der entsprechenden CSS-Definition, wie oben für h1 gezeigt.

Bei dieser Art der Einbindung lädt sich der Browser die Schrift aus der angegebenen URL und zeigt sie an. Dazu wird aber eine aktive Internetverbindung benötigt, beachten Sie dies beim Testen auf Ihrem lokalen Rechner.

Und noch ein Wort zum allgemeinen Einsatz von Webfonts. Nutzen Sie ausgefallenere Schriften nur für sehr kleine Textmengen, bspw. für Überschriften. Die meisten eignen sich nicht als Fließtext. Achten Sie immer auf eine gute Lesbarkeit. Vergrößern und ver-kleinern Sie einmal die Schrift und überprüfen Sie, ob die Schrift dann immer noch gut lesbar ist.

4.12.2 Schriftgröße (font-size)

Die Schriftgröße ist die Darstellungsgröße der Schrift, sie wird mit font-size bestimmt. Erlaubt ist eine numerische Angabe, aber auch eine prozentuale Angabe ist möglich. Die Angabe 130 % bedeutet 130 % im Verhältnis zur normalen Schriftgröße, die als 100 % gedacht ist (siehe dazu auch Abschnitt 4.1).

body { font-size:medium; }h1 { font-size:2em; }p { font-size:90%; }

4.12.3 Schrift-/Textfarbe (color)

Mit color wird die Schrift bzw. Textfarbe bestimmt (siehe auch Abschnitt 4.2).

h1,h2,h3 { color:#ff0000; }

4.12.4 Schriftstil (font-style)

Schriftstil bedeutet die Neigung der Schrift. Mit font-style wird der Schriftstil bestimmt. Folgende Angaben sind typisch:

h3 { font-style:italic; }

4.12.5 Schriftgewicht (font-weight)

Mit font-weight wird das Schriftgewicht bestimmt. Schriftgewicht bedeutet der Fettig-keitsgrad, in dem die Schrift dargestellt wird. Dabei können relative Angaben, wie bol-der (fetter) und lighter (dünner) gemacht werden, aber auch absolute Angaben, wie bold (fett) und numerische sind möglich:

italic Schriftstil kursiv (de facto kein Unterschied zu „oblique“, wurde aber für echte Kursivschriften entwickelt.)

oblique Schriftstil kursiv

normal normaler Schriftstil

INT03B 61



p.hervorheben { font-weight:bold; }

Die Angaben font-family, font-style, font-size, font-weight können auch zusammenge-fasst werden.

Die Reihenfolge der Angaben ist dabei egal.

p.info {font-family:Arial, Helvetica, sans-serif;font-size:medium;font-style:italic;font-weight:bold;

}

Für die Web-Visitenkarte wird zunächst eine allgemeine Angabe für das <body>-Tag ge-macht.

body {background-color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:100.01%;color:#000;

}

Die Angabe 100.01 %, dient dazu Rundungsfehler, die bei älteren Safari- und Opera-Ver-sionen auftreten könnten und zu kleineren Schriftgrößen führen könnten, auszuglei-chen.

Nun folgen Schriftgrößen-Angaben für weitere Elemente.

#gesamt {width:54em;background-color:#fff;font-size:95%;

}

h1 { font-family:Liberation, Verdana, sans-serif;

font-size:2.2em;}

Die Überschrift zweiter Klasse erhält außerdem die Farbe Weiß, im Gegensatz zu der für den <body>-Tag definierten allgemeinen CSS-Angabe für die Textfarbe Schwarz.

normal normales Schriftgewicht

bold fett

bolder extrafett

lighter dünner

100–900 extradünn (100) bis extrafett (900)

Der Wert „500“ entspricht etwa dem Schlüsselwort „medium“, 700 dem Wert „bold“.

62 INT03B



h2 {font-size:1.1em;color:#fff;

}#links aside h3 {

font-size:120%;color:#000;

}

nav {background-color:#efece0;font-family:Verdana, Geneva, sans-serif;font-size:85%;color:#af5518;font-weight:bold;

}

Die Überschrift dritter Ordnung im Bereich nav erhält explizit die gleiche Farbe wie nav.

#links nav h3 {font-size:100%;color:#af5518;

}

Der Text im Bereich aside erhält einen Braunton, der zu der Farbpalette des Layouts passt.

#links aside {font-size:70%;color:#5b4628;

}

Die Klasse .zitat sorgt für eine kursive Darstellung und wird im Bereich #links aside ein-gesetzt.

.zitat {font-style:italic;

}

Innerhalb der HTML-Datei:

…<span class="zitat">Susanne K., Umzug nach Italien, 2-Personen Haushalt, 80qmWohnfläche, 2.Stock</span>…<span class="zitat">Martin Z., Umzug von Musterstadt nach Musterdorf, Kunstgalerie,400qm Wohnfläche</span>…<span class="zitat">Linda M., Umzug von Musterstadt nach Musterdorf, 4-Personen Haushalt, 150qm Wohnfläche

INT03B 63



</span>main {

width:31em;float:left;font-size:85%;

}

main h3 {font-size:100%;

}

#rechts aside {font-size:77%;color:#000;

}#adresse {

color:#5b4628;font-weight:bold;

}

Für den Bereich footer werden ebenfalls Angaben ergänzt. Um den Quellcode hier über-sichtlich zu halten, wird im folgenden Verlauf nicht der komplette Code angezeigt, die Farbverlauf-Angabe wird durch … ersetzt. In der eigentlichen CSS-Datei ist natürlich der komplette Code enthalten.

footer {clear:both;background-color:#8a6d4c;...font-size:75%;color:#fff;font-weight:bold;

}

Um den Adressbereich, der jetzt komplett fett erscheint, etwas aufzulockern, wird eine Klasse .normal erstellt.

.normal {font-weight:normal;

}

Diese Klasse wird in den Quellcode der HTML-Datei eingebunden. Dazu wird das <span>-Tag genutzt, das – wie Sie bereits wissen – keine eigene Bedeutung hat, sondern in Fällen wie diesem zum Einsatz kommt, um Textbereiche, die keine weitere Auszeich-nung haben, eine Formatierung zu ermöglichen.

<div id="adresse"><p>ReinInsNeueHeim GmbH<br/><span class="normal">Geschäftsführer<br>Max Mustermann</span></p><p>Musterstraße 0<br>00000 Musterstadt</p><p>Tel. 00000-11111

64 INT03B



<br>Fax 00000-11110</p><p class="normal">[email protected]<br>www.ReinInsNeueHeim.de/2.0</p>

</div>

Da im Fußbereich der Name des Unternehmens fett dargestellt werden soll, die restli-chen Angaben jedoch normal, wird eine weitere Klasse .fuss definiert. Man könnte hier zwar auch die Klasse .normal nutzen, da die Klassen .fuss im weiteren Verlauf jedoch noch eine weitere Eigenschaft erhält, ist die Trennung sinnvoll.

.fuss {font-weight:normal;

}

Diese Klasse wird innerhalb der HTML-Datei ebenfalls in den Code eingefügt.

<footer>ReinInsNeueHeim GmbH <span class="fuss">Registergericht: AG Musterstadt • HRB-Nummer: 00000 • Umsatzsteuerident-Nr.: 123456789</span></footer>

Der Browser zeigt zu diesem Zeitpunkt die Web-Visitenkarte wie in Abb. 4.4 demonst-riert, an.

Abb. 4.4: Layout und Schriftformatierung

INT03B 65



4.13 Textdekoration (text-decoration)

Für die Eigenschaft text-decoration sind folgende Angaben möglich:

*.verbot { text-decoration:line-through; }

Hinweis:

Davon abgesehen, dass blinkender Text störend (und unprofessionell) wirkt und nicht benutzt werden sollte, wird er auch nicht von allen Browsern interpretiert.

4.14 Textausrichtung

4.14.1 Horizontale Ausrichtung (text-align)

Mit text-align werden Texte innerhalb von Block-Elementen, aber auch Inline-Elemen-te ausgerichtet. Für die Ausrichtung von Block-Elementen hingegen wird die Angabe margin benutzt.

Folgende Angaben sind möglich:

p.fuss { text-align:right; }

Vorsicht:

Der Internet Explorer interpretiert diese Angabe auch für Block-Elemente!

4.14.2 Vertikale Ausrichtung (vertical-align)

Mit vertical-align kann beispielsweise die vertikale Ausrichtung von Texten innerhalb von Tabellenzellen bestimmt werden. Folgende Angaben sind möglich:

underline unterstrichen

overline überstrichen

line-through durchgestrichen

blink blinkend

none normal (keine Textdekoration)

left linksbündig ausgerichtet

center zentriert ausgerichtet

right rechtsbündig ausgerichtet

justify als Blocksatz

top oben bündig ausgerichtet

middle mittig ausgerichtet

bottom unten bündig ausgerichtet

66 INT03B



tr { vertical-align:middle; }

4.15 Textumbruch (white-space)

Mit der Angabe white-space kann man den Zeilenumbruch von Text innerhalb von Ele-menten definieren. Diese Angabe existiert seit CSS2 und wird von älteren Browsern nicht oder nur teilweise dargestellt.

Folgende Angaben sind möglich:

#infobox { white-space:pre; }

4.16 Texteinrückung (text-indent)

Mit text-indent wird in einem Absatz die erste Zeile eingerückt oder, bei einen negati-ven Wert, ausgerückt. Es ist eine numerische Angabe (auch in Prozent) möglich.

p { text-indent:1em; }

baseline stellt sicher, dass bei mehreren Zellen jeweils die erste Zeile einer Zelle immer an derselben Grundlinie beginnt

sub tiefer gestellt bei gleicher Schriftgröße

super höhergestellt bei gleicher Schriftgröße

text-top ausgerichtet am oberen Schriftrand

text-bottom ausgerichtet am unteren Schriftrand

normal Automatischer Zeilenumbruch im Browser, Zeilenumbrüche im Quellcode ohne entsprechende Tags werden nicht dargestellt, mehrere Leerzeichen hintereinander im Quellcode werden zu ei-nem Leerzeichen zusammengefasst.

pre Zeilenumbrüche und mehrere Leerzeichen im Quellcode werden genauso dargestellt, wie im Quellcode eingegeben (wie mit dem <pre>-Tag).

nowrap Kein automatischer Zeilenumbruch, Zeile wird so lang dargestellt, wie sie im Quellcode/Editor erscheint, mehrere Leerzeichen im Quellcode werden zu einem Leerzeichen zusammengefasst.

pre-wrap Zeilenumbrüche, Leerzeichen und Einrückungen des Textes wer-den genauso dargestellt, wie im Quellcode/Editor eingegeben. Ist jedoch das Ende der Box, die den Text enthält, erreicht, erfolgt ein automatischer Umbruch.

pre-line Mehrere Leerzeichen hintereinander im Quellcode werden zu ei-nem Leerzeichen zusammengefasst, Zeilenumbruch erfolgt wie im Quellcode angegeben und am Ende der Zeile.

INT03B 67



4.17 Schatten (text-shadow/box-shadow)

Ein Schatten kann einem Text zugewiesen werden (text-shadow) oder einem Kasten (box-shadow). Dabei werden nacheinander vier Werte angegeben für die horizontale und die vertikale Verschiebung, sowie für den Grad der Verschwommenheit und die Far-be des Schattens.

#info { background-color:#666; -moz-box-shadow:-10px -10px 5px #ccc; -webkit-box-shadow:-10px -10px 5px #ccc; box-shadow:-10px -10px 5px #ccc;}

.beispiel { text-shadow:10px 10px 10px #030303;}

Wie Sie vielleicht schon bemerkt haben, benötigt die Angabe text-shadow keine brow-serspezifischen Präfixe, box-shadow hingegen schon.

In der Web-Visitenkarte wird der Schatten für die Überschrift 2. Ordnung, sowie für das Bild im Bereich header eingesetzt.

h2 { font-size:1.1em; color:#FFF; text-shadow:#0A0A0A 0px 2px 5px; }

#bild { width:149px; height:82px; float:left; -moz-box-shadow: #000 2px 2px 10px; -webkit-box-shadow: #000 2px 2px 10px; box-shadow: #000 2px 2px 10px;}

4.18 Zeichenabstand (letter-spacing)

Mit letter-spacing wird der Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmt. Es ist ebenfalls nur eine numerische Angabe möglich.

Diese Angabe kann (muss aber nicht!) ebenfalls der Lesbarkeit dienen, sollte aber auf je-den Fall zunächst im Detail ausprobiert werden.

h1 { letter-spacing:2px; }

Für die Web-Visitenkarte wird zunächst der allgemeine Zeichenabstand für Text um 1 Pixel erhöht.

body {background-color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:100.01%;color:#000;letter-spacing:1px;

}

68 INT03B



Außerdem erhalten die Überschriften <h1> und <h2> einen größeren Zeichenabstand, damit sie den Kopfbereich optisch ansprechender füllen.

h1 { font-family:Liberation, Verdana, sans-serif; font-size:2.2em; letter-spacing:0.25em;}

h2 { font-size:1.1em; color:#fff; text-shadow:#0A0A0A 0px 2px 5px; letter-spacing:0.15em;}

Da die Lesbarkeit der Kundenstimmen jedoch, bedingt durch die relativ kleine Schrift-größe, durch einen höheren Zeichenabstand nicht erhöht wird, wird der Zeichenabstand für die Zitate wieder auf normal gesetzt. Ebenso verhält es sich im Fußbereich.

.zitat {font-style:italic;letter-spacing:normal;

}

footer {clear:both;background-color:#8a6d4c;...font-size:75%;color:#fff;font-weight:bold;letter-spacing:normal;

}

INT03B 69



Abb. 4.5: Layout und Zeichenabstand

4.19 Wortabstand (word-spacing)

Mit word-spacing wird der Abstand zwischen Wörtern im Text bestimmt. Es ist nur eine numerische Angabe, keine prozentuale möglich.

Ein etwas höherer Wortabstand als der Standardabstand kann die Lesbarkeit von Texten erhöhen.

h3 { word-spacing:0.3em; }

70 INT03B



4.20 Zeilenhöhe (line-height)

Mit line-height kann die Zeilenhöhe bestimmt werden, also der vertikale Abstand zwi-schen den Zeilen.

p.info { line-height:16pt; }

Es können nummerische Angaben gemacht werden oder Prozentangaben. Bei Prozen-tangaben beziehen sich diese auf die Schriftgröße des Textes, der in der Zeile steht. Eine Zeilenhöhe von bspw. 200 % bei einer Schriftgröße von 10 px ergibt eine Zeilenhöhe von 20 px (also 200 Prozent von 10 px).

Der Bereich nav in unserer Web-Visitenkarte erhält eine größere Zeilenhöhe und da-durch einen größeren Zeilenabstand.

Hier sieht man, dass man die Angabe relativ mit der Maßeinheit em durchführen kann, aber auch, wie weiter unten zu sehen ist, mit Prozentangaben.

nav {background-color:#efece0;font-family:Verdana, Geneva, sans-serif;font-size:85%;color:#af5518;font-weight:bold;line-height:1.5em;

}

Da in der Mitte der meiste Text vorhanden ist, wird hier die Zeilenhöhe ebenfalls noch etwas erhöht.

Rechts steht insgesamt jedoch weniger Platz zur Verfügung, deshalb wird die Zeilenhö-he nicht ganz so hoch gewählt.

main {width:31em;float:left;font-size:85%;line-height:125%;

}

#rechts {width:11.5em;float:right;background-color:#d1d6e2;line-height:115%;

}

INT03B 71



Abb. 4.6: Layout und Zeilenhöhe

4.21 Listen

Es gibt zwei Arten von Listen, die geordnete Liste (ol = ordered list) und die ungeord-nete Liste, auch Aufzählungsliste genannt (ul = unordered list).

Für beide Arten gibt es verschiedene Darstellungsformen.

4.21.1 Darstellungstyp (list-style-type)

Der Darstellungstyp beider Listenarten unterscheidet sich, da eine ungeordnete Liste Listenpunkte einfach auflistet, ohne ihnen eine Priorität oder Nummerierung zu geben. Deshalb sind hier die Angaben disc (gefüllter Kreis), circle (ungefüllter Kreis), square

72 INT03B



(Rechteck) und none (kein vorangestelltes Aufzählungszeichen) möglich. Ist keine spe-zielle Angabe gemacht, benutzt der Browser seine Standardeinstellung, die Darstellung variiert also von Browser zu Browser.

ul { list-style-type:circle; }

Hinweis:

Bei der Benutzung von Dreamweaver kann es vorkommen, dass Angaben, die ge-macht wurden, korrekt sind, in der Entwurfsansicht jedoch nicht korrekt angezeigt werden. Deshalb sollte man immer auch über die Browservorschau das Ergebnis tes-ten, bevor man versucht, einen nicht vorhandenen Fehler zu beseitigen.

Bei geordneten Listen wird, wenn keine Angaben gemacht werden, als Standard 1., 2., 3., etc. (decimal) angezeigt. Es sind aber darüber hinaus auch Angaben wie z. B. i, ii, iii etc. (lower-roman), I, II, III, etc. (upper-roman), a, b, c, d, etc. (lower-alpha) und A, B, C, D, etc. (upper-alpha) möglich.

ol { list-style-type:lower-alpha; }

Seit CSS2 sind außerdem die Angaben lower-greek (Nummerierung anhand von grie-chischen Buchstaben), hebrew (Nummerierung anhand von hebräischen Buchstaben), decimal-leading-zero (Nummerierung mit vorangestellter 0, bspw 01., 02,, etc.), cjk-ideographic (Nummerierung anhand von ideographischen Zeichen), hiragana bzw. hi-ragana-iroha (Nummerierung in Japanisch, Kleinbuchstaben), katakana bzw. kataka-na-iroha (Nummerierung in Japanisch, Großbuchstaben) hinzugekommen, die bisher jedoch nur teilweise von Browsern interpretiert werden können.

4.21.2 Darstellungstyp: eigenes Bild (list-style-image)

Neben den oben beschriebenen Möglichkeiten der Darstellungstypen von Aufzählungs-zeichen können bei ungeordneten Listen auch eigene Grafiken benutzt werden. Diese Grafiken sollten im JPG- oder PNG-Format vorliegen. Natürlich müssen diese dement-sprechend klein sein (nur wenige Pixel) und sich zur Darstellung als Listenpunkte eig-nen.

ul { list-style-image:url(dreieck_rot.png); }

4.21.3 Listeneinrückung (list-style-position)

Standardmäßig wird bei einer Liste ein mehrzeiliger Listenpunkt immer so dargestellt, dass die neue Zeile nicht in Höhe des Aufzählungszeichens beginnt, sondern in Texthö-he, also outside (ausgerückt). Mit inside (eingerückt) wird die erste Zeile soweit einge-rückt, dass das Aufzählungszeichen in gleicher Höhe sitzt mit dem Textbeginn der zwei-ten Zeile.

ul { list-style-position:inside; }

Auch hier können wieder mehrere Angaben zusammengefasst werden.

ul { list-style:decimal inside; }

INT03B 73



Für die vorhandene Liste unserer Web-Visitenkarte wird folgende Definition eingefügt, die die Anzeige von vorangestellten Listenzeichen, wie Punkten oder Strichen, verhin-dert. Das wirkt in diesem Fall optisch ansprechender als Aufzählungszeichen.

li {list-style:none;}

Abb. 4.7: Layout und Listendarstellung

4.22 Außenabstand (margin)

Der Außenabstand bestimmt den Raum zwischen zwei Elementen.

4.22.1 Außenabstand nach oben (margin-top)

Mit margin-top kann der Außenabstand nach oben bestimmt werden.

h1,h2,h3 { margin-top:2cm; }

4.22.2 Außenabstand nach rechts (margin-right)

Mit margin-right kann der Außenabstand nach rechts bestimmt werden.

p,ul,ol,table { margin-right:15px; }

4.22.3 Außenabstand nach unten (margin-bottom)

Mit margin-bottom wird der Außenabstand nach unten bestimmt.

p { margin-bottom:20pt; }

4.22.4 Außenabstand nach links (margin-left)

Mit margin-left kann der Außenabstand nach links bestimmt werden.

74 INT03B



p,ul,ol,table { margin-left:15px; }

Man kann die Angaben auch zusammenfassen, dann ist zu beachten, dass immer von oben im Uhrzeigersinn definiert wird (oben, rechts, unten, links).

table { margin:15px 10px 20px 10px; }

Es sind maximal vier numerische Angaben möglich (für jede Seite eine).

Sind alle Angaben gleich, kann man diese auf eine Angabe beschränken.

p.news { margin:1.3em; }

Der Absatz hat dann den gleichen Außenabstand von 1,3em nach oben, rechts, unten und links zum Nachbarelement oder Browserfensterrand.

Bei zwei Angaben bezieht sich die erste auf oben und unten und die zweite auf links und rechts.

p.news { margin:1.3em 1em; }

Bei drei Angaben bezieht sich die erste auf oben, die zweite auf links und rechts und die dritte auf unten.

p.news { margin:1.3em 1em 1.5em; }

Achtung:

Bei nummerischen Angaben mit Kommastellen, wie bspw. 1.3em wird ein Punkt be-nutzt, kein Komma!

Für die Web-Visitenkarte wird zunächst eine allgemeine Angabe gemacht, die für alle Elemente der HTML-Datei die Außenabstände auf 0 setzt. Ansonsten kann es passieren, dass manche Browser Standardwerte von wenigen Pixeln automatisch anzeigen, obwohl diese nicht explizit angegeben worden sind. Diese Angabe wird an die erste, oberste Stel-le der CSS-Datei gesetzt, weil sie ansonsten ggf. nachfolgende, explizit für einzelne Ele-mente definierte Angaben zu Abständen überschreibt.

* {margin:0;

}

Jetzt wirkt das Layout zwar etwas zerschlagen, mit einigen wenigen Angaben zu den In-nen- und Außenabständen, sowie zu den Rahmen wird jedoch alles wieder an seinen rechten Platz gerückt.

Zunächst erhält der Bereich #kundenstimmen einen Außenabstand nach unten, damit etwas mehr Abstand zwischen den einzelnen blockquote-Elementen entsteht.

blockquote {margin-bottom:1.4em;

}

Das Div #gesamt erhält einen Abstand von 1em nach oben (zum Browserfenster) und einen automatischen Abstand nach rechts und links. Damit wird eine mittige Positionie-rung des Divs erreicht.

INT03B 75



#gesamt {width:54em;background-color:#fff;font-size:95%;margin-top:1em;margin-right:auto;margin-left:auto;

}

Die nächste Angabe definiert einen Abstand zwischen header und den nachfolgenden Divs.

header {min-height:82px;background-color:#6379ab;margin-bottom:1em;

}

Außerdem wird ein Abstand vom Bild ausgehend nach rechts (also zwischen dem Bild und den beiden Überschriften) im Kopfbereich definiert.

#bild {width:149px;height:82px;float:left;-moz-box-shadow: #000 2px 2px 10px;-webkit-box-shadow: #000 2px 2px 10px;box-shadow: #000 2px 2px 10px;margin-right:1.8em;

}

Die folgenden Angaben sind selbsterklärend:

h1 { font-family:Liberation, Verdana, sans-serif; font-size:2.2em; letter-spacing:0.25em; margin-bottom:0.3em;}

h2 { font-size:1.1em; color:#fff; text-shadow:#0A0A0A 0px 2px 5px; letter-spacing:0.15em; margin-top:0.2em;}

#links aside h3 { font-size:120%; color:#000; margin-bottom:0.2em;}

nav { background-color:#efece0; font-family:Verdana, Geneva, sans-serif;

76 INT03B



font-size:85%; color:#af5518; font-weight:bold; line-height:1.5em; margin-bottom:4em;}

Während oben eine Angabe zum Außenabstand nach unten (margin-bottom) für <h3>-Überschriften im Bereich #links und dort für aside gemacht wurde, wird nun ein größe-rer Außenabstand nach unten für <h3>-Überschriften im Bereich nav, der sich ebenfalls im Bereich #links befindet, definiert (in der CSS-Datei wurde das vorangestellte #links weggelassen, weil es in der Web-Visitenkarte nur einen nav-Bereich gibt und deshalb keine eindeutige Zuweisung zu #links erfolgen musste).

#links nav h3 {font-size:100%;color:#af5518;margin-bottom:0.5em;

}

Es folgen weitere Angaben zu Abständen für die Web-Visitekarte:

main {width:31em;float:left;font-size:85%;line-height:125%;margin-bottom:1em;

}

main h3 {font-size:100%;margin-top:0.8em;margin-bottom:0.2em;

}

#rechts {width:11.5em;float:right;background-color:#d1d6e2;line-height:115%;margin-bottom:1em;

}

Langsam kann man das endgültige Layout nun schon erahnen (siehe Abb. 4.8)!

INT03B 77



Abb. 4.8: Layout und Außenabstände

4.23 Innenabstand (padding)

Der Innenabstand bestimmt den Leerraum zwischen dem Inhalt eines Elements und sei-nem eigenen Rahmen.

4.23.1 Innenabstand nach oben (padding-top)

Mit padding-top kann der Innenabstand nach oben bestimmt werden.

p { padding-top:15px;}

4.23.2 Innenabstand nach rechts (padding-right)

Mit padding-right kann der Innenabstand nach rechts bestimmt werden.

td { padding-right:3.5em;}

4.23.3 Innenabstand nach unten (padding-bottom)

Mit padding-bottom kann der Innenabstand nach unten bestimmt werden.

td { padding-bottom:10px; }

78 INT03B



4.23.4 Innenabstand nach links (padding-left)

Mit padding-left kann der Innenabstand nach links bestimmt werden.

h1 { padding-left:30pt; }

Auch hier können wieder die Angaben zusammengefasst werden (oben, rechts, unten, links).

p { padding:15px 10px 20px 10px; }

Sind alle Angaben gleich, kann man diese ebenfalls auf eine Angabe beschränken.

p { padding:15px; }

Dieser Absatz hat den gleichen Innenabstand von 15 Pixeln oben, rechts, unten und links.

Ebenso wie bei der Web-Visitenkarte für alle Elemente die Außenabstände auf 0 gesetzt werden, wird dies nun auch für die Innenabstände angegeben.

* {margin:0;padding:0;}

Weitere Angaben für die Web-Visitenkarte:

#gesamt {width:54em;background-color:#fff;font-size:95%;margin-top:1em;margin-right:auto;margin-left:auto;padding:0.5em;

}

p {padding-bottom:0.8em;

}

Hierbei handelt es sich um eine allgemeine Angabe für Absätze <p>.

header {min-height:82px;background-color:#6379ab;margin-bottom:1em;padding-top:0.5em;padding-left:0.5em;padding-bottom:1em;

}

h1 {font-family:Liberation, Verdana, sans-serif;font-size:2.2em;letter-spacing:0.25em;margin-bottom:0.3em;padding-top:0.1em;

}

INT03B 79



Die padding-top Angabe für <h1> gewährleistet in diesem Fall, dass bei einer Verkleine-rung der Schrift im Browser (Option: Nur Text zoomen) der rechte Bereich nicht um-bricht und das Layout zerstört.

nav {background-color:#efece0;font-family:Verdana, Geneva, sans-serif;font-size:85%;color:#af5518;font-weight:bold;line-height:1.5em;margin-bottom:4em;padding:0.6em;

}

Für die Kundenstimmen wird ein Innenabstand von oben und unten 0.6em und von links und rechts 0.3em angegeben.

#links aside { font-size:70%; color:#5b4628;padding:0.6em 0.3em;

}

main {width:31em;float:left;font-size:85%;line-height:125%;margin-bottom:1em;padding-right:1em;padding-left:1em;

}

#rechts {width:11.5em;float:right;background-color:#d1d6e2;line-height:115%;margin-bottom:1em;padding:0.6em;

}

#adresse {color:#5b4628;font-weight:bold;padding-top:3em;

}

Für die Absätze innerhalb des Bereichs #adresse wird ein eigener Abstand definiert.

#adresse p {padding-right:0.2em;padding-bottom:0.5em;padding-left:0.2em;

}

80 INT03B



Hier noch einmal die alternative Schreibweise zu den vier einzeln aufgeführten Anga-ben zu padding. Es gilt die Reihenfolge oben-rechts-unten-links.

footer {clear:both;background-color:#8a6d4c;...font-size:75%;color:#fff;font-weight:bold;letter-spacing:normal;padding:0.5em 1em 0.5em 2em;

}

.fuss {font-weight:normal;padding-left:2.3em;

}

Abb. 4.9: Layout und Innenabstände

Da Sie jetzt bereits relativ viele CSS-Definitionen in die externe CSS-Datei eingefügt ha-ben, haben Sie sicherlich bemerkt, dass die einzelnen Angaben nicht immer leicht zu fin-den sind und die bloße Auflistung unübersichtlich ist. Deshalb empfiehlt es sich spätes-

INT03B 81



tens jetzt (eigentlich schon von Anfang an), die CSS-Datei zu ordnen. Dabei ist die Möglichkeit der Kommentare sehr hilfreich, weil Sie so die einzelnen Bereiche optisch trennen können. Das erleichtert auch die spätere Pflege.

Eine Strukturierung durch Kommentare kann beispielsweise wie folgt aussehen (Aus-schnitt):

/*Default Settings*/

* { margin:0; padding:0;}footer, header, main, nav, aside, section { display:block;}

/*Ende Default Settings*/

/*……………………………………………………………………………………………………………………………………………*/

/*Angaben für Layoutrahmen*/

#gesamt { width:54em; background-color:#fff; font-size:95%; margin-top:1em; margin-right:auto; margin-left:auto; padding:0.5em;}

/*Ende Angaben für Layoutrahmen*/……

/*……………………………………………………………………………………………………………………………………………*//*Angaben für nav*/

nav { background-color:#efece0; font-family:Verdana, Geneva, sans-serif; font-size:85%; color:#af5518; font-weight:bold; line-height:1.5em; margin-bottom:4em; padding:0.6em;}

nav h3 { font-size:100%; color:#af5518; margin-bottom:0.5em;}

82 INT03B



/*Ende Angaben für nav*/……

Überprüfen Sie aber bitte nach der Umstrukturierung, ob die CSS-Formatierungen in der Web-Visitenkarte noch korrekt angezeigt werden. Denn zum einen kann die Kaskadie-rung zu ungewollten Veränderungen in der Anzeige führen, zum anderen kann ein klei-ner Fehler (ein Zeichen zu viel oder zu wenig, eine fehlende Klammer, o. Ä.) die korrekte Anzeige verhindern.

4.24 Rahmen (border)

Der Rahmen umgrenzt den Inhalt bzw. das Element und kann mehrere Eigenschaften besitzen.

4.24.1 Rahmentyp (border-style)

Der Rahmentyp border-style ermöglicht eine Auswahl verschiedener Arten von Rah-men. So kann ein Rahmen durchgehend (solid), aber auch gepunktet (dotted), gestri-chelt (dashed), doppelt (double), und im 3D-Effekt (inset, outset, ridge, groove) dar-gestellt werden. Er kann auch mit none explizit nicht angezeigt werden.

Browser stellen diese Angaben teilweise unterschiedlich oder gar nicht dar, hier ist es wichtig zu testen, um das gewünschte Ergebnis zu erhalten.

table { border-style:dotted; }

Will man nicht an allen vier Seiten den gleichen Rahmentyp haben, kann man die Seiten auch einzeln definieren.

table {border-top-style:dotted;border-right-style:solid;border-bottom-style:groove;border-left-style:double;

}

Auch hier gilt wieder die für margin (und padding) erläuterte Reihenfolge der Angaben.

Aber Vorsicht, mit diesen Effekten kann man schnell zu viel des Guten erreichen, lieber dezent und wirkungsvoll einsetzen, als überladen.

Mit der Angabe hidden wird die Anzeige eines Rahmens unterdrückt. Im Gegensatz zur Angabe none wird hier jedoch nicht nur für das betreffende Element die Anzeige unter-drückt, sondern auch für den Rahmen des Nachbarelements. Sinnvoll ist diese Angabe im Zusammenspiel mit Tabellenzellen, die aneinander grenzen. Allerdings muss dem entsprechenden Element zusätzlich die Angabe border-collapse:collapse zugewiesen werden.

INT03B 83



Wenn bspw. zwei benachbarten Zellen ein Gesamtrahmen von 2px zugewiesen wird, würde sich der Abstand zwischen den beiden Zellen auf 4px erhöhen (Abb. 4.10). Mit der Angabe collapse würden sich die, sich treffenden Rahmen der beiden Zellen, über-einanderlegen mit dem Ergebnis, dass der Abstand nur noch 2px betragen würde (Abb. 4.11).

Allerdings ist es immer sinnvoll bei einer Angabe zum Rahmentyp (außer bei none) eine Rahmenbreite zu definieren, um das gewünschte Ergebnis zu erhalten und sich nicht auf die per Default von den Browsern festgelegte Rahmenbreite zu verlassen, die variieren kann.

4.24.2 Rahmendicke (border-width)

Wie dick der Rahmentyp dargestellt wird, bestimmt die Angabe border-width. Dabei können sowohl nummerische Angaben gemacht werden als auch Standardgrößenanga-ben, wie bspw. thin, medium oder thick. Diese Angaben sind jedoch relativ, d. h., sie können in ihrer Erscheinung je nach Browser ebenfalls unterschiedlich dargestellt wer-den.

Damit die Rahmendicke dargestellt werden kann, muss außerdem ein Rahmentyp defi-niert werden.

table {border-width:3px;border-style:dotted;

}

Die Tabelle im obigen Beispiel hat einen gepunkteten Rahmen oben, rechts, unten und links von 3px Dicke.

Auch bei der Rahmendicke können für alle vier Seiten einzelne Angaben gemacht wer-den.

table {border-top-width:medium;border-right-width:thin;border-bottom-width:medium;border-left-width:thin;border-style:dotted;

}

Hier kann man ebenso Angaben zusammenfassen, dies erfolgt ebenfalls in der schon be-kannten festgelegten Reihenfolge:

table { border-width:3px 5px; }

Abb. 4.10: Zwei Tabellenzellen ohne „border-collapse:collapse“

Abb. 4.11: Zwei Tabellenzellen mit „border-collapse:collapse“

84 INT03B



Die Tabelle hat einen Rahmen von 3px oben und unten und 5px rechts und links.

table { border-width:3px 5px 2px; }

Die Tabelle hat einen Rahmen von 3px oben, 5px rechts und links und 2px unten.

table { border-width:3px 5px 2px 4px; }

Die Tabelle hat einen Rahmen von 3px oben, 5px rechts, 2px unten und 4px links.

4.24.3 Rahmenfarbe (border-color)

Auch bei der Rahmenfarbe border-color ist es möglich, entweder dem gesamten Rahmen oder den vier Seiten unabhängig voneinander eine Rahmenfarbe zu geben.

table {border-color:#6600cc;border-style:solid;

}

table {border-top-color:#6600cc;border-right-color:#cc0000;border-bottom-color:#6600cc;border-left-color:#cc0000;border-style:solid;

}

Will man hier ebenfalls Angaben zusammenfassen, erfolgt dies nach der gleichen fest-gelegten Reihenfolge wie bei der Rahmendicke.

Man kann die verschiedenen Angaben für Dicke, Farbe und Typ eines Rahmens auch zu-sammenfassen.

p.info { border:5px double #6600cc; }

4.24.4 Rahmen – Bilder (border-image)

Auch Grafiken können mittlerweile für Ränder eingesetzt werden, maximal drei URLs können hierfür angegeben werden. Dazu stehen border-top-image, border-bottom-image, border-left-image und border-right-image zur Verfügung. Mit border-cor-ner-image kann man zusätzlich für die Ecken Grafiken angeben.

#newsbereich { border:20px solid; border-image:url(beispiel.png);}

Lesetipp: http://www.mediaevent.de/css/border-image.html

INT03B 85

http://www.mediaevent.de/css/border-image.html



4.24.5 Rahmen – abgerundete Ecken (border-radius)

Elemente können abgerundete Ecken erhalten. Dazu wird der Radius mit zwei Werten angegeben, der horizontale und der vertikale Radius (ausgehend von einer Ellipse). Die Angabe kann sich auf alle vier Ecken beziehen, die Rundung kann aber auch für jede Ecke einzeln definiert werden.

#beispiel { border:5px solid #333333; -moz-border-radius:15px; -webkit-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; border-radius:15px;}

Innerhalb der Web-Visitenkarte wird zunächst auch der Rahmen für alle Elemente auf 0 gesetzt.

* {margin:0;padding:0;border:0;

}

Dem Kopfbereich, sowie dem Fußbereich wird danach explizit ein Rahmen zugewiesen.

header {min-height:82px;background-color:#6379ab;margin-bottom:1em;padding-top:0.5em;padding-left:0.5em;padding-bottom:1em;border:1px solid #000;

}

footer {clear:both;background-color:#8a6d4c;...font-size:75%;color:#fff;font-weight:bold;letter-spacing:normal;padding:0.5em 1em 0.5em 2em;border:1px solid #000;

}

Für die Bereiche nav und #rechts werden nun noch abgerundete Ecken definiert.

Bei allen Browsern, die diese Angaben noch nicht interpretieren können, werden diese Bereiche mit ganz normalen Ecken angezeigt.

nav {background-color:#efece0;font-family:Verdana, Geneva, sans-serif;

86 INT03B



font-size:85%;color:#af5518;font-weight:bold;line-height:1.5em;margin-bottom:4em;padding:0.6em;-moz-border-radius-topright:15px;-moz-border-radius-bottomright:0px;-moz-border-radius-bottomleft:15px;-moz-border-radius-topleft:0px;-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:15px;-webkit-border-top-left-radius:0px;border-top-right-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:15px;border-top-left-radius:0px;

}

#rechts {width:11.5em;float:right;background-color:#d1d6e2;line-height:115%;margin-bottom:1em;padding:0.6em;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:15px;-moz-border-radius-bottomleft:0px;-moz-border-radius-topleft:15px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:0px;-webkit-border-top-left-radius:15px;border-top-right-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:0px;border-top-left-radius:15px;

}

Sie erinnern sich: Hier werden im Prinzip dreimal identische Angaben gemacht, aller-dings mit verschiedenen Schreibweisen. Das ist nötig, damit möglichst viele aktuelle Browser (Firefox Safari, Opera, ggf. der IE ab Version 9) diese Angabe interpretieren und anzeigen können.

Alle drei Schreibweisen (border, -moz-border und webkit-border) legen jedoch die Rundungswerte für die vier Ecken oben-links, oben-rechts, unten-links und unten-rechts fest. Sollen alle Werte identisch sein, genügt jeweils die Angabe border-radius, -moz-border-radius und -webkit-border-radius.

In unserem Fall erhält der Bereich nav eine um 15px abgerundete Ecke oben rechts und unten links, der Bereich #rechts erhält dagegen eine um 15px abgerundete Ecke oben links und unten rechts.

INT03B 87



Zu guter Letzt kann die Breite des Bereichs main noch auf 33em erhöht werden, damit sie links und rechts bündig mit dem Kopf- und dem Fußbereich abschließt.

main {width:33em;float:left;font-size:85%;line-height:125%;margin-bottom:1em;padding-right:1em;padding-left:1em;

}

Abb. 4.12: Layout mit Rahmenangaben

4.25 Zeitliche Übergänge (transition)

Eine Änderung des Werts einer CSS-Eigenschaft nach einem bestimmten, definierten Zeitraum, ermöglicht transition. Dadurch können, rein CSS-basiert, ebenso Bewegun- gen von Elementen erzeugt werden, wie das Ein- und Ausblendungen von Elementen. Dazu wird eine Klasse mit den gewünschten Angaben erstellt, sowie eine zusätzliche CSS-Definition, wann (hier hover, also wenn sich die Maus auf das Element bewegt) die Änderung stattfinden soll und was sich ändern soll (hier die Hintergrundfarbe).

88 INT03B



.beispiel {background: #06C; transition: all 2s ease;}

.beispiel:hover {background: #6FF;}

Lesetipp: http://www.olivergast.de/wp-content/demos/transitions/index.html

4.26 Transformieren (transform)

Mit transform lassen sich bspw. Grafiken bei einem Ereignis wie hover skalieren (scale), drehen (rotate), verschieben (translate) oder verzerren (skew).

.beispiel{ transition: transform 0.6s ease-out;}

.beispiel:hover { transform: scale(1.8);}

Nicht alle Features werden momentan von allen aktuellen Browsern unterstützt, bei älteren Browsern ist die Einschränkung noch größer. Ausführliche Informationen zu CSS3, Browser-Unterstützung sowie CSS3-Generatoren finden Sie bspw. unter

http://css3generator.com/

http://www.mediaevent.de/css/

http://www.olivergast.de/2012/05/31/css3-ubersicht-der-artikel-und-demos/

4.27 Der „Pfiff“ zum Schluss

Nun bekommt die Web-Visitenkarte im letzten Schritt noch den angekündigten Pfiff, den Rahmen, der die Visitenkarte umgeben soll.

Dazu wird in die HTML-Datei noch vor dem Div #gesamt ein Div #site eingefügt, das alle Elemente umschließt.

…<body><div id="site">

<div id="gesamt">…</div>

</div></body></html>

In der CSS-Datei werden für den Bereich #site folgende Angaben gemacht:

#site {width:1040px;margin-top:0;margin-right:auto;margin-bottom:1em;margin-left:auto;background-image:url(bilder/bg.png);background-position:bottom right;background-repeat:no-repeat;

}

INT03B 89

http://www.olivergast.de/wp-content/demos/transitions/index.html






Mit diesen Angaben wird dem Bereich #site eine feste Breite gegeben, damit das Bild, das als Hintergrundbild angegeben wird, korrekt positioniert und angezeigt wird. Die Ausrichtung (Außenabstand) orientiert sich am Bereich #gesamt und wird entsprechend übernommen.

Als Hintergrundbild wird das Bild bg.png verwendet, das unten rechts ausgerichtet und nicht wiederholt wird.

Abb. 4.13: Die Rahmengrafik „bg.png“

Und damit man ein wenig mehr vom Hintergrundbild sehen kann, erhalten die Bereiche #gesamt und #rechts eine leichte Transparenz. Dazu werden die Farbangaben in rgba-Angaben umgewandelt, mit Nennung des Transparenzwerts.

#gesamt { width:54em; background-color: rgba(255, 255, 255, 0.8); font-size:95%; margin-top:1em; margin-right:auto; margin-left:auto; padding:0.5em;}

#rechts { width:11.5em; float:right; background-color: rgba(209, 214, 226, 0.6); line-height:115%; margin-bottom:1em; padding:0.6em; -moz-border-radius-topright:0px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:0px; -moz-border-radius-topleft:15px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-right-radius:15px; -webkit-border-bottom-left-radius:0px; -webkit-border-top-left-radius:15px; border-top-right-radius:0px;

90 INT03B



border-bottom-right-radius:15px; border-bottom-left-radius:0px; border-top-left-radius:15px;}

Um den weißen Rand auf der rechten Seite zu vermeiden, wird die Abstandsangabe für #gesamt noch leicht angepasst.

#gesamt { width:54em; background-color: rgba(255, 255, 255, 0.8); font-size:95%; margin-top:1em; margin-right:auto; margin-left:auto; padding:0.5em 0em 0.5em 0.5em;}

Die Web-Visitenkarte ist nun im Prinzip fertig, allerdings sollte eines unbedingt noch er-gänzt werden: Der Verweis auf die Mail-Adresse und die Website im Kontaktbereich.

Dazu wird in der CSS-Datei die Formatierung für den Verweis definiert, und zwar für den Verweis selbst (a bzw. a:link), den besuchten, also mindestens einmal angeklickten Verweis (a:visited), den Verweis, wenn er angeklickt wird (a:active) und den Verweis, wenn man die Maus drüber bewegt (a:hover).

#adresse a, #adresse a:link,#adresse a:visited { color:#5b4628; font-weight:bold; text-decoration: none;}#adresse a:active, #adresse a:hover { text-decoration: underline;}

Im Fall der Web-Visitenkarte verändert der Verweis nur in einem Zustand sein Erschei-nungsbild, wenn man die Maus drüber bewegt bzw. ihn anklickt. Dann erscheint ein Un-terstrich als Zeichen, dass es sich um einen Verweis handelt.

In der HTML-Datei muss der Code entsprechend erweitert werden.

Im Browser Firefox wird die Web-Visitenkarte nun wie folgt dargestellt:

…<p class="normal"><a href="mailto:[email protected]">[email protected]</a> <br><a href="http://www.ReinInsNeueHeim.de/2.0">www.ReinInsNeueHeim.de/2.0</a></p>…

INT03B 91



Abb. 4.14: Die fertige Web-Visitenkarte

Zusammenfassung

Mit der Struktur der HTML-Datei als Basis wurde das Erscheinungsbild der Web-Visi-tenkarte vollständig mittels CSS realisiert. Man hätte in diesem Fall, da es sich nur um eine HTML-Datei handelt, die CSS-Angaben auch in den Dateikopf integrieren können.

Wer klug ist, sorgt jedoch vor! Da man nicht weiß, ob die Web-Visitenkarte nicht früher oder später zu einer Website mit mehreren Seiten ausgebaut werden wird, wurden schon alle Voraussetzungen hierfür geschaffen. Neben dem Layout, das die Möglichkeit be-rücksichtigt hat, den Bereich nav zu einer Navigation umzugestalten, gehört hierzu auch die Auslagerung der CSS-Angaben.


4.1 Was sind relative Größenangaben?

4.2 Was ist die Standardschriftgröße, die in den meisten Browsern voreingestellt ist?

4.3 Was bewirkt die Deklaration background-repeat, wofür wird sie benutzt und welche Eigenschaften und Werte sind möglich?

4.4 Was bewirkt die Deklaration letter-spacing, warum kann es sinnvoll sein zu benutzen und wann benutzt man sie besser nicht?

92 INT03B

5


5 Überprüfung der Darstellung

Die Web-Visitenkarte ist mit der Einschränkung „im Prinzip“ fertig, da zwei wichtige Punkte bisher nicht thematisiert worden sind, jedoch im Prinzip schon während der Erstellung immer wieder zur Anwendung kommen sollten: Die Überprüfung der CSS-Datei und der HTML-Datei auf validen Code, sowie die An-sicht in verschiedenen Browsern.

Diesen Themen widmet sich dieses Kapitel.

5.1 Validatoren

Valider Code ist eine der Grundvoraussetzungen für eine erfolgreiche, zeitgemäße Web-site. Dabei spielt es einerseits eine Rolle, ob überflüssiger Quellcode eine Website unnö-tig aufbläht und damit die Ladezeit erhöht. Zum anderen führt Quellcode, der nicht feh-lerfrei und für gängige Browser angepasst ist, zu einer fehlerhaften Darstellung im Browser und macht im schlimmsten Fall die Website unbrauchbar. Ganz zu schweigen von dem unprofessionellen Eindruck, der für potenzielle Kunden entsteht und wahr-scheinlich dazu führt, dass die Website nicht wieder besucht werden wird.

Wichtig ist also, dass eine Website den Webstandards entspricht. Auch hier liegt ein be-sonderes Augenmerk auf Barrierefreiheit, denn unter Berücksichtigung verschiedener Ausgabe- und Anzeigegeräte ist es besonders wichtig, eine Website hinsichtlich der Va-lidität zu testen, um nicht bestimmte Nutzergruppen auszuschließen.

Tipp:

Informationen zur Barrierefreiheit finden Sie bspw. unter http://www.einfach-fuer-alle.de/, einen Selbsttest zur Bewertung einer Website bezüglich ihrer Barrierefrei-heit finden Sie unter http://www.bitvtest.de/.

Zur Überprüfung der Web-Visitenkarte werden die beiden Validatoren des W3C ge-nutzt, der HTML-Validator (http://validator.w3.org) und der CSS-Validator (http://jigsaw.w3.org/css-validator/ ).

Die Überprüfung der CSS-Angaben mittels des CSS-Validators des W3C fällt (zugege-benermaßen nicht überraschend) negativ aus (Abb. 5.1), weil die Angabe des Farbver-laufs im Fußbereich noch nicht als Standard definiert ist.

Hier gilt es abzuwägen, ob man den offiziell invaliden Code in Kauf nehmen will, denn der Code selbst enthält keine Fehler, ist also im Prinzip korrekt und der Farbverlauf ist optisch ansprechend.

Diese Entscheidung hängt von verschiedenen Faktoren, wie Auftraggeber, Zielgruppe, Ihnen selbst, ab und muss individuell getroffen werden.

Selbstredend ist jedoch, dass bei der Überprüfung einer Website auf validen Code keine Syntax-Fehler auftreten und ignoriert werden dürfen.

Zum Beweis, dass lediglich der Farbverlauf zu der Fehlermeldung geführt hat, hier noch einmal die validierte Datei ohne die Rahmenabrundungen (Abb. 5.2).

INT03B 93

http://www.einfach-fuer-alle.de/


http://www.bitvtest.de/

http://validator.w3.org

http://jigsaw.w3.org/css-validator/



Abb. 5.1: Überprüfung inkl. Farbverlauf-Angabe mit dem CSS Validator des W3C (Fehler-meldung)

Abb. 5.2: Überprüfung ohne Farbverlauf-Angabe mit dem CSS Validator des W3C (fehler-frei)

5.2 Browser

Ohne Browser geht gar nichts! Die Vorlieben (häufig unabhängig vom Können), welche Browser genutzt werden, sind sehr unterschiedlich.

Wobei die aktuellste Browserversion (im Moment gibt es bspw. den MSIE in der Version 11, Mozilla Firefox in der Version 40.0, Google Chrome in der Version 45) nicht auto-matisch die am häufigsten genutzte ist. Bis sich eine neue Browserversion so weit etab-liert, dass sie von der Mehrzahl der Internetanwender genutzt wird, gibt es meist schon mindestens eine Nachfolgeversion.

94 INT03B

Überprüfung der Darstellung 5


Aus diesem Grund sollte man beim Test von Websites neben der aktuellen Version min-destens eine Version abwärts testen. Die Idee jedoch, dann die aktuelle Version bei der Überprüfung außer Acht zu lassen, da man davon ausgeht, dass diese in ihrer Funktio-nalität besser ist als ihre Vorgängerversion, sollte man lieber verwerfen. Denn manche vermeintlich verbesserte, überarbeitete Version beinhaltet plötzlich wieder Fehler in der Darstellung, die ihre Vorgänger nicht hatten.

Besonders „Anfänger“ oder „Selten-Surfer“ aktualisieren ihre Browserversionen – wenn überhaupt – dann zumindest nicht regelmäßig.

Eine regelmäßige Aktualisierung ist jedoch wichtig, um u. a. Sicherheitslücken zu schlie-ßen.

Welche Browser für die Überprüfung wichtig sind, hängt u. a. von der Zielgruppe ab. Er-wartet man primär eher internetunkundige Gelegenheitsnutzer, dann sollte man viel-leicht eine Browserversion tiefer testen, da man nicht davon ausgehen kann, dass sie ih-ren Browser regelmäßig updaten. Bei internetkundigen Usern, die sich höchstwahr-scheinlich auch in ihrer Freizeit mit Computern beschäftigen, sind neben den gängigen und aktuellsten Browsern ggf. auch ungewöhnlichere anzutreffen.

Sinnvoll kann hier bspw. eine Auswertung/Analyse der Besucher der Website sein, da Analysetools häufig auch anzeigen, mit welchen Browsern die Site besucht worden ist. Dies ist natürlich nur möglich, wenn die Site bereits Online ist und Zugriffe verzeichnen kann.

Eine allgemeine Hilfestellung zur Browsernutzung leisten hier bspw. die Statistiken un-ter https://www.browser-statistik.de/statistiken/versionen/.

Da ältere Browser viele HTML- und CSS-Befehle noch nicht kennen und dementspre-chend nicht darstellen können, wird es ab einer bestimmten Version abwärts mit Sicher-heit zu Fehlern in der Darstellung kommen. Deshalb ist es sinnvoll zu wissen, welche Browser primär im Einsatz sind und welche bereits so veraltet sind, dass man auf sie kei-ne Rücksicht mehr nehmen muss.

Ein weiterer wichtiger Punkt ist die Sicherheit. Ältere Browser weisen meist Sicherheits-lücken auf, die bei aktuelleren Browsern geschlossen wurden (so sollte es zumindest sein!). Allein aus diesem Grund sollte man die Benutzung veralteter Browserversionen nicht unterstützen.

Nach wie vor zählt der Microsoft Internet Explorer (http://www.microsoft.com/de-de/) insgesamt zu den am häufigsten genutzten Browsern im Internet, da er bereits vor-installiert mit dem Windows Betriebssystem geliefert wird.

Daneben wächst die Zahl derer, die Mozilla Firefox (https://www.mozilla.org/de/) als Browser nutzen, ebenso Google Chrome (http://www.google.com/chrome/browser/), Apple Safari (http://www.apple.com/downloads/) und Opera (http://www.opera.com/de), der besonders bei Usern mit älteren PCs beliebt ist, da dieser Browser auch mit einer niedrigen Performance und vergleichsweise geringem Speicherbedarf sehr gut arbeitet. Das Problem bei der Überprüfung von Websites anhand mehrerer Browser besteht dar-in, dass nicht alle Browser in verschiedenen Versionen auf einem Rechner installiert werden können. Außerdem gibt es nicht nur verschiedene Browserversionen, sondern auch verschiedene Betriebssysteme mit den entsprechenden Browsern. Hier kann man schnell die Übersicht verlieren.

INT03B 95

https://www.browser-statistik.de/statistiken/versionen/

http://www.microsoft.com/de-de/


http://www.google.com/chrome/browser/

http://www.apple.com/downloads/



Um einen sogenannten Cross-Browser-Check durchzuführen, würde man also eine Menge verschiedener Browserarten, Versionen und Betriebssysteme benötigen, was auch mit finanziellem Aufwand verbunden wäre.

Es gibt jedoch im Internet Anbieter, die diese Tests übernehmen.

Zum einen sind dies kommerzielle Anbieter, für die Kosten entstehen. Allerdings bieten diese Anbieter in der Regel nicht nur Screenshots der Website, sondern auch Funktiona-litätstests an.

Wählen Sie diese Möglichkeit, sollten Sie die Kosten in der Kostenkalkulation für den Kunden berücksichtigen.

Zu den Anbietern kostenpflichtiger Cross-Browser-Check-Dienste zählen unter ande-rem

• CrossBrowserTesting

http://crossbrowsertesting.com

• BrowserStack

https://www.browserstack.com

Zum anderen gibt es einige kostenlose Anbieter, die jedoch in der Funktionalität nicht ganz so umfangreich sind und häufig lediglich Screenshots der Website, wie sie in ver-schiedenen Browsern dargestellt wird, anfertigen.

• Browsershots

http://browsershots.org

• BrowserStack – Bereich Screenshots (Trialversion nach Registrierung)


• CrossBrowserTesting – Bereich Screenshots (Trialversion nach Registrierung)


Add-ons, spezielle Software und Virtuelle Maschinen sind eine weitere Möglichkeit ver-schiedene Browser zu installieren, zu simulieren oder leicht aufzurufen. Während das Add-on Launchy eine Erweiterung von Firefox darstellt und in die Browserleiste integ-riert die Browser Internet Explorer, Google Chrome und Safari aufruft (falls auf dem Rechner installiert), kann man bspw. mit der kostenlosen Software IETester die Versio-nen 5.5 bis 10 des Internet Explorers simuliert testen.

• Firefox Add-on Launchy

https://addons.mozilla.org/de/firefox/addon/launchy/

Wenn man verschiedene Browser installiert hat, gibt es mit Launchy eine nette Erwei-terung (Add-on) für den Firefox-Browser, um sich eine Seite schnell in verschiedenen Browsern betrachten zu können.

Diese Erweiterung integriert sich in die Firefox-Navigations-Symbolleiste:

96 INT03B



http://browsershots.org/

https://www.browserstack.com/





Abb. 5.3: Add-on Launchy für Firefox

• Virtuelle Maschinen

Virtuelle Maschinen führen komplette Betriebssysteme auf virtueller Hardware, also bspw. auf dem eigenen PC, aus. So können bspw. mehrere Browser zu Testzwecken auf mehreren virtuellen Maschinen installiert und getestet werden. Ein Beispiel für eine virtuelle Maschine ist VirtualBox von Oracle (https://www.virtualbox.org/).

• IETester

http://ietester.softonic.de/

Für den Internet Explorer ist es auch möglich die Entwickler-Tools des Internet Explo-rers zu verwenden. Sie werden im Internet Explorer mit der Funktionstaste [F12] auf-gerufen und ermöglichen die Auswahl zwischen IE Version 7-9.

Aber Achtung, verlassen Sie sich nicht zu sehr auf diese Tests! Man kann nie davon aus-gehen, dass sie 100 %ig korrekt in der Anzeige sind. Aus diesem Grund sollte man gut abwägen, ob ein kostenpflichtiger Dienst nicht mittel- und langfristig den ansonsten er-höhten Zeitaufwand amortisiert.

Zur Überprüfung der Web-Visitenkarte wird Browsershots genutzt, da man hier ohne viel Aufwand testen kann.

Zur Überprüfung werden folgende Browser ausgewählt:

• MSIE 11, 9, 10

• Mozilla Firefox 40, 39, 38

• Google Chrome 44, 45, 43, 41

• Safari 8, 5, 6

• Opera 12, 31, 30

Insgesamt werden 17 Screenshots erstellt und angezeigt.

INT03B 97




Abb. 5.4: Browsershots – Screenshot Testanfrage-Gruppe

Abb. 5.5: Browsershots – Ausgabe der Screenshots in Thumbnail-Form

Nun kann man die Screenshots Bild für Bild durchgehen und auf Fehler bei der Anzeige hin überprüfen. Für eine spätere Überprüfung kann man die Screenshots auch auf den eigenen Rechner downloaden.

Aber auch hier sind die Screenshots nur bedingt aussagekräftig, je nach zur Verfügung gestelltem System und Rechner, von dem die Screenshots kommen und der Zeit, zu der man die Testanfrage losschickt.

98 INT03B



Insgesamt sieht die Web-Visitenkarte aber gut aus, es sind keine dramatischen augen-scheinlichen Fehler zu sehen.

Zur Übersicht im Folgenden noch einmal der komplette Quellcode der HTML-Datei, so-wie alle CSS-Angaben. Sie können sich beide Dateien auch unter http://www.ReinIns-NeueHeim.de/2.0 ansehen.

Die CSS-Angaben der externen CSS-Datei main.css:

/*Default Settings*/

* { margin:0; padding:0; border:0;}

footer, header, main, nav, aside, section { display:block;}

/*Ende Default Settings*//*……………………………………………………………………………………………………………………………………………*//*Angaben für Layoutrahmen*/

#site { width:1040px; margin-top:0; margin-right:auto; margin-bottom:1em; margin-left:auto; background-image:url(bilder/bg.png); background-position:bottom right; background-repeat:no-repeat;}

#gesamt { width:54em; background-color: rgba(255, 255, 255, 0.8); font-size:95%; margin-top:1em; margin-right:auto; margin-left:auto; padding:0.5em 0em 0.5em 0.5em;}

/*Ende Angaben für Layoutrahmen*//*……………………………………………………………………………………………………………………………………………*//*Allgemeine Angaben*/

body { background-color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:100.01%; color:#000; letter-spacing:1px;

INT03B 99





}p { padding-bottom:0.8em;}

h1 { font-family:Liberation, Verdana, sans-serif; font-size:2.2em; letter-spacing:0.25em; margin-bottom:0.3em; padding-top:0.1em;}

h2 { font-size:1.1em; color:#fff; text-shadow:#0A0A0A 0px 2px 5px; letter-spacing:0.15em; margin-top:0.2em;}

li { list-style:none;}

.normal { font-weight:normal;}

/*Ende Allgemeine Angaben*//*……………………………………………………………………………………………………………………………………………*//*Angaben für Schriften*/

@font-face { font-family:Liberation; src:url(schriften/Liberation-Sans-fontfacekit/web%20fonts/ liberationsans_bold_macroman/LiberationSans-Bold- webfont.eot); src:url(schriften/Liberation-Sans-fontfacekit/ web%20fonts/liberationsans_bold_macroman/LiberationSans- Bold-webfont.svg); src:url(schriften/Liberation-Sans-fontfacekit/ web%20fonts/liberationsans_bold_macroman/ LiberationSans-Bold-webfont.ttf); src:url(schriften/Liberation-Sans- fontfacekit/web%20fonts/ liberationsans_bold_macroman/ LiberationSans-Bold-webfont.woff); }

/*Ende Angaben für Schriften*//*……………………………………………………………………………………………………………………………………………*//*Angaben für header*/

100 INT03B



header { min-height:82px; background-color:#6379ab; margin-bottom:1em; padding-top:0.5em; padding-left:0.5em; padding-bottom:1em; border:1px solid #000;}

/*Ende Angaben für header*//*……………………………………………………………………………………………………………………………………………*//*Angaben für Kopfbereich #bild*/

#bild { width:149px; height:82px; float:left; margin-right:1.8em; -moz-box-shadow: #000 2px 2px 10px; -webkit-box-shadow: #000 2px 2px 10px; box-shadow: #000 2px 2px 10px;}

/*Ende Angaben für #bild*//*……………………………………………………………………………………………………………………………………………*//*Angaben für nav*/

nav { background-color:#efece0; font-family:Verdana, Geneva, sans-serif; font-size:85%; color:#af5518; font-weight:bold; line-height:1.5em; margin-bottom:4em; padding:0.6em; -moz-border-radius-topright:15px; -moz-border-radius-bottomright:0px; -moz-border-radius-bottomleft:15px; -moz-border-radius-topleft:0px; -webkit-border-top-right-radius:15px; -webkit-border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:15px; -webkit-border-top-left-radius:0px; border-top-right-radius:15px; border-bottom-right-radius:0px; border-bottom-left-radius:15px; border-top-left-radius:0px;}

nav h3 { font-size:100%; color:#af5518; margin-bottom:0.5em;}

INT03B 101



/*Ende Angaben für nav*//*……………………………………………………………………………………………………………………………………………*//*Angaben für Hauptbereich Mitte main*/

main { width:33em; float:left; font-size:85%; line-height:125%; margin-bottom:1em; padding-right:1em; padding-left:1em;}

main h3 { font-size:100%; margin-top:0.8em; margin-bottom:0.2em;}

/*Ende Angaben für main*//*……………………………………………………………………………………………………………………………………………*//*Angaben für linken Bereich #links*/

#links { width:11.5em; float:left;}

#links aside { font-size:70%; color:#5b4628; padding:0.6em 0.3em;}

#links aside h3 { font-size:120%; color:#000; margin-bottom:0.2em;}

blockquote { margin-bottom:1.4em;}

.zitat { font-style:italic; letter-spacing:normal;}

/*Ende Angaben für #links*//*……………………………………………………………………………………………………………………………………………*//*Angaben für rechten Bereich #rechts*/

#rechts { width:11.5em;

102 INT03B



float:right; background-color: rgba(209, 214, 226, 0.6); line-height:115%; margin-bottom:1em; padding:0.6em; -moz-border-radius-topright:0px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:0px; -moz-border-radius-topleft:15px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-right-radius:15px; -webkit-border-bottom-left-radius:0px; -webkit-border-top-left-radius:15px; border-top-right-radius:0px; border-bottom-right-radius:15px; border-bottom-left-radius:0px; border-top-left-radius:15px;}

#rechts aside { font-size:77%; color:#000;}

#adresse { color:#5b4628; font-weight:bold; padding-top:3em;}

#adresse p { padding-right:0.2em; padding-bottom:0.5em; padding-left:0.2em;}

#adresse a, #adresse a:link,#adresse a:visited{ color:#5b4628; font-weight:bold; text-decoration: none;}

#adresse a:active, #adresse a:hover{ text-decoration: underline;}

/*Ende Angaben für #rechts*//*……………………………………………………………………………………………………………………………………………*//*Angaben für Fussbereich footer*/

INT03B 103



footer {Vclear:both; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/ #8a6d4c+0,3a2618+97,3a2618+100 */ background-color: #8a6d4c; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/ Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkd Gg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJ ncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VP blVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgP HN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhNmQ0YyIgc3RvcC1vcG FjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk3JSIgc3RvcC1jb2xvcj0 iIzNhMjYxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9 IjEwMCUiIHN0b3AtY29sb3I9IiMzYTI2MTgiIHN0b3Atb3BhY2l0eT0iMSIvP gogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdG g9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGV kKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #8a6d4c 0%, #3a2618 97%, #3a2618 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a6d4c), color-stop(97%,#3a2618), color- stop(100%,#3a2618)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8a6d4c 0%,#3a2618 97%,#3a2618 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8a6d4c 0%,#3a2618 97%,#3a2618 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #8a6d4c 0%,#3a2618 97%,#3a2618 100%); /* IE10+ */ background: linear-gradient(to bottom, #8a6d4c 0%,#3a2618 97%,#3a2618 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a6d4c', endColorstr='#3a2618',GradientType=0 ); /* IE6-8 */ font-size:75%; color:#fff; font-weight:bold; letter-spacing:normal; padding:0.5em 1em 0.5em 2em; border:1px solid #000;}

.fuss { font-weight:normal; padding-left:2.3em;}

/*Ende Angaben für footer*/

104 INT03B



Der Quellcode der HTML-Datei index.html:

<!doctype html><head><meta charset="utf-8"><title>ReinInsNeueHeim GmbH - Das kompetente Umzugsunternehmen in Musterstadt</title><link href="main.css" rel="stylesheet" type="text/css"></head><body><div id="site"><div id="gesamt"> <header> <div id="bild"><img src="bilder/header.png" width="149" height="82" alt="Möbeltransport"> </div> <h1>ReinInsNeueHeim GmbH</h1> <h2>Problemlos ReinInsNeueHeim - Wir ziehen für Sie um!</ h2> </header> <div id="links"> <nav> <h3>Unsere Leistungen</h3> <ul> <li>Umzug</li> <li>Fernumzug</li> <li>Lagerung</li> <li>Möbelmontage</li> </ul> </nav> <aside> <h3> Kundenstimmen</h3> <blockquote> Wir bedanken uns vielmals für die professionelle Arbeit, Ihr Team war super schnell und freundlich. <br> <span class="zitat"> Susanne K., Umzug nach Italien, 2-Personen Haushalt, 80qm Wohnfläche, 2.Stock </span> </blockquote> <blockquote> Kein einziges Kunstobjekt wurde beschädigt, alles bestmöglich verpackt, sicher transportiert, Klasse! <br> <span class="zitat"> Martin Z., Umzug von Musterstadt nach Musterdorf, Kunstgalerie, 400qm Wohnfläche </span> </blockquote> <blockquote> Ich hätte nicht gedacht, dass wir alles an einem Tag transportiert und wieder ausgepackt bekommen würden. <br> <span class="zitat"> Linda M., Umzug von Musterstadt nach Musterdorf, 4-Personen Haushalt, 150qm Wohnfläche </span> </blockquote>

INT03B 105



</aside> </div> <main> <section> <h3>Umzug - Professionell, schnell und kostengünstig.</h3> <p>Unsere Verpackungen sind zu 100% recycelbar und schützen Ihre Möbel und Wertgegenstände optimal. <br> Auf Wunsch packen wir Ihren Hausstand komplett ein, transportieren ihn ReinInsNeueHeim und packen alles wieder aus, wobei das Verpackungsmaterial nach dem Umzug von uns komplett wieder mitgenommen wird. <br> Oder möchten Sie selbst ein- und auspacken? Dann liefern wir Ihnen das Material vor dem Umzug ins Haus und holen es nach dem Umzug, wenn Sie alles ausgepackt haben, ab.</p> </section> <section> <h3>Fernumzug - Auf zu neuen Ufern!</h3> <p>Sie ziehen in ein anderes Land? <br> Auch hierbei sind wir Ihnen gerne behilflich. Wir übernehmen alle organisatorischen Aufgaben für Sie, kümmern uns um Zoll- und Einfuhrbestimmungen, verpacken gemäß der Vorgaben des jeweiligen Landes und bringen Ihr Hab und Gut sicher ReinInsNeueHeim. </p> </section> <section> <h3>Lagerung - Wohin nur mit den ganzen Sachen?</h3> <p>Manchmal stehen einem liebe Möbel vorübergehend im Weg. Wohin also mit Omas geliebtem Küchenbuffet oder Ihrem verstimmten Klavier? <br> Wir lagern Möbel für Sie ein, wie lange bestimmen Sie. </p> </section> <section> <h3>Möbelmontage - Wo sind denn nur die Schrauben?</h3> <p>Wir bringen zwar alles ReinInsNeueHeim, aber wer baut die Möbel wieder auf und die Küche ein? <br> Kein Problem für uns, wir bauen Ihr Möbel und Ihre Küche noch am Umzugstag wieder auf, versprochen! </p> </section> </main> <div id="rechts"> <aside> <p>Was ist der erste Schritt für Sie um stressfrei ReinInsNeueHeim zu kommen? </p> <p>Rufen Sie uns an oder schicken Sie uns eine Mail und vereinbaren Sie mit uns einen kostenlosen Besichtigungstermin. </p> <p>Vor Ort klären wir die Rahmenbedingungen, Sie erhalten innerhalb von 24 Stunden ein Angebot von uns. </p> <p>Wir freuen uns Sie kennen zu lernen!</p>

106 INT03B



<div id="adresse"> <p>ReinInsNeueHeim GmbH <br> <span class="normal">Geschäftsführer <br> Max Mustermann </span> </p> <p>Musterstraße 0 <br> 00000 Musterstadt </p> <p>Tel. 00000-11111 <br> Fax 00000-11110 </p> <p class="normal"><a href="mailto:[email protected]">info@ReinInsNeueHeim. de</a> <br> <a href="http://www.ReinInsNeueHeim.de/ 2.0">www.ReinInsNeueHeim.de/2.0</a></p> </div> </aside> </div> <footer> ReinInsNeueHeim GmbH <span class="fuss">Registergericht: AG Musterstadt • HRB-Nummer: 00000 • Umsatzsteuerident-Nr.: 123456789 Impressum</span> </footer></div></div></body></html>

Zusammenfassung

Nun ist die Web-Visitenkarte endgültig fertig gestellt und kann dem Auftraggeber über-geben werden.

Die Überprüfung auf validen Code und bezüglich eines annähernd identischen Erschei-nungsbildes in verschiedenen Browsern sollte schon während der Erstellung in regelmä-ßigen Abständen vorgenommen werden. Aus didaktischen Gründen wurde diesem The-ma jedoch ein eigenes Kapitel gewidmet.

Sie haben nun die Grundbegriffe von CSS anhand eines praktischen Beispiels erlernt und hoffentlich Lust bekommen, diese durch eigene Projekte zu vertiefen.

Je mehr Sie in die Materie eintauchen, umso besser und schneller werden Sie HTML-Da-teien erstellen und mittels CSS phantasievoll und vor allen Dingen valide und damit zeit-gemäß gestalten.

INT03B 107




5.1 Warum ist es wichtig Dateien mit Validatoren zu überprüfen?

5.2 Warum ist es wichtig nicht nur mit den aktuellsten Browsern die Darstellung einer Webseite zu testen?

108 INT03B

A


A. Lösungen zu den Wiederholungsaufgaben

1.1 Selektor { Eigenschaft: Wert; }

1.2 Wenn Angaben in dieser separaten Datei geändert werden, wirken sich die Än-derungen einheitlich auf alle Dateien aus, in die diese CSS-Datei eingebunden wurde. Nutzt man zusätzlich CSS-Angaben innerhalb einer HTML-Datei im Da-teikörper, dann geht die gute Pflegbarkeit und Übersicht sowie der Vorteil des kleineren Quellcodes schnell verloren und man verzettelt sich.

1.3 link – visited – focus – hover – active

2.1 Elemente lassen sich in zwei Gruppen unterteilen. Die größere Gruppe stellen die Block-Elemente dar, beispielsweise Überschriften, Absätze, Tabellen, For-mulare, Listen, Boxen etc. Diese werden durch einen Zeilenumbruch voneinan-der getrennt und dadurch untereinander angeordnet.

Inline-Elemente, wie Bilder, fett, kursiv, Links etc. bewirken keinen Zeilenum-bruch und werden nebeneinander angeordnet. Block-Elemente können Inline-Elemente beinhalten, Inline-Elemente können ebenfalls Inline-Elemente enthal-ten, jedoch keine Block-Elemente.

2.2 • span

• cite

• br

• img

2.3 Aus dem eigentlichen Inhalt, dem Innenabstand, dem Rahmen und dem Au-ßenabstand.

2.4 Mit dem Wert clear.

3.1 Das title-Tag wird im immer im Kopf einer HTML-Datei notiert und zeigt den Titel der Seite in der Titelleiste eines Browsers an. Um weitere Informationen zu einem Bild sichtbar zu machen, wenn sich der Mauszeiger auf dem Bild befindet, wird nach Bedarf das title-Attribut genutzt.

Das title-Attribut kann für nahezu alle HTML-Elemente genutzt werden. Zum Einsatz kommt es bspw., um die Abkürzung eines Begriffs innerhalb eines Textes zu erklären, indem im title-Attribut die Abkürzung zur Erklärung ausgeschrie-ben wird.

Ebenso können hiermit Verweise zusätzliche Informationen darüber erhalten, wohin genau der Verweis führt.

3.2 Das alt-Attribut kann nur für Bilder verwendet werden und dienen dazu, Infor-mationen zum Bild anzuzeigen, wenn das Bild einmal nicht angezeigt werden sollte. Um weitere Informationen zu einem Bild sichtbar zu machen, wenn sich der Mauszeiger auf dem Bild befindet, wird das title-Attribut genutzt.

INT03B 109

A Lösungen zu den Wiederholungsaufgaben


Das title-Attribut kann darüber hinaus aber auch für nahezu alle HTML-Elemen-te genutzt werden. Zum Einsatz kommt es bspw., um die Abkürzung eines Be-griffs innerhalb eines Textes zu erklären, indem im title-Attribut die Abkürzung zur Erklärung ausgeschrieben wird.

Ebenso können hiermit Verweise zusätzliche Informationen darüber erhalten, wohin genau der Verweis führt.

Bei Bildern, die Informationen beinhalten (Screenshots bspw. beinhalten häufig Angaben zu Ansichten eines Programms oder Einstellungen), ist es sinnvoll, bei-de Attribute zu nutzen. Das alt-Attribut würde entsprechend den Inhalt kurz zu-sammenfassen, das title-Attribut sozusagen eine aussagekräftige Überschrift für das Bild nennen.

3.3 Das longdesc-Attribut verweist auf eine HTML-Datei, die eine ausführlichere Beschreibung zu einem Bild enthält, wird allerdings noch nicht von allen Brow-sern unterstützt.

4.1 Relative Größen (%, ex und em) beziehen sich auf andere Größen, zu denen sie in Relation/Bezug stehen. Sie verändern also abhängig von anderen Elementen ihre Größe, wenn sich die Größe dieser Elemente ändert.

4.2 12 Pixel

4.3 Mit background-repeat kann angegeben werden, ob sich ein Hintergrundbild wiederholen soll (repeat = Standardeinstellung) oder nicht (no-repeat), und ob es sich vertikal (repeat-y) oder horizontal (repeat-x) wiederholen soll.

4.4 Mit letter-spacing wird der Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmt. Diese Angabe kann (muss aber nicht!) der Lesbarkeit dienen, soll-te aber auf jeden Fall zunächst im Detail ausprobiert werden. Da sich die Lesbar-keit bei relativ kleinen Schriftgrößen nicht erhöht, sollte man den Zeichenab-stand in diesem Fall nicht erhöhen.

5.1 Valider Code ist eine der Grundvoraussetzungen für eine erfolgreiche, zeitgemä-ße Website, da diese nur so fehlerfrei von allen Interessierten betrachtet werden kann. Dabei spielt es einerseits eine Rolle, ob überflüssiger Quellcode eine Web-site unnötig aufbläht und damit die Ladezeit erhöht. Zum anderen führt Quell-code, der nicht fehlerfrei und für gängige Browser angepasst ist, zu einer fehler-haften Darstellung der Site im Browser und macht im schlimmsten Fall die Website unbrauchbar. Ganz zu schweigen von dem unprofessionellen Eindruck, der für potenzielle Kunden entsteht und wahrscheinlich dazu führt, dass die Website nicht wieder besucht werden wird.

Für den Bereich Webdesign bedeutet ist es wichtig, dass eine Website den Web-standards entspricht. Auch hier liegt wieder ein besonderes Augenmerk auf Bar-rierefreiheit, denn unter Berücksichtigung verschiedener Ausgabe- und Anzeige-geräte ist es besonders wichtig, eine Website hinsichtlich der Validität zu testen, um nicht bestimmte Nutzergruppen auszuschließen.

110 INT03B

Lösungen zu den Wiederholungsaufgaben A


5.2 Die aktuellsten Browserversionen sind nicht automatisch die am häufigsten ge-nutzten. Bis sich eine neue Browserversion so weit etabliert, dass sie von der Mehrzahl der Internetanwender benutzt wird, gibt es meist schon eine Nachfol-geversion.

Aus diesem Grund sollte man beim Test von Websites neben der aktuellen Ver-sion zumindest eine Version abwärts testen. Die Idee jedoch, dann die aktuelle Version bei der Überprüfung außer Acht zu lassen, da man davon ausgeht, dass diese in ihrer Funktionalität besser ist als ihre Vorgängerversion, sollte man lie-ber verwerfen. Denn manche vermeintlich bessere, überarbeitete Version bein-haltet plötzlich wieder Fehler in der Darstellung, die ihre Vorgänger nicht hatten.

INT03B 111

B


B. Literaturverzeichnis

Heller, S. (2012). Workshop HTML5 & CSS3: Weblayouts professionell umsetzen – ein Einstieg in die Frontendentwicklung. 09/2012. dpunkt.verlag.

Münz, S.; Gull, C. (2014). HTML5 Handbuch. 06/2014. Franzis Verlag GmbH.

Müller, P. (2013). Flexible Boxes: Eine Einführung in moderne Websites. Responsive Webdesign verstehen. 08/2013. Galileo Computing.

Müller, P. (2013). Einstieg in CSS: Webseiten gestalten mit HTML und CSS. 11/2013. Galileo Computing.

Maurice, F. (2013). CSS3: Die neuen Features für fortgeschrittene Webdesigner. 10/2013. dpunkt.verlag GmbH.

Internet-Links

CSS Referenz




Linksammlung zum Thema CSS


Definition / Erläuterung zu CSS

http://de.wikipedia.org/wiki/Cascading_Style_Sheets

Informationen zu CSS3

http://www.w3.org/





112 INT03B

http://www.w3.org/


#ERROR

#ERROR



#ERROR




Literaturverzeichnis B










Infos zu HTML 5


Statistiken u. a. zur Browsernutzung


Detaillierte Informationen zur Positionierung und zum Float von Elementen





http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

CSS-Validator

http://jigsaw.w3.org/css-validator/

HTML-Validator

http://validator.w3.org

Browser


https://www.mozilla.org/de/

http://www.apple.com/downloads/

INT03B 113











#ERROR


#ERROR

#ERROR

#ERROR

#ERROR

#ERROR


https://www.mozilla.org/de/

#ERROR

B Literaturverzeichnis


http://www.opera.com/de

http://www.google.com/chrome/browser/

Umrechner Pixel in em

http://calculator.tobani.com/convert/px-to-em

Farbtabellen, Farb-Converter und Farbeditor

http://www.farb-tabelle.de/

http://webbausteine.de/blog/tools/hex-rgb-converter.php


http://www.colorzilla.com/gradient-editor

Informationen zum Einbinden beliebiger Schriften mittels @font-face Angabe

http://wiki.selfhtml.org/wiki/@font-face

Webfont-Quellen



Site-Überprüfung



http://browsershots.org


https://www.virtualbox.org/


Informationen zum Thema Barrierefreiheit


http://www.bitvtest.de/

114 INT03B

#ERROR

http://www.colorzilla.com/gradient-editor



http://www.opera.com/de

#ERROR

#ERROR

http://webbausteine.de/blog/tools/hex-rgb-converter.php


http://wiki.selfhtml.org/wiki/@font-face



http://browsershots.org/


https://www.virtualbox.org/


#ERROR

#ERROR

C

INT03B 115

SachwortverzeichnisSachwortverzeichnisSachwortverzeichnisINT03B

C. Abbildungsverzeichnis

Abb. 2.1 Box-Modell grafisch dargestellt ................................................................. 20

Abb. 3.1 Der Handzettel als Vorlage ......................................................................... 25

Abb. 3.2 Das geplante Layout der Web-Visitenkarte .............................................. 27

Abb. 3.3 Die Bereiche des Layouts ........................................................................... 29

Abb. 3.4 Die Strukturierung/Semantik des HTML-Codes ..................................... 30

Abb. 3.5 Das Erscheinungsbild der HTML-Datei noch ohne CSS ........................ 39

Abb. 4.1 Layout und Breitenangabe (Ausschnitt) ................................................... 46

Abb. 4.2 Layout und Textfluss .................................................................................. 52

Abb. 4.3 Layout und Hintergründe .......................................................................... 58

Abb. 4.4 Layout und Schriftformatierung ................................................................ 65

Abb. 4.5 Layout und Zeichenabstand ....................................................................... 70

Abb. 4.6 Layout und Zeilenhöhe .............................................................................. 72

Abb. 4.7 Layout und Listendarstellung .................................................................... 74

Abb. 4.8 Layout und Außenabstände ....................................................................... 78

Abb. 4.9 Layout und Innenabstände ......................................................................... 81

Abb. 4.10 Zwei Tabellenzellen ohne „border-collapse:collapse“ .............................. 84

Abb. 4.11 Zwei Tabellenzellen mit „border-collapse:collapse“ ................................ 84

Abb. 4.12 Layout mit Rahmenangaben ...................................................................... 88

Abb. 4.13 Die Rahmengrafik „bg.png“ ....................................................................... 90

Abb. 4.14 Die fertige Web-Visitenkarte ...................................................................... 92

Abb. 5.1 Überprüfung inkl. Farbverlauf-Angabe mit dem CSS Validator des W3C (Fehlermeldung) ......................................................................... 94

Abb. 5.2 Überprüfung ohne Farbverlauf-Angabe mit dem CSS Validator des W3C (fehlerfrei) ................................................................................... 94

Abb. 5.3 Add-on Launchy für Firefox ...................................................................... 97

Abb. 5.4 Browsershots – Screenshot Testanfrage-Gruppe ..................................... 98

Abb. 5.5 Browsershots – Ausgabe der Screenshots in Thumbnail-Form .............. 98


D


D. SachwortverzeichnisINT03B

Symbols

@import-Anweisung ......................... 8

Numerics

100–900 .......................................... 62

A

absolut ............................................. 48

absolute Maßangaben ...................... 41

absolute Positionierung .................... 22

active ............................................... 15

alt .................................................... 32

Apple Safari ..................................... 95

auto ................................................. 47

B

background-color ............................. 53

background-image ........................... 53

background-position ........................ 55

background-repeat ........................... 55

baseline ........................................... 67

blink ................................................ 66

block ................................................ 49

Block-Elemente ................................ 20

bold ........................................... 61, 62

bolder ........................................ 61, 62

border ................................... 20, 83, 87

border-collapse:collapse ................... 83

border-color ..................................... 85

border-radius ................................... 87

border-style ..................................... 83

border-width ................................... 84

both ................................................. 50

bottom .................................. 48, 55, 66

Box-Modell ...................................... 20

Box-Modell-Fehler ........................... 21

box-shadow ..................................... 68

Browser ........................................... 94

C

center ........................................ 55, 66

circle ................................................ 72

cjk-ideographic ................................ 73

clear ................................................ 23

color ................................................ 61

Corporate Design (CD) ..................... 25

Corporate Identity (CI) ..................... 25

Cross-Browser-Check ....................... 96

CSS .................................................... 3CSS-Validator ................................... 93

D

dashed ............................................. 83

decimal ............................................ 73

decimal-leading-zero ........................ 73

disc .................................................. 72

display ............................................. 49

dotted .............................................. 83

double .............................................. 83

E

Elternelement .................................. 22

Entwickler-Tools .............................. 97

F

Farbnamen ....................................... 43

fix .................................................... 22

fixed ................................................ 48

float ........................................... 23, 50

focus ................................................ 15

font-family ...................................... 59

font-size ........................................... 61

font-style ......................................... 61

font-weight ...................................... 61

Format-Unterklassen ........................ 12

G

Google Chrome ................................ 95

groove ............................................. 83

H

hebrew ............................................. 73

height .............................................. 47

hexadezimal ..................................... 43

hidden ....................................... 47, 83

hiragana .......................................... 73

116 INT03B

Sachwortverzeichnis D


hiragana-iroha ................................. 73

hover ............................................... 15

HTML-Editoren ............................... 31

HTML-Validator .............................. 93

I

id= ................................................... 14

IETester ........................................... 96

Individualformat .............................. 14

inline ............................................... 49

inline-block ..................................... 49

Inline-Elemente ............................... 20

inset ................................................ 83

inside .............................................. 73

Internet Explorer ............................. 95

italic ................................................ 61

J

justify .............................................. 66

K

katakana .......................................... 73

katakana-iroha ................................. 73

L

large ................................................ 42

larger ............................................... 42

Launchy .......................................... 96

left .................................. 48, 50, 55, 66

letter-spacing ................................... 68

lighter ........................................ 61, 62

line-height ....................................... 71

line-through .................................... 66

link .................................................. 15

list-style-image ................................ 73

list-style-position ............................. 73

list-style-type ................................... 72

lower-alpha ..................................... 73

lower-greek ..................................... 73

lower-roman .................................... 73

M

margin ........................................ 21, 74

margin-bottom ................................ 74

margin-left ...................................... 74

margin-right .................................... 74

margin-top ...................................... 74

max-height ...................................... 47

max-width ....................................... 44

medium ..................................... 42, 84

middle ............................................. 66

min-height ....................................... 47

min-width ....................................... 44

moz-border ...................................... 87

moz-border-radius ........................... 87

Mozilla Firefox ................................ 95

N

none ............................... 49, 50, 66, 73

no-repeat ......................................... 55

normal .................................. 61, 62, 67

nowrap ............................................ 67

O

oblique ............................................ 61

ol = ordered list ................................ 72

Opera .............................................. 95

outset .............................................. 83

outside ............................................. 73

overflow .......................................... 47

overline ........................................... 66

P

padding ..................................... 21, 78

padding-bottom ............................... 78

padding-left ..................................... 79

padding-right ................................... 78

padding-top ..................................... 78

position ........................................... 48

pre ................................................... 67

pre-line ............................................ 67

pre-wrap .......................................... 67

Pseudoformat .................................. 15

R

Rautenzeichen ................................. 14

relative ............................................ 48

relative Maßangaben ....................... 41

relative Positionierung ..................... 22

repeat .............................................. 55

INT03B 117

D Sachwortverzeichnis


repeat-x ........................................... 55

repeat-y ........................................... 55

RGB-Farbschema ............................. 43

ridge ................................................ 83

right ............................... 48, 50, 55, 66

S

Schlüsselwörter ................................ 42

scroll ............................................... 47

Selektor ........................................... 13

smaller ............................................. 42

solid ................................................ 83

square .............................................. 72

static ................................................ 48

Statistiken ........................................ 95

sub .................................................. 67

super ............................................... 67

T

Tabellenzellen .................................. 83

text-align ......................................... 66

text-bottom ...................................... 67

text-decoration ................................ 66

text-indent ....................................... 67

text-shadow ..................................... 68

text-top ............................................ 67

thick ................................................ 84

thin .................................................. 84

top ........................................ 48, 55, 66

transparent ...................................... 53

U

ul = unordered list ............................ 72

unabhängige Klassen ........................ 13

underline ......................................... 66

Universalselektor ............................. 18

upper-alpha ..................................... 73

upper-roman .................................... 73

V

Vererbung .................................. 16, 42

vertical-align ................................... 66

visible .............................................. 47

visited .............................................. 15

W

W3-Konsortium ................................. 3Webfont Kit ..................................... 60

webkit-border .................................. 87

webkit-border-radius ....................... 87

word-spacing ................................... 70

X

x-large ............................................. 42

x-small ............................................ 42

xx-large ........................................... 42

xx-small ........................................... 42

Z

z-index ............................................ 49

118 INT03B

E


C

E. EinsendeaufgabeCSS – Cascading Stylesheets

I

Name: Vorname:

Postleitzahl und Ort: Straße:

Studien- bzw. Vertrags-Nr.:

INT03B

Bitte reichen Sie Ihre Lösungen über die Online-Lernplattform ein, oder schicken Sie uns

diese per Post. Geben Sie bitte immer den Code zum Studienheft an (siehe oben rechts).

ode:

NT03B-XX2-A04

Fernlehrer/in:

Datum:

Note:
Lehrgangs-Nr.:1015A04
Unterschrift Fernlehrer/in:

Sie erhalten den Auftrag eine ansprechende und gestalterisch zum Unternehmen passende Web-Visitenkarte für ein Textilreinigungsgeschäft zu erstellen.

Es gibt kein Corporate Design, da das Textilreinigungsgeschäft neu gegründet wird.

1. Die Web-Visitenkarte soll bestehen aus

• 1 validen HTML-Datei und

• 1 validen externen CSS-Datei, die mit der HTML-Datei verknüpft ist.

Die beiden Dateien benennen Sie bitte jeweils mit Ihrer Studiennummer, die Sie für den Lehrgang erhalten haben, gefolgt von Ihrem Namen.

2. Für die strukturelle Einteilung der Web-Visitenkarte sollen unter anderem auch die entsprechend im Heft besprochenen HTML5-Strukturelemente sinnvoll und passend eingesetzt werden.

3. Welche inhaltlichen Bereiche, Elemente und Texte Sie im Einzelnen einfügen, bleibt Ihnen überlassen. Lediglich folgende Elemente müssen als Vorgabe mindestens einmal enthalten sein:

• Überschrift

• Liste

• Eine mittels CSS eingefügte Hintergrundgrafik

• Textabsatz

4. Definieren Sie die CSS-Angaben ausschließlich in der externen CSS-Datei. Arbeiten Sie unter anderem auch mit:

• 1 Farbverlauf

• 1 Schatten

• 1 bis 2 Webfonts

119

E Einsendeaufgabe


5. Benutzen Sie für die CSS-Angaben:

• Formate (Formaterweiterungen) für HTML-Tags

• unabhängige Klassen

• Individualformate

Hinweis:

Diese Einsendeaufgabe dient dazu zu zeigen, dass Sie den Inhalt des Studienhefts verstanden haben und in der Lage sind, das Erlernte umzusetzen. Die erstellte Web-Visitenkarte für das Umzugsunternehmen dient hierbei der Veranschaulichung, soll aber nicht kopiert und/oder lediglich mit anderem Inhalt gefüllt werden, es muss eine Eigenleistung erkennbar sein.

Die Web-Visitenkarte für das Textilreinigungsgeschäft soll

• Ihre eigene Kreativität widerspiegeln (seien Sie fantasievoll).

• Ihre Sorgfalt bei der Planung und Erstellung zeigen (Die sinnvolle Strukturie-rung der Layoutbereiche bspw. ist ein wichtiger Bestandteil.).

120 INT03B

Documents

Das Studienheft und seine Teile sind …. INT03B...INT03B 1 Einleitung INT03BCSS – Cascading Stylesheets1115A04 Dieses Studienheft beschäftigt sich mit Cascading Stylesheets (Kaskadierende