Peter Bühler

Patrick Schlaich
Dominik Sinner

HTML5 und CSS3

Semantik · Design · Responsive Layouts
Bibliothek der Mediengestaltung
Konzeption, Gestaltung, Technik und Produktion von Digital- und Printmedien sind die zentralen Themen der Bibliothek
der Mediengestaltung, einer Weiterentwicklung des Standardwerks Kompendium der Mediengestaltung, das in seiner
6. Auflage auf mehr als 2.700 Seiten angewachsen ist. Um den Stoff, der die Rahmenpläne und Studienordnungen sowie
die Prüfungsanforderungen der Ausbildungs- und Studiengänge berücksichtigt, in handlichem Format vorzulegen,
haben die Autoren die Themen der Mediengestaltung in Anlehnung an das Kompendium der Mediengestaltung neu
aufgeteilt und thematisch gezielt aufbereitet. Die kompakten Bände der Reihe ermöglichen damit den schnellen Zugriff
auf die Teilgebiete der Mediengestaltung.

Weitere Bände in der Reihe: [Link]

Peter Bühler
Patrick Schlaich
Dominik Sinner

HTML5 und CSS3

Semantik – Design – Responsive Layouts
Peter Bühler Dominik Sinner
Affalterbach, Deutschland Konstanz-Dettingen, Deutschland

Patrick Schlaich
Kippenheim, Deutschland

ISSN 2520-1050 ISSN 2520-1069 (electronic)

Bibliothek der Mediengestaltung
ISBN 978-3-662-53915-6 ISBN 978-3-662-53916-3 (eBook)
DOI 10.1007/978-3-662-53916-3

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte
bibliografische Daten sind im Internet über [Link] abrufbar.

Springer Vieweg
© Springer-Verlag GmbH Deutschland 2017
Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Jede Verwertung, die nicht ausdrücklich
vom Urheberrechtsgesetz zugelassen ist, bedarf der vorherigen Zustimmung des Verlags. Das gilt insbesondere für
Vervielfältigungen, Bearbeitungen, Übersetzungen, Mikroverfilmungen und die Einspeicherung und Verarbeitung
in elektronischen Systemen.
Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt auch
ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Marken-
schutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften.
Der Verlag, die Autoren und die Herausgeber gehen davon aus, dass die Angaben und Informationen in diesem Werk
zum Zeitpunkt der Veröffentlichung vollständig und korrekt sind. Weder der Verlag noch die Autoren oder die Heraus-
geber übernehmen, ausdrücklich oder implizit, Gewähr für den Inhalt des Werkes, etwaige Fehler oder Äußerungen.
Der Verlag bleibt im Hinblick auf geografische Zuordnungen und Gebietsbezeichnungen in veröffentlichten Karten
und Institutionsadressen neutral.

Gedruckt auf säurefreiem und chlorfrei gebleichtem Papier

Springer Vieweg ist Teil von Springer Nature

Die eingetragene Gesellschaft ist Springer-Verlag GmbH Deutschland
Die Anschrift der Gesellschaft ist: Heidelberger Platz 3, 14197 Berlin, Germany
Vorwort

The Next Level – aus dem Kompendium welchen Band Sie in der Hand halten.
der Mediengestaltung wird die Biblio- Die Bibliothek der Mediengestaltung
thek der Mediengestaltung. richtet sich an alle, die eine Ausbildung
Im Jahr 2000 ist das „Kompendium oder ein Studium im Bereich der Digi-
der Mediengestaltung“ in der ersten tal- und Printmedien absolvieren oder
Auflage erschienen. Im Laufe der Jahre die bereits in dieser Branche tätig sind
stieg die Seitenzahl von anfänglich und sich fortbilden möchten. Weiterhin
900 auf 2700 Seiten an, so dass aus richtet sich die Bibliothek der Medien-
dem zunächst einbändigen Werk in der gestaltung auch an alle, die sich in ihrer
6. Auflage vier Bände wurden. Diese Freizeit mit der professionellen Gestal-
Aufteilung wurde von Ihnen, liebe tung und Produktion digitaler oder
Leserinnen und Leser, sehr begrüßt, gedruckter Medien beschäftigen. Zur
denn schmale Bände bieten eine Reihe Vertiefung oder Prüfungsvorbereitung
von Vorteilen. Sie sind erstens leicht enthält jeder Band zahlreiche Übungs-
und kompakt und können damit viel aufgaben mit ausführlichen Lösungen.
besser in der Schule oder Hochschule Zur gezielten Suche finden Sie im An-
eingesetzt werden. Zweitens wird durch hang ein Stichwortverzeichnis.
die Aufteilung auf mehrere Bände die Ein herzliches Dankeschön geht an
Aktualisierung eines Themas wesentlich Herrn Engesser und sein Team des Ver-
einfacher, weil nicht immer das Gesamt- lags Springer Vieweg für die Unterstüt-
werk überarbeitet werden muss. Auf zung und Begleitung dieses großen Pro-
Veränderungen in der Medienbranche jekts. Wir bedanken uns bei unserem
können wir somit schneller und flexibler Kollegen Joachim Böhringer, der nun
reagieren. Und drittens lassen sich die im wohlverdienten Ruhestand ist, für
schmalen Bände günstiger produzieren, die vielen Jahre der tollen Zusammen-
so dass alle, die das Gesamtwerk nicht arbeit. Ein großes Dankeschön gebührt
benötigen, auch einzelne Themenbände aber auch Ihnen, unseren Leserinnen
erwerben können. Deshalb haben wir und Lesern, die uns in den vergange-
das Kompendium modularisiert und in nen fünfzehn Jahren immer wieder auf
eine Bibliothek der Mediengestaltung Fehler hingewiesen und Tipps zur wei-
mit 26 Bänden aufgeteilt. So entstehen teren Verbesserung des Kompendiums
schlanke Bände, die direkt im Unterricht gegeben haben.
eingesetzt oder zum Selbststudium Wir sind uns sicher, dass die Biblio-
genutzt werden können. thek der Mediengestaltung eine zeitge-
Bei der Auswahl und Aufteilung der mäße Fortsetzung des Kompendiums
Themen haben wir uns – wie beim darstellt. Ihnen, unseren Leserinnen
Kompendium auch – an den Rahmen- und Lesern, wünschen wir ein gutes
plänen, Studienordnungen und Gelingen Ihrer Ausbildung, Ihrer Wei-
Prüfungsanforderungen der Ausbil- terbildung oder Ihres Studiums der
dungs- und Studiengänge der Medi- Mediengestaltung und nicht zuletzt viel
engestaltung orientiert. Eine Übersicht Spaß bei der Lektüre.
über die 26 Bände der Bibliothek der
Mediengestaltung finden Sie auf der Heidelberg, im Frühjahr 2017
rechten Seite. Wie Sie sehen, ist jedem Peter Bühler
Band eine Leitfarbe zugeordnet, so dass Patrick Schlaich
Sie bereits am Umschlag erkennen, Dominik Sinner
 Vorwort

Bibliothek der Medien-

gestaltung
Titel und
Erscheinungsjahr
Visuelle Digitale Farbe Typografie Digitales Bild Digitale Fotografie
Kommunikation

2017 2018 2017 2017 2017

Zeichen und Grafik AV-Medien Animation Printdesign Druckvorstufe

2017 2018 2017 2018 2018

Druck Crossmedia PDF Webdesign HTML5 und CSS3

Publishing

2018 2019 2018 2017 2017

Webtechnologien Digital Publishing Daten- Informations- Internet

management technik

2018 2018 2019 2019 2019

Medienrecht Medienmarketing Medienworkflow Präsentation Produktdesign

2017 2019 2018 2019 2019

Designgeschichte

2019

VII
Inhaltsverzeichnis

1 HTML5 2
1.1 Einführung......................................................................................................................................... 2
1.1.1 Was ist HTML?................................................................................................................................. 2
1.1.2 HTML-Versionen.............................................................................................................................. 3
1.1.3 HTML5-Editoren............................................................................................................................... 4
1.1.4 HTML5-Tutorials............................................................................................................................... 5
1.2 HTML5-Dateien................................................................................................................................ 6
1.2.1 Grundgerüst...................................................................................................................................... 6
1.2.2 Grammatik......................................................................................................................................... 6
1.2.3 Zeichensatz....................................................................................................................................... 7
1.2.4 Schriften............................................................................................................................................ 8
1.2.5 Farben................................................................................................................................................ 8
1.2.6 Dateinamen....................................................................................................................................... 9
1.2.7 Bilder, Grafiken, Videos................................................................................................................. 10
1.3 Meta-Tags....................................................................................................................................... 11
1.4 Dokument- und Textstruktur........................................................................................................ 12
1.4.1 Semantische Beschreibung......................................................................................................... 12
1.4.2 Dokumentstruktur.......................................................................................................................... 13
1.4.3 Textstruktur..................................................................................................................................... 13
1.4.4 Textauszeichnung.......................................................................................................................... 14
1.5 Tabellen........................................................................................................................................... 15
1.6 Hyperlinks....................................................................................................................................... 16
1.6.1 Definition und Merkmale.............................................................................................................. 16
1.6.2 Arten von Hyperlinks..................................................................................................................... 17
1.7 Navigation...................................................................................................................................... 20
1.7.1 Navigationsstruktur....................................................................................................................... 20
1.7.2 Aufklappbare Navigation.............................................................................................................. 21
1.8 Bilder und Grafiken....................................................................................................................... 22
1.8.1 Dateiformate................................................................................................................................... 22
1.8.2 Bilder referenzieren...................................................................................................................... 24
1.8.3 SVG-Vektorgrafik........................................................................................................................... 25
1.8.4 Canvas-Vektorgrafik ..................................................................................................................... 26
1.9 Formulare........................................................................................................................................ 28
1.9.1 Interaktion mit Formularen........................................................................................................... 28
1.9.2 Formulardefinition.......................................................................................................................... 28
1.9.3 Formularelemente.......................................................................................................................... 29
1.9.4 Datenprüfung.................................................................................................................................. 32
1.10 Multimedia..................................................................................................................................... 34
1.10.1 Audio................................................................................................................................................ 34
1.10.2 Video................................................................................................................................................ 34
1.10.3 Animation ....................................................................................................................................... 35
 Inhaltsverzeichnis

1.11 Testen............................................................................................................................................... 36
1.11.1 HTML-Parser.................................................................................................................................. 36
1.11.2 Browsermarkt................................................................................................................................. 36
1.11.3 Betriebssysteme............................................................................................................................ 37
1.11.4 Valides HTML5................................................................................................................................ 37
1.12 Aufgaben......................................................................................................................................... 39

2 CSS3 44
2.1 Einführung....................................................................................................................................... 44
2.1.1 Was ist CSS?................................................................................................................................... 44
2.1.2 CSS versus HTML5........................................................................................................................ 45
2.1.3 CSS3................................................................................................................................................. 45
2.1.4 CSS3-Editoren................................................................................................................................ 46
2.1.5 CSS3-Tutorials................................................................................................................................ 46
2.2 CSS3-Regeln................................................................................................................................... 47
2.2.1 Allgemeine Definition.................................................................................................................... 47
2.2.2 CSS3-Datei...................................................................................................................................... 47
2.2.3 CSS3 im Dateikopf......................................................................................................................... 48
2.2.4 Lokale CSS3.................................................................................................................................... 49
2.3 Selektoren...................................................................................................................................... 50
2.3.1 Einfache Selektoren...................................................................................................................... 50
2.3.2 Vererbung........................................................................................................................................ 53
2.3.3 Kombinierte Selektoren................................................................................................................ 54
2.3.4 Rangfolge und Spezifität............................................................................................................... 54
2.4 Maßeinheiten................................................................................................................................. 57
2.5 Farben.............................................................................................................................................. 58
2.5.1 Hexadezimale Farbangaben........................................................................................................ 58
2.5.2 Dezimale Farbangaben................................................................................................................. 58
2.5.3 Farbnamen...................................................................................................................................... 59
2.5.4 Farbverläufe.................................................................................................................................... 59
2.6 Typografie........................................................................................................................................ 60
2.6.1 Schriftart......................................................................................................................................... 60
2.6.2 Schriftattribute............................................................................................................................... 61
2.6.3 Zeilenumbruch............................................................................................................................... 62
2.6.4 Abstände und Rahmen.................................................................................................................. 62
2.6.5 Listen................................................................................................................................................ 63
2.6.6 Tabellen........................................................................................................................................... 63
2.6.7 Hintergründe................................................................................................................................... 64
2.7 Layout.............................................................................................................................................. 66
2.7.1 CSS3-Boxmodell............................................................................................................................ 66
2.7.2 Blockelemente positionieren....................................................................................................... 68

IX
 2.7.3 Blockelemente umfließen............................................................................................................ 71
2.7.4 Flexible Boxen................................................................................................................................ 71
2.7.5 Textüberlauf.................................................................................................................................... 73
2.7.6 Block- und Inline-Elemente.......................................................................................................... 73
2.7.7 Silbentrennung............................................................................................................................... 74
2.8 Media Queries............................................................................................................................... 76
2.8.1 Medientypen................................................................................................................................... 76
2.8.2 Medieneigenschaften................................................................................................................... 77
2.8.3 Anwendungsbeispiel..................................................................................................................... 78
2.9 Animation........................................................................................................................................ 79
2.9.1 Keyframe-Animation..................................................................................................................... 79
2.9.2 Animationseigenschaften............................................................................................................ 81
2.9.3 Transformationen........................................................................................................................... 82
2.9.4 Animation von Pseudoklassen.................................................................................................... 84
2.10 Responsive Webdesign................................................................................................................ 85
2.10.1 Briefing............................................................................................................................................ 85
2.10.2 Vorbereitung................................................................................................................................... 87
2.10.3 HTML5.............................................................................................................................................. 87
2.10.4 CSS3................................................................................................................................................. 88
2.11 Aufgaben......................................................................................................................................... 91

3 Anhang 96
3.1 Lösungen......................................................................................................................................... 96
3.1.1 HTML5.............................................................................................................................................. 96
3.1.2 CSS3................................................................................................................................................. 99
3.2 Links und Literatur...................................................................................................................... 102
3.3 Abbildungen................................................................................................................................. 103
3.4 Index.............................................................................................................................................. 104

X
 1.1 Einführung
1 HTML5

1.1.1 Was ist HTML? I­nternet verbundenen Endgerät befin-

den können. Auf diese Weise ist ein rie-
Das Internet ist allgegenwärtig – seine siges Informationssystem – das World
Nutzung ist für uns längst zur Selbst- Wide Web (WWW) – entstanden.
verständlichkeit geworden. Die Über-
tragung von Text-, Bild-, Sound- und HTML-Elemente (Tags)
Videodaten funktioniert reibungslos Die Beschreibung der einzelnen Kompo-
und fehlerfrei – sieht man einmal von nenten einer Webseite wie Überschrif-
eventuellen Ladezeiten ab. ten, Absätze, Tabellen, Bilder und Links
Damit dies möglich wird, müssen erfolgt in HTML mit speziellen Steuer-
alle Bestandteile einer Webseite nach anweisungen. Diese werden als Tags
einem weltweit gültigen Standard (sprich: Tägs) bezeichnet und besitzen
„codiert“ werden. Diese Funktion über- die allgemeine Form:
nimmt die vom britischen Informatiker
Tim Burners-Lee bereits im Jahr 1989 Struktur eines HTML-Tags
veröffentlichte Hypertext Markup Lan-
<tag>Inhalt des Tags</tag>
guage, kurz HTML. Wenn wir „to mark
up“ mit „notieren“ übersetzen, handelt
es sich wörtlich übersetzt um eine Spra- Beispiele:
che, um Hypertext zu notieren. ƒƒ <h1>…</h1> markiert eine Über-
schrift (Headline) der Größe 1.
Hypertext ƒƒ <strong>…</strong> zeichnet einen
Was aber ist Hypertext? Das Kunstwort Text fett aus.
bezeichnet die Möglichkeit, Texte mit ƒƒ <a href=“[Link]“>News</a>
Hilfe von Hyperlinks oder kurz Links definiert einen Link zu „[Link]“.
miteinander zu verbinden. Hypertexte Wie Sie sehen, schließen Tags, von we-
verlassen also die lineare Struktur nigen Ausnahmen einmal abgesehen,
gedruckter Texte und gestatten das immer den Inhalt ein, auf den sie sich
Hin- und Herspringen innerhalb von beziehen. Beachten Sie hierbei, dass
Texten. Der Vorteil hierbei ist, dass sich der schließende Teil einen zusätzlichen
verlinkte Textdateien auf jedem mit dem Schrägstrich (Slash) erhalten muss.

Wikipedia stellt Hyperlinks blau dar.

© Springer-Verlag GmbH Deutschland 2017

P. Bühler, P. Schlaich, D. Sinner, HTML5 und CSS3, Bibliothek der Mediengestaltung,
DOI 10.1007/978-3-662-53916-3_1
 HTML5

HTML und CSS sämtliche anderen Medien wie Bilder,

HTML wurde 1989 zur Beschreibung Grafiken und Videos als eigene Dateien
und Verlinkung von Texten entwickelt. vorliegen und auf das Endgerät geladen
Zur damaligen Zeit wurde weder an werden.
Bilder, Grafiken, Sounds, Animatio­nen
und Videos noch an die Gestaltung von 1.1.2 HTML-Versionen
Webseiten gedacht. Im Laufe der Zeit
wurden die Computer leistungsfähiger HTML ist nicht gleich HTML. Die
und erhielten eine grafische Benutzer­ Sprache, wie auch die zur Darstellung
oberfläche. Hieraus ergaben sich neue der Seiten notwendigen Webbrowser,
Forderungen an Webseiten: wurde stetig weiterentwickelt. Darüber
Sie sollten nicht mehr nur unfor- hinaus wurden die Empfehlungen der
matierten Text zeigen, sondern diesen WWW-Dachorganisation (W3C) von den
typografisch ansprechend darstellen Browserherstellern teilweise ignoriert,
können, durch Bilder, Grafiken und so dass es keinen einheitlichen Stan-
multimediale Inhalte ergänzt. dard, sondern eine parallele Verbrei-
Da HTML aber niemals zur Gestal- tung mehrerer Versionen gibt. Von
tung von Webseiten gedacht war, wurde Bedeutung sind folgende:
1996 mit den Cascading Style Sheets,
kurz: CSS, eine Sprache geschaffen, HTML 4.01
die HTML ergänzte und die zur Forma- Die letzte Version von HTML ist 4.01,
tierung und Gestaltung von Webseiten seither wird HTML nicht mehr weiter-
dient (siehe Kapitel 2 ab Seite 44). entwickelt. Aktuell wird HTML 4.01 nach
und nach durch HTML5 abgelöst.
Wichtig
XHTML
HTML beschreibt den Inhalt, CSS die Formatierung
und Gestaltung einer Website.
Die zunehmende Bedeutung von XML
führte dazu, dass auch Webseiten
XML-konform sein sollten. Aus diesem
HTML-Dateien sind Textdateien Grund wurde HTML modifiziert und
HTML-Dateien sind reine Textdateien, in XHTML umbenannt, wobei das „X“
die Sie mit jedem beliebigen Texteditor für „extensible“ (deutsch: erweiterbar)
erstellen können. Der Vorteil von Text- steht. Doch auch XHTML wird nicht
dateien liegt darin, dass sie eine sehr mehr weiterentwickelt, die geplante
geringe Datenmenge besitzen. Version XHTML 2.0 wurde zugunsten
Heute sind in Deutschland vielerorts von HTML5 eingestellt.
schnelle Breitbandanschlüsse vorhan-
den. Da die Nutzer jedoch mittlerweile HTML5
überwiegend mit mobilen Endgeräten HTML5 wurde 2014 verabschiedet und
wie Smartphones oder Tablet ins Inter- gilt als offizieller Nachfolger der oben
net gehen und die hierbei verfügbaren genannten Sprachversionen. HTML5
Datenraten oft noch gering sind, ist die bietet viele neuen Features, die davor
Forderung nach geringen Datenmengen nicht oder nur umständlich möglich wa-
(wieder) von Bedeutung. ren, z. B. das Einbinden von Audio- und
Da es sich bei HTML wie gesagt Videodateien auf Webseiten.
um reine Textdateien handelt, müssen

3
 1.1.3 HTML5-Editoren finden sein, da mit derartigen Systemen
ein individuelles, an die Bedürfnisse
Texteditoren des Kunden angepasstes Webdesign
Eine HTML5-Datei enthält ausschließ- kaum möglich ist.
lich Text. Aus diesem Grund können
Sie sie mit jedem beliebigen Texteditor Content-Management-Systeme
erstellen. Wer es etwas komfortabler Nach einem ähnlichen Prinzip wie
haben möchte, der kann auf einen bei Website-Baukästen funktionieren
HTML-Editor zurückgreifen, bei dem z. B. Content-Management-Systeme (kurz:
die Tags farbig dargestellt werden. Man CMS). Auch hier wählt der Anwender
spricht hierbei von Syntax-Highlighting. eine Vorlage – ein sogenanntes Tem-
Dies verbessert die Übersicht und er- plate – aus oder er erstellt diese selbst,
leichtert die Fehlersuche. Eine Übersicht und kümmert sich im zweiten Schritt
textbasierter HTML-Editoren, die häufig nur noch um den Inhalt. Dieser wird in
auch kostenlos verfügbar sind, finden einer Datenbank verwaltet. Die HTML-
Sie bei Wikipedia unter [Link]. Codierung der Seiten erfolgt dyna-
org/wiki/Liste_von_HTML-Editoren. misch, d. h., die Seite wird automatisch
generiert, wenn sie aufgerufen wird.
Website-Baukästen Nur auf diese Weise wird es möglich,
Das Gegenteil von selbst codierten große Shopsysteme oder Webportale
Webseiten sind Tools, mit denen sich zu realisieren.
Webseiten, teilweise sogar browser­ Leistungsfähige und weitverbreitete
basiert, einfach „zusammenklicken“ CMS sind Joomla!, TYPO3, WordPress
­lassen. Hierbei wählt der Anwender oder Drupal. Diese unterscheiden sich
eine Vorlage aus und passt diese an. von einfachen „Baukästen“ im Hinblick
Die Zielgruppe dieser Produkte dürfte auf Funktionsumfang und Editiermög-
jedoch wohl eher im Amateurbereich zu lichkeiten teilweise erheblich.
Adobe Dreamweaver
Dreamweaver ist eine
Entwicklungsumge- A B
bung zur Realisation
und Verwaltung von
Webseiten. B
Als Entwickler kön­
nen Sie entscheiden,
ob Sie im Quellcode A
oder im Entwurfsmo-
dus B arbeiten wollen.
Gute HTML-Kennt-
nisse sind jedoch in
jedem Fall erforder-
lich.
A

4
 HTML5

WYSIWYG-Editoren 1.1.4 HTML5-Tutorials

Die seltsame Bezeichnung WYSIWYG
setzt sich aus den Anfangsbuchstaben In den folgenden Kapiteln erhalten Sie
von „What you see is what you get!“ eine strukturierte Einführung in HTML5.
zusammen. Die Bedeutung dieses Danach sind Sie in der Lage, eigene,
Satzes ist so zu verstehen, dass bereits noch unformatierte Webseiten zu erstel-
während der Entwicklung der Website len. In Ergänzung hierzu lernen Sie in
eine Vorschau auf ihr zukünf­tiges Aus- Kapitel 2, wie sich diese Webseiten mit
sehen möglich ist. CSS3 ansprechend gestalten lassen.
Marktführer in dieser Kategorie ist Begleitend oder ergänzend hierzu
Dreamweaver von Adobe. Wenn Sie mit finden Sie im Internet gute Tutorials,
Photoshop, Illustrator und Co. bereits z. B. unter [Link]/html,
vertraut sind, werden Sie mit dem die eine schrittweise Einarbeitung in
„Look and Feel“ von Dreamweaver HTML5 ermöglichen. Wer lediglich
schnell zurechtkommen. eine systematische Übersicht über die
Bei Dreamweaver ([Link]. HTML5-Tags benötigt, wird auf www.
com/de/products/[Link]) [Link] fündig.
handelt es sich um eine mächtige Web- Auch Bücher über HTML5 gibt es
Entwicklungsumgebung, mit der Sie mittlerweile viele. An dieser Stelle
auch CSS, PHP, ASP, XML, JavaScript empfehlen wir das HTML5-Handbuch
und andere Webtechnologien realisie- von Stefan Münz. Es steht wahlweise HTML5-Handbuch
ren können. im Internet unter [Link]- Die ausführliche
HTML5-Referenz ist
Es stellt sich die Frage, ob Entwickler [Link]/docs:html-handbuch oder in wahlweise im Internet
überhaupt noch HTML(5)-Kenntnisse gedruckter Form zur Verfügung. oder als Buch ver-
benötigen. Aus heutiger Sicht muss fügbar.
diese Frage (noch) mit „ja“ beantwortet
werden:
ƒƒ Auch Webseiten, die über Content-
Management-Systeme generiert
werden, müssen individualisiert und
an die Anforderungen des Kunden
angepasst werden. Dies geht nur
manuell im Quellcode.
ƒƒ Webseiten werden durch die Browser
der verschiedenen Betriebssysteme
unterschiedlich interpretiert und
dargestellt. Was im einen Browser
einwandfrei funktioniert, kann im an-
deren fehlerhaft sein. Eine manuelle
Fehlersuche ist erforderlich.
ƒƒ Webseiten müssen heute an die un-
terschiedlichen Endgeräte (Monitore,
Smartphones, Tablet-PCs) angepasst
werden. Auch diese Anpassung wird
einer Software nur bis zu einem ge-
wissen Grad automatisiert gelingen.

5
 1.2 HTML5-Dateien

1.2.1 Grundgerüst befinden. Beachten Sie die englische

Schreibweise, also <title> und nicht
Wie im vergangenen Abschnitt erläu- <titel>. Der dort enthaltene Text be-
tert, handelt es sich bei HTML bzw. schriftet den Browsertab. Weiterhin hilft
HTML5 um eine Seitenbeschreibungs- die Titelangabe für das Auffinden der
sprache, die alle Bestandteile einer Seite durch Suchprogramme und liefert
Webseite mit Hilfe von Sprachelemen­ den Text bei der Verwendung eines
ten (Tags, ausgesprochen: Tägs) be- Lesezeichens (bookmark).
schreibt. Zur Unterscheidung von Der Dateikörper <body> enthält alle
„normalem“ Text stehen Tags in spitzen Elemente, die im Webbrowser ange-
Klammern < >, wobei die meisten Be- zeigt werden, also z. B. Texte, Buttons,
fehle ein Start- und ein End-Tag benö- Bilder, Links. Im Beispiel finden Sie
tigen. Letzteres enthält zusätzlich einen einen Absatz <p>...</p> C.
Schrägstrich (Slash).
1.2.2 Grammatik
Grundgerüst einer HTML5-Datei
Im Vergleich zu gesprochenen Sprachen
<!DOCTYPE html> A
<html> gibt es bei HTML5 glücklicherweise nur
<head> sehr wenig Grammatikregeln.
<title>Erste Seite</title> B
...
</head> Tags
<body> Wie schon erwähnt wird der Inhalt einer
<p>Hier steht der Inhalt!</p> C HTML5-Seite durch Tags beschrieben.
...
</body> Fast alle Tags bestehen aus Start- und
</html> End-Tag, es gibt jedoch auch einige
Ausnahmen, die kein End-Tag benöti-
gen.

Tags
Allgmeine Definition
<tag>Inhalt des Tags</tag>
Beispiele
<h1>Überschrift (headline)</h1>
<b>fetter Text (bold)</b>
<p>Absatz (paragraph)</p>
Ein HTML5-Dokument beginnt mit
Angabe des sogenannten Dokumen- Einzelne Tags (ohne schließendes Tag)
tentyps (!DOCTYPE) A. Er liefert dem <br> Zeilenumbruch
Browser die Information über die ver- <meta ...> Meta-Angabe (siehe Kapitel 1.3)
<img ...> Bild/Grafik (siehe Kapitel 1.8)
wendete HTML-Version.
Der eigentliche HTML-Code beginnt
mit dem <html>-Tag und endet mit Verschachtelung
dem End-Tag </html>. Ein HTML- Wenn Sie noch einmal das Grundgerüst
Dokument besteht immer aus Dateikopf einer HTML5-Datei in der linken Spalte
<head>…</head> und Dateikörper betrachten, dann fällt Ihnen auf, dass
<body>…</body>. Im Dateikopf sollte die Tags ineinander verschachtelt sind.
sich ein Titel <title> … </title> B Alle nacheinander geöffneten Tags müs-

6
 HTML5

sen in umgekehrter Reihenfolge wieder Attribute (Eigenschaften) von Tags

geschlossen werden. Dies hat zur Folge, Allgmeine Definition
dass <html>...</html> die gesamte <tag attribut1=“wert1“ attribut2=“wert2“>
HTML-Datei umschließt, <head>...</ Inhalt des Tags</tag>
head> den gesamten Dateikopf und Beispiele
<body>...</body> den gesamten
<a href=“[Link]“>Link</a>
Dateikörper. <img src=“[Link]“>
<meta name=“date“ content=“2018-05-09“>
Schreibweise
Ob Sie die Tags zeilenweise oder
untereinander schreiben, ist Ihnen 1.2.3 Zeichensatz
freigestellt. Sie sollten sich aber eine
möglichst übersichtliche Schreibweise Da das Internet weltweit verfügbar ist,
angewöhnen. Dies erleichtert die Feh- werden Webseiten mit Browsern in der
lersuche. jeweiligen Landessprache betrachtet.
Für eine bessere Lesbarkeit von Beim Erstellen von Webseiten müssen
Quellcode sorgen auch Kommentare, Sie deshalb immer den für Ihr Land
die zwischen <!-- und --> stehen. gültigen Zeichensatz angeben. Für
Kommentare sind auf der Webseite Westeuropa ist dies UTF-8 (Unicode).
nicht sichtbar. Dies gilt auch für Leerzei- Die Angabe des Zeichensatzes erfolgt
chen im Quellcode. mittels <meta>-Tag im Dateikopf.

Kommentare Zeichensatz
<!--Kommentare--> <!DOCTYPE html>
<p>Ich bin ein erster Absatz</p> <html lang=“de“>
<!--sind--> <head>
<p> Ich bin ein zweiter Absatz</p> <title>Zeichensatz</title>
<!--nicht sichtbar--> <meta charset=“utf-8“>
<p> Ich bin ein dritter Absatz </p> </head>
<body>
<p>ä, ö, u und ß</p>
</body>
</html>

Mit Angabe des Zeichensatzes

Attribute
Manche Tags besitzen Eigenschaften,
sogenannte Attribute. Attribute stehen
immer im Start-Tag. Der Wert eines
Attributs wird in Anführungszeichen
gesetzt und durch ein =-Zeichen an das
Attribut angehängt. Mehrere Attribute
Ohne Angabe des Zeichensatzes
werden durch ein Leerzeichen getrennt.

7
 Zusätzlich können Sie die gewünschte 1.2.4 Schriften
Landessprache über das lang-Attribut
z. B. im <HTML>-Tag benennen. Bei In HTML5-Dateien lassen sich keine
mehrsprachigen Seiten können Sie das Schriften einbetten wie beispielsweise
Attribut auch abschnittsweise verän- in einer PDF-Datei. Es ist allerdings
dern. auch gar nicht vorgesehen, dass Schrif-
Trotz dieser Maßnahmen gibt es ten gewählt und formatiert werden
Sonderzeichen, die nicht korrekt ange- können, denn hierzu dient die Forma­
zeigt werden. Hierzu gehören beispiels- tierungssprache CSS3 – wir gehen
weise spitze Klammern < und >, weil hierauf ab Seite 60 ein.
diese für HTML-Tags reserviert sind. Für Welche Schrift wird verwendet, wenn
derartige Zeichen gibt es zwei Möglich- in einer HTML5-Datei keine Schrift
keiten, diese anzugeben: angegeben wird? Es wird die Schrift
ƒƒ Als „benannte“ Zeichen, z. B. &lt; und Schriftgröße verwendet, die in den
für die öffnende spitze Klammer < Browser-Grundeinstellungen eingestellt
ƒƒ Unicodierte Zeichen, z. B. &#60; ist. Der Screenshot zeigt die Standard-
für die öffnende spitze Klammer < einstellungen bei Google Chrome:
Beachten Sie, dass der Strichpunkt zur
Codierung gehört. Die Tabelle zeigt eine
Übersicht wichtiger Zeichen.

Zeichen Bedeutung Name Unicode

< kleiner als &lt; &#60;

> größer als &gt; &#62;

Leerzeichen &nbsp; &#160;

© Copyright &copy; &#169;

2
Hoch 2 &sup2; &#178;
3
Hoch 3 &sup3; &#179;

¼ ein Viertel &frac14; &#188;

½ ein Halb &frac12; &#189;

Ä A Umlaut &Auml; &#196;

Ö O Umlaut &Ouml; &#214;

Ü U Umlaut &Uuml; &#220;

Standardschrift des Browsers
ß scharfes S &szlig; &#223; hier: Google Chrome
ä a Umlaut &auml; &#228;

ö o Umlaut &ouml; &#246; 1.2.5 Farben

ü u Umlaut &uuml; &#252;
Was für Schriften gilt, gilt gleicherma-
Alpha klein &alpha; &#945; ßen für Farben und andere Gestal-
Wurzel &radic; &#8730; tungselemente: HTML5 ist hierfür nicht
ungleich &ne; &#8800; vorgesehen.
Farbangaben sollten ausschließlich
Euro &euro; &#8364;
mit CSS3 vorgenommen werden, so

8
 HTML5

Wichtig beispielsweise „[Link]“ ein,

sucht der Webserver nach „[Link]“
HTML5 dient nicht zur Gestaltung von Webseiten.
Schriften und Farben werden ausschließlich mit
und sendet diese Datei zurück.
CSS3 definiert.
Dateiname der Startseite (Homepage)
Benennen Sie die Startseite (Homepage) immer
dass wir Sie auf Seite 58 verweisen, „[Link]“ oder „[Link]“.
wenn es um Farben auf Webseiten geht.

1.2.6 Dateinamen Groß- und Kleinschreibung

Die meisten Webserver werden unter
Dateiendung Linux betrieben. Im Unterschied zu Win-
Damit eine HTML5-Datei als solche dows und Mac OS arbeitet dieses Be-
durch einen Webbrowser erkannt wird, triebssystem „case-sensitiv“, d. h., dass
muss sie unter Windows und Linux die bei Dateinamen zwischen Groß- und
Dateiendung .htm oder .html besitzen. Kleinschreibung unterschieden wird:
„[Link]“, „[Link]“ und „seite1.
Wichtig HTM“ sind unterschiedliche Dateien.
Geben Sie einer HTML-Datei (auch am Mac) die
Endung .htm oder .html. Groß- und Kleinschreibung
Beachten Sie die Groß- und Kleinschreibung bei der
Vergabe von Dateinamen.
Bei Mac OS werden Dateien nicht an-
hand ihrer Dateiendung, sondern durch
spezielle Informationen im Dateikopf Um Fehler infolge doppelter Dateina-
erkannt. Hierin liegt eine große Gefah- men zu vermeiden, lautet die Empfeh-
renquelle: Lassen Sie unter Mac OS lung: Verwenden Sie bei der Vergabe
die Dateiendung weg, funktioniert Ihre von Dateinamen nur Kleinbuchstaben.
Webseite zwar wunderbar auf Ihrem
Mac, unter Windows oder Linux jedoch Sonderzeichen und Umlaute
nicht! Aus diesem Grund muss die Beachten Sie weiterhin, dass in Abhän-
Dateinamenerweiterung unbedingt gigkeit vom Betriebssystem nicht alle
angegeben werden. Sonderzeichen in Dateinamen verwen-
det werden dürfen (z. B. Slash /, Back-
Homepage slash \ oder Leerzeichen).
Eine besondere Namensgebung be- Wir empfehlen zusätzlich, auf Um-
sitzt die Startseite (Homepage) Ihres laute zu verzichten, weil diese eine häu-
Internet­auftritts. Damit beim Aufruf der fige Fehlerquelle darstellen, wenn die
Seite im Webbrowser nicht jedes Mal Dateien auf unterschiedlichen Betriebs-
ein Dateiname eingegeben werden systemen verwendet werden.
muss, hat man sich darauf geeinigt,
dass die Startseite immer den Namen Sonderzeichen und Umlaute
„index.­htm“ oder „[Link]“ erhält.
Beschränken Sie sich bei Dateinamen auf Kleinbuch-
Webserver sind so konfiguriert, dass staben ohne Umlaute und auf Ziffern. Sonderzeichen
sie automatisch nach dieser Datei su- und Leerzeichen sollten nicht verwendet werden.
chen. Geben Sie in Ihrem Webbrowser

9
 1.2.7 Bilder, Grafiken, Videos Relative Referenz
Um Dateien zu referenzieren, die zur
HTML5-Dateien sind reine Textdateien. eigenen Webseite gehören, ist die
Nun wäre es heute undenkbar, dass Angabe eines relativen Pfades erforder-
Webseiten ausschließlich aus Text be- lich. Dieser ändert sich nicht, wenn Sie
stehen – das Internet ist längst multi- den Internetauftritt auf einen Webserver
medial geworden. kopieren, da die Position der Dateien
Um Bilder, Grafiken oder Videos relativ zueinander erhalten bleibt.
verwenden zu können, müssen diese Die Regeln für relative Referenzen
als separate Dateien vorliegen. In der sind im Grunde sehr einfach: Um in
HTML5-Datei geben Sie dann lediglich ein Unter­verzeichnis zu gelangen,
an, wo sich die entsprechenden Dateien geben Sie dieses mit Namen an. Es
befinden. Der Fachbegriff hierfür lautet folgt, durch einen Slash (/) getrennt,
„Referenzieren“. Hierbei werden zwei die Angabe des Dateinamens. In ein
Möglichkeiten unterschieden: übergeordnetes Verzeichnis gelangen
Sie durch zwei Punkte (. .), gefolgt von
Absolute Referenz Slash und Dateiname. Durch Kombi-
Eine absolute Referenz könnte lauten: nation dieser Regeln gelangen Sie in
C:/Dokumente und Einstellungen/Paul/ jedes beliebige Verzeichnis.
Eigene Dateien/Webseiten/[Link].
Sie erkennen, dass diese Angabe
unsinnig ist, da sie nur auf dem eige- Relative Referenz (Beispiele)
nen Computer funktioniert. Sobald die Datei im selben Verzeichnis
Dateien auf einen Webserver hochge-
[Link]
laden werden, stimmt der angegebene [Link]
Pfad nicht mehr und die Grafik wird
nicht gefunden. Datei im Unterverzeichnis
Es gibt eine Ausnahme, bei der abso- bilder/[Link]
lute Angaben notwendig sind: Um Links sites/[Link]

auf andere Webseiten zu realisieren, Datei im Unter-Unterverzeichnis

muss deren (absolute) Adresse angege-
bilder/grafiken/[Link]
ben werden. sites/html/[Link]
Beachten Sie, dass zur vollständigen
Datei im übergeordneten Verzeichnis

Absolute Referenz (Beispiele) ../[Link]

../[Link]
[Link]
[Link] Datei in zwei übergeordneten Verzeichnissen
[Link]
../../[Link]
../../[Link]

Referenz auch das Protokoll (meistens Datei im übergeordneten Unterverzeichnis

http:// oder [Link] angegeben ../bilder/[Link]
werden muss. Dies ist erforderlich, weil ../styles/[Link]

es im Internet zahlreiche Diens­te und

damit Protokolle gibt.

10
1.3 Meta-Tags HTML5

Meta-Angaben werden im Dateikopf, Meta-Tags mit name

also zwischen <head> und </head>, Autorenangabe
platziert. Es handelt sich dabei um
<meta name=“author“ content=“Paul“>
unsichtbare Zusatzinformationen, die
folgende Funktionen besitzen: Datumsangabe
ƒƒ Copyright-Angaben, z. B. Autor und <meta name=“date“ content=“2018–05–09“>
Erstellungsdatum Zugriff durch Suchprogramme verbieten
ƒƒ Informationen für Suchprogramme
<meta name=“robots“ content=“noindex
(sogenannte „Spiders“ oder „Bots“), nofollow“>
die eine Aufnahme der Seite in die
Datenbank von Suchmaschinen Zugriff durch Suchprogramme gestatten
ermöglichen oder verhindern sollen, <meta name=“robots“ content=“index“>
z. B. durch Angabe von Schlüsselwör- Kurzbeschreibung für Suchprogramme
tern oder einen die Seite beschrei-
<meta name=“description“
benden Text. content=“Portal für Webdesigner“>
ƒƒ Angaben zur Behandlung der Seite
durch den Webserver, z. B. Weiterlei- Schlüsselwörter für Suchprogramme
tung der Anfrage zu einer anderen <meta name=“keywords“ content=
Adresse “Gestaltung,Webdesign,Layout,Design,
Mediengestalter,Medien“>
ƒƒ Zusatzinformationen zur korrekten
Darstellung der Seite durch den Meta-Tags mit http-equiv
Webbrowser. Wichtig ist vor allem die Angabe des Unicode-Zeichensatzes
Angabe des Zeichensatzes. <meta http-equiv=“content-type“
ƒƒ Die Angabe von Meta-Tags ist optio- content=“text/html“ charset=“utf-8“>

nal, d. h., die HTML-Datei funktioniert Seite vom Server und nicht aus Cache laden
auch ohne Meta-Tags. <meta http-equiv=“expires“ content=“0“>
Früher waren die keywords sowie die
Seite neu laden, hier nach fünf Sekunden
description der Site unerlässlich, um
ein möglichst gutes Ranking in der Tref- <meta http-equiv=“refresh“ content=“5“>

ferliste der Suchmaschinen zu erzielen. Weiterleitung, hier nach fünf Sekunden

Dies wurde teilweise missbraucht, in- <meta http-equiv=“refresh“ content=“5;
dem häufig eingegebene Suchbegriffe URL=[Link]
als Schlüsselwörter verwendet wurden.
Heute erfolgt die Suche überwiegend im Ranking weit oben platziert, wenn
mit Google. Das Ranking wird bei Goo- es viele andere Webseiten gibt, die per
gle nach einem komplizierten Algorith- Link auf diese Site verweisen. Nach
mus, dem PageRank, entwickelt. Man dem Motto: Wichtig ist, was alle wichtig
kann aber sagen: Eine Webseite wird finden.
Meta-Tags
Auszug aus den Meta-
Tags der Süddeut-
schen Zeitung

11
 1.4 Dokument- und Textstruktur

1.4.1 Semantische Beschreibung Darüber hinaus wurden etliche neue

Tags wie <section>, <article> oder
Als HTML erfunden wurde, waren die <nav> eingeführt, um die Beschreibung
Ansprüche an die Gestaltung von Text der semantischen, also der inhaltlichen
noch sehr gering. Dies erklärt, weshalb Struktur von Webseiten zu erweitern.
in HTML hierfür nur einige wenige Ele- Diese Beschreibung ist weniger für
mente zur Verfügung gestellt wurden. Menschen gedacht, denn wir sehen
Um diesen Missstand zu beheben, die Struktur. Diese Beschreibung dient
wurden die Cascading Style Sheets vielmehr dazu, den Inhalt so aufzuberei-
(kurz: CSS) entwickelt. Sie dienen als ten, dass er für beliebige Anwendungs-
Ergänzung zu HTML(5) und ermögli- zwecke genutzt werden kann.
chen die Gestaltung von Webseiten. Die Grafik veranschaulicht diesen
Mit HTML5 verfolgt man das Ziel Zusammenhang: Wenn sich die Seiten-
einer strikten Trennung von Inhalt (Con- beschreibung mit HTML5 ausschließlich
tent) und Gestaltung (Design) von Web- auf Inhalt und Struktur bezieht, kann
seiten noch wesentlich konsequenter. dieser Inhalt mehrfach für unterschied-
Alle früheren HTML-Elemente, die zur liche Ausgabemedien genutzt wer-
Gestaltung genutzt werden konnten, den. Mehr noch: Der Inhalt lässt sich
z. B. das <font>-Tag zur Auswahl einer medienneutral speichern und steht für
Schrift, wurden entfernt. beliebige Anwendungen zur Verfügung.
Strukturierung mit
HTML5 HTML5-Datei Druckausgabe
Aufgabe von HTML5 Ausgabe für
ist es, die Struktur <!DOCTYPE HTML>
<html>
mobile Endgeräte
und den Inhalt von
Dokumenten unab- <head>
hängig von der ge- <title>Dokument</title>
wünschten Ausgabe <style type="text/css">
zu beschreiben. @import url("[Link]")
Mit CSS3 kann das print;
Dokument unab- @import url("[Link]")
hängig vom Inhalt screen;
@import url("[Link]") [Link]
für das gewünschte
Ausgabemedium aural;
aufbereitet werden. </style> [Link]
</head>
<body> [Link]
<header>Kopfzeile</header>
<section> Monitorausgabe
<h1>Kapitel 1</h1>
<h2>Abschnitt 1</h2>
<p>Text</p>
<h2>Abschnitt 2</h2> Sprachausgabe
<p>Text<p>
</section>
<footer>Impressum</footer>
</body>
</html>

12
 HTML5

1.4.2 Dokumentstruktur verwenden, selbst wenn sie von älteren

Browsern nicht unterstützt werden. In
In früheren HTML-Versionen waren diesem Fall werden sie einfach ignoriert
Elemente zur Gliederung und Struktu- und führen zu keiner Fehlermeldung.
rierung nicht vorgesehen. Die Beschrei-
bung beispielsweise eines Buches, das 1.4.3 Textstruktur
in Kapitel und Abschnitte gegliedert ist,
war somit nicht möglich. Die Elemente zur Strukturierung von
Mit HTML5 ist dies nun möglich Texten waren größtenteils schon in
geworden, indem Tags ergänzt wurden, älteren HTML-Versionen bekannt.
die zur Beschreibung von Dokumenten Neu ergänzt wurde das <figure>-
dienen. Diese können nun in Abschnitte Tag, mit dem sich Abbildungen kenn-
<section> gegliedert werden, außer- zeichnen lassen. Von besonderer
dem lassen sich beispielsweise Kopf- Bedeutung ist das <div>-Element: Es
<header> und Fußbereich <footer> hat keine Auswirkungen auf die Forma-
unterscheiden. In der Tabelle sind die
wichtigsten Tags zusammengestellt. Sie Textstruktur
können die neuen Tags bedenkenlos Überschriften (headline) unterschiedlicher Ordnung
<h1>...</h1>
Dokumentstruktur …
Abschnitt <h6>...</h6>

<section>...</section> Absatz (paragraph)

Artikel <p>...</p>

<article>...</article> Zeilenumbruch (break)

Kopfbereich <br>

<header>...</header> Aufzählungsliste (unordered list)

Fußbereich <ul>
<li>...</li>
<footer>...</footer> <li>...</li>
...
Navigationsbereich </ul>
<nav>...</nav> Nummerierte Liste (ordered list)
Beispiel <ol>
<section> <li>...</li>
<header> <li>...</li>
<h1>Mein Blog</h1> ...
</header> </ol>
<article> Abbildung
<h2>Headline</h2>
<p>Hier der Inhalt</p> <figure>
</article> <img src=“...“>
<article> </figure>
<h2>Headline</h2>
<p>Hier der Inhalt</p> Horizontale Linie
</article>
<hr>
<footer>
<p>Impressum</p> Allgemeines Element (für CSS3)
</footer
</section> <div>...</div>

13
 tierung, sondern dient lediglich dazu, Beispiel
um einen Text mit Hilfe von CSS forma-
<section>
tieren zu können (siehe Seite 60). <article>
<h3>Text mit HTML5</h3>
<p>In einem Text können Sie
1.4.4 Textauszeichnung einzelne Wörter <strong>
stark </strong> oder
Um einzelne Textpassagen oder Wörter <i>kursiv</i>
hervorheben.<br>Ziffern
hervorzuheben, stellt HTML5 zahlreiche
können hoch- (cm^{2
Elemente bereit. In der Tabelle sind die}) oder tiefgestellt
wichtigsten Tags zusammengefasst. (x₁) werden.</p>
<ul>
Bitte beachten Sie auch hier: Die <li>Eine</li>
genannten HTML5-Tags dienen – im <li>Liste</li>
Unterschied zu früheren Versionen – <li>mit</li>
<li>Punkten.</li>
ausschließlich zur Beschreibung der </ul>
semantischen Struktur, nicht zur Forma- <ol>
tierung des Inhalts. <li>Und</li>
<li>eine</li>
<li>mit</li>
Textauszeichnung <li>Ziffern.</li>
</ol>
Abkürzung </article>
<abbr>...</abbr> <footer>
<p>&copy; Paul</p>
Stilistische Hervorhebung (fett): </footer>
</section>
<b>...</b>

Stilistische Hervorhebung (kursiv):

<i>...</i>

Quellcode
<code>...</code>

Wörtliche Rede
<q>...</q>

Allgemeines Textelement (für CSS3)

<span>...</span>

Tiefgestellt
_...

Hochgestellt
^...

Datums- oder Zeitangabe

<time>...</time>

14
1.5 Tabellen HTML5

Eine Tabelle wird durch das <table>- Bei Tabellen wurde die mit HTML5 ge-
Tag begonnen. Danach folgt eine erste forderte strikte Trennung von Inhalt und
Zeile, die mit <tr> (von table row) Formatierung konsequent fortgesetzt:
beschrieben wird. Für jede Spalte wird Alle früheren Eigenschaften wie cell-
<td> (von table data) verwendet. padding oder cellspacing gibt es
Für Spalten- oder Zeilenüberschriften nicht mehr. Die Gestaltung von Tabellen
können Sie alternativ das <th>-Element erfolgt ausschließlich mit CSS (siehe
einsetzen. Um mehrere Spalten oder Seite 63).
Zeilen miteinander zu verbinden,
verwenden Sie die colpan- bzw. Beispiel
rowspan-Eigenschaft in der jeweiligen
<table>
Datenzelle. <tr>
<th colspan=“4“>Firma Meyer</th>
</tr>
Tabellen <tr>
Tabellenstruktur <td>Jahr</td>
<td>2014</td>
<table> <td>2015</td>
<tr> <td>2016</td>
<th>A</th>*)
A B
</tr>
<th>B</th>*) C D <tr>
</tr> <td>Umsatz</td>
<tr> <td>3000</td>
<td>C</td> <td>4000</td>
<td>D</td> <td>4500</td>
</tr> </tr>
<!-- weitere Zeilen --> <tr>
</table> <td>Gewinn</td>
<td>100</td>
*) Ohne Kopfspalte mit <td> möglich <td>150</td>
<td>200</td>
Spalten oder Zeilen verbinden </tr>
</table>
Verbindung zweier Spalten:
<table>
<tr> Tabelle
<td colspan=“2“>E</td> Das Beispiel zeigt eine
</tr>
Tabelle mit vier Zeilen
<tr> E
und vier Spalten. Die
<td>F</td>
<td>G</td> F G Spalten der Kopfzeile
</tr> sind verbunden.
</table> Die Linien werden
bei HTML5 standard-
Verbindung zweier Zeilen: mäßig nicht angezeigt
<table> und wurden hier zur
<tr> Veranschaulichung
<td rowspan=“2“>H</td> mit CSS3 ergänzt.
<td>I</td>
</tr> I
<tr> H
J
<td>J</td>
</tr>
</table>

15
 1.6 Hyperlinks

1.6.1 Definition und Merkmale Seiten eines Internetauftritts ist eine

anspruchsvolle konzeptionelle Aufgabe.
Wie bereits der Name sagt, ist Hyper- Erfolg oder Misserfolg der Internetprä-
text der zentrale Inhalt der Hypertext senz hängen maßgeblich davon ab.
Markup Language (HTML). Es handelt Denn wenn der User nicht schnell zum
sich dabei um die Möglichkeit des gesuchten Ziel kommt oder sich sogar
Verlassens der linearen Struktur eines auf der Website verirrt, dann wird er
Textes mit Hilfe von Hyperlinks, kurz diese für immer verlassen.
Links. Diese erlauben es dem Nutzer, Die Gestaltung von Textlinks und
per Mausklick oder Tippen mit dem von Schaltflächen erfolgt mit Hilfe von
Finger an eine andere Stelle desselben CSS3. An dieser Stelle kommen nur
Dokuments oder in ein völlig anderes die HTML5-spezifischen Merkmale von
Dokument zu gelangen. Links zur Sprache:
Erfolgt diese Navigation durch das ƒƒ Textlinks werden in HTML5 standard-
Anklicken oder -tippen eines Wortes, mäßig unterstrichen und dunkelblau
spricht man von Hypertext. Im Falle, dargestellt. Wenn Ihnen diese Aus-
dass Buttons oder andere grafische zeichnung nicht gefällt, können Sie
Elemente verwendet werden, ist der dies mit CSS3 ändern.
Begriff Hypermedia treffender. ƒƒ Ein weiteres Erkennungsmerkmal
Webdesign heißt immer Design eines Links ist, dass sich der Mauszei-
eines interaktiven Produktes. Die ger in eine zeigende Hand A ändert,
sachlogisch sinnvolle und intuitiv wenn der Link mit der Maus berührt
erlernbare Benutzerführung durch die wird. Auch dies ist eine Standardein-
Benutzerführung
durch Hyperlinks
HTML5 bietet drei
Möglichkeiten, um
Links als solche kennt-
lich zu machen:
A Der Mauszei-
ger ändert sich
(standardmäßig)
in eine zeigende
Hand. Hierdurch
wird klar, dass
das Bild einen
Link enthält.
B Die Farbe des
Links ändert sich A
bei Berührung mit
der Maus. C
C Ein sogenannter
Tooltipp wird
eingeblendet,
der den Link
beschreibt.

16
 HTML5

stellung, die Sie mittels CSS3 ändern Links auf externe Webseiten
können. Um eine externe – also sich auf einem
ƒƒ Jeder Link besitzt vier Zustände: anderen Webserver befindende – HTML-
- Link wurde noch nicht angeklickt Datei zu verlinken, muss die Internet­
- Link wird mit Maus berührt adresse (URL) als absolute Referenz an-
- Link wird gerade angeklickt gegeben werden. Beachten Sie hierbei,
- Link wurde bereits angeklickt dass die Adresse komplett in der Form
Jeder Zustand kann mittels CSS3 Protokoll:// Servername/Domain-Name
unterschiedlich gestaltet werden, angegeben werden muss, also z. B.
so dass hierdurch die Benutzerfüh- [Link] (vgl. Seite 10).
rung verbessert wird. Ein verlinkter Mit Hilfe des target-Attributs legen
Begriff muss visuell als Link kenntlich Sie fest, ob die Seite im selben (_self)
werden B. Weiterhin ist es sinnvoll, oder in einem neuen (_blank) Brow­
die Darstellung zu ändern, wenn der serfenster bzw. Browsertab geöffnet
Link mit der Maus berührt wird. Diese werden soll.
Rückmeldung an den Nutzer ist wich-
tig, damit er weiß, dass es sich um Hyperlinks auf externe Webseiten
ein interaktives Element handelt. Hyperlink zu externer Adresse (URL)
ƒƒ Weitere Informationen über den Link
<a href=“[Link]
bzw. das verlinkte Ziel können als Springer-Verlag</a>
sogenannter Tooltipp C eingeblendet
werden. Dabei handelt es sich um Hyperlink in neuem Browserfenster oder -tab
ein kleines Popup-Fenster, das einen <a href=“[Link]
kurzen Text enthält. Für Nutzer, die die target=“_blank“>Springer-Verlag</a>

Bedeutung eines rein grafischen Links Hyperlink im selben Browserfenster oder -tab
nicht verstehen, ist dies eine Hilfe.
<a href=“[Link]
target=“_self“>Springer-Verlag</a>
1.6.2 Arten von Hyperlinks
Hinweis:
Ohne Angabe des target-Attributs wird die Websei-
Zur Definition eines Hyperlinks wird das te ebenfalls im selben Fenster bzw. Tab geöffnet.
<a>-Element benötigt. Das „a“ kürzt
das englische Wort „anchor“ ab, was so Hyperlink mit Tooltipp
viel wie „Anker“ oder „verankern“ be- <a href=“[Link]
deutet. Der Begriff ist im übertragenen title=“Link zu Springer“>Springer</a>

Sinn zu verstehen: Durch einen Link Hyperlink mit Grafik

wird ein anderer Text mit der Textstelle
<a href=“[Link]
verknüpft oder, anders ausgedrückt, mit <img src=“[Link]“></a>
dieser verankert.
Für die Angabe der zu verlinkenden
Zieldatei (href = hypertext refe- E-Mail-Links
rence) werden folgende Möglichkeiten Neben der Verlinkung auf Dateien kön-
unterschieden: nen Sie auch auf eine ­E-Mail- Adresse
ƒƒ Links auf externe Webseiten ([Link] verlinken. Vorausgesetzt,
ƒƒ E-Mail-Links dass eine E-Mail-Software installiert
ƒƒ Links auf Dateien ist, wird diese nach Anklicken des Links
ƒƒ Links innerhalb einer Datei auto­matisch geöffnet.

17
 Die angegebene E-Mail-Adresse Hyperlinks auf eine E-Mail-Adresse
wird in die Absenderzeile des E-Mail- E-Mail-Link ruft E-Mail-Programm auf
Programms eingetragen. Sie können
<a href=“[Link]
weitere Einträge vordefinieren, z. B. den paul@[Link]</a>
Betreff oder den Text der E-Mail:
E-Mail mit Kopieempfänger
A cc (Kopieempfänger, sichtbar)
B bcc (Kopieempfänger, unsichtbar) <a href=“[Link]
mich@[Link]“>paul@[Link]</a>
C subject (Betreff)
D body (Text) E-Mail mit Betreff
Beachten Sie, dass der erste Zusatz mit <a href=“[Link]
einem „?“ angehängt wird, alle weite- Anmeldung“>paul@[Link]</a>

ren mit einem „&“, das codiert (&amp;) E-Mail mit vordefiniertem Text
geschrieben werden sollte. <a href=“[Link]
Das Verfahren hat zwei wesentliche Hiermit bestätigen wir Ihre
E-Mail-Links Anmeldung.“>paul@[Link]</a>
Nachteile: Der Link funktioniert nicht,
E-Mail-Links erfordern
einen E-Mail-Client wenn keine E-Mail-Software installiert E-Mail mit mehreren Angaben:
wie Outlook oder ist. Die E-Mail-Adresse sollte deshalb <a href=“[Link]
Thunderbird. Durch auch als Klartext sichtbar sein. mich@[Link]&amp;subject=Anmeldung
Anklicken des Links Zweitens laufen Sie Gefahr, dass &amp;body= Hiermit bestätigen wir Ihre
öffnet sich dieser. Anmeldung.“>paul@[Link]</a>
Zusätzlich zur Adresse (unverschlüsselte) E-Mail-Adressen im
können weitere Quellcode schnell in Spamlisten gera- Hinweis:
Informationen wie ein ten. Als Maßnahme ist die Verschlüsse- Die erste Angabe wird mit ? angehängt, weitere mit
Betreff automatisch &amp; (die codierte Darstellung des &-Zeichens).
lung der Adresse möglich.
eingetragen werden.

Links auf Dateien

Ein Internetauftritt besteht im Normal­
fall aus mehreren HTML-Dateien. Um
diese miteinander zu verlinken, muss
die relative Referenz zur gewünschten
Zieldatei angegeben werden, weil ab-
solute Angaben wie C:/Dokumente und
Einstellungen/Paul/Eigene Dateien/Web/
A [Link] unbrauchbar sind. Die HTML-
B Datei wird in diesem Fall nur lokal auf
dem eigenen Computer gefunden. Nach
C
einem Upload auf einen Webserver
D im Internet funktioniert der Link nicht
mehr. Die Regeln für relative Refe-
renzen finden Sie auf Seite 10. Abgese-
hen von der Pfadangabe unterscheiden
sich die Eigenschaften von internen zu
externen Hyperlinks nicht.
Alternativ zu Links auf HTML-Dateien
können Sie auch andere Datei­typen ver-
linken, z. B. PDF-, Word- oder Power-

18
 HTML5

Hyperlinks auf interne Dateien ne Links anstatt einer Pfadangabe ein

Hyperlink zur Datei „[Link]“ durch das Gatterzeichen (#) eingeleite-
ter Name vergeben werden muss. Das
<a href=“[Link]“>Homepage</a>
Sprungziel wird über die Eigenschaft id
Hyperlink in Unterverzeichnis verlinkt und erhält denselben Namen,
<a href=“sites/[Link]“>Homepage jedoch ohne Gatterzeichen. Beachten
</a> Sie, dass sich das Sprungziel auch ober-
Hyperlink in übergeordnetes Verzeichnis halb des Links befinden darf, z. B., um
<a href=“../[Link]“>Homepage</a> vom Seitenende per Mausklick an den
Seitenanfang zu gelangen. Sinnvoll ist
Hyperlink zu einer PDF-Datei
die Ergänzung kleiner Pfeilgrafiken.
<a href=“[Link]“>Download</a>

Hyperlink mit Grafik Hyperlinks innerhalb von Dateien

<a href=“[Link]“> <a id=“oben“></a

<img src=“[Link]“></a> <a href=“#kap1“>zu Kapitel 1</a><br>
<a href=“#kap2“>zu Kapitel 2</a><br>
…
<a id=“kap1“><h4>Kapitel 1</h4></a>
Point-Dateien. Die meisten Browser …
<a id=“kap2“><h4>Kapitel 2</h4></a>
verfügen über die notwendigen Erwei- …
terungen, um PDF- oder andere Dateien <a href=“#oben“> zum Seitenanfang</a>
direkt im Browser anzuzeigen. Alterna-
tiv kann der Nutzer die Datei downloa- Erklärung:
den und lokal speichern. Das #-Zeichen verweist auf ein Sprungziel innerhalb
der Datei. Das Ziel wird mit id= gekennzeichnet und
Links innerhalb einer Datei muss denselben Namen wie der Link jedoch ohne #
erhalten. (Das name-Attribut sollte in HTML5 nicht
Viele Webseiten werden heute als mehr verwendet werden.) Sprungziele nach oben sind
sogenannte Single-Page-Anwendungen ebenso möglich, z. B., um wieder an den Seitenanfang
realisiert, bei denen – wie der Name zu gelangen.
sagt – sämtliche Informationen auf
einer einzigen Seite zu finden sind. Dies
Interne Hyperlinks
hat zur Folge, dass der Nutzer entweder
Interne Links erleich-
mit der Maus scrollen oder, im Falle tern dem User die
mobiler Endgeräte, mit dem Finger (vertikale) Navigation
wischen muss. Dies wird, insbesondere innerhalb einer Seite.
bei größeren Seiten, schnell als lästig Durch Anklicken oder
Antippen der Links
empfunden. kann er nach unten
Eine Verlinkung innerhalb dieser oder oben springen.
Seite kann zu einer Verbesserung der
Benutzerfreundlichkeit beitragen. Mit
Hilfe von Links kann der Benutzer
beispielsweise zum Anfang eines neuen
Abschnitts springen oder umgekehrt
an den Seitenanfang zurückgeführt
werden.
Der wesentliche Unterschied zu
externen Links ist, dass für dateiinter-

19
 1.7 Navigation

1.7.1 Navigationsstruktur z. B., indem die Textlinks durch Grafiken

ersetzt werden.
Die Navigationsstruktur entspricht im Da die Navigation auf jeder Un-
Grunde dem Inhaltsverzeichnis eines terseite zu sehen sein muss, liegt die
Buches. Der Vorteil für den User besteht Idee nahe, diese in eine eigene Datei
im Unterschied zum Buch darin, dass auszulagern. HTML5 sieht hierfür das
er mit einem Mausklick oder Fingertipp <iframe>-Element vor. Ein <iframe>
zum gewünschte Ziel gelangt. können Sie sich als Rahmen A vorstel-
Wie Sie wissen, dient HTML5 len , in dem eine andere HTML5-Datei
ausschließlich zur semantischen Be- geöffnet werden kann.
schreibung der Seiteninhalte. Um nun
eine Navigationsstruktur als Einheit Externe Navigationsstruktur
beschreiben zu können, wurde mit
<nav>
HTML5 das <nav>-Element eingeführt. <iframe src=“[Link]“></iframe>
Für die einzelnen Links bietet sich die </nav>
Verwendung einer Liste an. Durch diese
Die Datei „[Link]” enthält die Navigationsstruktur
Schreibweise stellen Sie sicher, dass die als Liste:
Navigation eine logische Einheit bildet.
<ul>
<li><a href=“[Link]“
Interne Navigationsstruktur target=“_parent“>
Home</a></li>
<nav> <li><a href=“[Link]“
<ul> target=“_parent“>
<li><a href=“[Link]“> News</a></li>
Home</a></li> ...
<li><a href=“[Link]“> </ul>
News</a></li>
<li><a href=“[Link]“>
Produkte</a></li>
<li><a href=“[Link]“>
Kontakt</a></li>
<li><a href=“[Link]“>
Impressum</a></li>
</ul>
</nav>
A

Beim Vergleich mit der internen Navi-

gationsstruktur fällt Ihnen das Attribut
target=“_parent“ auf. Es bewirkt,
dass die Seite nicht im <iframe> A,
Die Navigation muss keinesfalls als sondern in der übergeordneten Seite
HTML-Liste dargestellt werden. Sie kön- B geöffnet wird, die als Elternelement
nen Sie mittels CSS3 beliebig gestalten, (engl.: parents) bezeichnet wird.

20
 HTML5

1.7.2 Aufklappbare Navigation Aufklappbare Navi-

gation
Größere Webauftritte benötigen Diese tolle Möglich-
keit stellen leider nicht
zwangsläufig eine umfangreiche Navi­
alle Browser zur Ver-
gationsstruktur. Eine Regel aus der A fügung (hier: Google
Wahrnehmungspsychologie besagt, Chrome).
dass wir Menschen nicht mehr als sie-
ben Elemente auf einen Blick erfassen
können.
Aus diesem Grund ist es erforder-
lich, größere Navigationsstrukturen B
in eine Haupt- und Subnavigation zu
gliedern, die bei Bedarf aufklappt. Diese
Aufklappmenüs waren vor HTML5 nur
mit Hilfe von CSS, JavaScript oder
anderen Zusatztechniken möglich. Mit
HTML5 wurden hierfür die Elemente
<details> und <summary> eingeführt.
Leider funktionieren sie momentan Der Browser zeigt zunächst nur die
noch nicht in allen gängigen Browsern. Begriffe, die im <summary>-Element be-
schrieben sind. Ein kleiner Pfeil A weist
Aufklappbare Navigationsstruktur darauf hin, dass sich eine Subnaviga­
tion hinter dem Begriff verbirgt.
<nav>
<details> Die Subnavigation klappt beim An­
<summary><a href=“#“>Fische</a> kl­icken des Pfeils auf, der Pfeil dreht
</summary> sich nach unten B. Wie der Screen­sh­ot
<ul>
<li><a href=“#“>Hai</a></li> zeigt, ist es auch möglich, auf mehrere
<li><a href=“#“>Forelle</a></li> Begriffe zu klicken.
...
Diese Art der Benutzerführung ist
</ul>
</details> sehr einfach und jedem Computernut-
<details> zer bekannt, weil sie von den Betriebs-
<summary><a href=“#“>Vögel
</a></summary>
systemen zur Darstellung des Dateisys­
<ul> tems verwendet wird.
<li><a href=“#“>Amsel</a></li> Abschließend der Hinweis, dass Sie
<li><a href=“#“>Drossel</a></li>
...
diese aufklappbare Struktur nicht nur
</ul> zur Navigationssteuerung verwenden
</details> können. Sie ist auch zur Gliederung
<details>
<summary><a href=“#“>Säugetiere längerer Texte einsetzbar.
</a></summary>
<ul>
<li><a href=“#“>Affe</a></li>
<li><a href=“#“>Katze</a></li>
...
</ul>
</details>
</nav>

21
 1.8 Bilder und Grafiken

1.8.1 Dateiformate Auf diese Weise kann ein Kompro-

miss zwischen möglichst geringer
Wir sind zu einer visuellen Gesellschaft Datenmenge (und damit Ladezeit)
geworden, in der Informationen über und möglichst hoher Qualität gefun-
Bilder und Bewegtbilder (Videos) kom- den werden.
munziert werden. Bilder und Grafiken ƒƒ Da sich ICC-Profile einbinden lassen,
spielen auf Webseiten deshalb eine können Sie JPEG-Dateien (in maxi-
zentrale Rolle. maler Qualität) auch für den Druck
Nicht alle Bilddateiformate können nutzen.
durch Browser angezeigt werden und Aufgrund des vollen Farbumfangs eig-
sind damit „webtauglich“. Wir stellen net sich JPEG immer dann, wenn Ihre
­Ihnen die wichtigsten Formate und Vorlagen viele Farben enthalten: Fotos,
deren Merkmale kurz vor. oder andere Bilder mit vielen Farben,
z. B. Farbverläufe. Bei scharfen Kon-
JP(E)G turen wie bei Text oder in Grafiken
JPEG (oder: JPG) – Abkürzung für Joint hat das Kompressionsverfahren seine
Photographic Experts Group – ist ein Schwächen und führt zu einem „Ver-
Bilddateiformate für auch heute noch durch Smartphones schmieren“ der Konturen.
Webanwendungen und Digitalkameras weitverbreitetes
Mit Photoshop (Datei Dateiformat. Seine wesentlichen Merk- GIF
> Exportieren > Für
Web speichern) oder
male sind: GIF (von Graphics Interchange Format)
Illustrator (Datei > ƒƒ JPEG-Bilder können bis bis zu 16,7 ist der „Veteran“ der Dateiformate auf
Für Web speichern) Millionen Farben enthalten und Webseiten. Obwohl das neuere PNG-
können Sie das ge- besitzen damit den kompletten RGB- Format GIF in etlichen Punkten über-
wünschte Bildformat
wählen A und weitere
Farbumfang. legen ist, finden sich immer noch sehr
Einstellungen zur Op- ƒƒ Die gewünschte Bildqualität kann viele GIF-Bilder im Internet – die Macht
timierung der Bilder beim Abspeichern gewählt werden. der Gewohnheit. Die Merkmale von
vornehmen. GIF-Dateien sind:
ƒƒ GIF kann maximal 256 Farben darstel-
len. Diese werden in einer Farbtabelle
gespeichert.
ƒƒ GIF komprimiert verlustfrei nach dem
A LZW-Algorithmus.
ƒƒ Einzelne Farben können aus der Farb-
tabelle gelöscht und damit transpa-
rent gemacht werden.
ƒƒ Mit GIF können Sie Animationen nach
dem Daumenkino-Effekt erstellen
(Animated GIF).
Wegen der Beschränkung auf 256 Far-
ben eignet sich das GIF-Format nicht für
Fotos oder andere Vorlagen mit vielen
Farben. Für GIF geeignet sind hingegen:
Infografiken, Diagramme, Buttons,
Logos, Strichzeichnungen und Text als
Grafik.

22
 HTML5

Format JPEG GIF PNG-8 PNG-24 SVG Dateiformate für Bil-

der und Grafiken
Vektorformat nein nein nein nein ja
In der Tabelle finden
Farben (max.) 16,7 Mio. 256 256 16,7 Mio. 16,7 Mio.
Sie eine Zusammen-
Qualität wählbar hoch hoch hoch hoch stellung der wich-
Animation nein ja nein nein ja tigsten Merkmale der
Skalierbarkeit nein nein nein nein ja Dateiformate.
Transparenz nein ja nein ja ja
ICC-Profil ja nein nein nein nein
Anwendung Fotos Grafiken Grafiken Fotos, freige- (skalierbare)
stellte Bilder Grafiken

PNG Grafiken abzuspeichern. PNG-24 liefert

PNG (sprich: Ping) steht für Portable qualitativ hochwertige Ergebnisse und
Network Graphics. PNG wurde als ermöglicht echte Freistellungen.
lizenzfreie Alternative zu JPG und GIF
entwickelt und wird mittlerweile durch SVG
alle Browser unterstützt. Das Format Bei SVG (Scalable Vector Graphic) han-
liegt in zwei Versionen vor: PNG-8 und delt es sich im Unterschied zu den drei
PNG-24. vorherigen Formaten um ein Format für
ƒƒ PNG-8 beschränkt die Farbanzahl auf Vektorgrafiken.
8
8 Bit, was 256 (2 ) Farben entspricht. Wie Sie sicherlich wissen, speichern
Seine Merkmale und Anwendungs- Vektorgrafiken den Bildinhalt nicht Pixel
möglichkeiten entsprechen somit für Pixel ab, sondern beschreiben die
denen von GIF-Dateien. Animationen Elemente der Grafik mathematisch. Ein
sind mit PNG-8 allerdings nicht mög- Kreis ist beispielsweise durch seinen
lich. Mittelpunkt und Radius definiert. Hie-
ƒƒ PNG-24 speichert Bilder wie JPEG in raus ergibt sich der wesentliche Vorteil
vollem Farbumfang mit bis zu 16,7 im Vergleich zu Pixelbildern, dass sie
Millionen Farben. Im Unterschied zu unabhängig von ihrer Größe immer
JPEG komprimiert PNG-24 verlustfrei, dieselbe hohe Qualität aufweisen, da
zeigt also nicht die JPEG-typischen sie verlustfrei skalierbar sind. Dies ist
Artefakte. Diesen Vorteil erkaufen Sie heute wichtiger als früher, weil Websei-
sich mit einer deutlich höheren Daten- ten auf kleinen Handydisplays oder auf
menge. Die Qualität und damit Daten- riesigen Monitoren betrachtet werden.
menge kann im Unterschied zu JPEG Darüber hinaus besitzen SVG-Dateien
nicht beeinflusst werden. Der neben folgende Merkmale:
der hohen Qualität entscheidene Vor- ƒƒ Die erwähnte SVG-Beschreibungs-
teil von PNG-24 besteht darin, dass sprache ist nach ähnlichen Regeln
dieses Format einen 8-Bit-Alphakanal aufgebaut wie HTML5. Man sagt,
für Transparenz besitzt. Im Unter- beide sind XML-konform. Daraus
schied zu GIF, das nur einzelne Farben folgt, dass SVG-Grafiken auch direkt
transparent machen kann, sind mit in HTML5 erzeugt werden können
PNG-24 echte „Freisteller“ möglich. (siehe Seite 25).
Zusammenfassend lässt sich sagen, ƒƒ Durch das vektorbasierte Speichern
dass PNG-8 als (bessere) Alternative ergeben sich vergleichsweise geringe
zu GIF eingesetzt werden kann, um Datenmengen.

23
 ƒƒ In SVG können Sie Schriften als Pfade unten verdeutlicht die möglichen Posi­
abspeichern, so dass der Zeichensatz tionen, die Bilder relativ zur HTML5-
der Schrift nicht mehr erforderlich ist. Datei haben können.
ƒƒ SVG-Vektorgrafiken können animiert Durch die Angabe der Eigenschaf-
werden. ten width und height im <img>-Tag
ƒƒ SVG kann Pixelgrafiken einbinden. können Sie festlegen, wie groß das
Aufgrund der Vorteile sollten Sie SVG- Bild angezeigt werden soll. Besser ist
Dateien für Grafiken aller Art verwen- es allerdings, die benötigte Endgröße
den: Infografiken, Diagramme, animier­ bereits im Bildbearbeitungsprogramm
te Grafiken, Schrift (als Grafik). festzulegen, da dies zu besserer Quali-
tät und geringerer Datenmenge führt.
1.8.2 Bilder referenzieren Die Angabe eines alternativen Textes
(alt=“...“) hilft sehbehinderten oder
Bilder lassen sich in HTML5-­Doku­men­ blinden Menschen, den Inhalt einer
te nicht importieren, sondern werden Webseite auch ohne Bilder verstehen
mit diesen stets mit Hilfe des <img>- zu können, wenn sie ihn durch einen
Tags verknüpft (referenziert). Dabei ist Screenreader vorgelesen bekommen.
entscheidend, dass Sie den Pfad zur Beachten Sie die Groß- und Klein-
Bildquelle korrekt angeben. Die Grafik schreibung: Eine Datei „[Link]“ darf

Bilder referenzieren
Im HTML-Quellcode
muss angegeben wer-
den, wo sich ein Bild
relativ zur HTML-Datei
befindet. [Link] [Link]
Beim Upload auf
einen Webserver <!doctype html>
bleiben die relativen <html>
Pfade erhalten, so <head>
dass die Bilder auch <title>Rom</title>
auf diesem Computer </head>
gefunden werden. <body>
<h3>Rom</h3> bilder
<img src="[Link]"
alt="Foto zeigt Petersdom"> [Link]
<img src="bilder/[Link]"
alt="Foto zeigt Kolosseum">
<img src="../[Link]"
alt="Foto zeigt Engelsburg">
</body>
</html>

[Link]

24
 HTML5

Bilder/Grafiken referenzieren SVG-Vektorgrafiken haben Sie bereits

Bild „[Link]“ im selben Verzeichnis im letzten Abschnitt kennengelernt. Sie
können sie beispielsweise mit Illustra-
<img src=“[Link]“>
tor erzeugen. Alternativ geht dies direkt
(img = image = Bild, src = source = Quelle)
im Quellcode. Dabei gelten folgende
Bild im Unterverzeichnis Regeln:
<img src=“bilder/[Link]“> ƒƒ Der Nullpunkt des Browserfensters
Bild im übergeordneten Verzeichnis befindet sich immer links oben.
ƒƒ Die x-Koordinate nimmt damit von
<img src=“../[Link]“>

Angabe eines Alternativtextes SVG-Grafiken generieren

<img src=“[Link]“ alt=“Link zu den Erzeugen einer SVG-Grafik (hier: 200 px · 200 px)
neuesten Meldungen“> <svg xmlns=“[Link]
Bild mit Breiten- und Höhenangabe in Pixel width=“200“ height=“200“>
...
<img src=“[Link]“ width=“200“ </svg>
height=“100“>
Rechteck (rot) mit Eckpunkt (x|y) links oben
Semantische Kennzeichnung
<rect x=“0“ y=“0“ fill=“#FF0000“
<figure> width=“40“ height=“60“/>
<img src=“[Link]“>
</figure> Linie von (x1|y1) zu (x2|y2)
<line x1=“20“ y1=“150“ x2=“180“
nicht als „[Link]“ referenziert wer- y2=“150“ stroke=“#000000“ stroke-
width=“2“/>
den, weil dies für Unix-basierte Webser-
ver unterschiedliche Dateien sind. Kreis (rot) um Mittelpunkt (cx|cy) und Radius r
Ein mit HTML5 neu eingeführtes <circle r=“10“ cx=“100“ cy=“100“
Element ist <figure>. Es hat eine rein fill=“#FF0000“/>

semantische Funktion, dient also zur Text auf Grundlinie ab Punkt (x|y)
Kennzeichnung der Abbildung. <text x=“50“ y=“100“ font-family=
„Arial“ font-size=“18“>Text</text>

1.8.3 SVG-Vektorgrafik Beispiel (Diagramm siehe nächste Seite)

<svg xmlns=“[Link]
Wie bereits erwähnt werden Gra- width=“200“ height=“200“>
fiken nicht Pixel für Pixel gespeichert, <rect x=“0“ y=“0“ width=“200“
sondern mit Hilfe einer Beschreibungs- height=“200“ fill=“#EEEEEE“
stroke=“#000000“ stroke-width=“1“/>
sprache definiert. Erfüllt diese Sprache <rect x=“45“ y=“85“ fill=“#FF0000“
– wie HTML5 auch – die Regeln der width=“40“ height=“65“/>
<rect x=“115“ y=“60“ fill=“#00FF00“
Metasprache XML (Extensible Markup
width=“40“ height=“90“/>
Language), dann können Grafiken auch <line x1=“18“ y1=“150“ x2=“182“
direkt im HTML5-Quellcode erzeugt y2=“150“ stroke=“#000000“ stroke-
width=“2“/>
werden. Dies ist bei Grafiken wichtig, <text x=“15“ y=“35“ font-family=
die laufend verändert werden müssen, “Arial“ font-size=“30“>Abstimmung
z. B. ein Aktienkurs oder eine Online- </text>
<text x=“50“ y=“170“ font-family=
Abstimmung. Hier kann es gewünscht “Arial“ font-size=“18“>nein</text>
sein, dass sich eine Grafik minütlich <text x=“130“ y=“170“ font-family=
verändert. “Arial“ font-size=“18“>ja</text>
</svg>

25
 für die Programmiersprache JavaScript
heranziehen. Diese stellt das – kompli-
ziert klingende – Objekt CanvasRen-
deringContext2D zur Verfügung, mit
dessen Hilfe Grafiken erstellt werden
können. Hierzu ein einfaches Beispiel:
Erläuterungen

Canvas-Grafiken generieren (Beispiel)

1 <canvas id=“grafik“ width=“200“
2 height=“200“>
3 <p>Browser kann kein Canvas!</p>
4 </canvas>
5
6 <script type=“text/JavaScript“>
links nach rechts zu. 7 var g = [Link]
8 (“grafik“);
ƒƒ Die y-Koordinate nimmt damit (im
9 if ([Link]) {
Unterschied zur Mathematik) von 10 g = [Link](“2d“);
oben nach unten zu. 11 [Link]=“#EEEEEE“;
12 [Link](0,0,200,200);
Zugegeben, das manuelle Erstellen von 13 }
SVG-Grafiken geht in einem Grafikpro- 14 </script>
gramm wie Illustrator deutlich besser
und schneller. Der Vorteil der Methode
ist wie erwähnt darin zu sehen, dass Sie ƒƒ Zeile 3:
mit SVG dynamische, also veränder- Der Text wird ausgegeben, wenn der
bare Grafiken generieren können. Die Browser Canvas nicht unterstützt.
Grafik liegt in diesem Fall nicht als Datei ƒƒ Zeilen 7/8:
vor, sondern wird erzeugt, sobald die Der Befehl verbindet das JavaScript
entsprechende Seite aufgerufen wird. mit dem Canvas-Element, indem
er das Element über dessen Id (für
1.8.4 Canvas-Vektorgrafik identifier, dt.: Bezeichnung, hier:
grafik) anspricht und in der Variable
Canvas ist ein mit HTML5 neu einge- speichert. Der Variablenname (hier: g)
führtes Element zur Erstellung von Vek- ist frei wählbar.
torgrafiken. Mittlerweile wird Canvas ƒƒ Zeile 9:
von allen Browsern unterstützt, so dass Die if-Anweisung überprüft, ob der
diese Grafiken bedenkenlos eingesetzt Browser das JavaScript-Element
werden können. CanvasRenderingContext2D kennt.
Übersetzt bedeutet Canvas „Lein- Nur in diesem Fall werden die zwi-
wand“ und dieses Wort beschreibt das schen den geschweiften Klammern
HTML-Element treffend: Canvas defi- stehenden Anweisungen ausgeführt,
niert – wie bei SVG – über width und andernfalls bleibt das Skript ohne
height einen Bereich, der zur Erstel- Auswirkung.
lung von Grafiken genutzt werden kann. ƒƒ Zeile 10:
Im Unterschied zu SVG können Sie Damit die Variable g auf die Zeichen-
jedoch nicht direkt auf dieser „Lein- befehle zugreifen kann, muss ihr im
wand“ arbeiten, sondern müssen hier- ersten Schritt der 2D-Kontext (get-

26
 HTML5

Context) zugewiesen werden. Beispiel (Diagramm)

ƒƒ Zeilen 11/12:
<canvas id=“grafik“ width=“200“
Nun wird endlich ein hellgraues height=“200“>
Rechteck (Farbe: #EEEEEE) in der Grö- <p>Browser kann kein Canvas</p>
ße 200 x 200 Pixel gezeichnet. Seine </canvas>

linke obere Ecke liegt (wie bei SVG) <script>

am linken oberen Eck des Browser- var g = [Link]
(“grafik“);
fensters.
if ([Link]) {
Damit Sie einen Vergleich zu SVG g = [Link](„2d“);
haben, generiert das Beispiel rechts //Rechtecke
[Link]=“#EEEEEE“;
das gleiche Diagramm wie auf der [Link](0,0,200,200);
vorherigen Seite. Sie sehen, dass der [Link]=“#FF0000“;
Aufwand doch relativ hoch ist, um eine [Link](45,85,40,65);
[Link]=“#00FF00“;
kleine Grafik zu erzeugen. Der große [Link](115,60,40,90);
Vorteil besteht jedoch darin, dass Gra- [Link]=“#000000“;
fiken bei Bedarf erzeugt werden können //Rahmen um Rechteck
[Link]=“#000000“;
und nicht als Datei vorliegen müssen. [Link]=1;
Auf diese Weise kann z. B. eine funktio- [Link](0,0,200,200);
nierende Zeiger-Uhr realisiert werden. //Linie
[Link]();
Canvas bietet wesentlich mehr Mög­ [Link](18,150);
lichkeiten, als wir Ihnen in diesem Buch [Link](182,150);
vorstellen können. Neben den im Bei- [Link] = 3;
[Link]();
spiel gezeigten Rechtecken, Linien und [Link]();
Texten ermöglicht Canvas z. B.: //Text
ƒƒ Abgerundete Rechtecke [Link]=“30px Arial“;
[Link](“Abstimmung“,15,35);
ƒƒ Kreise [Link]=“18px Arial“;
ƒƒ Ellipsen [Link](“nein“,48,170);
[Link](“ja“,130,170);
ƒƒ Kreisbögen
}
ƒƒ Bézierkurven </script>
ƒƒ Transparenzen
ƒƒ Farbverläufe
Objekte können skaliert, gedreht und
verschoben werden, so dass Canvas
auch einfache Animationen ermöglicht.
Weitere Informationen finden Sie z. B.
unter [Link]
ref_canvas.asp.
Ein Nachteil im Vergleich zu SVG be-
steht darin, dass Canvas die Skriptspra-
che JavaScript benötigt. Da JavaScript
im Browser deaktiviert werden kann,
und dies manche Nutzer aus Sicher-
heitsgründen auch tun, funktionieren in
diesem Fall Canvas-Grafiken nicht.

27
 1.9 Formulare

1.9.1 Interaktion mit Formularen Definition eines Formulars

Formular (ohne Auswertung)
Formulare sind das zentrale Element
<form>
interaktiver Webseiten. Sie ermögli- <!-- Formular­
elemente -->
chen dem Nutzer, mit dem Anbieter </form>
der Website in Kontakt zu treten – ein
Formular mit Auswertung, Datenübertragung mit get
Vorteil digitaler Medien im Vergleich
zu Printmedien. Formulare lassen sich <form name=“test“ action=“[Link]“
method=“get“>
beispielsweise nutzen, um <!-- Formular­
elemente -->
ƒƒ Suchbegriffe einzugeben, </form>
ƒƒ Benutzerdaten zu übertragen, z. B. Formular mit Auswertung, Datenübertragung mit post
Anschrift oder Bankverbindung,
<form name=“test“ action=“[Link]“
ƒƒ Waren in Webshops zu bestellen, method=“post“>
ƒƒ über Gästebücher, Blogs, Chats mitei- <!-- Formular­
elemente -->
nander zu kommunizieren. </form>

Für das umfassende Thema Formulare Angabe eines Alternativtextes

werden folgende Technologien benötigt: <form name=“test“ action=“[Link]
ƒƒ Das Formular selbst wird mit HTML5 [Link]“ method=“post“ enctype=“text/
erstellt. plain“>
<!-- Formularelemente -->
ƒƒ Die Prüfung, ob der Anwender die </form>
Daten vollständig und korrekt eingibt,
Formular mit Auto-Vervollständigung
kann mit HTML5 (siehe Seite 32) oder
mit JavaScript erfolgen. <form autocomplete=“on“>
<!-- Formularelemente -->
ƒƒ Die serverseitige Auswertung der </form>
Formulardaten erfolgt mit PHP oder
einer anderen serverseitigen Techno-
logie. erfolgen wird. Wie erwähnt, kann es
ƒƒ Eine wenig elegante, aber einfache sich hierbei um den Aufruf einer Skript-
Möglichkeit der Datenübertragung ist datei oder um eine E-Mail-Adresse
das Versenden per E-Mail. Dies setzt handeln. Bei der Methode (method) der
voraus, dass der Nutzer einen E-Mail- Datenübertragung müssen Sie zwi-
Client wie Outlook oder Thunderbird schen get und post unterscheiden:
auf seinem Rechner installiert hat. ƒƒ Bei get werden die Daten zur Über-
tragung an den Server mit Hilfe eines
1.9.2 Formulardefinition Fragezeichens an den Namen der
aufgerufenen Datei angehängt A. Bei
Für die Definition eines Formulars mehreren Formularangaben werden
stellt HTML5 das <form>-Element zur diese über das &-Sonderzeichen B
Methode get
Verfügung. In ihm befinden sich alle miteinander verbunden. Die maxima-
Die Formulardaten
gewünschten Formularelemente. le Datenmenge ist bei dieser Methode
werden nach einem
Fragezeichen an den Im Attribut action bestimmen Sie, auf etwa ein Kilobyte begrenzt.
Namen der aufgeru- wie die Verarbeitung der Formulardaten ƒƒ Für große Datenmengen wie z. B.
fenen Datei ange-
hängt A. Mehrere
Angaben werden
mittels „&“-Zeichen
verbunden B. A B

28
 HTML5

Bilder und für die Übertragung per Formular

E-Mail steht die Methode post zur Der Screenshot zeigt
Verfügung. Hierbei überträgt das ein typisches Formu-
lar. Die HTML5-Co-
HTTP-Protokoll die Daten im Datei-
dierung der einzelnen
kopf, ohne dass sie für den Benutzer Formularelemente
sichtbar sind. wird in den folgenden
E
Neu in HTML5 ist die Eigenschaft au- Abschnitten beschrie-
ben.
tocomplete. Wird diese auf on gesetzt, A
vervollständigt der Browser die Einga-
be, indem er die gemachten Angaben
mit bereits gespeicherten Formular-
eingaben vergleicht. Hierdurch geht
das Ausfüllen eines Formulars für den
Nutzer schneller.

1.9.3 Formularelemente
D
Die gewünschten Elemente werden im
Formularbereich <form> … </form> C
angegeben. Die wichtigsten Formular­
elemente sind: B
ƒƒ Einzeiliges Textfeld A
ƒƒ Mehrzeiliges Textfeld B
ƒƒ Auswahlliste (Menü) C F
ƒƒ Combobox D
ƒƒ Radiobutton E G
ƒƒ Checkbox F
ƒƒ Schaltflächen (Buttons) G
ƒƒ Verstecktes Feld
ƒƒ Feld für Datei-Upload Textfelder
Bis auf mehrzeilige Textfelder und Einzeiliges Textfeld
Auswahllisten beginnen alle Elemente <input type=“text“ name=“…“ size=“…“
mit <input>. Es handelt sich dabei maxlength=“…“ value=“…“>

um eines der wenigen Element ohne Mehrzeiliges Textfeld

schließendes Tag.
<textarea name=“…“ cols=“…“ rows=““>
</textarea>
Textfelder
Für die Eingabe von Text stehen Ih- Beispiel
nen einzeilige Textfelder <input <input type=“text“ name=“vorname“
type=“text“> oder mehrzeilige Text- size=“25“ maxlength=“40“>

felder <text­area> zur Verfügung. Die <textarea name=“bemerkung“ cols=“20“

Eigenschaften eines Textfeldes werden rows=“3“></textarea>
über folgende Attribute beschrieben:
ƒƒ Zur automatisierten Auswertung des
Formulars, z. B. mittels PHP-Skript, ist
die Vergabe eines eindeutigen und

29
 einmalig vorkommenden Namens jedoch in die Combobox klickt, klappt
(name) unerlässlich. eine Datenliste <datalist> auf, aus
ƒƒ Die Anzahl an Zeichen (size) be- der der Nutzer einen Eintrag wählen
stimmt die Breite des Feldes. kann:
ƒƒ Die maximale Anzahl an Zeichen
(maxlength) begrenzt die Eingabe-
möglichkeiten.
ƒƒ Manchmal soll bereits ein Text einge-
tragen werden (value), z. B., um ein
Datumsformat vorzugeben: [Link].
Combobox
JJJJ.
<input type=“text“ name=“…“ list=“…“
ƒƒ Bei mehrzeiligen Textfeldern muss die
size=“30“><br>
Anzahl an Zeilen (rows) und Spalten <datalist id=“…“>
(cols) angegeben werden. <option value=“…“>
<option value=“…“>
…
Auswahlliste (Menü) </datalist>
Bei Auswahllisten <select> handelt es
Hinweis: Damit Textfeld und Datenliste verknüpft
sich um ein Menü, das die Auswahl aus
werden, muss der unter list vergebene Name mit
einer Liste <option> ermöglicht. der id übereinstimmen.
Über das size-Attribut legen Sie
fest, wie viele Zeilen des Menüs an- Beispiel
gezeigt werden sollen. Entspricht die
<input type=“text“ name=“land“
Zahl der Anzahl an Einträgen, so ist das list=“staat“ size=“30“><br>
Menü komplett sichtbar. Andernfalls <datalist id=“staat“>
<option value=“Deutschland“>
klappt das Menü auf, wenn der Nutzer <option value=“Frankreich“>
auf den kleinen Pfeil am rechten Rand <option value=“Schweiz“>
klickt. </datalist>

Auswahlliste
Radiobutton
<select name=“…“ size=“…“>
<option> … </option> Radiobuttons <input type=“radio“>
<option> … </option> haben ihren Namen von alten Radios,
… die noch Drucktaster hatten. Sobald
</select>
ein Taster gedrückt wurde, sprang der
Beispiel zuvor betätigte Taster raus.
<select name=“zahlung“ size“1“>
<option>Kreditkarte</option> Radiobutton
<option>Nachnahme</option>
<option>Rechnung</option> <input type=“radio“ name=“…“
</select> value=“…“>

Beispiel
Combobox <input type=“radio“ name=“anrede“
Eine praktische Erweiterung der Formu- value=“Herr“ checked>Herr
lare mit HTML5 stellen Comboboxen
<input type=“radio“ name=“anrede“
dar: Optisch sehen diese wie gewöhn- value=“Frau“>Frau
liche Textfelder aus. Sobald der User

30
 HTML5

In Formularen machen Radiobuttons Schaltflächen

also nur dann Sinn, wenn sie zu Grup-
Senden-Button:
pen von mindes­tens zwei Buttons mit <input type=“submit“ value=“…“>
demselben Namen (name) zusammen-
gefasst werden. Mit value kann ein Senden-Button mit eigener Grafik:
<input type=“image“ src=“…“
gewünschter Wert an das auswertende value=“…“>
Skript übergeben werden. Über das
checked-Attribut kann bereits ein But- Reset-Button (löscht alle Eingaben):
<input type=“reset“ value=“…“>
ton vorgewählt werden.
Beispiel
Checkbox
Bei Checkboxen <input type= <input type=“submit“ name=“los“
value=“senden“>
“checkbox“> handelt es sich um
quadratische Kästchen, die per Maus- <input type=“reset“ value=
„l&ouml;schen“>
klick mit einem Kreuz gekennzeichnet
werden. Im Unterschied zu Radiobut-
tons können sie auch einzeln verwendet
werden. Die Bedeutungen der Attribute können Sie den Senden-Button auch
name, value und checked entsprechen durch eine eigene Grafik ersetzen.
denjenigen der Radiobuttons und kön- Mit HTML5 neu eingeführt wurden
nen dort nachgelesen werden. Formulare mit mehreren Senden-
Schaltflächen. Die Auswertung der
Checkbox Benutzereingaben erfolgt dann in Ab-
hängigkeit von der angeklickten Schalt-
<input type=“checkbox“ name=“…“
value=“…“> fläche, weshalb die Skripte nicht bei
action im <form>-Element, sondern
Beispiel bei formaction im <input>-Element
des Buttons angegeben werden.
<input type=“checkbox“
name=“newsletter“ value=“News“
checked>Newsletter abonnieren Mehrere Schaltflächen
<input type=“submit“ formaction=“…“
formmethod=“…“ value=“…“>
Schaltflächen (Buttons)
Um eine Aktion auszulösen, muss ein Beispiel
Formular eine Senden-Schaltfläche <form>
<input type=“submit“> bereitstel- <input type=“submit“
len. Wird diese betätigt, erfolgt die formaction=“[Link]“
formmethod=“get“ value=“Warenkorb“>
Datenübertragung und -auswertung
z. B. mittels PHP-Skript. <input type=“submit“
formaction=“[Link]“
Um die Eintragungen eines For-
formmethod=“get“ value=“Zur Kasse“>
mulars bei Bedarf löschen zu können, </form>
stellt HTML5 eine weitere Schaltfläche
<input type=“reset“> bereit. Die
Beschriftung der Schaltflächen erfolgt Versteckte Felder
über das value-Attribut. Wenn Ihnen Versteckte Felder <input type=“hid­
die HTML-Buttons nicht gefallen, dann den“> sind für den Nutzer unsichtbar

31
 und dienen der Übertragung von
Informationen (value), ohne dass der
Benutzer etwas eingeben muss. Dies
könnte beispielsweise die Bestellnum-
mer oder der Preis eines bestellten
Artikels sein.

Verstecktes Feld
<input type=“hidden“ name=“…“
value=“…“>

Beispiel 1.9.4 Datenprüfung

<input type=“hidden“ name=“best-nr“
value=“147859“> Der Hauptzweck von Formularen be-
steht darin, Benutzerangaben in eine
Datenbank des Anbieters zu übertragen.
Datei-Upload Dies soll möglichst automatisiert und
Um das Hochladen von Dateien <input fehlerfrei funktionieren.
type=“file“> zu ermöglichen, muss Stellen Sie sich nun vor, dass die
in der Formulardefinition der sogenann- Angabe des Geburtsdatums erforderlich
te enctype ergänzt werden. Beachten ist. In einem einfachen Textfeld ist dies
Sie auch, dass der Upload von Dateien beispielsweise in der Form 12.05.1990,
nur mit der Methode post funktioniert. 12.5.90, 12. Mai 1990 oder 12-05-90
Das Attribut accept ermöglicht die möglich. Obwohl der Benutzer ein ver-
Einschränkung der Auswahl, z. B. auf meintlich korrektes Datum eingetragen
Bilder image/*, Sounds audio/* oder hat, ist eine automatisierte Auswertung
Videos video/*. Hierdurch können kaum möglich.
Sie das Sicherheitsrisiko, das Datei- Vor HTML5 erfolgte die Prüfung der
Uploads mit sich bringen, etwas ein- Formulareingaben vor allem mit Hilfe
schränken. von JavaScript. Das Problem dabei
Das multiple-Attribut ermöglicht ist, dass die Prüfung nicht möglich ist,
die Auswahl mehrerer Dateien. wenn der Nutzer Java­Script deaktiviert
hat.
Datei-Upload Wegen der großen Bedeutung
korrekter Formulardaten wurden mit
<form enctype=“multipart/form-data“
name=“…“ action=“…“ method=“post“> HTML5 neue Feldtypen bereitgestellt,
<input type=“file“ name=“…“ die eine korrekte Eingabe der Daten
accept=“…“> erzwingen. Dies geschieht zum einen
</form>
dadurch, dass der Nutzer die Eingabe
Beispiel nicht mehr eintippt, sondern aus einer
<form enctype=“multipart/form-data“ Liste auswählt (vgl. Screenshot auf der
name=“bild“ action=“[Link]“ nächsten Seite).
method=“post“> Zum anderen können Sie mit Hilfe
<input type=“file“ name=“cover“
accept=“image/*“> von pattern sogenannte reguläre Aus-
</form> drücke angeben. Diese legen exakt fest,
in welcher Form die Eingabe erfolgen

32
 HTML5

muss. Das Absenden der Formularda- ƒƒ Bei title notieren Sie den Text, der
ten ist so lange nicht möglich, bis die gezeigt wird, wenn auf den Senden-
Daten in der vorgeschriebenen Form Button geklickt wird, ohne dass die
eingegeben wurden. Pflichtfelder, die Eingabe erfolgt ist. Er soll eine Hilfe
vom User ausgefüllt werden müssen, für die korrekte Eingabe geben.
können Sie mit required kennzeich-
nen. Mittlerweile werden diese hilf- Eingabehilfen
reichen Features von den Browsern gut HTML5 sieht etliche
unterstützt. Lediglich das date-Attribut Möglichkeiten zur
vereinfachten und feh-
ist derzeit mit Firefox und Safari noch
lerfreien Eingabe von
nicht möglich (Stand: 12/2016). Benutzerdaten vor.
Der Screenshot
oben zeigt die Aus-
Datenprüfung
wahl eines Datums
Eingabefeld für ein Datum mit Microsoft Edge.
<input type=“date“> Unten sehen Sie die
Fehlermeldung, die
Eingabefeld für eine E-Mail-Adresse bei einer falschen
Eingabe erscheint.
<input type=“email“>
Durch diese
Eingabefeld für ein vorgegebenes Format Maßnahmen wird
gewährleistet, dass
<input type=“pattern“> die an den Webserver
Beispiel übertragenen Daten
vollständig und kor-
<form> rekt sind.
Datum:<br>
<input type=“date“ required><br>
E-Mail:<br>
<input type=“email“ required><br>
Plz<br>
<input pattern=“[0-9]{5}“
title=“01234“ size=“5“ required><br>
Telefon:<br>
<input pattern=“[0-9]{3,5}[/][0-9]
{5,9}“ title=“01234/56789“></p>
<input type=“submit“ value=
“Senden“>
</form>

Erläuterungen
ƒƒ Im regulären Ausdruck pattern für
die Postleitzahlen werden die er-
laubten Zeichen in eckiger Klammer
angegeben (hier: [0-9]). Danach
folgt die Anzahl an Zeichen in ge-
schweifter Klammer (hier: {5}).
ƒƒ Bei der Telefonnummer wird eine
minimale und maximale Zeichenzahl
angegeben, z. B. mindestens drei und
höchstens fünf Ziffern: {3,5}.

33
 1.10 Multimedia

Wenn Sie bereits HTML können und werden muss. Lesen Sie eventuell
nun auf HTML5 umsteigen, werden Sie nochmals auf Seite 10 nach.
sich darüber freuen, dass das Einbinden Wer sicher gehen will, dass der
von multimedialen Daten, insbesondere Sound in möglichst allen, auch älteren
von Audio und Video, mit HTML5 deut- Browsern funktioniert, der sollte ihn
lich einfacher geworden ist. in mehreren Formaten anbieten. Die
Dennoch gibt es noch immer einige Spezifizierung erfolgt hierbei über das
Hürden zu überwinden, weil nicht jeder type-Attribut. Abgespielt wird dann die
Browser bzw. jede Browserversion auch erste funktionierende Datei.
jedes Dateiformat unterstützt. Dies hat Durch controls werden Steuer­
überwiegend lizenzrechtliche Gründe. elemente angezeigt, autoplay bewirkt,
Die Folge ist, dass Sie einen Sound dass der Sound beim Öffnen der Seite
oder ein Video gegebenenfalls in meh- sofort abgespielt wird. Schließlich errei-
reren Formaten bereitstellen müssen. chen Sie durch loop, dass der Sound
als Schleife wiederholt wird.
1.10.1 Audio
1.10.2 Video
Für das Abspielen von Audiodateien
stellt HTML5 das <audio>-Element Das mit HTML5 eingeführte <video>-
AV-Medien
zur Verfügung. Momentan gibt es drei Element ermöglicht es, Videos ohne
Audio­formate, die unterstützt werden: Plug-in oder Flash abzuspielen. Auch
ƒƒ MP3 hier gilt, dass es zurzeit drei konkurrie-
ƒƒ OGG rende Formate gibt:
ƒƒ WAV ƒƒ MP4
Empfehlenswert ist insbesondere ƒƒ OGV
MP3, da dieses Format von allen heute ƒƒ WebM
wichtigen Browsern (siehe Seite 36) Bei den Videoformaten kommt momen-
unterstützt wird. Testen sollten Sie dies tan MP4 die größte Bedeutung zu. Wie
dennoch. bei Sounds können Sie auch hier auf
Beachten Sie, dass zur Angabe der Nummer sicher gehen und das Video
Sounddatei (wie bei Bildern) nach src in mehreren über type spezifizierte
der relative Pfad zur Datei angegeben Formate anbieten.

Sound einbinden Video einbinden

<audio controls autoplay> <video controls autoplay poster=“…“ >
<source src=“…“ type=“…“> <source src=“…“ type=“…“>
</audio> </video>

Beispiel Beispiel
<audio controls autoplay> <video width=“320“ height=“240“
<source src=“sound.mp3“ controls poster=“[Link]“>
type=“audio/mpeg“> <source src=“video.mp4“
<source src=“[Link]“ type=“video/mp4“>
type=“audio/ogg“> <source src=“[Link]“
<source src=“[Link]“ type=“video/ogg“>
type=“audio/wav“> </video>
</audio>

34
 HTML5

1.10.3 Animation
Knapp 20 Jahre hat Flash einen großen
Beitrag zum multimedial werdenden
Animation
Internet geleistet.
Bei Flash handelt es sich – im Unter-
schied zu HTML5 – um ein sogenanntes
proprietäres Format, das zum Abspielen
von Filmen den Flash-Player von Adobe
benötigt. Apple hat sich geweigert, die-
sen Player in iOS bzw. seinen Browser
Safari zu integrieren, so dass Flash-Ani-
mationen und -Videos auf iPhones und
HTML5-Video mit Steuerelementen iPads nicht abspielbar waren. Hierdurch
sahen sich große Portale wie YouTube­
Die Eigenschaften autoplay und gezwungen, von Flash auf HTML5 um-
controls kennen Sie aus dem letz- zusteigen.
ten Abschnitt. Bei Video kommt noch Nun hat auch Adobe reagiert und
die ­Eigenschaft poster hinzu, mit der Anfang 2016 den Flash-Nachfolger
Sie ein Bild angeben können, das als Animate CC auf den Markt gebracht.
Standbild gezeigt werden soll. Außer- Wenn Sie Flash kennen, wird Ihnen
dem können Sie die Breite (width) und der Umstieg sehr leicht fallen, weil die
Höhe (height) des Videos angeben. Bedienung praktisch identisch geblie-
Wenn Sie Sound oder Video auf einer ben ist. Neu ist, dass nun auch Adobe
Website einsetzen wollen, müssen Sie auf offene Standards setzt und Animati-
bedenken, dass die Datenmengen we- onen z. B. als Canvas oder SVG expor-
sentlich höher sind als bei Text, Bilder tieren kann.
oder Grafiken. Datenmengen spielen
vor allem bei mobilen Internetverbin- Flash-Animationen
dungen eine Rolle, weil dort (noch) Die Uhr für Flash-
nicht flächendeckend hohe Datenraten Anwendungen steht
bereits auf fünf
verfügbar sind.
Minuten nach zwölf,
Videoportale wie YouTube bieten denn Adobe hat die
aus diesem und aus lizenzrechtlichem Weiterentwicklung
Grund Videos nicht zum Download an, eingestellt. Der Nach-
folger heißt Adobe
sondern ermöglichen lediglich soge- Animate CC.
nanntes On-Demand-Streaming. Dabei
werden keine kompletten Dateien über-
tragen, sondern lediglich die Daten, die
die nächsten Sekunden des Videos oder
Sounds enthalten. Diese werden zwi-
schengespeichert und kurze Zeit später
im Browser abgespielt. Solange dieser
Speicher nicht schneller geleert als neu
befüllt wird, läuft das Video ohne zu
stoppen ab.

35
 1.11 Testen

1.11.1 HTML-Parser markt (siehe Grafiken unten) sowie die

wichtigsten Betriebssysteme kennen
Zur Betrachtung eines HTML-Doku- und Ihre Webseiten darauf testen, um
ments wird eine Software benötigt, die zu gewährleisten, dass sie auch überall
die HTML-Elemente aus dem Text ent- funktionieren.
fernt und die enthaltenen Anweisungen
ausführt. Der Vorgang wird als Parsen 1.11.2 Browsermarkt
(to parse, dt.: analysieren) bezeichnet.
Ein Webbrowser ist eine Software, Die Grafiken zeigen die Browserstatis-
die einen HTML-Parser besitzt. In den tiken (Stand: 2016) der in Deutschland
unterschiedlichen Browsern kommen eingesetzten Browser für Desktop-PCs
folglich auch unterschiedliche Parser A sowie für mobile Endgeräte (Smart-
zum Einsatz. Die Folge ist, dass Sie phones, Tablet-PCs usw.) B. Weil immer
nicht davon ausgehen können, dass ein mehr Menschen mit ihren mobilen
HTML-Dokument immer gleich darge- Endgeräten ins Internet gehen, nimmt
stellt wird. Erschwerend kommt hinzu, deren Bedeutung immer stärker zu.
dass ältere Browser keinen HTML5-Par- Bei den Desktop-Geräten ist in
ser verwenden und somit neue HTML5- Deutschland noch immer Mozilla Fire-
Tags nicht kennen und damit auch nicht fox der beliebteste Browser, gefolgt
interpretieren können. von Google Chrome und dem Internet
Aus den genannten Gründen ist ein Explorer. Letzterer wird allerdings nicht
verbindliches Webdesign für mehr weiterentwickelt, weil mit Win-
ƒ alle verfügbaren Browser und (ältere) dows 10 ein neuer Browser namens
Browserversionen, Edge erschienen ist. Mit ihm erhofft
ƒ alle Betriebssysteme (v. a. Windows, sich Microsoft einen höheren Anteil im
Mac OS, Android, Linux) und wichtigen Browsermarkt.
ƒ alle Endgeräte (Desktop-PCs, Laptops, Im Bereich der Browser für mobile
Netbooks, Tablet-PCs, Smartphones) Endgeräte hat Google die Nase vorn,
fast unmöglich. Als Webentwickler/-in dicht gefolgt von Apples Safari und
müssen Sie den aktuellen Browser- dem Android-Browser.
Browser-Marktanteile A Browser-Marktanteile bei Desktop-Geräten (Deutschland) B Browser-Marktanteile bei mobilen Geräten (Deutschland)
Die Grafiken zeigen
links die Statistik der
Desktop-Browser A 2%

und rechts die Brow-

6%
serverteilung bei mo-
bilen Endgeräten B in
Deutschland (Quelle:
[Link], 20 %
Stand: 2016). 18 %
38 %
43 %

29 % 36 %

36
 HTML5

Die Grafiken geben nicht wieder, dass

die Browser ständig weiterentwickelt
werden und somit in unterschiedlichen
Versionen im Einsatz sind. Dies führt A
dazu, dass mit HTML5 und CSS3 neu
eingeführte Elemente von älteren Brow-
serversionen möglicherweise noch
nicht unterstützt werden. Dies bedeutet,
dass Sie auf diese Features entweder
verzichten oder eine Alternative für
diese Browser anbieten müssen – man
spricht von Browserweichen, die sich
z. B. mit CSS3 realisieren lassen.
Eine sehr gute Übersicht, welche
Browserversion für eine bestimmte
­HTML5-Funktion erforderlich ist, bietet
die Website [Link] (von „Can I
use?“). Der Screenshot zeigt, dass das Can I use…?
HTML5-Element <video> A bei allen warten, ob Microsoft mit seinem neuen Eine hervorragende
aktuellen Browsern mit Aus­nahme von Betriebssystem Windows 10 Anteile im Website, mit der Sie
prüfen können, ab
Opera Mini funktioniert. Darüber hinaus umkämpften Markt der mobilen Endge-
welcher Browserver-
zeigt die Grafik auch, ab welcher Brow- räte erobern kann. sion ein bestimmtes
serversion ein Element funktioniert, HTML5-Element
bei <video> ist also mindestens IE 9 funktioniert.
1.11.4 Valides HTML5 Neben HTML5
erforderlich. lassen sich auch
Im Internet finden Sie zahlreiche Die gute Nachricht ist, dass die „Global CSS3-Eigenschaften
Anbieter, die das Testen einer Webseite Player“ der Branche HMTL5 und CSS3 testen.
mit unterschiedlichen Browsern ermög- als neue Standards akzeptieren und
lichen. Geben Sie dazu in Google die eine einheitliche Entwicklung vorantrei-
Stichworte „cross browser test“ ein. ben. Als Webentwickler/-in können Sie
damit mehr und mehr davon ausgehen,
1.11.3 Betriebssysteme dass Ihre Projekte wie gewünscht funk-
tionieren werden. Voraus­setzung hierfür
Bedenken Sie, dass weltweit nur etwa ist allerdings, dass Ihre Webseiten in
9 % aller Desktop-Betriebssysteme Mac korrektem HTML5 (und CSS3) realisiert
OS verwenden (in Deutschland sind es sind – man bezeichnet sie dann als vali-
etwa 10 %, Stand: 2016). Die Computer- de (gesichert, gültig).
welt außerhalb der Medienbranche ist Für die Standardisierung des In-
eine Windows-Welt (87 %). Webseiten ternets ist die Dachorganisation W3C
müssen also mit Windows-Betriebssys­ zuständig. Für Auszeichnungsspra-
temen getestet werden. chen wie HTML5 oder CSS3 existieren
Im Bereich der mobilen Betriebssys­ deshalb genaue Sprachregeln, die
teme spielt Windows jedoch (aktuell) in Dokumenttyp-Definitionen (DTD)
noch fast keine Rolle: Hier ist Android zusammengefasst werden. Ob Sie diese
mit 59 % Marktführer, gefolgt von iOS Regeln eingehalten haben – die Website
(Apple) mit etwa 27 %. Es bleibt abzu- „valide“ ist –, können Sie überprüfen:

37
 Making of …

1 Öffnen Sie die Seite [Link]

[Link].

A B C 2 Wahlweise können Sie nun eine

Internet­adresse (URI) eingeben A,
eine lokal gespeicherte HTML-Datei
auswählen B oder den Quellcode
direkt über die Zwischenablage
einfügen C.

3 Klicken Sie auf Check D.

D
4 Die Rückmeldungen sind sehr
aufschlussreich, im Beispiel wurde
das schließende </video>-Element
vergessen E.
E
5 Nehmen Sie Korrekturen im Quell-
code vor.

6 Wiederholen Sie den Testvorgang,

bis keine Fehlermeldungen mehr
angezeigt werden F – Ihr Dokument
ist nun valide.

Hinweis: Neben HTML5- können Sie

auch Ihre CSS3-Dateien validieren
lassen.

38
1.12 Aufgaben HTML5

1 HTML5-Grundlagen kennen b. Notieren Sie drei Grammatikregeln

für HTML5-Dateien.
Kreuzen Sie an: Wahr oder falsch?
1.
HTML5-Grundlagen w f
HTML steht für Hypertext Media Language
Hypertext bedeutet, dass Text nichtlinear
verbunden werden kann. 2.
Die Struktur eines Tags ist:
<tag>Inhalt<tag/>
HTML5-Dateien sind reine Textdateien.
Ein WYSIWYG-Webeditor ermöglicht eine 3.
Vorschau auf die Webseiten.
Eine HTML5-Datei beginnt mit der Angabe
des DOCTYPE.
HTML5-Dateien besitzen die Endung .htm
oder .html 3 HTML5-Grundlagen kennen
Schriften können in HTML5-Dateien einge- a. Wo erscheint der im <title> einge-
bettet werden.
gebene Text?
Eine HTML5-Datei besteht aus Dateikopf
und Dateikörper.
Meta-Tags sind im Browser unsichtbar. b. Weshalb ist die Angabe des Zeichen-
satzes wichtig?
2 Aufbau einer HTML5-Datei kennen

a. Vervollständigen Sie das Grundge-

rüst einer HTML5-Datei.
c. Notieren Sie das Wort „Fleißkärt-
‹!DOCTYPE html› chen“ in maskierter Schreibweise.

d. Worauf ist bei der Vergabe von Datei-

namen zu achten?

e. Notieren Sie zwei nicht zulässige

Dateinamen.
1.

‹/html› 2.

39
 4 Begriff „Semantik“ verstehen Webbrowser und betrachten Sie das
Ergebnis.
a. Erläutern Sie, was unter der seman- e. Nehmen Sie gegebenenfalls Korrek-
tischen Struktur einer Webseite zu turen vor.
verstehen ist.
6 Schriften verwenden

a. HTML5 kann keine Schriften einbin-

den.
b. Nennen Sie zwei Beispiele für Welche Schrift wird (ohne weitere
HTML5-Elemente, die zur seman- Angaben in der HTML5-Datei) stan-
tischen Beschreibung einer Webseite dardmäßig verwendet?
dienen.
1.

2. b. Weshalb sollten mit HTML5 keine

Angaben zur Schrift gemacht wer-
5 Text strukturieren den?

7 Dateien korrekt benennen

a. Nennen Sie die beiden Endungen,

die HTML5-Dateien erhalten müs-
sen.
oder
b. Erklären Sie, ob am Mac auf die Da-
teiendung verzichtet werden kann.

a. Starten Sie einen HTML- oder Text­

editor. c. Windows unterscheidet bei Datei­
b. Geben Sie den Quellcode ein, um namen die Groß- und Kleinschrei-
die im Screenshot dargestellte Web- bung nicht. Erklären Sie, weshalb
seite zu realisieren. (Die dargestellte diese dennoch beachtet werden
Schrift entspricht der im Browser muss.
eingestellten Standardschrift.)
c. Speichern Sie die Übung unter dem
Namen „[Link]“ ab.
d. Öffnen Sie die Datei in einem

40
 HTML5

d. Dürfen Sonderzeichen in Dateinamen

verwendet werden? Begründen Sie.

c. Link zur Datei „[Link]“, die sich im

Unterordner „sites“ befindet.

e. Wie muss die Startseite (Homepage)

benannt werden? d. E-Mail-Link zu „donald@[Link]“

e. Link zur PDF-Datei „[Link]“ im

8 Meta-Tags verwenden Unterordner „pdf“.

a. Wozu dienen Meta-Tags?

f. Interner Link zu „seitenende“

b. Wo werden Meta-Tags in der HTML5-

Datei notiert?
10 Tabellen verwenden

c. Wo werden Meta-Tags im Webbrow- Erstellen Sie eine HTML5-Datei, die

ser angezeigt? folgende Tabelle erzeugt:

d. Nennen Sie drei Beispiele für Meta-

Angaben.
1.

2.

3.

9 Hyperlinks verwenden

Geben Sie den Quellcode an, um fol- Hinweise:

gende Links zu realisieren: ƒƒ Gehen Sie vor wie bei Aufgabe 5
a. Link zur Startseite von Amazon beschrieben.
ƒƒ Die Linien wurden mit CSS3 ergänzt
und dienen nur zur Veranschauli-
b. Link zur Datei „[Link]“, die sich chung.
im selben Verzeichnis befindet.

41
 11 Bildformate für Webseiten kennen a. Weshalb können Bilder bzw. Grafiken
in die HTML5-Datei nicht eingefügt
a. Nennen Sie drei zulässige Dateifor- werden?
mate für Pixelbilder auf Webseiten.
1.

2. b. Wie lauten die korrekten Pfadanga-

ben im Tag <img src=“…“>?
3. ƒƒ Grafik „[Link]“ in „[Link]“

b. Nennen Sie zwei Technologien, mit

denen Vektorgrafiken dynamisch ƒƒ Grafik „[Link]“ in „[Link]“
erzeugt werden können.

ƒƒ Grafik „[Link]“ in „[Link]“

c. Erläutern Sie einen wesentlichen ƒƒ Grafik „[Link]“ in „[Link]“

Vorteil einer Vektorgrafik im Vergleich
zum Pixelbild.

13 Formulareingaben prüfen

a. Erklären Sie, weshalb es wichtig ist,

dass die von den Nutzern gemach-
12 Bilder/Grafiken referenzieren ten Angaben in Formularen wie z. B.
Datumsangaben ein einheitliches
Der Screenshot zeigt die Datei­struktur Format besitzen.
einer Website.

b. Erklären Sie, welchen Vorteil die

Formularprüfung durch HTML5 im
Vergleich zur späteren Prüfung auf
dem Webserver bietet.

42
 HTML5

14 Formulare erstellen 16 Webbrowser unterscheiden

Erstellen Sie eine HTML5-Datei, die a. Nennen Sie die drei zurzeit wich-
folgendes Formular erzeugt: tigsten Browser für mobile Endge-
räte.
1.

2.

3.
b. Nennen Sie die drei zurzeit wich-
tigsten Browser für Desktop-Com-
puter.
1.

2.

3.
c. Begründen Sie, weshalb Sie Ihre
Webseiten mit verschiedenen
­Browsern und Browserversionen
testen müssen.

15 AV-Medien einbinden

a. Nennen Sie das HTML5-Tag, mit dem

sich ein Sound einbinden lässt.

b. Nennen Sie das HTML5-Tag, mit dem

sich ein Video einbinden lässt.

43
 2.1 Einführung
2 CSS3

2.1.1 Was ist CSS? Mit CSS steht dem Webdesig­ner ein
sehr mächtiges Werkzeug für die Gestal-
HTML wurde bereits 1992 zur Beschrei- tung von Webseiten zur Verfügung. Mit
bung der Struktur und des Inhalts von Hilfe von CSS gelingt es, Webseiten dy-
Webseiten entwickelt: Überschriften, namisch an die unterschiedlichen Dis-
Absätze, Tabellen, Aufzählungen, Links. playgrößen der internetfähigen Endge-
Die Formatierung oder gar Gestaltung räte anzupassen. Schriften lassen sich
von Seiten, wie dies aus dem Printbe- nun einbinden und Texte typografisch
reich bekannt ist, war damals weder korrekt setzen und formatieren, wie dies
möglich noch erforderlich. Dies erklärt, bislang nur im Printbereich möglich
weshalb HTML zur Formatierung von war. Mit CSS können Sie Animationen
Text oder zum Layouten von Seiten erstellen und vieles mehr.
praktisch keine Möglichkeiten zur Verfü- Verschaffen Sie sich doch einen
gung stellt. ersten Eindruck durch Besuch des
Wegen der wachsenden Bedeutung „CSS Zen Gardens“. Auf der Web-
des Internets wurde die Forderung nach site zeigen Webdesigner ihr Können,
Web-„Design“ – also nach einer gestal- wobei der HTML5-Quellcode – der im
terisch ansprechenden Umsetzung der Wesent­lichen aus Text besteht – immer
Seiteninhalte – immer lauter. Deshalb derselbe ist. Alle CSS-Dateien stehen
wurde HTML 1996 durch eine Formatie- zum Download bereit, so dass Sie die
rungssprache mit dem Namen Casca- Vorgehensweise nachvollziehen und
ding Style Sheets, kurz: CSS, ergänzt. erlernen können.

CSS Zen Garden

Auf der Website
setzen Webde-
signer CSS zur
Gestaltung von
Webseiten ein.
Der HTML-Code
ist bei allen Seiten
identisch. Alle
CSS-Quellcodes
können Sie herun-
terladen.
[Link]-
[Link]

© Springer-Verlag GmbH Deutschland 2017

P. Bühler, P. Schlaich, D. Sinner, HTML5 und CSS3, Bibliothek der Mediengestaltung,
DOI 10.1007/978-3-662-53916-3_2
 CSS3

2.1.2 CSS versus HTML5 Darstellung, Gestaltung und Forma-

tierung der mit HTML5 beschriebenen
Erklärtes Ziel des Internetkonsortiums Inhalte gilt:
W3C ist die konsequente Trennung von
Inhalt (HTML5) und Design (CSS) einer CSS3
Website. Hierfür sprechen folgende
Gestalten und formatieren Sie Ihre Webseiten aus-
Gründe: schließlich mit CSS. Selbst Animationen sind mit CSS
ƒƒ Inhalt und Design können unabhän- möglich – die Ära von Flash ist vorbei!
gig voneinander erstellt und bearbei-
tet werden, z. B. durch Programmierer
und Webdesigner. CSS stellt Ihnen, insbesondere seit Ver-
ƒƒ Inhalte können softwaregestützt sion CSS3, ähnliche Möglichkeiten zur
ausgewertet werden, z. B. per Screen- Verfügung, wie Sie es von der Gestal-
reader, der den Inhalt einer Webseite tung im Printbereich gewohnt sind, z. B.
vorliest. Farben, Rahmen, Ränder, Abstände,
ƒƒ Inhalte lassen sich dynamisch, z. B. Linien, Schriftattribute.
per Content-Management-System, Leider ist die Anwendung im Ver-
verwalten. gleich zum Printbereich deutlich kom-
ƒƒ Das Design kann als externe Datei plizierter, weil es keinen Webeditor gibt,
abgespeichert werden und lässt sich der das Layouten und Gestalten von
somit auf beliebig viele HTML5-Sei- Webseiten ohne HTML- und CSS-Kennt-
ten anwenden. nisse ermöglicht.
ƒƒ Für einen Inhalt können mehrere
Designs erstellt werden, z. B. zur Aus- 2.1.3 CSS3
gabe auf PC-Monitoren, Smartphones
und für den Druck. Die Entwicklung der CSS wird in soge-
ƒƒ Ein und dasselbe Design lässt sich nannten Levels beschrieben, wobei es
gegebenenfalls für mehrere (XML- wie bei HTML Überschneidungen gibt.
konforme) Sprachen verwenden. So wurde mit der Entwicklung des heu-
Aus oben genannten Gründen gelten tigen Standards Level 3 bereits 2000
für heutiges Webdesign folgende zwei begonnen, obwohl Level 2.1 im Jahr
Grundforderungen: 2002 veröffentlicht wurde.
Nach heutigem Stand wird es nun
HTML5 bei CSS Level 3, kurz CSS3, bleiben.
Dabei kann es vorkommen, dass Sie
Verwenden Sie HTML5 ausschließlich zur Beschrei-
bung der semantischen Struktur und der Inhalte einer
eine CSS3-Eigenschaften verwenden
Webseite! wollen, diese aber durch den verwen-
deten Browser (noch) nicht unterstützt
wird. Um zu prüfen, welcher Browser
Wer sich schon länger mit HTML be- eine bestimmte CSS3-Eigenschaft un-
schäftigt, weiß, dass diese Trennung terstützt, empfehlen wir die bereits im
früher nicht konsequent eingehalten letzten Kapitel erwähnte Site caniuse.
wurde. Doch schon vor einigen Jahren com (von „Can I use…?“). Hier können
wurden etliche HTML-Tags als „depreca- Sie die gesuchte CSS3-Eigenschaft ein-
ted“ (dt.: veraltet) eingestuft und sollen geben und erhalten eine Übersicht, mit
nicht mehr benutzt werden. Für die welchen Browsern diese funktioniert.

45
 2.1.4 CSS3-Editoren auszukommen. Unserer Erfahrung
nach funktioniert dies jedoch nicht
Wie bei HTML5 gibt es auch bei CSS3 wirklich und wird auch unserem
mehrere Herangehensweisen, die sich Anspruch nicht gerecht, mit Ihnen
grundsätzlich unterscheiden: zusammen die grundlegenden CSS3-
ƒƒ Das manuelle Codieren von Websei- Kenntnisse zu erarbeiten.
ten ist mühsam, liefert aber dafür ƒƒ Wer mit einem Content-Management-
exakt den gewünschten Quellcode, System arbeitet (siehe Seite 4), erhält
der sich auch im Nachhinein beliebig vordefinierte CSS3-Dateien und
editieren lässt. Da es sich wie bei braucht diese nur noch an seine eige-
HTML5 auch bei CSS3 um einfache nen Bedürfnisse und Wünsche anzu-
Textdateien handelt, ist diese im Prin- passen. Voraussetzung ist allerdings,
zip mit jedem Texteditor möglich. dass Sie sich mit CSS3 gut auskennen
ƒƒ Komfortabler ist es, eine Software – für Anfänger ist diese Vorgehens-
zu verwenden, die ein sogenanntes weise nicht empfehlenswert.
Syntax-Highlighting bietet. Hierbei
werden zusammengehörende Code- 2.1.5 CSS3-Tutorials
sequenzen farbig dargestellt, was die
Übersicht erhöht und die Fehlersuche Wenn Sie dieses Kapitel durchgearbei-
erleichtert. Je nach Software werden tet haben, kennen Sie die wichtigsten
beim Codieren Listen mit einer Aus- CSS3-Eigenschaften zur Formatie-
wahl aller möglichen CSS3-Attribute rung und Gestaltung von Webseiten.
angezeigt. Dies ist nützlich, weil Sie Zur Vertiefung verweisen wir auf die
dann nicht alles auswendig wissen bereits auf Seite 5 erwähnte Literatur.
oder nachschlagen müssen. Empfehlenswert ist insbesondere das
ƒƒ Die dritte Möglichkeit besteht darin, Online-Tutorial von W3-Schools, www.
einen sogenannten WYSIWYG-Editor [Link]/css, da Sie auf dieser
zu verwenden. Die Abkürzung steht Website die CSS3-Codierung A direkt
für „What you see is what you get!“ ausprobieren können. Nach Anklicken
und verspricht dem Anwender, auch des Buttons See Result B sehen Sie
ohne HTML5- und CSS3-Kenntnisse sofort das erzielte Ergebnis C.
W3-Schools
Auf dieser Website
B können Sie den Um-
gang mit CSS3 ein-
C üben: Nach Eingabe
des Codes im linken
A Fenster sehen Sie im
rechten Fenster sofort
das Ergebnis.
[Link]/
css

46
2.2 CSS3-Regeln CSS3

Vielleicht haben Sie sich schon gefragt, so nicht zwingend, aber sinnvoll sind
was Cascading in der Abkürzung CSS Kommentare /* … */ innerhalb von
bedeutet. Eine Kaskade ist laut Duden CSS3-Dateien. Sie helfen Ihren Kollegen
ein mehrstufiger Wasserfall oder Brun- und sich selbst dabei, Ihre Stylesheets
nen. In unserem Fall besitzt das Wort nachvollziehen zu können. Häufig ist
eine übertragene Bedeutung und be- es so, dass nach einigen Wochen oder
sagt, dass die Stylesheets „mehrstufig“ Monaten Änderungen notwendig sind.
angeordnet sein können: intern oder Spätestens dann gilt: Ohne Kommen-
extern, zentral oder lokal, durch den tare sind Änderungen mühsam.
Browser, Nutzer oder Autor der Websei-
te definiert. Um Konflikte zu vermeiden, Aufbau einer CSS3-Regel
gibt es Regeln, nach denen diese un- Allgemeine Definition
terschiedlichen CSS nacheinander, also
Selektor {
„kaskadiert“, ausgeführt werden. Eigenschaft1: Wert1;
Ein wesentliches Merkmal der Kaska- Eigenschaft2: Wert2;
... Kaskade
dierung von CSS ist, wo diese definiert
} Eine Kaskade ist ein
werden. Hierbei stehen drei Möglich- mehrstufiger Wasser-
keiten zur Verfügung: Beispiele fall oder Brunnen.
ƒƒ Externe CSS3-Definition in einer body {
eigenen Datei background-color: #FFFFFF;
ƒƒ Zentrale CSS3-Definition im Dateikopf margin: 20px;
}
ƒƒ Lokale CSS3-Definition im HTML5-­ p {
Element font-family: Arial;
font-size: 10px;
font-weight: bold;
2.2.1 Allgemeine Definition }

Cascading Style Sheets bestehen aus Beispiele mit Kommentare

einer oder mehreren CSS-Regeln. In der /* Hauptüberschriften in Rot */
Tabelle rechts sehen Sie den allgemei- h1 {
font-family: Verdana;
nen Aufbau einer Regel. Sie beginnt font-size: 16px;
mit einem sogenannten Selektor. Im color: #FF0000;
}
einfachsten Fall handelt es sich dabei
um ein HTML5-Tag, das ohne spitze /* Links ohne Unterstreichung */
Klammer notiert wird, also z. B. body a {
text-decoration: none;
und nicht <body>. Ab Seite 50 lernen }
Sie weitere Selektoren kennen.
Alle CSS-Eigenschaften, die sich auf
den Selektor beziehen, werden in ge- 2.2.2 CSS3-Datei
schweiften Klammern {...} nach dem
Selektor notiert. Nach jeder Eigenschaft Bei der externen Definition werden alle
muss einen Doppelpunkt (:) und nach gewünschten CSS3-Selektoren, Eigen-
jedem Wert ein Semikolon (;) angege- schaften und Werte in einer separaten
ben werden. Datei abgespeichert. Wie bei HTML5-
Die Einrückungen und Zeilenumbrü- Dateien handelt es sich auch bei CSS3-
che sind nicht erforderlich und dienen Dateien um reine Textdateien, die Sie
lediglich der besseren Lesbarkeit. Eben- mit jedem Texteditor erstellen können.

47
 Der Dateiname muss die Endung .css um damit den Inhalt an unterschied-
erhalten. Damit eine externe CSS3- liche Ausgabemedien anzupassen.
Datei genutzt werden kann, muss sie Neben den in den Beispielen genannten
mit der HTML5-Datei verlinkt werden. Medien­typen print und screen gibt
Hierfür können Sie im Dateikopf wahl- es eine Reihe weiterer, z. B.:
weise das <link>-Element aus HTML5 ƒƒ aural (Sprachausgabe)
oder die @import-Direktive aus CSS3 ƒƒ projection (Projektion)
verwenden. ƒƒ tv (Fernseher)
Interessant ist die Möglichkeit, Dies reicht jedoch heute nicht mehr
mehrere CSS3-Dateien einzubinden, aus, weil es zahlreiche Endgeräte wie
Smartphones oder Tablet-PCs mit unter­
Externe CSS3-Datei(en) schiedlichen Formaten gibt. Nähere
<link>-Element Informationen hierzu finden Sie ab
Seite 76.
Einbinden der Datei „[Link]“:
<!DOCTYPE html>
<html> Vorteile externer CSS3-Dateien
<head> Der Hauptvorteil externer CSS-Dateien
<link rel=“stylesheet“ type=“text/
css“ href=“[Link]“> liegt darin, dass sie für beliebig viele
</head> HTML5-Dokumente zur Verfügung
... stehen. So lässt sich mit einer einzigen
Einbinden mehrerer CSS-Dateien für Bildschirm- CSS-Datei ein kompletter Internetauftritt
und Druckausgabe: formatieren oder nachträglich ändern.
<html> Dies funktioniert auch bei dynamischen,
<head>
<link rel=“stylesheet“ also durch Skripte automatisch gene­
media=“screen“ href=“[Link]“> rierten HTML5-Seiten, da auch hier le-
<link rel=“stylesheet“ diglich die vorhandene CSS-Datei über
media=“print“ href=“[Link]“>
</head> <link> oder @import eingebunden
... werden muss.
@import-Direktive
2.2.3 CSS3 im Dateikopf
Einbinden der Datei „[Link]“:
<!DOCTYPE html>
<html> Nehmen Sie einmal an, dass Sie Ihren
<head> Webauftritt wie oben beschrieben mit
<style type=“text/css“> einer externen CSS3-Datei formatieren.
@import url(„[Link]“);
</style> Jetzt gibt es aber möglicherweise ein-
</head> zelne Seiten, die Sie an einigen Stellen
gerne anders formatieren würden.
Einbinden mehrerer CSS-Dateien für Bildschirm-
und Druckausgabe: Hierfür könnten Sie für diese Seite eine
<!DOCTYPE html> zweite externe Datei realisieren.
<html> Eine weitere Möglichkeit besteht
<head>
<style type=“text/css“> darin, die ursprüngliche externe Datei
@import url(„[Link]“) screen; beizubehalten und die Änderungen in
@import url(„[Link]“) print; der HTML5-Datei selbst vorzunehmen.
</style>
</head> Hierzu können Sie CSS3-Regeln direkt
... im Dateikopf angeben. Gemäß den Re-
geln zur Kaskadierung haben zentrale

48
 CSS3

Zentrale CSS3-Definition Lokale CSS3-Definition

CSS-Definition im Dateikopf Allgemeine Definition
<!DOCTYPE html> <tag style=“eigenschaft1: wert1;
<html> eigenschaft2: wert2;...“>...</tag>
<head>
<title>Zentrale CSS</title>
<style> Beispiele
body { <p style=“font-family: Arial; color:
background-color: #FFFFFF; #CCCCCC“>...Text...</p>
margin: 20px;
} <p>Hier steht <span style=“color:
p { red“>roter</span>Text
font-family: Arial; </p>
font-size: 12px;
color: blue; <div style=“background-color:
} blue“>Dieser Kasten ist blau!</div>
</style>
</head>
...
Hilfe des style-Attributes direkt im
HTML5-Element notiert werden.
CSS3 eine höhere Prio­riät als externe Die HTML5-Elemente <span> und
CSS3, d.h., bei gleicher Defini­tion wer- <div> haben für CSS3 eine große
den zentrale CSS3-Regeln bevorzugt. Bedeutung. Bei <span> handelt es sich
um ein sogenanntes Inline-Element,
2.2.4 Lokale CSS3 das innerhalb anderer HTML5-Elemente
eingesetzt wird. Das <div>-Blockele-
Noch mehr Flexibilität bieten CSS3, die ment hingegen ersetzt andere Elemente
direkt „vor Ort“ im HTML5-Element an- und erzeugt einen Kasten, der mit CSS3
gegeben werden – sogenannte Inline- gestaltet werden kann.
Styles. Der Unterschied zu externen Lokale CSS3-Definitionen haben eine
oder zentral definierten CSS3-Regeln noch höhere Priorität als zentrale oder
besteht darin, dass die gewünschten externe CSS3, so dass sich eine dreistu-
CSS3-Eigenschaften und -Werte mit fige Kaskadierung ergibt.

Kaskade
HTML5-Datei CSS3-Datei ([Link])
CSS3 können extern,
<!DOCTYPE HTML> h1 {color:red;} zentral und lokal
<html> definiert werden und
<head> dabei sich widerspre-
<style type="text/css"> chende Eigenschaften
@import url("[Link]"); enthalten: Im Beispiel
h1 {color:blue;} ist die Textfarbe rot,
</style> blau und grün.
</head> Die Regel lautet,
<body> dass lokale CSS3 vor
<h1 style="color:green"> zentralen vor externen
Welche Farbe? CSS3 berücksich­tigt
</h1> werden: Der Text wird
</body> deshalb grün darge-
</html> stellt.

49
 2.3 Selektoren

Auf Seite 47 haben Sie den allgemeinen

Aufbau einer CSS3-Regel kennenge-
lernt:

Aufbau einer CSS3-Regel

Selektor {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
...
}
HTML5-Elemente
Die Verwendung von HTML5-Elementen
Der Selektor befindet sich immer vor als Selektoren haben Sie bereits
einer geschweiften Klammer und gibt kennengelernt. Beachten Sie, dass in
das Element an, auf das sich die CSS3- diesem Fall die spitzen Klammern weg-
Eigenschaft(en) beziehen. gelassen werden müssen.
CSS3 stellt unterschiedliche Typen
von Selektoren bereit, die sich darü- HTML5-Elemente (Tags)
ber hinaus miteinander kombinieren Allgemeine Definition
lassen. Hierdurch wird ein sehr flexibler
tag {
Einsatz der Stylesheets möglich. Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
...
2.3.1 Einfache Selektoren }

Universalselektor Beispiel
Mit Hilfe eines Universalselektors (*) h1 {
können Sie CSS3-Eigenschaften definie- color: red;
ren, die für alle HTML5-Elemente gelten font-size: 18px;
}
sollen. Sie sparen sich hierdurch einige p {
Schreibarbeit. Im Beispiel wird allen color: black;
font-size: 14px;
Elementen eine weiße Hintergrundfar-
}
be, graue Vordergrundfarbe sowie die
Schriftart „Lucida Sans“ zugewiesen.

Universalselektor
Allgemeine Definition
* {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
...
}

Beispiel Vielleicht fragen Sie sich, was passiert,

* { wenn zusätzlich der Universalselektor
background-color: white; – z. B. mit grauer Textfarbe – definiert
color: gray; wurde. In diesem Fall überschreiben
font-family: ”Lucida Sans Unicode“;
} die CSS3-Eigenschaften der HTML5-
Elemente die des Universalselektors.

50
 CSS3

Klassen
Die wenigen HTML5-Elemente reichen
zur Spezifikation von CSS3-Eigenschaf-
ten nicht aus. So ist es beispielsweise
mit einem einzigen <p>-Element nicht
möglich, unterschiedliche Absätze zu
realisieren. Um dies zu ermöglichen,
können Sie eigene Selektoren definie-
ren, die als Klassen bezeichnet werden.
Eine Klasse wird durch einen Punkt
(.) gefolgt von einem beliebigen Na- Um den Gültigkeitsbereich einer Klasse
men definiert. Einzige Einschränkung auf ein bestimmtes HTML5-Element
ist, dass der Name nicht mit einer Ziffer einzugrenzen, wird dieses Element vor
beginnen darf. Eine Klasse kann in den Punkt geschrieben. Im Beispiel
jedem beliebigen HTML5-Element mit überschreibt die mit dem Absatz <p>
Hilfe des Schlüsselworts class aufge- verbundene Klasse die Klassendefini­
rufen werden. tion darüber.

Klassen Klassen mit HTML5-Elementen kombinieren

Allgemeine Definition Allgemeine Definition
.meine_klasse { tag.meine_klasse {
Eigenschaft1: Wert1; Eigenschaft1: Wert1;
Eigenschaft2: Wert2; Eigenschaft2: Wert2;
... ...
} }

Aufruf der Klasse Aufruf der Klasse

<tag class=“meine_klasse“>...</tag> <tag class=“meine_klasse“>...</tag>

Beispiel Beispiel
<!DOCTYPE html> <style>
<html> .farbe {color: red;}
<head> [Link] {color: blue;}
<meta charset=“utf-8“> </style>
<title>Klassen</title> ...
<style> <h3 class=“farbe“>Überschrift</h3>
* {font-family: ”Lucida Sans <p class=“farbe“>Hier steht ein
Unicode“;} erster Absatz</p>
.rot {color: red;} ...
.blau {color: blue;}
.gruen {color: green;}
</style>
</head>
<body>
<h3 class=“rot“>Überschrift</h3>
<p class=“blau“>Hier steht ein
erster Absatz</p>
<p class=“gruen“>Hier steht ein
zweiter Absatz</p>
</body>
</html>

51
 Individualformate
Maximale Flexibilität ermöglichen – wie
der Name ausdrückt – Individualfor-
mate. Sie unterscheiden sich in ihrer
Definition von Klassen dadurch, dass
sie nicht durch den Punkt-, sondern
durch den Rauten-Operator (#) definiert
werden. Individualformate sind dafür
gedacht, dass sie nur einmal verwendet
werden. Der Aufruf im HTML-Element
erfolgt durch das id-Attribut. Pseudoklassen und -elemente
Pseudoklassen und -elemente werden
Individualformate üblicherweise mit HTML5-Elementen
Allgemeine Definition kombiniert. Bei Pseudoklassen erfolgt
die Verbindung mit dem HTML5-Ele-
#mein_id {
Eigenschaft1: Wert1; ment durch einen Doppelpunkt (:), bei
Eigenschaft2: Wert2; Pseudoelementen durch zwei Doppel-
... punkte (::).
}
In der Tabelle finden Sie eine unvoll-
Aufruf des Individualformats ständige Liste mit Pseudoklassen und
<tag id=“mein_id“>...</tag> -elementen. Wer sich näher mit diesem
Thema auseinandersetzen will, wird
Beispiel unter [Link]/cssref/
<!DOCTYPE html> css_selectors.asp fündig.
<html>
<head>
<meta charset=“utf-8“> Pseudoklassen und -elemente
<title>Individualformate</title> Pseudoklassen
<style>
* {font-family: „Lucida Sans :link unbesuchter Link
Unicode“;} :visited besuchter Link
#kursiv {color:blue;} :hover mit Maus berührter Link
span#kursiv {color:red;} (sogenannter „Mouseover“)
</style>
:active aktuell angeklickter Link
</head>
:focus ausgewähltes Element, z. B.
<body>
<h3>Überschrift</h3>
Formularfeld
<p id=“kursiv“>Hier steht ein :nth-of-type(n) N-tes Vorkommmen eines
erster Absatz.</p> HTML5-Elements. Das n in
<p>Hier steht ein <span id=“kursiv“> der Klammer kann eine Ziffer,
zweiter</span> Absatz</p> eine Funktion (z.B. 2n) oder
</body> ein Schlüsselwort (even für
</html> gerade, odd für ungerade)
sein.
Pseudoelemente
Wie bei Klassen können auch Individu- ::first-line erste Zeile
alformate auf ein bestimmtes HTML5- ::first-letter erster Buchstabe
Element beschränkt werden. Im Beispiel ::before Einfügen vor dem Element,
führt das Individualformat #kursiv mit content gibt den Inhalt an.
::after Einfügen nach dem Element,
dem <span>-Element zu einer anderen content gibt den Inhalt an.
Farbe als ohne.

52
 CSS3

Pseudoklassen und -elemente hinterlegt. Durch die Pseudoelemente

Beispiel werden in jeder Tabellenzeile der erste
Buchtstabe (first-letter) rot hinter-
<!DOCTYPE html>
<html> legt und der Text „Zeile“ ergänzt.
<head>
<meta charset=“utf-8“>
<title>Pseudoklassen</title> 2.3.2 Vererbung
<style>
* {font-family:“Lucida Sans Das Prinzip der Vererbung besagt, dass
Unicode“;}
CSS3-Eigenschaften übergeordneter
a {color:white;}
a:link {background-color:blue;} Eltern- oder parent-Elemente an unter-
a:visited {background-color:red;} geordnete Kind- oder child-Elemente
a:hover {background-color:green;}
tr:nth-of-type(even)
weitergegeben werden.
{background-color:silver;} Im Beispiel vererbt das parent-
td::first-letter{color:red;} Element <body> die Hintergrund- und
td::after {content:“ Zeile“;}
</style>
Textfarbe sowie die Schrift an alle
</head> child-Elemente. Diese definieren die
<body> Hintergrundfarbe neu und überschrei-
<h3>Überschrift</h3>
<a href=“...“>1. Link</a> ben damit das parent-Element.
<a href=“...“>2. Link</a>
<a href=“...“>3. Link</a><br><br>
<table> Vererbung
<tbody> Beispiel
<tr><td>1.</td></tr>
<tr><td>2.</td></tr> <!DOCTYPE html>
<tr><td>3.</td></tr> <html>
<tr><td>4.</td></tr> <head>
</table> <meta charset=“utf-8“>
</body> <title>Vererbung</title>
</html> <style>
body {background-color:white;
color:white;
font-family:“Lucida Sans
Unicode“}
header {background-color:gray;}
article {background-color:red;}
footer {background-color:green;}
</style>
</head>
<body>
<header>Kopfbereich</header>
<article>1. Textbeitrag</article>
<article>2. Textbeitrag</article>
<footer>Fußbereich</footer>
</body>
</html>

Das Beispiel zeigt drei Links, wobei der

erste bereits besucht wurde (visited)
und der dritte gerade mit der Maus
berührt (hover) wird. In der Tabelle wer-
den alle ungeraden Zeilen (odd) grau

53
 2.3.3 Kombinierte Selektoren Im Beispiel wird der graue Hintergrund
auf die Elemente <header> und <foo-
Die Kombination von Klassen, Indivi­ ter> übertragen. Einen roten Hinter-
dualformaten und Pseudoklassen/-ele- grund erhält hingegen nur der Absatz
menten mit HTML5-Elementen haben <p>, der Kind-Element von <article>
Sie bereits kennengelernt. CSS3 bietet ist. Der zweite Absatz ist Kind-Element
weitere Möglichkeiten, wie Sie Selek- von <div> und würde daher nur rot
toren miteinander kombinieren können. hinterlegt, wenn zwischen article und
p kein Größer-Zeichen (>) stünde.
Kombination einfacher Selektoren
Allgemeine Definition 2.3.4 Rangfolge und Spezifität
Aufzählung gleichberechtigter Selektoren
element1, element2 {...} Autoren-, Benutzer- und Browser-
Stylesheets
Beschränkung auf element2 innerhalb von element1 In den vergangenen Abschnitten haben
element1 element2 {...}
Sie die Möglichkeiten kennengelernt,
Beschränkung auf element2 als Kind-Element von die Sie als Autor einer Website zur
element1 Definition von CSS3-Selektoren haben.
element1 > element2 {...} Sie werden deshalb auch als Autoren-
Beispiel Stylesheets bezeichnet.
Jeder Browser zeigt HTML5-Seiten
<!DOCTYPE html>
<html> an – auch wenn kein Stylesheet defi-
<head> niert ist. Er verwendet hierzu voreinge-
<meta charset=“utf-8“> stellte Browser-Stylesheets, die allen
<title>Kombination</title>
<style> HTML5-Elementen bestimmte Grund­
* {font-family:“Lucida Sans eigenschaften und Werte zuordnen.
Unicode“;}
Die dritte Möglichkeit besteht darin,
header,footer{background-color:
silver;} dass der Anwender im Browser eigene
article > p {color: white; Einstellungen vornimmt. Durch diese
background-color:red;}
</style>
Benutzer-Style­sheets wird es beispiels-
</head> weise möglich, die Schriftgröße an das
<body> Display oder die Lesegewohnheiten
<header><p>Kopfbereich<p></header>
<article><p>Mein Textbeitrag</p>
anzupassen.
<div><p>Hier noch mehr Text.</p> Welche Stylesheets werden verwen-
</div></article> det, wenn sich die Autoren-, Benutzer-
<footer><p>Fußbereich</p></footer>
</body> und Browser-Stylesheets widerspre-
</html> chen?

Rangfolge
Autoren- werden vor Benutzer- und diese werden vor
Browser-Stylesheets berücksichtigt.

Wenn also der Nutzer die Grundschrift

in 20 px haben möchte, der Webdesig­
ner aber 14 px definiert, dann würde

54
 CSS3

deklarieren Sie dieses Stylesheet als

­ important.
!
Im Beispiel werden Absätze durch
die Zusatzangabe !important in der
Schriftart „Georgia“ angezeigt. Ohne
die Angabe würden sie in der „Arial“
angezeigt, weil diese Angabe unterhalb
steht und somit die erste Schriftvorgabe
überschreiben würde.

Spezifität von Selektoren

Abschließend muss geklärt werden, in
welcher Reihenfolge die unterschied-
lichen und sich möglicherweise wider-
sprechenden Selektoren berücksichtigt
werden. Betrachten Sie hierzu das
Beispiel: Welche Farbe hat der Absatz,
wenn für
ƒƒ Universalformat weiß,
Browser-Stylesheets bei Google Chrome ƒƒ HTML5-Element blau,
ƒƒ Individualformat (id) orange,
die Einstellung des Nutzers – zu dessen ƒƒ Klasse (class) grün und
Ärger – überschrieben. ƒƒ lokales Stylesheet rot
Das Beispiel verdeutlicht, weshalb zugewiesen wurde? Probieren Sie es
Sie beim Web­design nicht mit abso- aus – der Absatz erscheint rot. Dies ist
luten Einheiten (px, pt), sondern mit nicht selbsterklärend, sondern wurde
relativen Einheiten arbeiten sollten, die von den CSS3-Entwicklern so festgelegt
sich auf die Grundschriftgröße beziehen
(siehe Seite 57). Spezifität
Beispiel
!important-Deklaration
<!DOCTYPE HTML>
Es gibt aber auch Fälle, in denen Sie <html>
ein bestimmtes Stylesheet erzwin- <head>
gen möchten. Um dies zu erreichen, <title>Spezifität</title>
<style>
* {color: white;}
p {color: blue;}
!important
#orange {color: orange;}
Beispiel .gruen {color: green;}
</style>
<!DOCTYPE HTML>
</head>
<html>
<body>
<head>
<p style=“color:red“ id=“orange“
<title>Rangfolge</title>
class=“gruen“>Für diesen Absatz
<style>
wurden verschiedene Selektoren
p {font-size: Georgia; !important}
definiert.
p {font-family: Arial;}
</p>
}
</body>
</style>
</html>
...

55
 Selektor(kombination) A B C D Beispiel
Einfache Selektoren
Universalelement 0 0 0 0 * {...}
HTML5-Element 0 0 0 1 body {...}
Klasse oder Pseudoklasse 0 0 1 0 .rot {...}
Individualformat 0 1 0 0 #blau {...}
Lokale style-Definition 1 0 0 0 <p style=“...“>...</p>
Kombinierte Selektoren (Beispiele)
HTML5-Element:Pseudoklasse 0 0 1 1 a:hover {...}
HTML5-Element HTML5-Element 0 0 0 2 article p {...}
Individualformat HTML5-Element 0 1 0 1 #blau p {...}
Individualformat HTML5-Element:Pseudoklasse 0 1 1 1 #rot a:hover {...}

und als Spezifität bezeichnet. Die Spe- überschreibt C, C überschreibt D. Bei

zifität legt die Reihenfolge fest, in der kombinierten Selektoren brauchen Sie
die verschiedenen Stylesheet-Defini­ also nur die Spezifitäten zu kombinie-
tionen berücksichtigt werden. Hierzu ren, wie die Beispiele in der Tabelle
gibt es vier Gruppen von A bis D, wobei zeigen.
Gruppe A die höchste und Gruppe D Die vier Ziffern ergeben zusammen
die niedrigste Spezifität zugeordnet eine vierstellige Zahl, und je größer die-
ist. Anders gesagt: A überschreibt B, B se Zahl ist, umso höher ist die Spezifität
des Stylesheets. Die höchste Spezifität
Spezifität in der Tabelle besitzen somit Inline-
Beispiel Stylesheets mit (1 0 0 0), die niedrigste
der Universalselektor mit (0 0 0 0). So-
<!DOCTYPE html>
<html> mit ist klar, weshalb der Absatz auf der
<head> vorherigen Seite in Rot dargestellt wird.
<meta charset=“utf-8“> Das Beispiel links zeigt, dass sich
<title>Kombinationen</title>
<style> nun fast beliebig viele Kombinations­
* {font-family: „Lucida Sans möglichkeiten ergeben und man
Unicode“;}
Gefahr läuft, den Überblick zu verlieren.
p {color:blue;}
[Link] {color: orange;} Wichtig ist vor allem, dass Sie „Ihre“
p > span {color: red;} Style­sheets“ von Anfang an gut struktu-
p #farbe {color:gray;}
p #farbe span {color:maroon;}
rieren und dokumentieren.
</style>
</head>
<body>
<h3>Welche Farbe?</h3>
<p>Ein blauer Absatz mit etwas
<span>rot</span>.</p>
<p class=“farbe“>Ein oranger Absatz
mit etwas <span style=“color:
green“>grün</span>.</p>
<p><span id=“farbe“>Ein grauer
Absatz mit etwas <span>braun
</span>.</span></p>
</body>
</html>

56
2.4 Maßeinheiten CSS3

Die Vielzahl unterschiedlicher Maßein- handelt es sich weder um eine echte

heiten bei CSS3 ist zunächst verwir- absolute noch um eine echte relative
rend. Wenn Sie allerdings bedenken, Angabe. Denn die Anzahl an Pixeln
dass Sie mit CSS3 nicht nur Webseiten, hängt von der auf dem Display einge-
sondern auch deren „Druckversion“ for- stellten Auflösung ab, ist also relativ in
matieren, haben auch Längenangaben Bezug auf die Displaygröße.
wie cm oder Inch ihre Berechtigung.
Flüssige Layouts
Absolute Maßeinheiten Bereits heute geht die überwiegende
Absolute Maßeinheiten sind feste Anzahl der Nutzer mit mobilen Endge-
Größen mit Einheiten, die Sie aus räten ins Internet. Diese gibt es – vom
dem Printbereich kennen: Millimeter, Smartphone über Tablets bis zu Lap-
Zentimeter, Punkt, Pica. Sie ergeben tops – in allen möglichen Größen. Für
am Bildschirm keinen Sinn, bieten sich Webdesign gilt deshalb heute folgende
jedoch an, wenn Sie Stylesheets für den Grundforderung:
Ausdruck einer Website formatieren.
Flüssiges (liquid) Layout
Relative Maßeinheiten
Nur durch relative Maßeinheiten wird es möglich,
Relative Maßeinheiten besitzen keine das Layout einer Website an die unterschiedlichen
festen Größen, sondern beziehen sich Displaygrößen der Endgeräte anzupassen.
immer auf eine (variable) Voreinstellung.
Beispiele sind die aus der Typografie be-
kannten Höhenangaben der Buchstaben Denn mit absoluten Angaben, und dies
M oder x. Bei CSS3 werden diese als gilt letztlich auch für Angaben in Pixel
em bzw. ex gekennzeichnet. Die Angabe (px), lässt sich ein Layout nur an eine
1.5 em*) bezeichnet die 1,5-fache M-Höhe Displaygröße optimal anpassen. *) Kommazahlen
der im Browser eingestellten Grund- Ein weiteres Argument für relative Beachten Sie, dass
schrift (Standard: 16 px). Angaben ist ihre Bedienfreundlichkeit. Kommazahlen mit
Dezimalpunkt (.) und
Eine weitere wichtige relative Insbesondere bei „barrierefreien“ Sei-
nicht mit Komma
Maßeinzeit ist die Prozentangabe. Sie ten, die auch Menschen mit Einschrän- notiert werden müs-
bezieht sich auf das übergeordnete Ele- kungen einen Zugang gewähren, muss sen!
ment oder auf die Größe des Browser- es dem Nutzer möglich sein, sich die
fensters. Bei Verkleinerung des Fensters Darstellung nach Wunsch anzupassen.
verkleinert sich ein mittels Prozent defi- Verabschieden wir uns also von der
niertes Layout dementsprechend auch. Vorstellung, eine Website mit einem
Bei der häufig verwendeten Angabe px festen Layout entwerfen zu können.

Absolute Maßeinheiten Relative Maßeinheiten

Einheit Bedeutung Beispiel Einheit Bedeutung Beispiel
px Pixel, absolute Anzahl der Bildpunkte width:100px; px Pixel ist (auch) relativ, da die Anzahl top:50px;
eines Monitors der Pixel von der Monitor­auflösung bottom:100px;
abhängig ist.
mm Millimeter height:20mm;
cm Zentimeter margin:1cm; em M-Höhe, Bezug: Schriftgröße 16 px font-size:1.2em
pt Punkt (= 0,3528 mm) line-height:12pt; ex x-Höhe, Bezug zu Kleinbuchstaben font-size:0.8ex
pc Pica (= 12 pt) font-size: 1pc; % Prozent, Bezug zum übergeordneten width:50%;
in Inch (= 2,54 cm) padding: 0.5 in Element/Browserfenster

57
 2.5 Farben

2.5.1 Hexadezimale Farbangaben A kopieren und an der entsprechenden

Stelle im Quellcode einfügen können.
Die Angabe von Farben in hexadezima- Die Buchstaben A bis E des Hexadezi-
ler Schreibweise erfolgt bei CSS3 durch malcodes können Sie wahlweise groß
das #-Zeichen, gefolgt von drei mal oder klein schreiben.
zwei Hexadezimalziffern für den Rot-,
Grün- und Blauanteil der Farbe: „Websichere“ Farben
Zur verbindlichen Darstellung von
Hexadezimale Farbdefinition Farben auf unterschiedlichen Rechnern
und Betriebssystemen wurde ursprüng-
#xxxxxx
lich eine Auswahl von 216 Farben als
Rotanteil Blauanteil „websichere“ Farben definiert. Hierzu
Grünanteil
setzen Sie im Farbwähler das Häkchen
bei Nur Webfarben anzeigen B .
Um eine websichere Farbe zu erhal-
Mit einer zweistelligen Hexadezimalzahl ten, dürfen pro Farbkanal die Hexadezi­
(xx) pro Farbkanal lassen sich von 00 malzahlen 0, 3, 6, 9, C und F immer
bis FF insgesamt 256 unterschiedliche nur paarweise verwendet werden. Dies
Farben darstellen. Zusammen bildet die ergibt 6 x 6 x 6 = 216 Farben. Beispiele:
sechsstellige Hexadezimalzahl also den ƒƒ Schwarz: #000000
kompletten RGB-Farbraum von 256 x ƒƒ Weiß: #FFFFFF
256 x 256 = 16,7 Millionen Farben ab. ƒƒ Blau: #0000FF
Die Mischfarbe ergibt sich nach den Ge- ƒƒ Gelb: #FFFF00
setzmäßigkeiten der additiven Farbmi- ƒƒ Grau: #999999
schung. Beispiele für Farbangaben: Heute haben websichere Farben aus
ƒƒ #123456 technischer Sicht keine Bedeutung
Farben aus Photoshop ƒƒ #AE35DF mehr. Um Farbabstände und -harmo-
oder Illustrator ƒƒ #0F3A5E nien zu finden, kann es jedoch hilfreich
Hexadezimale Farb­ Der Vorteil der hexadezimalen Schreib- sein, den großen RGB-Farbraum auf
angaben können Sie weise ist, dass Sie eine Farbangabe einige wenige Farben einzuschränken.
aus dem Farbwähler einfach aus Photoshop oder Illustrator
direkt entnehmen A.
2.5.2 Dezimale Farbangaben
Eine zweite Möglichkeit der Farbangabe
besteht darin, den Rot-, Grün- und Blau-
anteil als Dezimalzahl anzugeben:

Dezimale Farbdefinition
rgb(xxx,xxx,xxx)

Rotanteil Blauanteil
Grünanteil

C
B Die „xxx“ stehen in diesem Fall für
A
dezimale Farbwerte. Sie können wahl-

58
 CSS3

weise als Zahlen von 0 bis 255 oder 2.5.3 Farbnamen

prozentual angegeben werden. Die Zah-
lenwerte können Sie ebenfalls direkt im Für 140 Farben können Sie auch vorde-
Photoshop- oder Illustrator-Farbwähler finierte Namen verwenden, z. B.:
C (vorherige Seite) ablesen. ƒƒ color: blue;
ƒƒ background-color: white;
Transparenz Die Tabelle links unten zeigt eine kleine
Farbangaben in dezimaler Schreibweise Auswahl, alle Farbnamen finden Sie
bieten den Vorteil, dass Sie durch Anga- beispielsweise unter www.w3schools.
be eines vierten Wertes die Transparenz com/colors/colors_hex.asp.
der Farbe von völlig durchsichtig (0) bis
undurchsichtig (1.0) angeben können. 2.5.4 Farbverläufe
Hängen Sie in diesem Fall ein „a“ für
Alphakanal an rgb. Mit CSS3 können Sie einen Hintergrund
mit einem linearen und radialen Farb-
Transparenz verlauf versehen.
rgba(xxx,xxx,xxx,y.z)
Farbverläufe
Transparenz
Allg. Definition eines linearen Farbverlaufs
background: linear-gradient(richtung,
farbe1,farbe2,...);
Beispiel: Die Angabe 0.6 bedeutet,
dass die Farbe zu 40 % durchsichtig ist. richtung kann z. B. to bottom, to top, to
right, to left oder eine Winkelangabe z. B.
Beachten Sie bitte, dass wie bei Maß- 45deg sein.
angaben auch hier Dezimalzahlen nicht
mit Komma, sondern mit einem Punkt Allg. Definition eines radialen Farbverlaufs
geschrieben werden. background: radial-gradient(farbe1,
farbe2,...);

Hex-Code Farbname Beispiel

#000000 black <!DOCTYPE html>
<html>
#808080 gray
<head>
#C0C0C0 silver <meta charset=“utf-8“>
#FFFFFF white <title>Farbverläufe</title>
<style>
#00008B darkblue #box1 {height:200px;
#00FFFF cyan width:200px;
#006400 darkgreen background: linear-gradient
(45deg,yellow,red);}
#008000 green #box2 {height:200px;
#800080 purple width:200px;
background: radial-gradient
#EE82EE violet (cyan,blue);}
#FF0000 red </style>
#FF5400 orangered </head>
<body>
#FFA500 orange <div id=“box1“></div>
#FFD700 gold <div id=“box2“></div>
</body>
#FFFF00 yellow
</html>
#FFFFF0 ivory

59
 2.6 Typografie

Für die typografische Gestaltung von Browserversion für eine gewünschte

Webseiten stellen Ihnen die CSS3 Mög- CSS3-Eigenschaft erforderlich ist. Sie
lichkeiten zur Verfügung, die Sie aus sollten sich auf CSS3-Eigen­schaften
dem Bereich der Typografie für Printme- begrenzen, die durch alle aktuellen
dien kennen. Browser interpretiert werden.
Der Unterschied zu Printmedien
besteht jedoch darin, dass es im Web 2.6.1 Schriftart
eine Vielzahl an Endgeräten gibt. Diese
unterscheiden sich nicht nur hinsichtlich Da es sich bei HTML5- und CSS3-
ihres Formats, sondern auch hinsicht- Dateien um reine Textdateien handelt,
lich Betriebssystem, Webbrowser und ist es nicht möglich, Schriftdateien
Browserversion. Und obwohl sich die einzubinden. Lange Zeit mussten sich
Browserhersteller immer besser an die Webdesigner/-innen auf Systemschrif-
Standards des W3C halten, können Sie ten, also die Schriften des Betriebs-
nicht grundsätzlich davon ausgehen, systems, beschränken. Dies hatte zur
dass Ihr Design auf unterschiedlichen Folge, dass auf Webseiten die immer
Google Fonts Plattformen und mit unterschied- gleichen Schriften wie Arial, Verdana
Google stellt Filter A lichen Browsern identisch aussieht. oder Georgia zu sehen waren – eine
zur Suche nach einer Im schlimmsten Fall kommen ältere völlig unbefriedigende Situation!
passenden Schrift
bereit.
Browserversionen zum Einsatz, die Mit CSS3 wurde (endlich) eine Mög-
Klicken Sie auf das gewünschte Feature noch gar nicht lichkeit geschaffen, auch andere Schrif-
das Icon B, um eine unterstützen. ten zu verwenden: Die Idee besteht
Schrift zu verwenden. Die typografische Gestaltung von darin, den Zeichensatz über einen Link
Danach muss ledig-
lich der angezeigte Webseiten erfordert deshalb Erfahrung. mit dem Dokument zu verknüpfen. Die
Quellcode kopiert und Eine wichtige Hilfe ist hierbei caniuse. Schriftdatei kann sich dabei auf dem-
in der HTML5-Datei com, da Sie dort prüfen können, welche selben oder auf einem anderen Server
eingefügt werden. befinden. Einige wichtige Formate
dieser sogenannten Webfonts sind:
ƒƒ TrueType-Fonts (.TTF)
ƒƒ OpenType-Fonts (.OTF)
ƒƒ Web Open Font Format (.WOFF)
Bei WOFF handelt es sich um ein
Containerformat, das TrueType- oder
OpenType-Schriften einbettet und kom-
A primiert. Hierdurch wird die Ladezeit
der Schrift reduziert.
Natürlich muss – wie im Printbereich
auch – beachtet werden, dass auch für
Schriften eine Nutzungslizenz erforder-
lich ist. Es gibt jedoch auch Anbieter mit
B
Open-Source-Fonts, die Sie lizenzfrei
verwenden dürfen, z. B. Google Fonts,
siehe unter [Link]. Eine
Übersicht über die Anbieter von Web-
fonts finden Sie hier: [Link]
[Link].

60
 CSS3

Die Verwendung von Webfonts ist 2.6.2 Schriftattribute

denkbar einfach: Kopieren Sie den auf
der Website des Schriftanbieters ange- Nachdem Sie die gewünschte Schrift
gebenen <link ...> in den <head> mit Ihrer Webseite verlinkt haben, ste-
Ihrer HTML5-Datei. Der Zugriff auf die hen Ihnen zahlreiche Möglichkeiten zur
Schrift erfolgt dann mit font-family. Formatierung zur Verfügung. Hierbei
Liegt Ihnen die Schrift als Datei vor, geht es nicht nur um eine ansprechende
können Sie diese alternativ zu <link> typografische Gestaltung, sondern auch
mit dem CSS3-Element @font-face um die Frage optimaler Lesbarkeit auf
einbetten. allen späteren Ausgabegeräten vom
Smartphone bis zum großen Monitor.
Schriftart Generell gilt, dass der Nutzer der
Verwendung einer Systemschrift Website die Schriftdarstellung beein-
flussen können sollte. Aus diesem
font-family: Arial;
font-family: “Times New Roman“; Grund sind relative Schriftmaße, die
font-family: Verdana, Arial, sans-serif; sich auf die im Browser eingestell-
te Grundschrift beziehen, sinnvoller
Hinweise:
• Schriftnamen mit Leerzeichen müssen in
als absolute, feste Schriftmaße. W3C
Anführungszeichen gesetzt werden. empfiehlt die Verwendung der relativen
• Bei Angabe mehrerer Schriften werden diese durch Einheit em (siehe Seite 57). Hierbei ist
Komma getrennt. Der Browser verwendet die erste zu beachten, dass der Internet Explorer
Schrift von links nach rechts, die im Betriebssystem
installiert ist. diese Einheit erst ab Version 10 unter-
stützt.
Verwendung eines Webfonts mit <link>
<head> Schrifteigenschaften
<link href=“[Link]
com/css?family=Open+Sans“ Schriftgröße
rel=”stylesheet“ type=”text/css“>
font-size: 10px; absolute Einheit
<style>
p {font-family: ”Open Sans“;}
font-size: 1.5em; relative Einheit
</style> font-size: 100%; relative Einheit
</head>
Schriftstil
Hinweis: font-style: normal; normal
Die unter href anzugebende Adresse kopieren Sie font-style: italic; kursiv
vom Anbieter der Schrift in den Dateikopf Ihrer Datei. font-style: oblique; schräg
Verwendung einer Schriftdatei mit @font-face
Schriftstärke
<style>
@font-face { font-weight: normal; normal
font-family:Corbel; font-weight: bold; fett (bold)
src:url([Link]); font-weight: bolder; extra fett
} font-weight: lighter; dünn
p {font-family:Corbel} font-weight: 100; extra dünn
</style> font-weight: 200; dünn
... ...
Hinweise: font-weight: 800; fett
• Im Beispiel liegt die Schriftdatei im selben Ver- font-weight: 900; extra fett
zeichnis wie die HTML-Datei.
• Bei externen Schriftdateien muss die komplette Zulässige Kombination
URL in der Form: [Link] angegeben werden. font: bold 2.0em Verdana;

61
 Schrifteigenschaften (Fortsetzung) Absätze
Zeichenabstand Zeilenumbruch
letter-spacing: 0.2em; white-space: normal; Text umbricht am
letter-spacing: 1px; rechten Browserrand
white-space: pre; Text umbricht wie im
Hinweis: Editor gesetzt
Alternativ können Sie font-stretch verwenden.
Beispiel
Wortabstand ...
word-spacing: 0.5em; <style>
word-spacing: 2px; [Link] {white-space:normal;}
[Link] {white-space:pre;}
</style>
Schriftfarbe (siehe Seite 58) ...
color: black; <p class=“ohne“>Dies ist ein Text,
color: #0000FF; der den Textumbruch demonstriert.</p>
color: rgb(100,200,0); <p class=“mit“>Dies ist ein Text,
color: rgb(100%,20%,10%); der den Textumbruch demonstriert.</p>
...
Textauszeichnung
Zeilenabstand
text-decoration: none; ohne line-height: 1.5em;
text-decoration: underline; unterstrichen line-height: 18px;
text-decoration: overline; überstrichen
text-decoration: blink; blinkend Erstzeileneinzug
text-decoration: line-through; durchge-
strichen text-indent: 1.0em;
text-indent: 2mm;

Satzart
2.6.3 Zeilenumbruch text-align: left; Flattersatz, links
text-align: right; Flattersatz, rechts
Standardmäßig füllt HTML5 den zur text-align: center; Mittelachsensatz
Verfügung stehenden Platz mit Text auf, text-align: justify; Blocksatz
also bis zum rechten Rand des Browser-
Vertikale Textausrichtung
fensters. Aus diesem Grund müssen Sie
im Quellcode angeben, wo Sie Absätze vertical-align: top; oben
vertical-align: middle; mittig
haben möchten. Bei HTML5 dient hierzu vertical-align: bottom; unten
das <br>-Tag.
Seit CSS3 gibt es die Möglichkeit,
mit Hilfe von white-space den Zeilen­ 2.6.4 Abstände und Rahmen
umbruch aus dem Editor zu über-
nehmen und sich auf diese Weise die Bei Absätzen <p>, Überschriften <h1>
Verwendung von <br> zu ersparen. bis <h6> , Tabellen <table> und Listen
<ul> bzw. <ol> handelt es sich um so-
genannte Blockelemente. Diese kön­nen
Sie wahlweise mit einem
ƒƒ Innenabstand,
ƒƒ Außenabstand,
ƒƒ mit einer Rahmenlinie,
ƒƒ Hintergrundfarbe oder
ƒƒ einem Hintergrundbild versehen.

62
 CSS3

Die CSS3-Elemente zur Gestaltung Eigenschaften, die zur Formatierung

und Formatierung von Blockelementen von Tabellen dienen, sind:
finden Sie ab Seite 66.
Tabellen
2.6.5 Listen Zellenabstand
border-spacing: 5px;
Listen stellen ein wichtiges HTML5-­
Ele­ment zur Gliederung von Texten dar. Überlagerung von Rahmen
Unterschieden werden dabei Aufzäh- border-collapse: separate; keine
lungslisten, <ul> für „unor­der­ed list“, border-collapse: collapse; überlagert
die in jeder Zeile mit einem Aufzäh- Umgang mit leeren Zellen
lungszeichen beginnen, und numme-
empty-cells: show; Anzeige
rierte Listen, <ol> für „ordered list“, die empty-cells: hide; keine Anzeige
mit Ziffern oder Buchstaben beginnen.
Listen können verschachtelt werden, Hinweis:
Besser ist es, leere Zellen zu vermeiden. Platzieren Sie
so dass Sie beispielsweise eine Aufzäh-
zumindest ein Leerzeichen (&nbsp;) in jeder Zelle.
lungsliste auch innerhalb einer numme-
rierten Liste platzieren können.

Listen
Aufzählungszeichen bei <ul>
list-style-type: none; ohne
list-style-type: disc; gefüllter Kreis
list-style-type: circle; leerer Kreis
list-style-type: square; Quadrat

Nummerierung bei <ol>

list-style-type: decimal; 1., 2., 3.
list-style-type: lower-roman; i., ii., iii.
list-style-type: upper-roman; I., II., III.
list-style-type: lower-alpha; a., b., c.
list-style-type: upper-alpha; A., B., C.

Position des Aufzählungszeichens

list-style-position:
inside; innerhalb des Textblockes
outside; außerhalb des Textblockes

Eigene Grafik als Aufzählungszeichen

list-style-image: url([Link])

Zur Gestaltung des Textes innerhalb

2.6.6 Tabellen einer Tabelle und zur Formatierung
der Tabelle selbst (Farben, Rahmen,
Tabellen dienen, wie im HTML5-Kapitel Abstände) verwenden Sie die CSS3-
deutlich betont, nicht zum Layouten Eigenschaften, die in den vorherigen
von Webseiten, sondern ausschließlich Abschnitten besprochen wurden. Sie
zur Darstellung tabellarischer Daten. können die Eigenschaften wahlwei-

63
 se auf die gesamte Tabelle <table>, Hintergrundfarbe oder -bild
einzelne Datenzellen <td> und teilweise Hintergrundfarbe (siehe Seite 58)
auch auf einzelne Datenreihen <tr>
background-color: #CCCCCC;
anwenden. Auf diese Weise können Sie
beispielsweise Tabellen mit abwech- Hintergrundbild
selnder Zeilenfarbe realisieren. background-image: url(“[Link]“);

Bildwiederholung
2.6.7 Hintergründe background-repeat: repeat; Wiederholung
background-repeat: repeat-y; nur senkrecht
Jedem sogenannten Blockelement background-repeat: repeat-x; nur waagrecht
einer HTML5-Datei, also beispielsweise background-repeat: no-repeat; ohne Whg.
Header <header>, Artikel <article> Bildposition
oder dem <body>, können Sie wahl-
background-position: 50px 100px;
weise eine Hintergrundfarbe oder ein background-position: 100% 50%;
Hintergrundbild zuweisen. Um das ge- background-position: top left;
samte Browserfenster mit einer Farbe background-position: bottom right;
background-position: center center;
oder einem Hintergrundbild zu verse-
hen, weisen Sie die Farbe oder das Bild Bildgröße
dem <body>-Tag zu (siehe Beispiel). background-size: 400px 300px;
Der Zugriff auf Webseiten erfolgt background-size: 100% 50%;
background-size: contain;
mit unterschiedlichen Endgeräten wie background-size: cover;
Laptops, Tablets oder Smartphones. Da
Scrollverhalten
sich diese Geräte hinsichtlich Seitenver-
hältnis und Auflösung unterscheiden, background-attachment: scroll; Bild scrollt
background-attachment: fixed; Bild fest
brauchen Sie einen Hintergrund, der
sich an die unterschiedlichen Display- Beispiel
größen anpasst. Hierfür gibt es fol- <style>
gende Möglichkeiten: body {margin:0px;
background:#333;
background-image:url(“[Link]“);
Bildwiederholung background-position: 100% 50%;
Standardmäßig wird ein Bild links background-repeat:no-repeat;
background-size:cover;
oben platziert und mehrfach darge-
}
stellt, wenn das Browserfenster größer </style>
ist als das Bild. Mit der Eigenschaft
background-repeat können Sie dies
unterbinden, indem Sie die Option no- Wichtiger als absolute Angaben in Pixel
repeat wählen. sind prozentuale Angaben, weil hier-
durch eine Anpassung an unterschied-
Bildposition liche Displaygrößen möglich wird. Die
Bei Monitoren oder Displays liegt der Angabe 100% 50% bewirkt, dass das
Nullpunkt des Koordinatensystems in Bild horizontal komplett (100 %) darge-
der linken oberen Ecke. Mit der Eigen- stellt wird und vertikal von der Bildmitte
schaft background-position geben (50 %) aus „aufgefüllt“ wird. Sie bestim-
Sie an, welchen horizontalen und men hierdurch also den Bildausschnitt,
vertikalen Abstand ein Bild von diesem der gezeigt wird, wenn das Bild nicht
Punkt haben soll. komplett in das Fenster passt.

64
 CSS3

Bildgröße was zur Folge hat, dass horizontal oder

Die zweite wichtige Eigenschaft für vertikal freie Bereiche sichtbar bleiben
Hintergrundbilder in flexiblen Layouts können. Für Hintergründe empfiehlt
ist background-size. Auch hier sind sich die Verwendung der Option cover,
absolute Angaben in Pixel oder relative da hierbei der gesamte Platz gefüllt
Angaben in Prozent möglich. Die Option wird, ohne dass das Bild verzerrt wird.
contain passt das komplette Bild in Auf diese Weise bleibt immer ein Bild-
den verfügbaren Platz komplett ein, ausschnitt sichtbar.
Flexibles Hintergrund-
bild
Oben wird das
komplette BIld mit
der CSS3-Eigenschaft
background-size:
contain in den zur
Verfügung stehenden
Bereich eingepasst.
Unten sorgt die
CSS3-Eigenschaft
background-size:
cover dafür, dass der
zur Verfügung ste-
hende Bereich immer
komplett ausgefüllt
background-size: contain; wird. Hierdurch wird
eine flexible Anpas-
sung des Bildes an
unterschiedliche Dis-
playgrößen erreicht.

background-size: cover;

65
 2.7 Layout

Die „Königsdisziplin“ im Umgang 2.7.1 CSS3-Boxmodell

mit CSS3 ist das Erstellen kompletter
Layouts. Wie im Printbereich werden Blockelemente stellen die Grundbau-
für Layouts Rahmen – sogenannte steine dar, aus denen sich beliebige
Block­elemente – verwendet, die erst im Layouts aufbauen lassen. Wichtige
zweiten Schritt mit dem gewünschten Blockelemente dienen zur Seitenstruk-
Content versehen werden. Leider ist der turierung wie der gesamte Dateikörper
Umgang mit CSS3-Layouts alles andere <body>, Kopfbereich <header> oder
als einfach. Dies liegt einerseits an den Fußbereich <footer>. Die zweite
vielfältigen Möglichkeiten, die Sie zum Gruppe der Blockelemente beschrei-
Platzieren von Blockelementen haben. ben die Textstruktur mit Absätzen <p>,
Andererseits ist es heutzutage Überschriften, z. B. <h1>, Tabellen <ta-
Pflicht, dass Layouts flexibel sind und ble> oder Listen <ul> oder <ol>. Ein
sich an die unterschiedlichen Endgeräte weiteres, häufig verwendetes Blockele-
dynamisch anpassen. Dabei gilt die For- ment, ist das <div>-Element.
derung Mobile First, weil die Mehrzahl Um den Umgang mit Blockelemen­
der User mit mobilen Endgeräten ins ten zu verstehen, muss zunächst das
Internet geht, und die Darstellung auf sogenannte CSS3-Boxmodell erläutert
mobilen Endgeräten damit optimiert werden. Betrachten Sie hierzu die fol-
werden muss. Mehr hierzu finden Sie in gende Grafik:
Kapitel 2.8 ab Seite 76.

100 200 300 400 500 600 700 800 900 1000 1100

CSS3-Boxmodell
Blockelemente kön-
nen Sie sich als Kas­
top
100

ten (Box) vorstellen.

Jedes Blockelement
kann mit einem Rah- left Blockelement
200

men, einem Außen-

oder Innenabstand margin B
sowie mit einer Farbe border-width C
300

versehen werden.
Das allgemeine
Blockelement <div>
padding D
400

ist ausschließlich zur

Formatierung mit A width
CSS3 gedacht.
height
500

E
600
700
800

66
 CSS3

Ein Blockelement erzeugt zunächst Eigenschaften von Blockelementen

einen leeren Rahmen („Box“), der sich Breite und Höhe
an beliebiger Stelle auf dem Bildschirm
width: 600px; Feste Breite
platzieren lässt. Jede Box ist durch fol- width: 80%; Relative Breite (zu
gende Eigen­schaften gekennzeichnet: übergeordneter Box)
ƒƒ Breite (width) und Höhe (height), min-width: 100px; Minimale Breite
z. B. in Pixel oder prozentual, bezogen max-width: 800px; Maximale Breite
height: 300px; Feste Höhe
auf die Displaybreite bzw. -höhe, min-height: 80px; Minimale Höhe
ƒƒ optional eine Rahmenlinie (border) max-height: 60px; Maximale Höhe
mit einer bestimmten Breite (bor-
der-width), Außenabstände
ƒƒ optional einen Außenabstand margin-top: 100px; oben
(margin) zum übergeordneten Block- margin-bottom: 50px; unten
margin-left: 20%; links
element, z. B. zum Rand des Browser-
margin-right: 3.0em; rechts
fensters, margin: 30px; gleiche Abstände
ƒƒ optional einen Innenabstand margin: 6px 0 8px 5px; oben, rechts,
(padding), z. B. um einen Abstand unten, links
Hinweis:
zwischen Text und Rändern zu erhal- Informationen zu den Maßeinheiten finden Sie auf
ten. Seite 57.
Die Abmessungen des Blockelements
Innenabstände
ergeben sich durch Addition der einzel-
nen Bestandteile. Hierzu eine Beispiel- padding-top: 100px; oben
padding-bottom: 50px; unten
rechnung: padding-left: 20%; links
padding-right: 3.0em; rechts
Box-Breite padding: 30px; gleiche Abstände
A width 500 px padding: 6px 0 8px 5px; oben, rechts,
unten, links
B margin 2 x 100 px = 200 px
C border-width 2 x 10 px = 20 px Hintergrundfarbe (siehe Seite 58)
D padding 2 x 90 px = 180 px background-color: blue;
900 px background-color: #A097FC;

Hintergrundbild (siehe Seite 64)

Box-Höhe background-image: url(“[Link]“);
E height 200 px
Rahmenstärke
B margin 2 x 100 px = 200 px
C border-width 2 x 10 px = 20 px border-width: 3px;

D padding 2 x 90 px = 180 px Rahmenart

600 px border-style: none; ohne
border-style: dotted; gepunktet
Im Ihrem Layout müssen Sie also die border-style: dashed; gestrichelt
Größe 900 x 600 Pixel vorsehen und border-style: solid; durchgezogen
border-style: double; doppelt
nicht die bei width und height ange-
gebenen Werte. Dies wäre nur korrekt, Rahmenfarbe (siehe Seite 58)
wenn die Box weder Außenabstand, border-color: #000000;
Innenabstand noch Linie hätte. Rahmen mit abgerundeten Ecken
Für das Layouten von Webseiten
border-radius: 10px;
ist obiges Boxmodell nicht ideal – wer

67
 Eigenschaften von Blockelementen (Fortsetzung)
Rahmen (Kurzschreibweise)
border: 3px solid black;
border: 0.5em dotted #FF0000;

Hinweis:
Alle Eigenschaften zur Formatierung von Rahmen
können auch auf einzelne Seiten begrenzt werden:
border-top- oben
border-bottom- unten
border-left- links
border-right- rechts

Beispiele:
border-top-width: 3px;
border-bottom-color: blue;

Modifiziertes Boxmodell
box-sizing: border-box;

Beispiel
<style>
div {width:100px;
height:100px;
padding:20px;
margin:10px;
Für das Platzieren von Blockelementen
background-color:#ccc;
border: 5px solid black; kamen bislang zwei Techniken in Frage:
} Positionieren mit position oder Um-
.box2 {box-sizing:border-box;
}
fließen mit float. Mit beiden Varianten
</style> können Sie auch dynamische Layouts,
... die sich an die Displaygröße des Endge-
<div>Ohne box-sizing</div>
<div class=“box2“>Mit box-sizing</div>
rätes anpassen, erstellen.
... Seit einiger Zeit steht mit dem Flex-
box-Konzept eine dritte Möglichkeit, zur
Verfügung, die für das Erstellen dyna-
rechnet schon gerne! Abhilfe schafft misch veränderlicher Layouts gedacht
eine CSS3-Eigenschaft namens box- ist, insbesondere in Kombination mit
sizing, die es ermöglicht, Breiten- und Media Queries, auf die wir ab Seite 76
Höhenangaben zu machen, die einen eingehen.
möglichen Innenabstand und Rahmen
mit einschließen. 2.7.2 Blockelemente positionieren
Das Beispiel verdeutlicht die Funk­
tionsweise: Die obere Box ist um 60 Die CSS3-Eigenschaft position stellt
Pixel breiter und höher als die untere, vier Möglichkeiten zum Platzieren von
weil die Innenabstände (2 x 20 = 40 Pi- Blockelementen zur Verfügung. Um de-
xel) und die Rahmen (2 x 10 = 20 Pixel) ren Unterschiede verstehen zu können,
hinzugerechnet werden. Die untere Box betrachten wir ein Beispiel mit jeweils
hat die gewünschte Breite und Höhe zwei verschachtelten Blockelementen.
von je 100 Pixel.

68
 CSS3

Blockelemente positionieren A Positionierung mit fixed

Feste Position (kein Scrollen) Die bei top und left angegebenen
Werte des inneren Elements (A2) bezie-
position: fixed;
hen sich direkt auf das Browserfenster
Variable Position im Textfluss (default) und überdecken somit das Elternele-
position: static; ment (A1). Mit fixed platzierte Rahmen
Absolute Position (innerhalb Elternelement) scrollen nicht mit, da sie sich immer auf
das Browserfenster beziehen.
position: absolute;

Relative Position (innerhalb Elternelement) B Positionierung mit static

position: relative; Bei static wird das innere Block­
Werte zur Positionierung element (B2) einfach im Textfluss des
Eltern­elements (B1) platziert. Die Anga-
top: 20px; Abstand von oben
bottom: 30%; Abstand von unten
ben bei top und left werden ignoriert
left: 10em; Abstand von links und können weggelassen werden.
right: 50mm; Abstand von rechts static ist die Default-Einstellung, d. h.,
Beispiel
<style>
div {padding:5px; color:white;}
#A1 {position:absolute;
width:200px; height:230px;
top:30px; left:30px;} A B
#A2 {position:fixed;
width:100px; height:100px;
top:50px; left:20px;}
#B1 {position:absolute;
width:200px; height:230px;
top:30px; left:260px;}
#B2 {position:static;
width:100px; height:100px;
top:50px; left:20px;}
#C1 {position:absolute;
width:200px; height:230px;
top:290px; left:30px;}
#C2 {position:absolute;
width:100px; height:100px;
top:50px; left:20px;}
#D1 {position:absolute; C D
width:200px; height:230px;
top:290px; left:260px;}
#D2 {position:relative;
width:100px; height:100px;
top:50px; left:20px;}
</style>
...
<div id=“A1“>A1<div id=“A2“>...</div>
</div>
<div id=“B1“>B1<div id=“B2“>...</div>
</div>
<div id=“C1“>C1<div id=“C2“>...</div>
</div>
<div id=“D1“>D1<div id=“D2“>...</
div></div>
...

69
 dass ohne position-Angabe Blockele- Dynamische Layouts
mente einfach im Textfluss des Elterne- Beispiel
lements platziert werden.
<style>
* {box-sizing:border-box;
C Positionierung mit absolute }
Die Bezeichnung ist irreführend, da nav {position:absolute;
top:0%; left:0%;
das innere Element (C2) nicht absolut, width:20%; height:90%;}
sondern relativ zum Eltern­element (C1) main{position:absolute;
top:0%; left:20%;
platziert wird. Die im Beispiel bei top
width:80%;height:90%;}
und left angegebenen Werte beziehen aside{position:absolute;
sich auf das Elternelement. Elemente, top:0%; right:0%;
width:20%; height:90%;}
die sich im Elternelement befinden, footer{position:absolute;
werden wie bei fixed überschrieben. bottom:0%;left:0%;
Beim Scrollen bewegen sich absolut height:10%;width:100%;}
</style>
platzierte Block­elemente mit. ...
<nav>Navigation</nav>
D Positionierung mit relative <main>Hauptbereich</main>
<aside>Nebenbereich</aside>
Das innere Element (D2) wird wie bei <footer>Fußzeile</footer>
der absoluten Positionierung relativ ...
zum Elternelement (D1) platziert. Hier-
bei werden allerdings weitere Elemente
in dieser Box berücksichtigt, so dass Flexible Layouts
sich die Angaben top und left auf die Um flexible, also sich dynamisch an
Unterkante des Textes bzw. auf den In- das Display des Endgeräts anpassende
nenabstand beziehen und der Text nicht Layouts zu realisieren, verwenden
überschrieben wird. Sie statt absoluter Angaben in Pixel
Flexible Layouts
Die große Vielzahl
an unterschiedlichen Navigation Hauptbereich Nebenbereich
Endgeräten erfordert
flexible Layouts, die
sich an die Display-
maße des jeweiligen
Endgerätes anpassen.
Diese Flexibilität kann Navigation Hauptbereich Nebenbereich

nur durch relative

Maßgaben (z. B. in %)
erreicht werden.
Navigation Hauptbereich Nebenbereich

Fußzeile

Fußzeile
Navigation Hauptbereich Nebenbereich

Fußzeile

Fußzeile

70
 CSS3

relative Angaben in Prozent. Betrachten float besteht vor allem darin, dass
Sie hierzu das Beispiel auf der linken sich hierdurch auf relativ einfache Weise
Seite: Bei allen Blockelementen wurden dynamische Layouts erstellen lassen.
die Werte für top, left, width und Das Beispiel demonstriert die Funk-
height prozentual angegeben. Auf die- tionsweise von float. Das Blockele-
se Weise passt sich das Layout an die mente main wird links vom Blockele-
Displaygröße des Engerätes an. ment nav und rechts vom Blockelement
aside umflossen. Im Blockelement
2.7.3 Blockelemente umfließen footer wird der Umfluss wieder auf-
gehoben. Die Angabe der Breiten und
Die häufig eingesetzte Alternative zur Höhen erfolgt prozentual, wodurch eine
Positionierung mit position ist, dass dynamische Anpassung des Layouts an
Blockelemente von anderen Elementen das Endgerät möglich wird.
umflossen werden. Sie kennen diesen Eine Besonderheit stellt das Block­
Begriff vielleicht von Printlayouts, wo element wrapper dar. Der Begriff
Bilder von Text umflossen werden kön- leitet sich von to wrap (dt.: einwickeln,
nen. Diese Eigen­schaft wird bei CSS3 einpacken) ab. Ein Wrapper umschließt
als float bezeichnet. Der Vorteil von den gesamten Content einer Website
und sorgt für definierte Anfangsbe-
Blockelemente umfließen dingungen, z. B., indem der Nullpunkt
Art des Umfließens in die linke obere Ecke gelegt und die
float: none; ohne Umfluss Ränder auf 0 px festgelegt werden.
float: right; Umfluss rechts
float: left; Umfluss links
2.7.4 Flexible Boxen
Umfließen beenden
clear: left; beendet Umfluss links Ein noch relativ neues, aber vielspre-
clear: right; beendet Umfluss rechts chendes Konzept zur einfachen Erstel-
clear: both; beendet Umfluss komplett lung dynamisch veränderlicher Layouts
Beispiel ist Flexbox. Seine Besonderheit ist,
dass Sie hierbei auch komplett auf
<style>
#wrapper{box-sizing:border-box; Größenangaben verzichten können,
position:absolute; also auch auf die in den letzten Kapiteln
top:0%;left:0%;
bei position und float verwendeten
width:100%;height:100%;
margin:0px;padding:0px; prozentualen Angaben.
} Stattdessen werden die als Flex-
main {height:90%;}
nav {float:left;
Items bezeichneten Blockelemente in
width:20%; height:90%;} einen sogenannten Flex-Container plat-
aside {float:right; ziert. Ihre Anordnung kann wahlweise
width:20%; height:90%;}
footer {clear:both;}
spalten- oder zeilenweise sein. Ein Flex-
</style> Container passt sich samt Inhalt an den
... zur Verfügung stehenden Platz an – er
<div id=“wrapper“>
<nav>Navigation</nav> ist also bereits dynamisch veränderlich.
<aside>Nebenbereich</aside> Jedem Flex-Item kann über die
<main>Hauptbereich</main> Eigenschaft flex-grow eine ganze Zahl
<footer>Fußzeile</footer>
</div> zugewiesen werden, die angibt, wie
stark sich das Blockelement verändern

71
 darf: Dabei steht die 0 für unveränder- Flexible Boxen
lich, 1 für etwas veränderlich, 2 für noch Flex-Container definieren
stärker veränderlich usw.
display: flex;
Das Konzept wird besser verständ-
lich, wenn Sie das einfache Anwen- Anordnung der Flex-Items
dungsbeispiel betrachten: Im Flex-Con- flex-direction: row; in Reihe
tainer wurde durch flex-direction flex-direction: column; in Spalten
festgelegt, dass die Flex-Items in einer Reihenfolge der Flex-Items
Reihe (row) angeordnet werden. Die order: n;
drei Flex-Items unterscheiden sich Hinweis:
flex dadurch, dass ihnen über flex ein Bei n handelt es sich um eine ganze Zahl, wobei 1 für
unterschiedliches Ausdehnungsverhal- ganz oben bzw. ganz links steht.
Das flex-Attribut
fasst genau genom- ten zugewiesen wurde: Box 1 verändert Ausdehnungsverhalten der Flex-Items
men drei Eigenschaf-
sich nicht (flex:0) A, Box 2 dehnt sich flex: n;
ten zusammen:
ƒƒ flex-grow doppelt so stark aus (flex:2) B wie Hinweis:
ƒƒ flex-shrink Box 3 (flex:1) C. Die Anpassung an n ist eine ganze Zahl, wobei 0 für unveränderlich, 1
ƒƒ flex-basis unterschiedliche Display- oder Fenster- für leicht veränderlich, 2 für stärker veränderlich usw.
Wir gehen hierauf im steht (siehe auch Randbemerkung).
Rahmen dieser Ab-
größen erfolgt somit ohne prozentuale
Angaben. Beispiel
handlung nicht ein.
Das Attribut order bestimmt die <style>
Reihenfolge, in der die Flex-Items #wrapper /*siehe Seite 71*/
#flex-container{width:100%;
angezeigt werden. Die Boxen werden height:100%;
in der Reihenfolge Box 1, Box 2, Box 3 display: flex;
flex-direction:row;}
angezeigt, obwohl sie im Quellcode in
#flex-item1 {order:1; flex:0;}
umgekehrter Reihenfolge platziert sind. #flex-item2 {order:2; flex:2;}
Der Screenshot rechts unten zeigt #flex-item3 {order:3; flex:1;}
</style>
das Ergebnis, wenn flex-direction ...
von column auf row, also von Spalten <div id=“wrapper“>
auf Reihen, geändert wird. <div id=“flex-container“>
<div id=“flex-item3“>Box 3</div>
<div id=“flex-item2“>Box 2</div>
<div id=“flex-item1“>Box 1</div>
</div>
</div>

A B C

A B C

72
 CSS3

Bisher haben wir uns ausschließlich mit Textüberlauf

der Frage beschäftigt, wie sich (leere)
overflow: auto; browserabhängig A
Blockelemente im Layout platzieren overflow: scroll; Scrollbalken B
lassen. Dabei haben wir das Ziel ver- overflow: visible; Inhalt ragt aus dem
folgt, dass sie sich möglichst gut an die Element heraus C
unterschiedlichen Endgeräte anpassen. overflow: hidden; Inhalt wird abgeschnitten D

Das Flexbox-Konzept erweist sich hier

als vielversprechend.
Nun wirken sich dynamisch verän-
derliche Layouts natürlich auch auf den
Content aus, also auf Texte, Tabellen, A B C D
Bilder, Grafiken usw. Als Webdesigner/
-in müssen Sie sich von der Idee verab-
schieden, diese Inhalte wie bei Print-
medien nach typografischen Regeln
optimieren zu können. Dies ist im Web
in dieser Form nicht möglich, was zum
einen daran liegt, dass sich Layout und
damit auch Content an das jeweilige
Endgerät anpassen müssen. Ein fester Bei mobilen Endgeräten wie Tablets
Textumbruch ist somit nicht möglich. oder Smartphones sind in den Fällen A
Zum anderen gibt es aber auch und B keine Scrollbalken sichtbar, weil
Einschränkungen, die daher rühren, hier das Scrollen durch eine vertikale
dass Webbrowser nicht zwingend alle Wischbewegung mit dem Finger ersetzt
CSS3-Eigenschaften unterstützen. Ein wird.
Beispiel ist, dass derzeit (noch) nicht
alle Webbrowser eine automatische 2.7.6 Block- und Inline-Elemente
Silbentrennung ermöglichen (mehr
hierzu finden Sie in Abschnitt 2.7.7 auf In den letzten Abschnitten war immer
der nächsten Seite). wieder von Blockelementen die Rede,
die sich als Rahmen (Box) beschreiben
2.7.5 Textüberlauf lassen. Beispiele für Blockelemente
sind Tags zur Dokumentstruktur wie
In ihrer Größe veränderliche Blocke- <header>, <main>, <article>, <nav>,
lemente haben zur Folge, dass ein – <footer> und Tags zur Textstruktur wie
unveränderlicher – Text nicht in den zur <h1>, <p>, <li>, <table> und <div>.
Verfügung stehenden Platz passt. Ohne Bei der zweiten Gruppe von HTML-
zusätzliche Angabe wird immer nur so Elementen handelt es sich um soge-
viel Text angezeigt, wie in das Block- nannte Inline-Elemente, also Elemente,
element passt, der restliche Text wird die sich innerhalb von Blockelementen
abgeschnitten. befinden. Beispiele sind <body>, <a>,
Mit der CSS3-Eigenschaft over- <b>, <i>, <img>, <input> und <span>.
flow können Sie diese unerwünschte Inline-Elemente sind dadurch ge-
Darstellung verhindern. Hierbei werden kennzeichnet, dass sie sich in den Text-
folgende vier Möglichkeiten unterschie- fluss integrieren, ohne einen Zeilenum-
den: bruch oder Abstand zu erzeugen.

73
 Manchmal ist es gewünscht, dass sich
ein Blockelement wie ein Inline-Element
verhält – oder umgekehrt. Zu diesem
Zweck dient die CSS-Eigenschaft dis-
play, die Sie im vorherigen Abschnitt
bereits zur Definition von Flexboxen
kennengelernt haben.
A
Umwandlung Blockelement – Inline-Element
display: block; Blockelement
display: inline; Inline-Element
display: inline-block; Kombination
display: none; ohne Anzeige
B
Beispiel
...
1 <style>
2 a {border: 1px solid black;
3 width:60px;
4 height:40px;
5 }
6 #i {display:inline; C
7 }
8 #b {display:block;
9 }
10 #ib {display:inline-block;
11 }
12 </style>
13 ...
B Blockelement
14 <h3>Blockelemente</h3> Zeile 8 bewirkt, dass die Links nun
15 <a id=“i“ href=“#“>Wer?</a> als Blockelemente behandelt werden.
16 <a id=“i“ href=“#“>Wie?</a>
17 <a id=“i“ href=“#“>Was?</a>
Sie werden untereinander dargestellt
18 <h3>Blockelemente</h3> und erhalten die in den Zeilen 3 und
19 <a id=“b“ href=“#“>Wer?</a> 4 angegebenen Maße.
20 <a id=“b“ href=“#“>Wie?</a>
21 <a id=“b“ href=“#“>Was?</a> C Inline-Blockelement
22 <h3>Inline-Blockelemente</h3> Zeile 10 erzeugt ein Inline-Element,
23 <a id=“ib“ href=“#“>Wer?</a> das sich wie ein Blockelement forma-
24 <a id=“ib“ href=“#“>Wie?</a>
25 <a id=“ib“ href=“#“>Was?</a> tieren lässt, aber im Textfluss bleibt.

2.7.7 Silbentrennung
Auch diese Eigenschaft lässt sich besser
anhand eines Beispiels verdeutlichen: Eine aus typografischer Sicht große
A Inline-Element Einschränkung von HTML5 besteht in
Wie erwähnt handelt es sich bei <a> der fehlenden Möglichkeit der auto-
um ein Inline-Element. Zeile 6 kann matischen Silbentrennung, wie wir sie
deshalb auch entfallen. Inline-Ele- von Word oder InDesign schon lange
mente werden ohne Zeilenumbruch kennen.
nacheinander dargestellt, die Angabe Mit CSS3 wurde nun mit der Eigen-
der Breite und Höhe (Zeilen 3 und 4) schaft hyphens die Möglichkeit zur
wird ignoriert. Silbentrennung geschaffen. Derzeit

74
 CSS3

Silbentrennung Browser Opera Mini und der Android-

Browser.
-ms-hyphens: auto;
hyphens: auto; Für die Microsoft-Browser Inter-
net Explorer und Edge funktioniert
Beispiel ­hyphens, wenn Sie -ms- voranstellen.
<!doctype html> Geben Sie diese Zeile im Quellcode
<html lang=“de“> einfach zusätzlich an.
...
<style> Beachten Sie unbedingt, dass im
p {width:150px; <html>-Tag über das lang-Attribut
border: 1px solid black;
die Sprache angegeben werden muss.
padding:5px;
} Andernfalls ist nicht klar, welche Trenn-
regeln anzuwenden sind.
#trennung{
-ms-hyphens: auto;
hyphens: auto;
}
</style>
...
<p>Hier ein Absatz, um auszutesten,
wie die Silbentrennung funktioniert.
</p>
<p id=“trennung“>Hier ein Absatz, um
auszutesten, wie die Silbentrennung
funktioniert.
</p>
...

(Stand: 2017) funktioniert diese noch

nicht mit allen Browsern.
Wie Sie bei [Link] überprüfen
können, fehlen momentan noch die
Silbentrennung
Der Screenshot zeigt,
dass die Silbentren-
nung mittlerweile
durch fast alle Brow-
ser unterstützt wird
(Stand: 2017).

75
 2.8 Media Queries

In den vorherigen Abschnitten haben Medienspezifische CSS3-Dateien

Sie die Möglichkeiten kennengelernt, <link>-Element
wie sich Layouts dynamisch gestalten
<!DOCTYPE HTML>
lassen, um eine Anpassung an das <html>
jeweilige Endgerät zu ermöglichen. <head>
Nun reichen diese Möglichkeiten <link rel=“stylesheet“
media=“screen“ href=“[Link]“>
noch nicht aus, um die sehr große <link rel=“stylesheet“
Bandbreite an Endgeräten vom klei- media=“print“ href=“[Link]“>
</head>
nen Smartphone im Hochformat bis
...
zum großen 4K-Monitor optimal zu
bedienen. Während im ersten Fall Text @import-Direktive
einspaltig sein muss, ist im zweiten Fall <!DOCTYPE HTML>
eine drei- oder vielleicht sogar vierspal- <html>
<head>
tige Darstellung deutlich besser. Um <style>
dies zu erreichen, brauchen wir also die @import url(“[Link]“) screen;
@import url(“[Link]“) print;
Möglichkeit, das Layout in Abhängigkeit
</style>
vom Endgerät zu verändern. </head>
An dieser Stelle kommen die mit ...
CSS3 neu eingeführten Media Queries
Übersicht der Medientypen (media)
ins Spiel. Mittels Media Queries (frei
übersetzt: Medienabfragen) lassen sich all alle Medien
Layouts erstellen, die an die spezifi­ print Druckausgabe
screen Bildschirmausgabe
schen Eigenschaften der Endgeräte an- speech Sprachausgabe
gepasst sind. Dies betrifft nicht nur die
unterschiedlichen Abmessungen und
Auflösungen der Geräte, sondern auch ment handelt, das im Unterschied zum
die Möglichkeit, Smartphones oder CSS3-Element @import nicht innerhalb
Tablets zu drehen oder mit dem Finger von <style>...</style> stehen darf.
zu bedienen.
Differenzierung innerhalb CSS3-Datei
2.8.1 Medientypen Nicht immer ist es sinnvoll, mit mehre-
ren CSS3-Dateien zu arbeiten. Ge-
Zur Anzeige von Webseiten fallen uns wünschte Änderungen am Layout oder
sofort Monitore, Tablets und Smart- an der Formatierung müssen in allen
phones ein. In den CSS3 sind zwei Dateien nachvollzogen werden und die
weitere Möglichkeiten vorgesehen, zum Gefahr besteht, Änderungen zu über-
einen die Druckausgabe und zum ande- sehen.
ren die Sprachausgabe. Aus diesem Grund sehen die Media
Queries vor, dass auch innerhalb von
Medienspezifische CSS3-Dateien Stylesheets mit @media zwischen
Stylesheets werden üblicherweise in se- unterschiedlichen Ausgabegeräten
paraten Dateien gespeichert. Um diese differenziert werden kann. Im Beispiel
in den HTML5-Quellcode einzubinden, auf der nächsten Seite oben ändert sich
können Sie wahlweise <link> oder @ die Schrift, Schriftgröße und -farbe in
import verwenden. Beachten Sie, dass Abhängigkeit von der Bildschirm- bzw.
es sich bei <link> um ein HTML5-Ele- Druckausgabe.

76
 CSS3

Differenzierung innerhalb CSS3-Datei Medieneigenschaften

@media-Direktive Übersicht (nicht vollständig)
<style> width Anzeigebreite in px
@media screen{ height Anzeigehöhe in px
body {font-family:“Segoe UI“; device-width Bildschirmbreite in px
font-size:1.5em; device-height Bildschirmhöhe in px
color:black;} orientation Ausrichtung: waagrecht
}
(landscape) oder senk-
recht (portrait)
@media print{
body {font-family:“Times New Roman“; resolution Auflösung in dpi, dpcm
font-size:10pt; aspect-ratio Anzeigebreite zu -höhe
color:black;} z. B. 16/9
} device-aspect-ratio Bildschirmbreite zu -höhe
</style> z. B. 16/9

Allen Eigenschaften außer orientation kann

min- oder max- vorangestellt werden:
2.8.2 Medieneigenschaften (min-width:960px)
(max-height:480px)
Da sämtliche Geräte mit Display vom (max-resolution:96dpi)
Medientyp screen sind, ist eine
weitere Differenzierung erforderlich. Beispiele
Hierzu werden Eigenschaften wie die Unterscheidung nach Anzeigebreite
Gerätebreite (device-width), -höhe @media screen and (min-width:960px){
(device-height), die Auflösung (re- /*breite Anzeige*/
}
solution) oder die Ausrichtung (ori- @media screen and (min-width:480px)
entation) im Quer- oder Hochformat and (max-width:960px){
/*mittlere Anzeige*/
herangezogen.
}
Den meisten Eigenschaften können @media screen and (max-width:480px){
Sie zusätzlich die Attribute min- oder /*schmale Anzeige*/
}
max- voranstellen, so dass beispiels-
weise eine Mindestbreite abgefragt Unterscheidung nach Ausrichtung
werden kann. Bei orientation ergibt @media screen and (orientation:
dies keinen Sinn. landscape){
Medientyp und -eigenschaft lassen /*waagerecht*/
}
sich nun mit Hilfe von Schlüsselwörtern @media screen and (orientation:
kombinieren: portrait){
/*senkrecht*/
ƒƒ and
}
Logisches UND, d. h., sowohl die eine
Unterscheidung nach Gerätebreite und Auflösung
als auch die andere Bedingung muss
erfüllt sein. @media screen and (min-device-
width:960px) and (max-resolution:
ƒƒ or 150ppi){
Logisches ODER, d. h., entweder die /*Monitor*/
}
eine oder die andere oder beide Be-
@media screen and (min-device-
dingungen müssen erfüllt sein. width:480px) and (min-resolution:
ƒƒ not 150ppi) {
/*Smartphone, Tablet*/
Logisches NICHT, d. h., die Bedingung }
darf nicht erfüllt sein.

77
 2.8.3 Anwendungsbeispiel Beispiel
1 <style>
Das Beispiel zeigt, wie Sie mit Hilfe 2 #wrapper /*siehe Seite 71*/
von Flexboxen und Media Queries in 3 @media screen and (min-width:800px){
Abhängigkeit von der Bildschirmbreite 4 #container {height:90%;
5 display: flex;
eine unterschiedliche Anordnung der 6 flex-direction:row;}
Blockelemente erreichen können. Dabei 7 nav#waag {display:none;}
8 nav#senk {order:1; flex:1;}
werden drei Fälle unterschieden:
9 }
A Die Displaybreite beträgt mind. 800 10 @media screen and (min-width:500px)
px (Zeile 3): Die Flexboxen werden 11 and (max-width:800px){
12 #container {height:85%;
in der Reihe angeordnet (Zeile 6) 13 display: flex;
und die waagrechte Navigation wird 14 flex-direction:row;}
ausgeblendet (Zeile 7). 15 nav#waag {height:30px;}
16 nav#senk {display:none;}
B Die Displaybreite liegt zwischen 17 }
500 und 800 px (Zeile 10/11): Auch 18 @media screen and (max-width:500px){
in diesem Fall werden die Flexbo- 19 #container {height:85%;
20 display: flex;
xen in Reihe angeordnet (Zeile 14), 21 flex-direction:column;}
allerdings sind es nur zwei, weil der 22 nav#waag {height:30px;}
senkrechte Navigationsblock ausge­ 23 nav#senk {display:none;}
24 }
blendet wird (Zeile 16). 25 main {order:2; flex:2;}
C Die Displaybreite beträgt maximal 26 aside {order:3; flex:1;}
500 px: Nun werden die Flexboxen 27 footer {height:30px;}
28 </style>
in einer Spalte angeordnet (Zeile 21) 29 ...
und die senkrechte Navigation wird 30 <div id=“wrapper“>
wieder ausgeblendet (Zeile 23). 31 <nav id=“waag“>Navigation</nav>
32 <div id=“container“>
Sie erkennen an diesem Beispiel, dass 33 <main>Hauptbereich</main>
es relativ einfach ist, ein veränderliches 34 <nav id=“senk“>Navigation</nav>
35 <aside>Nebenbereich</aside>
Layout zu generieren. Auf die Anpas-
36 </div>
sung an mobile Endgeräte gehen wir 37 <footer>Fußzeile</footer>
im abschließenden Beispiel ab Seite 85 38 </div>
39 ...
ein.

A B C

78
2.9 Animation CSS3

Vor CSS3 wurden Animationen meis­ Definition

tens mit Flash erstellt. Dabei handelte Definition mit Start- und Endpunkt
es sich um eine sogenannte proprietäre
@keyframes move{
Software, was bedeutet, dass sie in from{...} Startpunkt
Besitz einer Firma, hier: Adobe, ist. Dies to{...} Endpunkt
war dem legendären Apple-Chef Steve }
Jobs stets ein Dorn im Auge, so dass Hinweis:
er sich weigerte, das zum Abspielen move ist eine beliebige Bezeichnung der Animation.
erforderliche Flash-Plug-in in seinem Definition mit beliebig vielen Zwischenpunkten
Betriebssystem iOS einzusetzen.
@keyframes move{
Mittlerweile ist der Flash-Nachfolger 0%{...} Startpunkt
Animate CC auf dem Markt, der auf 25%{...} Zwischenpunkt
die quelloffenen Standards Canvas ...
100%{...} Endpunkt
und JavaScript setzt (siehe Seite 26), }
wodurch wieder alle Betriebssysteme
erreicht werden. Adobe dürfte damit
seine marktbeherrschende Stellung mal Lineare Bewegung
wieder gestärkt haben. Betrachten Sie hierzu das Beispiel einer
Einfache Animationen sind alterna- linear verlaufenden Animation:
tiv auch mit CSS3 möglich. Wir zeigen
Ihnen in diesem Kapitel einige grundle- Lineare Animation (Beispiel)
gende Möglichkeiten auf.
1 ...
2 <style>
2.9.1 Keyframe-Animation 3
4
@keyframes bewegung{
from {top:0px;
5 left:0px;}
Die Grundidee dieser Animation ist 6 to {top:0px;
einfach: Man definiert zunächst die 7 left:400px;}
8 }
Startposition eines Objekts, danach die
9 #box {position:absolute;
gewünschte Endposition. Die beiden 10 width:100px;
Positionen werden als Schlüsselbilder 11 height:100px;
12 background-color:#F00;
(engl.: keyframes) bezeichnet, weshalb 13 animation-name: bewegung;
diese Animationstechnik auch Key- 14 animation-duration: 2s;
frame-Animation genannt wird. 15 top:0px;
16 left:400px;
Gibt man die Dauer der Animation 17 }
vor, kann der Computer alle Bilder 18 </style>
zwischen den beiden Schlüsselbildern 19 ...
20 <div id=“box“></div>
berechnen und auf dem Bildschirm 21 ...
anzeigen. Für den Betrachter ergibt sich
ein scheinbar fließender Übergang.
Keyframe-Animationen mit CSS3 ƒƒ Zeilen 3 bis 8:
werden mit Hilfe der @keyframes-­Regel Nach @keyframes folgt der frei wähl-
erstellt. Hierbei können Sie wählen, ob bare Name der Animation, hier be-
die Animation vom Start- zum Endpunkt wegung. Die Startposi­tion wird durch
linear, also geradlinig, verlaufen soll, from{...} angegeben, hier 0 px.
oder ob es zusätzliche Zwischenpunkte Die Endposition wird entsprechend
geben soll. durch to{...} definiert, hier 400 px.

79
 ƒƒ Zeilen 13/14: weitere Schlüsselbilder. Die Grafik zeigt
Diese Zeilen rufen die Animation mit eine derartige Animation mit neun
ihrem Namen (hier: bewegung) auf Schlüsselbildern (rote Punkte). Die
und legen die Dauer (hier: 2 s) fest. erforderlichen Koordinaten lassen sich
ƒƒ Zeilen 15/16: beispielsweise ermitteln, indem Sie die
Die Angaben entsprechen dem Kurve auf Millimeterpapier aufzeichnen.
Endzustand der Animation. Sie sind Alternativ können Sie auch Illustrator
erforderlich, weil sonst die Anzeige verwenden, um die Koordinaten zu
nach der Animation wieder auf den ermitteln.
Anfangszustand zurückspringt. Genau genommen handelt es sich
Die animierte Box steht hier nur stell- auch bei neun Schlüsselbildern um
vertretend für einen beliebigen Inhalt, keine „echte“ Kurve, weil die Abschnitte
den Sie im <div>-Element platzieren zwischen zwei Punkten wieder linear
können. Auf diese Weise ist beispiels- berechnet werden (rote Linie). Durch
weise eine Laufschrift oder animierte Einfügen weiterer Schlüsselbilder, zum
Bildfolge möglich. Beispiel bei horizontal 25 und 375 Pi-
xeln ließe sich das Ergebnis verbessern.
Kurvenförmige Bewegung Aber das Auge lässt sich auch ganz
Mit zwei Schlüsselbildern sind aus- gut täuschen, vor allem bei schnellen
schließlich geradlinige (lineare) Bewe- Bewegungen.
gungen möglich. Wenn Sie eine Bewe- Bei der Umsetzung mit CSS3 erset-
gung entlang einer beliebigen Kurve zen Sie einfach die Angaben from{}
realisieren wollen, dann brauchen Sie und to{} durch Prozentangaben.

50 100 150 200 250 300 350 400 450 500

50
100
150
200

80
 CSS3

Kurvenförmige Animation (Beispiel) 2.9.2 Animationseigenschaften

1 ...
2 <style> In der Tabelle finden Sie alle Eigenschaf-
3 @keyframes kurve{ ten von Keyframe-Animationen in der
4 0% {top:0px; left:0px;} Zusammenfassung:
5 20% {top:105px; left:50px;}
6 30% {top:130px; left:100px;}
7 40% {top:145px; left:150px;} Eigenschaften
8 50% {top:150px; left:200px;} Aufruf der Animation
9 60% {top:145px; left:250px;}
10 70% {top:130px; left:300px;} animation-name: move;
11 80% {top:105px; left:350px;}
Hinweis:
12 100% {top:0px; left:400px;}
13 } move ist der in der Definition vergebene Name der
14 #box {position:absolute; Animation.
15 width:100px;
Dauer der Animation (in Sekunden)
16 height:100px;
17 background-color:#F00; animation-duration: 2s;
18 animation-name: kurve;
19 animation-duration: 2s; Anzahl der Wiederholungen
20 animation-timing-function:
21 linear; Anzahl Wiederholungen als Zahl:
22 top:0px; animation-iteration-count: 2;
23 left:400px;
Endlose Wiederholung:
24 }
animation-iteration-count: infinite;
25 </style>
26 ... Richtung der Animation
27 <div id=“box“></div>
28 ... Normale Richtung (Default):
animation-direction: normal;

Umgekehrte Richtung:
ƒƒ Zeilen 4 bis 12: animation-direction: reverse;
Die Prozentangaben sollten in etwa
Abwechselnd (bei Wiederholung):
mit den Teilstrecken übereinstimmen, animation-direction: alternate;
damit für eine längere Strecke auch
mehr Zeit zur Verfügung steht. Da die Art der Bewegung
erste und letzte Strecke länger ist als Verzögerung am Anfang und Ende (Default):
die restlichen, sehen wir hierfür je animation-timing-function: ease;
20 % der Zeit vor und für die übrigen Verzögerung am Ende:
Strecken je 10 %. Die Werte für top animation-timing-function: ease-out;
und left entstammen der Grafik auf Verzögerung am Anfang:
der linken Seite. animation-timing-function: ease-in;
ƒƒ Zeilen 20/21: Gleichförmige Bewegung:
Beim Abspielen stellen Sie fest, dass animation-timing-function: linear;
die Animation ruckelig abläuft. Dies Anhalten der Animation
liegt daran, dass ein Objekt stan-
Animation läuft (Default):
dardmäßig nach einem Schlüsselbild animation-play-state: running;
beschleunigt und vor einem Schlüs-
Animation stoppen:
selbild abgebremst wird. Diese Ei- animation-play-state: paused;
genschaft heißt animation-timing-
function und kann auf linear Verzögerter Beginn der Animation
gesetzt werden, um eine gleichmä- animation-delay: 10s;
ßige Bewegung zu erhalten.

81
 2.9.3 Transformationen 2D-Transformationen (Beispiel)
1 ...
2D-Transformation 2 <style>
Mit CSS3 können Sie Objekte auch 3 @keyframes skalieren{
transformieren, also in ihrem Aussehen 4 from {transform:scale(1.0,1.0)}
5 to {transform:scale(2.0)}
verändern. Die wichtigsten Transforma- 6 }
tionen sind: 7 #box1{position:absolute;
8 width:50px; height:50px;
ƒƒ Skalieren A
9 top:50px; left:125px;
ƒƒ Rotieren B 10 background-color:#F00;
ƒƒ Neigen C 11 transform:scale(2.0,2.0);
12 animation-name:skalieren;
Das Beispiel zeigt eine Vergrößerung 13 animation-duration:1s;
um Faktor 2, eine Drehung im Uhrzei- 14 }
gersinn um 45 ° sowie eine Neigung um 15 @keyframes drehen {
16 from {transform:rotate(0deg)}
20° horizontal und 10° vertikal. 17 to {transform:rotate(45deg)}
18 }
2D-Animationen 19 #box2{position:absolute;
20 width:100px; height:100px;
Mit CSS3 können Sie 21 top:200px; left:100px;
Grafiken skalieren, 22 background-color:#F00;
drehen oder verzer- 23 transform:rotate(45deg);
ren. A 24 animation-name:drehen;
25 animation-duration:1s;
26 }
27 @keyframes neigen{
28 from{transform:skewX(0deg)
29 skewY(0deg)}
30 to {transform:skewX(-20deg)
31 skewY(-10deg)}
32 }
33 #box3{position:absolute;
B 34 width:100px; height:100px;
35 top:400px; left:100px;
36 background-color:#F00;
37 transform:skewX(20deg)
38 skewY(10deg);
39 animation-name:neigen;
45° 40 animation-duration:1s;
41 }
42 </style>
43 ...
44 <div id=“box1“></div>
45 <div id=“box2“></div>
46 <div id=“box3“></div>
C 47 ...

10°

ƒƒ Zeile 4/5:
Die Werte in der Klammer geben
den Multiplikator in horizontaler und
vertikaler Richtung an. Die Angabe
20°
2.0 führt also zu einer Verdopplung
der Größe, 0.5 würde eine Halbierung

82
 CSS3

bewirken. Bei proportionaler Vergrö-

ßerung genügt auch die Angabe eines
Wertes: transform:scale(2.0).
ƒƒ Zeile 16/17:
X
In Klammer wird der Drehwinkel in Z

in Grad (deg) angegeben. Negative

Werte bewirken eine Drehung gegen
den Uhrzeigersinn. Y
ƒƒ Zeile 30/31:
Die Neigung kann in horizontaler
(X-)Richtung und/oder vertikaler (Y-) 3D-Animationen
Richtung erfolgen. Sie wird in Grad Mit CSS3 sind beein-
angegeben; negative Werte ändern druckende 3D-Anima-
die Neigungsrichtung. tionen möglich.

3D-Transformation
Mit CSS3 können Sie auch dreidimen-
sionale Transformationen erzeugen.
Hierzu hängen Sie an rotate die
Bezeichnung der Achse an, um die sich
das Objekt drehen soll, also rotateX,
rotateY oder rotateZ.

3D-Rotation (Beispiel) Farb- oder Transparenz-Transformation

Auch mit Farben oder Transparenzen
1 ...
2 <style> lassen sich schöne Effekte erzielen. Vor
3 @keyframes drehen{ allem in Kombination mit Skalieren
4 from {transform:rotateY(0deg);} entsteht räumliche Tiefe – das Objekt
5 to{transform:rotateY(60deg);}
6 } scheint sich von hinten nach vorne
7 #box{ (oder umgekehrt) zu bewegen.
8 position:absolute;
9 width:100px; height:80px;
10 top:0px;left:100px; Farbe und Transparenz (Beispiel)
11 padding-top:20px;
12 background-color:#999; 1 ...
13 animation-name:drehen; 2 <style>
14 animation-duration:5s; 3 @keyframes einblenden {
15 transform:rotateY(60deg); 4 from {color:rgba(255,0,0,0);
16 } 5 transform:scale(0.2)}
17 </style> 6 to {color:rgba(255,0,0,1);
18 ... 7 transform:scale(1)}
19 <div id=“box“>3D</div> 8 }
20 ... 9 h2 {text-align:center;
10 color:rgba(255,0,0,1);
11 animation-name:einblenden;
12 animation-duration:3s;
13 }
Eine Kombination ist möglich, so 14 </style>
dass Sie beispielsweise transform: 15 ...
16 <h2>Herzlich willkommen!</h2>
rotateY(30deg) rotateX(90deg) 17 ...
rotateZ(45deg) schreiben können.

83
 Das Beispiel zeigt die Animation eines 23). Bei der Wiederholung ändert sich
Schriftzugs, der einerseits skaliert wird, durch alternate die Richtung (Zeile
andererseits seine Farbe von transpa- 24/25).
rent in Rot ändert.
Animation von Pseudoklassen (Beispiel)
1 ...
2 <style>
3 @keyframes button{
4 from{transform:scale(1);
5 background-color:silver;}
6 to {transform:scale(1.5);
7 background-color:red;}
8 }
9 a {
10 text-decoration:none;
11 text-align:center;
12 padding:10px;
13 background-color:silver;
14 color: black;
15 display:inline-block;
16 width:100px;
17 }
18 a:hover{
19 background-color:red;
20 color:white;
21 animation-name: button;
22 animation-duration:0.5s;
23 animation-iteration-count:2;
24 animation-direction:
25 alternate;
26 }
27 </style>
28 ...
29 <a href=“#“>Kontakt</a>
2.9.4 Animation von Pseudoklassen 30
31
<a href=“#“>Impressum</a>
<a href=“#“>Neu</a>
32 ...
Animationen können auch dazu dienen,
dem User eine Rückmeldung zu geben,
wo er sich gerade mit der Maus befin-
det. Um die Position der Maus abzufra-
gen, sehen die CSS3 die sogenannten
Pseudoklassen vor, die wir auf Seite 52
vorgestellt haben. Diese Klassen lassen
sich zur Animation nutzen.
Das Beispiel realisiert eine Anima-
tion, bei der sich ein mit der Maus
berührter Button auf 150 % vergrößert
und seine Farbe in Rot ändert. Danach
verkleinert er sich wieder auf Ausgangs-
größe, bleibt aber Rot, solange sich die
Maus auf der Schaltfläche befindet. Die-
ser Effekt wird dadurch erreicht, dass
die Animation zweimal abläuft (Zeile

84
2.10 Responsive Webdesign CSS3

Die Forderung dieser Zeit lautet Res­ 2.10.1 Briefing

ponsive Webdesign. In dem Begriff
Webdesign
steckt das englische Wort response, also Aufgabe ist die Erstellung einer Web-
„Antwort“ oder „Reaktion“. Ein respon- site, die in folgende inhaltliche Bereiche
sives Design muss also reagieren, und gegliedert ist (vgl. Grafik auf der nächs­
zwar auf das Endgerät, mit dem es be- ten Seite):
trachtet wird. Die Zeiten starrer, unver- ƒƒ Header für Name, Logo usw.
änderlicher Webseiten sind vorbei! ƒƒ Navigationsleiste
Wir haben in den vergangenen Kapi- ƒƒ Content für Texte, Bilder usw.
teln immer wieder auf die Bedingungen ƒƒ Footer für Impressum, AGB usw.
hingewiesen, die an responsives Ziel ist die Anpassung des Layouts an
­Design gestellt werden: folgende Gegebenheiten:

Responsive Webdesign Tablets/Smartphones

Relative Maßeinheiten An das Layout für mobile Endge-
Schriftangaben erfolgen nicht absolut in Pixel, son- räte werden – wegen der geringeren
dern relativ in Bezug auf die Grundschrift des Gerätes
Displaybreite – folgende Forderungen
bzw. Browsers.
gestellt:
Liquid Layout ƒƒ Das Layout soll im Hochformat ein-
Der Content, also Texte, Bilder, Grafiken, muss sich spaltig und im Querformat zweispal-
dynamisch an den zur Verfügung stehenden Platz
anpassen. Man spricht auch von einem flüssigen oder
tik angezeigt werden.
liquid Layout. ƒƒ Die Navigation muss für die Bedie-
nung mit dem Finger geeignet sein.
Adapatives Layout
ƒƒ Der Navigationsbereich befindet sich
Layouts verändern sich in Abhängigkeit von der
Geräte- oder Fenstergröße. Sie passen sich darüber am unteren Displayrand und bleibt
hinaus an die Geräteeigenschaften an, z. B. an auch dann sichtbar, wenn der Con-
hochauflösende Displays neuerer Tablets oder tent durch Wischen mit dem Finger
Smartphones.
bewegt wird.
Mobile First ƒƒ Auf einen Footer wird verzichtet.
Die Mehrheit der User geht mittlerweile mit mobilen
Endgeräten ins Internet. Eine häufige Forderung lautet Monitore
deshalb Mobile First. Das heißt, dass ein Layout vor
allem mit mobilen Endgeräten funktionieren sollte.
Das Layout soll im sichtbaren Bereich
Im zweiten Schritt erfolgt dann die Anpassung an des Browserfensters, dem sogenannten
größere, stationäre Displays. Viewport, maximal zweispaltig sein und
mittig ausgerichtet werden. Es passt
sich an die Breite des Displays an:
Die Umsetzung dieser Forderungen ist ƒƒ Bei Vergrößerung sind ab einer
keine leichte Aufgabe. In dieser Einfüh- bestimmten Breite links und rechts
rung ist es unmöglich, auf alle Beson- Ränder zu sehen.
derheiten einzugehen, die sich u. a. aus ƒƒ Bei Verkleinerung des Fensters
der Vielzahl an Geräten ergeben. wird die senkrechte Navigations-
An einem einführenden Beispiel leiste waagrecht über dem Content
zeigen wir Ihnen die grundsätzliche Vor- platziert, das Layout bleibt hierbei
gehensweise beim responsiven Web- zweispaltig.
design. Die Übertragung auf andere ƒƒ Bei weiterer Verkleinerung des Fens­
Projekte sollte damit möglich werden. ters wird das Layout einspaltig.

85
Flexibles Layout
Die Grafiken zeigen,
wie sich das Layout
an die Größe des
Browserfensters bzw.
an das jeweilige End-
gerät anpassen soll.

Header
Navigation
Content
Footer
Background
Browser

86
 CSS3

2.10.2 Vorbereitung [Link]

1 <!DOCTYPE HTML>
Um die Übung durchführen zu können, 2 <html>
benötigen Sie einige Testbilder, die Sie 3 <head>
z. B. unter [Link] 4 <meta charset=utf-8“>
5 <title>Responsive Webdesign</title>
[Link] generieren und herunterladen 6 <!--Webfont-->
können. Alternativ können Sie natürlich 7 <link href=“[Link]
auch eigenen Aufnahmen verwenden. 8 [Link]/css?family=Source+Sans+
9 Pro:200,300,400“ rel=“stylesheet“
Als Text eignet sich Blindtext, den 10 type=“text/css“>
Sie ebenfalls im Internet unter www. 11 <!--Basiseinstellungen-->
12 <link rel=“stylesheet“ media=“screen“
[Link] generieren und
13 href=“CSS/[Link]“>
kopieren können. 14 <!--Mobile Geräte-->
Weiterhin ist es erforderlich, dass 15 <link rel=“stylesheet“ media=“screen“
16 and (max-device-width:1280px)“
Sie Ihre Entwürfe auf unterschiedlichen 17 href=“CSS/[Link]“>
Endgeräten testen. Hierzu brauchen Sie 18 <!--Monitore-->
eine Möglichkeit, Ihre Website auf einen 19 <link rel=“stylesheet“ media=“screen“
20 and (min-device-width:1281px)“
Webserver hochzuladen, damit sie von 21 href=“CSS/[Link]“>
allen internetfähigen Geräten aus auf- 22 </head>
gerufen werden kann. Eine Übersicht 23 <body>
24 <header><h1>...</h1></header>
über Anbieter von Webspace finden Sie 25 <nav class=“waag“>
z. B. unter [Link]. 26 <a class=“waag“ href=“#“>...</a>
27 <a class=“waag“ href=“#“>...</a>
28 ...
2.10.3 HTML5 29 </nav>
30 <div id=“container“>
Das Listing zeigt das Grundgerüst der 31 <nav class=“senk“>
32 <a class=“senk“ href=“#“>...</a>
Website. Auf den Content haben wir 33 <a class=“senk“ href=“#“>...</a>
im Listing verzichtet: Fügen Sie in den 34 ...
<h2>- und <p>-Tags Blindtext ein und 35 </nav>
36 <article>
in den <img>-Tags Testbilder. 37 <img src=“...“>
ƒƒ Zeilen 6–10: 38 h2>...</h2>
39 <p>...</p>
Über das <link>-Tag wird ein
40 </article>
Google-Webfont eingebunden (siehe 41 <article>
Seite 61). 42 <img src=“...“>
43 <h2>...</h2>
ƒƒ Zeilen 11–21: 44 <p>...</p>
Zur Umsetzung der im Briefing be- 45 </article>
schriebenen Möglichkeiten werden 46 </div>
47 <footer></footer>
insgesamt drei CSS3-Dateien verwen- 48 </body>
det. Die Unterscheidung zwischen 49 </html>
mobilen Geräten und Monitoren
erfolgt mittels Media Queries in
Abhängigkeit von der Gerätebreite Möglichkeiten abzudecken. So gibt
(device-width): Bis 1280 Pixel wird es mobile Geräte mit deutlich höhe­
die Datei [Link] geladen, für rer Auflösung. Für diese hochauflö-
größere Breiten die Datei [Link]. senden Displays müssen Sie eine
Diese einfache Unterscheidung reicht weitere Unterscheidung treffen und
nicht aus, um die gesamte Palette an beispielsweise die Auflösung (reso-

87
 lution) oder die Pixeldichte (pixel- [Link]
ratio) hinzuziehen.
1 @charset “utf-8“;
ƒƒ Zeilen 30/46: 2 body {margin:0px;
Dieser „Container“ ist für die Verwen- 3 padding:0px;
dung von Flexboxen erforderlich. 4 background-color:black;
5 font-family:‘Source Sans
ƒƒ Zeilen 25–29 und 31–35: 6 Pro‘,sans-serif;
Die Navigationsleiste ist doppelt 7 font-size:1em;
8 max-width:1280px;
vorhanden, einmal für die waagrechte
9 margin:0 auto;}
und einmal für senkrechte Anzeige. 10 img {width:100%;}
Die jeweils nicht benötigte Version 11 h1 {color:#ddd;
12 font-weight:200;
wird später mittels CSS3 ausgeblen- 13 margin-top:0px;
det. 14 padding-top:20px;
15 padding-left:10px;}
16 h2 {font-weight:300;
2.10.4 CSS3 17 color:#999;
18 padding-left:10%;}
Aus dem Briefing ergeben sich insge- 19 p {font-weight:400;
20 color:#333;
samt fünf unterschiedliche Möglich- 21 padding-left:10%;
keiten: Für mobile Endgeräte muss 22 padding-right:10%;
zwischen senkrechter und waagrechter 23 border-right:1px solid
24 #C0C0C0;}
Ausrichtung unterschieden werden. Für 25 a {font-weight:300;
Monitore ändert sich das Layout abhän- 26 color:#333;
gig von der Fensterbreite dreimal. 27 text-align:left;
28 padding:10px;
Wie Sie im HTML5-Listing gesehen 29 text-decoration:none;}
haben, werden zur Umsetzung drei 30 [Link]{border-right: 1px solid
CSS3-Dateien verwendet. 31 #333;}
32 [Link]{border-bottom: 1px solid
ƒƒ In [Link] werden alle Einstel- 33 #333;}
lungen definiert, die immer gelten. 34 header{background-color: #2e4105;
35 padding-top: 0px;}
ƒƒ [Link] definiert die Besonder-
36 article{flex:1;
heiten für mobile Endgeräte. 37 color:black;
ƒƒ [Link] enthält die Media Queries 38 background-color:#ddd;}
39 footer{background-color:#2e4105;
für Monitore bzw. unterschiedliche 40 height: 30px;}
Fensterbreiten. 41 [Link]{background-color:#d2d2d2;}
42 [Link]{background-color:#d2d2d2;}
Basiseinstellungen
In der CSS3-Datei [Link] werden
alle global gültigen Einstellungen Content oben mittig im Browserfens­
getroffen. Dies betrifft die Schrift, die ter ausgerichtet wird.
Vorder- und Hintergrundfarben, Innen- ƒƒ Zeile 10:
und Außenabstände und Rahmen. Durch die Prozentangabe werden Bil-
ƒƒ Zeile 8: der „flüssig“, passen sich also an den
Durch Angabe einer maximalen Breite zur Verfügung stehenden Platz an.
wird erreicht, dass bei einem noch ƒƒ Zeile 36:
größeren Fenster links und rechts ein Die Angabe macht die article zu
Rand sichtbar wird. Flexboxen. Die erforderlichen Flex-
ƒƒ Zeile 9: Container werden in den beiden
Diese Zeile bewirkt, dass der gesamte anderen CSS3-Dateien definiert.

88
 CSS3

Einstellungen für mobile Endgeräte

Der wesentliche Unterschied zwischen
Monitoren und mobilen Endgeräten
besteht darin, dass diese trotz kleinerer
Abmessungen eine ähnlich hohe Anzahl
an Pixeln besitzen. Die physikalische
Auflösung in ppi (Pixel pro Inch) ist bei
diesen Geräten also deutlich höher.
Dies hat zur Folge, dass sämtliche
Inhalte kleiner dargestellt werden und
z. B. Schriften in für Monitore geeig-
neten Größen auf mobilen Geräten
nicht mehr lesbar wären. Ein weiterer
Unterschied ist, dass mobile Geräte
(meistens) mit dem Finger bedient
werden. Navigationselemente müssen
demnach so groß sein, dass sie ohne
Probleme angetippt werden können.
ƒ Zeile 2/3:
[Link] Die Angabe sorgt dafür, dass die vier
Buttons die gesamte Breite ausfüllen.
1 @charset “utf-8“;
2 [Link] {width:22.5%; Das Inline-Element <a> muss hier-
3 display:inline-block;} zu wie ein Blockelement behandelt
4 header {height:100px;} werden.
5 [Link] {display:none;}
6 [Link] {padding:10px; ƒ Zeile 6–10:
7 width:100%; Die Navigationsleiste wird in diesem
8 position:fixed;
Fall in fester Position (fixed) am un-
9 bottom:0px;
10 left:0px;} teren Rand platziert. Sie bleibt somit
11 auch sichtbar, wenn der Anwender
12 @media screen and (orientation:
13 landscape){
mit dem Finger wischt.
14 #container{ ƒ Zeilen 12–33:
15 display:flex; Mit Hilfe der Media Queries wird
16 flex-direction:row;}
17 h1 {font-size:2.5em;}
zwischen Querformat (landscape)
18 h2 {font-size:2.0em;} und Hochformat (portrait) unter-
19 p {font-size:1.2em;} schieden. Im Hochformat muss die
20 [Link] {font-size:1.5em;}
21 [Link] {height:50px;} Schrift vergrößert werden, damit sie
22 } etwa gleich groß dargestellt wird wie
23 @media screen and (orientation: im Querformat.
24 portrait){
25 #container{
26 display: flex; Einstellungen für Monitore
27 flex-direction:column;} Für die Darstellung auf Monitoren wer-
28 h1 {font-size:3.5em;}
29 h2 {font-size:2.5em;} den durch Media Queries drei Fallunter-
30 p {font-size:1.5em;} scheidungen getroffen, um die Naviga-
31 [Link] {font-size:2.5em;} tionsleiste senkrecht oder waagrecht zu
32 [Link] {height:70px;}
33 } platzieren und die Anzahl an Spalten zu
variieren.

89
 ƒ Zeilen 12–18:
Bei einer Fensterbreite über 800 Pixel
werden die Flexboxen waagrecht
(row) angeordnet. Die waagrechte
Navigationsleiste wird ausgeblendet.
ƒ Zeilen 20–29:
Auch bei einer Fensterbreite zwischen
500 und 799 Pixel werden die Flex-
boxen waagrecht (row) angeordnet.
Die senkrechte Navigationsleiste wird
aus- und die waagrechte (oberhalb
der Flexboxen) eingeblendet.
ƒ Zeilen 31–39:
Bei einer Fensterbreite bis 499 Pixel
wird das Layout einspaltig (column),
die Navigation bleibt waagrecht.

[Link]
1 @charset “utf-8“;
2 h1 {font-size:1.5em;}
3 h2 {font-size:1.2em;}
4 p {font-size:0.9em;}
5 a {font-size:1.1em;}
6 [Link] {width:60px;
7 display:inline-block;}
8 [Link] {width:80px;
9 display:block;}
10 header {height:60px;}
11
12 @media screen and (min-width:800px){
13 #container{
14 display:flex;
15 flex-direction:row;}
16 [Link]{display:none}
17 [Link]{flex:0;}
18 }
19 @media screen and (min-width:500px)
20 and (max-width:799px){
21 #container{
22 display:flex;
23 flex-direction:row;}
24 [Link]{top:60px;
25 width:100%;
26 height:40px;}
27 [Link]{display:none;}
28 }
29 @media screen and (max-width:499px){
30 #container{
ƒ Zeile 7/9: 31 display:flex;
Durch die Unterscheidung zwischen 32 flex-direction:column;}
33 [Link]{top:60px;
inline-block und block wird er-
34 width:100%;
reicht, dass die Links <a> wie Block- 35 height:40px;}
elemente behandelt und waagrecht 36 [Link]{display:none;}
37 }
bzw. senkrecht angeordnet werden.

90
2.11 Aufgaben CSS3

Vorteil von 3:
1 Bedeutung von CSS3 kennen

Zählen Sie drei Gründe auf, weshalb

Webseiten ausschließlich mit CSS3 for-
matiert und gestaltet werden sollen.
1.
3 Kaskadierung verstehen

a. Erklären Sie den Begriff Cascading

(Kaskadie­rung) bei den Cascading
2. Style Sheets.

3.

2 CSS3 definieren

a. Wo können Stylesheets definiert wer-

den? Nennen Sie die drei Möglich- b. Erklären Sie den wesentlichen Vorteil
keiten. der Kaskadierung.
1.

2.

3.

b. Nennen Sie jeweils einen Vorteil für

die unter a. genannten Möglichkeiten
der Definition.
Vorteil von 1:
4 Selektoren kennen

Eine CSS3-Regel besitzt folgende allge-

meine Struktur:
selektor{
eigenschaft1: wert1;
Vorteil von 2: eigenschaft2: wert2;
...}
a. Geben Sie vier Gruppen von Selek-
toren an.
1.

91
 2.

3. 4. Absatz ist , weil

4.
b. Formulieren Sie für jede der unter a.
genannten Gruppen ein Beispiel. 6 Maßeinheiten kennen

5 Rangfolge von Selektoren kennen a. Erklären Sie den Unterschied

zwischen relativen und absoluten
Gegeben ist folgender Quellcode: Maßeinheiten.
<!DOCTYPE HTML>
<html>
<head>
<title>CSS</title>
<style type=“text/css“>
* {color: red;}
.schwarz {color: black;} b. Nennen Sie zwei relative und zwei
#blau {color: blue;} absolute Maßeinheiten.
p {color: silver;}
</style>
Relative Maßeinheiten:
</head>
<body>
<p id=“blau“ class=“schwarz“>
1. Absatz</p>
Absolute Maßeinheiten:
<p id=“blau“
style=“color:green“>
2. Absatz</p> c. Erklären Sie den Vorteil relativer
<p>3. Absatz</p> Maßeinheiten?
<div>4. Absatz</div>
</body>
</html>

In welcher Farbe werden die vier Absät-

ze jeweils angezeigt? Mit Begründung.
1. Absatz ist , weil
7 Farben angeben

Geben Sie die Farbe an:

2. Absatz ist , weil a. #FF0000

b. #999

3. Absatz ist , weil c. #0FF

92
 CSS3

d. rgb(255,255,0) 2.

e. rgb(200,255,200)

f. rgba(0,0,100,0.5)

8 Text gestalten 10 Tabellen gestalten

Nennen Sie die CSS3-Eigenschaften:

a. Schriftart

b. Zeichenabstand

c. Schriftgröße

d. Schriftfarbe

e. Zeilenabstand

f. Unterstreichung
a. Erstellen Sie die im Screenshot
gezeigte Webseite zunächst als reine
g. Erstzeileneinzug HTML5-Datei.
b. Gestalten Sie die Webseite mit Hilfe
von zentralen CSS3:
h. Satzart ƒƒ Hintergrund:
Hintergrundfarbe: weiß
Randabstand: 20 px
ƒƒ Headline:
9 Schriften verwenden Verdana, 1em, fett, #006
ƒƒ Absatz:
Sie wollen eine Schrift verwenden, die Verdana, 0.8em, schwarz
keine Systemschrift ist. Nennen Sie ƒƒ Tabellenzellen (außer Kopfzeile):
zwei Möglichkeiten. Verdana, 0.8em, schwarz
Hintergrundfarbe: #DDF0FF
1. Innenabstand: 10 px
Linie unten: 1px, schwarz
ƒƒ Kopfzeile der Tabelle:
Verdana, 0.8em, weiß
Hintergrundfarbe: #006

93
 11 Layout erstellen 13 CSS3-Boxmodell kennen

Das CSS3-Boxmodell ist von zentraler

Bedeutung für das Layouten von
Webseiten. Geben Sie folgende CSS3-
Eigenschaften an:
Breite:

Höhe:

Hintergrundfarbe:

Rahmenart:

Rahmenstärke:

Rahmenfarbe:

Außenabstand:

14 Wrapper nutzen
Setzen Sie das im Screenshot gezeigte
Layout nach folgenden Vorgaben um: a. Erklären Sie die Funktion eines
ƒƒ Kopf- und Fußzeile: Wrappers.
Höhe: 50 px; Farbe: schwarz
ƒƒ Navigation, Haupt- und Nebenbe-
reich:
Höhe: 500 px; flexible Boxen, Haupt-
bereich doppelt so breit wie äußere
Bereiche, diverse Grautöne
ƒƒ Innenabstände: 10 px
ƒƒ Schrift: Arial, 0.7 em, weiß bzw.
schwarz

12 Flexible Layouts erstellen b. Geben Sie den Quellcode eines

Wrappers an, der dafür sorgt, dass
Erläutern Sie den wesentlichen Vorteil der gesamte Inhalt in einer Box mit
flexibler Layouts im Vergleich zu star- ƒƒ einer Breite von 80% des Browser-
ren, also unveränderlichen Layouts. fensters,
ƒƒ einer Höhe von 500 px,
ƒƒ horizontal zentriert dargestellt
wird.

94
 3.1 Lösungen
3 Anhang

3.1.1 HTML5 3 HTML5-Grundlagen kennen

1 HTML5-Grundlagen kennen a. Der <title> erscheint im „Reiter“

über dem Browserfenster oder in der
Kopfleiste des Webbrowsers.
HTML5-Grundlagen w f b. Damit die Seite auch in Ländern
HTML steht für Hypertext Media Language x
außerhalb des deutschsprachigen
Hypertext bedeutet, dass Text nichtlinear x
Raumes korrekt dargestellt wird.
verbunden werden kann.
c. Flei&szlig;k&auml;rtchen
Die Struktur eines Tags ist: x
d. Groß- und Kleinschreibung unter-
<tag>Inhalt<tag/>
scheiden, keine Leer- und Sonderzei-
HTML5-Dateien sind reine Textdateien. x
chen, keine Umlaute verwenden
Ein WYSIWYG-Webeditor ermöglicht eine x
e. Übung_1.htm
Vorschau auf die Webseiten.
Uebung [Link]
Eine HTML5-Datei beginnt mit der Angabe x
des DOCTYPE.
HTML5-Dateien besitzen die Endung .htm x 4 Begriff „Semantik“ verstehen
oder .html
a. Die semantische Struktur beschreibt
Schriften können in HTML5-Dateien einge- x
die Gliederung und den inhaltlichen
bettet werden.
Aufbau der Webseite, z. B. Kopf-,
Eine HTML5-Datei besteht aus Dateikopf x
Fuß-, Navigationsbereich, Abschnitte,
und Dateikörper.
Überschriften, Tabellen. Diese Struk-
Meta-Tags sind im Browser unsichtbar. x
tur ist unabhängig von der Formatie-
rung und Gestaltung.
2 Aufbau einer HTML5-Datei kennen b. <section>…</section>
<article>…</article>
a. <html> <nav>…</nav>
<head> <header>…</header>
<title> … </title> <footer>…</footer>
…
</head> 5 Text strukturieren
<body>
… <!DOCTYPE html>
</body> <html>
</html> <head>
<title>Texte strukturieren
b. HTML5-Grammatik: </title>
ƒƒ HTML5-Elemente stehen in spitzer <meta charset=“utf-8“>
Klammer. </head>
ƒƒ Fast alle Elemente besitzen ein <body>
Start- und ein End-Tag. <h3>Texte mit HTML strukturie-
ƒƒ HTML-Elemente dürfen ineinander ren</h3>
verschachtelt werden. <p>Die oberste Zeile ist eine
ƒƒ Die Eigenschaften (Attribute) eines &Uuml;berschrift &lt;h3&gt;,
HTML-Elements werden im Start- danach folgt ein Absatz.
Tag notiert. <q>Dieser Text ist als Zitat

© Springer-Verlag GmbH Deutschland 2017

P. Bühler, P. Schlaich, D. Sinner, HTML5 und CSS3, Bibliothek der Mediengestaltung,
DOI 10.1007/978-3-662-53916-3
 Anhang

gekennzeichnet!</q> 8 Meta-Tags verwenden

Text kann <em>betont</em> oder
<strong>stark betont a. Meta-Tags liefern (unsichtbare) Zu-
</strong> gesetzt werden.</p> satzinformationen über die Website.
<ul> Es handelt sich dabei um Copyright-
<li>Liste</li> Angaben, um Angaben für Such-
<li>mit</li> maschinen, für Webserver oder den
<li>Punkten</li> Webbrowser.
</ul> b. Im Dateikopf <head>
<ol> c. Meta-Tags sind nur im Quelltext,
<li>Liste</li> nicht aber im Browser sichtbar.
<li>mit</li> d. Angabe des Zeichensatzes, des Au-
<li>Ziffern</li> tors, des Erstellungsdatums, auto-
</ol> matische Weiterleitung der Website
</body>
</html> 9 Hyperlinks verwenden

6 Schriften verwenden a. <a href=“[Link]

de“>…</a>
a. Die Schrift, die im Webbrowser als b. <a href=“[Link]“>…</a>
Grundschrift eingestellt ist. c. <a href=“sites/[Link]“>…
b. Weil HTML5 ausschließlich zur </a>
(semantischen) Beschreibung des d. <a href=“[Link]
Inhalts und nicht zur Gestaltung von de“>…</a>
Webseiten genutzt werden soll. Die e. <a href=“pdf/[Link]“>…</a>
typografische Gestaltung erfolgt mit f. <a href=“#seitenende“>…</a>
CSS3.
10 Tabellen verwenden
7 Dateien korrekt benennen
<!DOCTYPE html>
a. .htm oder .html <html>
b. Nein, da die Dateien sonst nur unter <head>
Mac OS funktionieren. <title>Tabellen verwenden</title>
c. Da Webserver häufig auf UNIX <meta charset=“utf-8“>
basierende Betriebssysteme haben </head>
und dann zwischen Groß- und Klein- <body>
schreibung unterschieden wird. <table>
d. Nein, Sonderzeichen sind nicht zuläs- <tr>
sig, da dies je nach Betriebssystem <th colspan=“3“ >High-Score</th>
des Webservers zu Fehlern führen </tr>
kann. <tr>
e. [Link] oder [Link] <td >Platz</td>
<td>Name</td>
<td >Punkte</td>
</tr>
<tr>

97
 <td>1.</td> b. Werden die Daten durch einen Web-
<td>Daniel</td> server und nicht direkt im Browser
<td>7542</td> überprüft, müssen sie (eventuell
</tr> mehrfach) vom Client zum Server
<tr> und umgekehrt übertragen werden.
<td>2.</td> Dies kostet Zeit und belastet die
<td>Heike</td> Datenleitungen.
<td>6354</td>
</tr> 14 Formulare erstellen
<tr>
<td>3.</td> <!DOCTYPE html>
<td>Markus</td> <html>
<td>4788</td> <head>
</tr> <title>Formulare</title>
</table> <meta charset=“utf-8“>
</body> </head>
</html> <body>
<h3>Pizza-Blitz</h3>
11 Bildformate für Webseiten kennen <form>
<div>Pizza:</div>
a. JP(E)G, GIF, PNG <input type=“radio“
b. SVG, Canvas name=“pizza“>Margherita<br>
c. Vektorgrafiken sind verlustfrei ska- <input type=“radio“
lierbar, können an das Format des name=“pizza“>Salami<br>
Endgerätes angepasst werden. <input type=“radio“
name=“pizza“>Thunfisch<br>
12 Bilder/Grafiken referenzieren <input type=“radio“
name=“pizza“>Schinken<br><br>
a. HTML-Dateien sind reine Textdateien, <div>Extras:</div>
die keine binären Daten einbinden <input type=“checkbox“>Oliven<br>
können. <input type=“checkbox“>
b. Relative Pfadangaben: Sardellen<br><br>
ƒƒ <img src=“[Link]“> <div>Vorname:</div>
ƒƒ <img src=“bilder/ <input type=“text“ size=“30“><br>
[Link]“> <div>Nachname:</div>
ƒƒ <img src=“../[Link]“> <input type=“text“ size=“30“><br>
ƒƒ <img src=“../bilder/ <div>Stra&szlig;e:</div>
[Link]“> <input type=“text“ size=“30“><br>
<div>Plz/Ort:</div>
13 Formulareingaben prüfen <input type=“text“ size=“5“>
<input type=“text“ size=“19“><br>
a. Eine einheitliche, vollständige und <br><input type=“submit“
fehlerfreie Dateneingabe ist erforder- value=“Bestellung“>
lich, damit eine per Skript automati- </form>
sierte Übernahme der Daten in eine </body>
Datenbank möglich ist. </html>

98
 Anhang

15 AV-Medien einbinden Zentrale Definition

Einmalig benötigte Abweichungen
a. <audio>…</audio> von extern definierten Stylesheets
b. <video>…</video> lassen sich im Dateikopf angeben.
Sie haben dort eine höhere Priorität
16 Webbrowser unterscheiden gegenüber externen Stylesheets.
Lokale Definition
a. Googe Chrome, Apple Safari Maximale Flexibilität, z. B. zur Aus-
Android-Browser (Stand: 2016) zeichnung einzelner Elemente. Lokale
b. Mozilla Firefox, Google Chrome, Stylesheets haben die höchste Prio-
Microsoft Edge (Stand: 2016) rität.
c. Weil in den Browsern unterschied-
liche Parser verwendet werden. 3 Kaskadierung verstehen
Hinzu kommt, dass ältere Browser-
versionen neue HTML5-Elemente a. Unter Kaskadierung ist zu verste-
nicht kennen. hen, dass Stylesheets „mehrstufig“
zum Einsatz kommen, und zwar
3.1.2 CSS3 hinsichtlich Ort: extern, zentral, lokal
und Verfasser: Autoren-, Benutzer-,
1 Bedeutung von CSS3 kennen Browser-Stylesheets.
b. Die Kaskadierung ergibt eine hohe
ƒƒ CSS3 ermöglichen die Gestaltung Flexibilität und ermöglicht notwen-
von Webseiten, HTML5 nicht. dige Freiräume. So können z. B. auch
ƒƒ Inhalt und Design können unabhän- die Nutzer einer Website mitbestim-
gig voneinander erstellt und bearbei- men, wie diese in ihrem Browser
tet werden. dargestellt werden soll. Dies ist
ƒƒ Das Design kann als externe Datei beispielsweise für Menschen mit
abgespeichert werden und lässt sich Sehschwäche eine Hilfe.
somit auf beliebig viele HTML5-Sei-
ten anwenden. 4 Selektoren kennen
ƒƒ Für einen Inhalt können mehrere
Designs erstellt werden, z. B. für a. Selektoren:
­Monitor, Smartphone, Druck. ƒƒ HTML-Elemente (Tags)
ƒƒ Die Inhalte können unabhängig vom ƒƒ Universalselektor
Layout in einer Datenbank verwaltet ƒƒ Klassen
werden. ƒƒ Individualformate
ƒƒ Pseudoklassen
2 CSS3 definieren b. Beispiel:
p {font-family:Arial;}
a. Externe Definition in einer Datei * {background-color:#FFF;}
Zentrale Definition im Dateikopf .rot {color:red;}
Lokale Definition im Tag #fett {font-weight:bold;}
b. Externe Definition a:link {text-decoration:
Das Design kann für beliebig viele none;}
HTML5-Dateien genutzt werden.

99
 5 Rangfolge von Selektoren kennen f. text-decoration: underline;
g. text-indent: ...;
ƒƒ 1. Absatz ist blau, weil Individualfor- h. text-align: ...;
mate vor Klassen und Tags kommen.
ƒƒ 2. Absatz ist grün, weil lokales Style- 9 Schriften verwenden
sheet vor Individualformat kommt.
ƒƒ 3. Absatz ist silber, da Tag <p> vor ƒƒ Schriftdatei auf dem Webserver zur
Universalselektor kommt. Verfügung stellen und über
ƒƒ 4. Absatz ist rot, weil nur der Univer- @font-face einbinden
salselektor angegeben ist. ƒƒ Link <link ...> zur Website an-
gegeben, auf dem sich die Schrift
6 Maßeinheiten kennen befindet

a. Absolute Maßeinheiten sind feste, 10 Tabellen gestalten

unveränderliche Angaben.
Relative Maßeinheiten beziehen sich Lösung zu a. und b.
auf die in den Browsereinstellungen <!DOCTYPE HTML>
gemachten Angaben. <html>
b. Relativ: em, ex, (px) <head>
(Pixel ist auch relativ, da von der Auf- <title>CSS3-Tabellen</title>
lösung des Displays abhängig) <meta charset=“utf-8“>
Absolut: mm, cm, pt, (px) <style type=“text/css“>
c. Mit relativen Angaben ist eine An- body{margin:20px;
passung des Layouts an unterschied- font-family:Verdana;
liche Displays wesentlich einfacher. font-size:0.8em;
Sie besitzen auch den Vorteil, dass background-color:#FFF;
der Nutzer Einfluss auf die Darstel- color:#000;}
lung nehmen kann, was vor allem h1 {font-size:1em;
bei der Schriftgröße sinnvoll ist. color:#006;}
table,td,th{
7 Farben angeben border-collapse:collapse;
padding:10px;
a. Rot border-bottom:1px solid
b. Grau #000;
c. Cyan text-align:left;
d. Gelb background-color:#ddf0ff;}
e. Hellgrün th {background-color:#006;
f. Dunkelblau, halbtransparent color:#FFF;}
</style>
8 Text gestalten </head>
<body>
a. font-family: ...; <h1>Internet-ABC</h1>
b. letter-spacing: ...; <p>Kennen Sie die
c. font-size: ...; Abkürzungen?</p>
d. color: ...; <table>
e. line-height: ...; <tr>

100
 Anhang

<th>Abkürzung</th> <header>Kopfzeile</header>
<th>Bedeutung</th> <div id=“container“>
</tr> <main>Hauptbereich</main>
... (weitere Zeilen) <nav>Navigation</nav>
</table> <aside>Nebenbereich</aside>
</body> </div>
</html> <footer>Fußzeile</footer>
</body>
11 Layout erstellen </html>

<!DOCTYPE HTML> 12 Flexible Layouts erstellen

<html>
<head> Durch ein flexibles Layout passt sich
<title>CSS-Layout</title> der Inhalt an die (veränderliche) Größe
<meta charset=“utf-8“> des Browserfensters bzw. an die Dis-
<style> plays der mobilen Endgeräte an.
body {margin:0px;
padding:0px; 13 CSS3-Boxmodell kennen
background-color:white;
color:white; width
font-family:Arial; height
font-size:0.7em;} background-color
main, nav, aside, footer, border-style
header{box-sizing:border-box; border-width
padding:10px;} border-color
#container{ margin
height:500px;
display: flex; 14 Wrapper nutzen
flex-direction:row;}
header {background-color:#333; a. Bei einem Wrapper handelt es sich
height:50px } um eine Box, die den gesamten In-
nav {order:1; halt der Website umschließt. Dies hat
flex:1; den Vorteil, dass der Content flexibel
background-color:#666;} an unterschiedliche Ausgabegeräte
main {order:2; angepasst werden kann.
flex:2; b. #wrapper{
color:black; width:80%;
background-color:#ddd;} height:500px;
aside {order:3; margin:0 auto;
flex:1; background-color:#ccc;
background-color:#999;} padding:10px;
footer {background-color:#333; }
height:50px} ...
</style> <div id=“wrapper“>
</head> <!-- Inhalte -->
<body> </div>

101
 3.2 Links und Literatur

Links Übersicht Webeditoren

[Link]/wiki/Liste_von_HTML-
Anbieter von Webfonts Editoren
[Link]
Übersicht Webhoster
Bilder-Generator [Link]
[Link]

Blindtext-Generator Literatur
[Link]
Joachim Böhringer et al.
Browserkompatibilität von HTML5- und Kompendium der Mediengestaltung
CSS3-Tags überprüfen IV. Medienproduktion Digital
[Link] Springer Vieweg 2014
ISBN 978-3642548147
Google Webfonts
[Link] Andrea Ertel, Kai Laborenz
Responsive Webdesign: Anpassungsfähige
HTML5 auf Gültigkeit prüfen Websites programmieren und gestalten
[Link] Rheinwerk Computing 2014
ISBN 978-3836232005
HTML5- und CSS3-Handbuch
[Link]/ Clemens Gull, Stefan Münz
docs:html-handbuch HTML5 Handbuch
Franzis Verlag 2014
Statistiken zu Browser und Web ISBN 978-3645603454
[Link]

W3C (Dachorganisation des Internets)

[Link]

W3C-School
[Link]

Webdesign mit CSS

[Link]

Wiki zu HTML5 und CSS3

[Link]

Übersicht HTML5-Tags
[Link]

102
3.3 Abbildungen Anhang

S2, 1: [Link] (Zugriff: 04.01.15)

S3, 1: [Link]/html/logo (Zugriff: 01.01.15)
S4, 1: Sreenshot von Adobe Dreamweaver
S5, 1: [Link]/docs:html-
handbuch (Zugriff: 03.04.16)
S8, 1: Sceenshot von Google Chrome
S11,1: Ausschnitt Quellcode von [Link]-
[Link] (Zugriff: 03.02.16)
S12, 1: Autoren
S16, 1: Autoren
S18, 1: Screenshot von Microsoft Outlook
S22, 1: Foto: Autoren
S24, 1: Autoren
S35, 1, 2: Autoren
S36, 1a und 1b: Autoren (Grafik), Datenquelle:
[Link] (Zugriff: 03.01.16)
S37, 1: [Link] (Zugriff: 28.12.15)
S38, 1, 2, 3: [Link] (Zugriff: 06.04.16)
S44, 1a, b, 2a, b : [Link]
(Zugriff: 01.11.2016)
S47, 1: [Link], Image-ID: 1182067 (Zugriff:
16.11.13)
S49, 1: Autoren
S58, 1: Screenshot: Adobe Photoshop
S60, 1: [Link]/fonts
(Zugriff: 15.10.2016)
S65, 1: Autoren
S66, 1: Autoren
S70, 1: Autoren
S75, 1: [Link] (Zugriff: 05.11.2016)
S80, 1: Autoren
S86, 1: Autoren
S89, 1: Autoren
S90, 1, 2, 3: Autoren

103
 3.4 Index

3D (CSS3) 83 –– Definition 47 –– border-width 67

–– Editoren 46 –– box-sizing 68
A –– Farben 58 –– clear 71
–– Flexible Boxen 71 –– color 59, 62
Absolute Referenz 10 –– Hintergrund 64 –– display 72, 74
Abstände (CSS3) 62 –– Individualformate 52 –– empty-cells 63
Adapatives Layout 85 –– Inline-Element 73 –– flex 72
Adobe Dreamweaver 5 –– Klassen 51 –– flex-direction 72
Alphakanal 23 –– Layout 66 –– float 71
Animated (GIF) 22 –– Listen 63 –– font-family 61
Animation 35 –– lokal 49 –– font-size 61
Animation (CSS3) 79 –– Maßeinheiten 57 –– font-style 61
Audio 34 –– Media Queries 76 –– font-weight 61
Auswahlliste 30 –– Pseudoklassen 52 –– height 67
Autoren-Stylesheets 54 –– Regeln 47 –– !important 55
–– Schriftart 60 –– @keyframes 79
B –– Selektoren 47, 50 –– letter-spacing 62
–– Silbentrennung 74 –– line-height 62
Benutzer-Stylesheets 54 –– Spezifität 55 –– list-style-type 63
Betriebssysteme 37 –– Tabellen 63 –– margin 67
Bilder (HTML5) 22 –– Transformationen 82 –– @media 77
Blindtext 87 –– Tutorials 46 –– overflow 73
Blockelement (CSS3) 62, 66 –– Typografie 60 –– padding 67
Boxmodell 66 –– Vererbung 53 –– position 69
Browser 36 –– Zeilenumbruch 62 –– text-align 62
Browsermarkt 36 –– zentral 48 –– text-decoration 62
Browser-Stylesheets 54 CSS3-Eigenschaften –– text-indent 62
Buttons (HTML5) 31 –– animation-delay 81 –– transform 82
–– animation-duration 81 –– vertical-align 62
C –– animation-iteration-count –– white-space 62
81 –– width 67
Canvas 26, 79 –– animation-name 81 –– word-spacing 62
Cascading Style Sheets 3, –– animation-play-state 81
12, 44 –– animation-timing-function D
Case-sensitiv 9 81
Checkbox 31 –– background-attachment 64 Dateiformate
CMS 4 –– background-color 59, 64, 67 –– GIF 22
Combobox 30 –– background-image 64, 67 –– HTM(L) 9
Content-Management-System –– background-position 64 –– JP(E)G 22
4, 45 –– background-repeat 64 –– MP3 34
CSS 3, 12, 44 –– background-size 64 –– MP4 34
CSS3 45 –– border-collapse 63 –– OGG 34
–– Abstände 62 –– border-color 67 –– OGV 34
–– Animation 79 –– border-radius 67 –– PNG 23
–– Boxmodell 66 –– border-spacing 63 –– SVG 23
–– Datei 47 –– border-style 67 –– WAV 34

104
 Anhang

–– WebM 34 –– Audio 34 –– <h1> bis <h6> 13

Datei-Upload 32 –– Bilder 22 –– <head> 6, 11
Datenprüfung (HTML5) 32 –– Canvas 26 –– <header> 13
DOCTYPE 6 –– Dateinamen 9 –– <hr> 13
Dreamweaver 5 –– Datenprüfung 32 –– <html> 6
–– Editoren 4 –– <i> 14
E –– Elemente 2 –– <iframe> 20
–– Farben 8 –– <img> 24
E-Mail (HTML5) 17 –– Formulare 28 –– <input> 29
–– Grafiken 22 –– <li> 13
F –– Grammatik 6 –– <meta> 11
–– Grundgerüst 6 –– <nav> 13, 14, 20
Farben –– Hyperlinks 16 –– <ol> 13
–– CSS3 58 –– Kommentare 7 –– <option> 30
–– HTML5 8 –– Logo 3 –– <p> 13
Farbverläufe (CSS3) 59 –– Meta-Tags 11 –– <q> 14
Flexible Boxen (CSS3) 71 –– Navigation 20 –– <section> 13
Flexibles Layout 70 –– Parser 36 –– <select> 30
Flüssiges Layout 57 –– Referenzieren 10 –– <span> 14
Formulare 28 –– Schriften 8 –– <sub> 14
Formularelemente –– Semantische Struktur 12 –– <summary> 21
–– Auswahlliste 30 –– Sonderzeichen 8 –– <sup> 14
–– Buttons 31 –– SVG 25 –– <svg> 25
–– Checkbox 31 –– Tabellen 15 –– <table> 15
–– Combobox 30 –– Tags 6 –– <td> 15
–– Datei-Upload 32 –– Textauszeichnung 14 –– <th> 15
–– Menu 30 –– Tutorials 5 –– <time> 14
–– Radiobutton 30 –– Umlaute 8 –– <tr> 15
–– Schaltflächen 31 –– valides 37 –– <ul> 13
–– Textfeld 29 –– Zeichensatz 7 –– <video> 34
–– Versteckte Felder 31 HTML5-Tags 2 HTML-Versionen 3
–– <a> 17 Hyperlinks (HTML5) 2, 16
G –– <abbr> 14 –– auf Dateien 18
–– <article> 13 –– E-Mail-Link 17
GET (Datenübertragung) 28 –– <audio> 34 –– extern 17
GIF 22 –– <b> 14 –– intern 19
Google 11 –– <body> 6 Hypermedia 16
Grafiken (HTML5) 22 –– <br> 13 Hypertext 2, 16
–– <canvas> 26 Hypertext Markup Language
H –– <code> 14 2
–– <datalist> 30
Hintergrund (CSS3) 64 –– <details> 21 I
Homepage 9 –– <div> 13
HTML5 3, 45 –– <figure> 13 ICC-Profile 22
–– Animation 35 –– <footer> 13, 14 [Link] 9
–– Attribute 7 –– <form> 28 Individualformate (CSS3) 52

105
 Inline-Element (CSS3) 73 P Transparenz (PNG-24) 23
Inline-Styles 49 Truetype-Fonts 60
Interaktion (HTML5) 28 Parser 36 Typografie (CSS3) 60
PNG 23
J POST (Datenübertragung) 28 U
Pseudoelemente 52
JP(E)G 22 Pseudoklassen 52, 84 Universalselektor 50
UTF-8 7
K R
V
Kaskadierung (CSS3) 47, 49 Radiobutton 30
Keyframe-Animation (CSS3) Rahmen (CSS3) 62 Vektorgrafik 23
79 Referenzieren 18 Vererbung (CSS3) 53
Klassen (CSS3) 51 Referenzieren (HTML5) 10, Viewport 85
18, 24
L Relative Referenz 10, 18, 24 W
Responsive Webdesign 85
Layout (CSS3) 66 WAV 34
Link (HTML5) 2, 16 S Webbrowser 36
Liquid Layout 57, 85 Webfonts 60
Listen (CSS3) 63 Schaltflächen 31 WebM 34
LZW-Algorithmus 22 Schriftart (CSS3) 60 Web Open Font Format 60
Schriften (HTML5) 8 World Wide Web 2
M Selektor (CSS3) 47, 50 WWW 2
Semantische Struktur WYSIWYG-Editor 5, 46
Maßeinheiten (CSS3) 57 (HTML5) 12
Media Queries 76 Silbentrennung (CSS3) 74 X
Medientypen (CSS3) 76 Singe-page-Anwendung 19
Menu (HTML5) 30 Sonderzeichen 8 XHTML 3
Meta-Tags 11 Spezifität (CSS3) 55 XML 3
Mobile First 85 Streaming 35
MP3 34 SVG 23 Z
MP4 34 Syntax-Highlighting 4, 46
Zeilenumbruch (CSS3) 62
N T
Navigation (HTML5) 20 Tabellen
–– aufklappbar 21 –– CSS3 63
–– HTML5 15
O Tags (HTML5) 2, 6
Templates 4
OGG 34 Textauszeichnung (HTML5) 14
OGV 34 Textfeld 29
On-Demand-Streaming 35 Textlink 16
Opentype-Fonts 60 Transformation (CSS3) 82

106