Ein einfaches Dokument
Dieses Dokument wird per CSS formatiert.
Als Attribut steht unter anderem das sehr mächtige pattern zur Verfügung. Hierbei
<<
Ein einfaches Dokument Dokuments. color: #666666 Es ist nicht schwer, sich vorzustellen, was die Anweisungen bewirken: font-family ) oder »ungeordnete Liste« (
Wissen, wie’s geht.
Leseprobe
Mit CSS gestalten Sie Ihre Website. Lernen Sie hier, was Cascading Stylesheets sind und wie Sie sie sinnvoll einbinden. Außerdem ent- hält diese Leseprobe das Inhaltsverzeichnis und das gesamte Stich- wortverzeichnis des Buchs.
»Was sind Cascading Stylesheets?« »HTML und CSS« »Das erste Stylesheet« »Einbinden von Stylesheets in HTML-Dateien« »Layout mit CSS«
Inhaltsverzeichnis
Index
Der Autor
Leseprobe weiterempfehlen
Kai Laborenz CSS – Das umfassende Handbuch 825 Seiten, gebunden, 3. Auflage 2015 39,90 Euro, ISBN 978-3-8362-3876-2
www.rheinwerk-verlag.de/3932 3876.book Seite 17 Montag, 30. November 2015 4:25 16
Kapitel 1 1
1 Was sind Cascading Stylesheets?
Im ersten Kapitel erkläre ich Ihnen, was sich hinter dem Begriff »Cascading Stylesheets« verbirgt und welche Vorteile Sie davon haben, mit Stylesheets zu arbeiten. Außerdem sehen Sie das erste Stylesheet dieses Buches.
Cascading Stylesheets sind Formatvorlagen für Websites. Zusammen mit dem HTML-Markup eines Dokuments ergeben sie das Aussehen einer Website. Sie kön- nen sich Stylesheets wie die »Kleidung« einer Website vorstellen – ohne Stylesheets sieht man nur den nackten unformatierten Inhalt. Wie bei Kleidung kann eine Web- site mit verschiedenen Stylesheets völlig unterschiedlich aussehen (siehe Abbil- dung 1.1) – auch wenn das HTML-Gerüst und die Inhalte gleich bleiben.
Abbildung 1.1 Ein HTML-Dokument erhält durch CSS unterschiedliche Kleidung.
1.1 Warum sollten Sie Stylesheets nutzen?
Die Arbeit mit Cascading Stylesheets gibt uns Webdesignern die Möglichkeit, mehr Flexibilität im Design zu erreichen und dabei gleichzeitig die grundlegenden Kon-
17 3876.book Seite 18 Montag, 30. November 2015 4:25 16 3876.book Seite 19 Montag, 30. November 2015 4:25 16
1 Was sind Cascading Stylesheets? 1.1 Warum sollten Sie Stylesheets nutzen?
zepte von HTML zu bewahren. Die Trennung von Struktur und Gestaltung ist dabei CSS Minion 1 auch eine wichtige Voraussetzung, um barrierefreie Websites zu erstellen, die auch Ein völlig anderes – nicht weniger beeindruckendes – Beispiel der Leistungsfähigkeit für Menschen mit Behinderungen zugänglich sind und von Suchmaschinen optimal von CSS liefert die Webentwicklerin Rachel Bull (@rachel_web) mit einem rein aus wahrgenommen werden. CSS und HTML erstellten Minion (siehe Abbildung 1.3). Das Original und den CSS- Abgesehen von dieser Trennung von Struktur und Gestaltung erweitern Stylesheets Code finden Sie auf Codepen: http://codepen.io/rachel_web/pen/pjzowB/ die Möglichkeiten gewaltig, Elemente eines HTML-Dokuments zu formatieren. Neben einfachen gestalterischen Optionen wie der Einstellung von Schriftart, -größe und -farbe, die auch mit dem alten HTML-Tag beeinflusst werden können, erlauben Cascading Stylesheets beispielsweise die Einstellung der Zeilenhöhe, eines Einzugs und weiterer typografischer Parameter. Auch Größe und Platzierung von Elementen lassen sich nahezu beliebig bestimmen. Mithilfe von CSS3-Eigenschaften können inzwischen auch Elemente verändert (z. B. verzerrt oder gedreht) und Ani- mationen erzeugt werden.
CSS Zen Garden Welche Möglichkeiten eine konsequente Trennung von Inhalt und Design bietet, demonstriert eindrucksvoll das Projekt »CSS Zen Garden«, in dem Designer Dave Shea eine HTML-Seite bereitgestellt hat, die vollständig per CSS gestaltet wird. Er for- derte andere Entwickler auf, ihre Gestaltungsvorschläge beizusteuern. Inzwischen sind es Hunderte von Varianten, und die Bandbreite der Designs ist atemberau- bend (siehe Abbildung 1.2)! Und als Grundlage dient immer dieselbe HTML-Datei (www.csszengarden.com)! Abbildung 1.3 Nicht mit einem 3D-Animationsprogramm erstellt, sondern reines CSS: ein »Minion«
Der Einsatz von Cascading Stylesheets bietet für Webentwickler eine Reihe von Vor- teilen: ̈ Einfachere HTML-Dokumente Durch die Trennung von Struktur und Gestaltung wird eine HTML-Seite kleiner und übersichtlicher. Spätere Änderungen werden einfacher. ̈ Mehr Kontrolle Die CSS-Anweisungen erlauben mehr Kontrolle über die Formatierung eines Dokuments. Gerade typografisch wichtige Anweisungen, wie beispielsweise die Angabe der Zeilenhöhe, sind mit reinem HTML gar nicht möglich. ̈ Neue Möglichkeiten Mit CSS ergeben sich Gestaltungsmöglichkeiten, die mit reinem HTML nicht zu erreichen sind. Insbesondere das Ein- und Ausblenden von Elementen und die Möglichkeiten von Animationen eröffnen neue Horizonte.
Abbildung 1.2 Die Vielfalt von CSS entdecken – im »CSS Zen Garden«
18 19 3876.book Seite 20 Montag, 30. November 2015 4:25 16 3876.book Seite 21 Montag, 30. November 2015 4:25 16
1 Was sind Cascading Stylesheets? 1.3 Wie sieht ein Stylesheet aus?
̈ Zugängliche Websites 1 Durch den Verzicht auf Formatierungsanweisungen im HTML-Code werden Ihre Seiten auch für Menschen mit Behinderungen oder speziellen Anzeigegeräten (z. B. Smartphones oder WebTV) besser zugänglich. Gesetzliche Bestimmungen, die zumindest für staatliche Websites Barrierefreiheit fordern, sind in Deutsch- land seit Jahren gültig. Und der Anteil mobiler Surfer nimmt immer weiter zu. ̈ Zukunftssicherheit Erfreulicherweise orientieren sich die wichtigsten Browserhersteller inzwischen recht gut an den Standards für Websites, die vom Standardisierungsgremium W3C (World Wide Web Consortium) veröffentlicht werden. CSS ist ein solcher Standard. Websites, die sich an diese Standards halten, müssen nicht befürchten, mit der nächsten Browsergeneration nicht mehr zu funktionieren. ̈ Qualitätsbeweis Für professionelle Webentwickler ist auch die Frage der Gewährleistung wichtig. Falls es einmal zum Streit um die Qualität einer Website kommt, woran lässt sich dann die Güte von HTML-Code erkennen? Ein Browser, mit dem eine Website schrecklich aussieht, lässt sich immer finden. Da kann es sehr hilfreich sein, inter- nationale Standards bei der Erstellung berücksichtigt zu haben.
1.2 Das CSS-Prinzip Abbildung 1.4 Aus HTML-Code und Stylesheet entsteht die Webseite.
Einem HTML-Dokument kann durch eine Änderung des Stylesheets ein anderes Aussehen gegeben werden. Für unterschiedliche Endgeräte, z. B. einen normalen 1.3 Wie sieht ein Stylesheet aus? Desktop-Webbrowser und ein Smartphone, können unterschiedliche Stylesheets be- Um Ihnen schon einmal einen Eindruck zu verschaffen, wie Cascading Stylesheets reitgestellt werden. Benutzer können sogar eigene Stylesheets verwenden, beispiels- denn nun aussehen, hier ein einfaches Beispiel einer Webseite, die CSS als Gestal- weise um bei einer Sehschwäche die Schriftgröße heraufzusetzen. tungsmittel nutzt: Die wesentliche Idee von Cascading Stylesheets ist es, Angaben zu Struktur und Aus- sehen einer Website so weit wie möglich zu trennen (siehe Abbildung 1.4): ̈ HTML-Auszeichnungen sind nur für die logische bzw. semantische Beschreibung eines Dokuments zuständig.
̈ Zugeordnete Stilanweisungen sorgen für die Formatierung und das Aussehen desEin einfaches Dokument
legt die Schriftart fest, font-size die Größe und color die Schriftfarbe für die betref-Dieses Dokument wird per CSS formatiert
fenden Elemente in hexadezimaler Schreibweise. Schriftarten mit Alternative Ohne zu weit vorzugreifen, kann ich hier auch verraten, was die Nennung von meh- Listing 1.1 (Sehr) einfache Webseite mit CSS reren Schriftarten in einer font-family-Anweisung bedeutet: Da ja im Web lange Zeit nur Schriften verwendet werden konnten, die auf dem Rechner des Benutzers Im Webbrowser sieht das aus wie in Abbildung 1.5. installiert waren, ermöglicht die Aufzählung mehrerer Schriftarten Alternativen. font-family: Verdana, Geneva, sans-serif bedeutet daher, dass der Browser die Schrift Verdana verwenden soll. Falls diese nicht auf dem Rechner zu finden ist, soll er es mit Geneva versuchen (eine auf Mac- Systemen verbreitete Schriftart). Falls auch diese Schrift nicht zu finden ist, sorgt die letzte Anweisung sans-serif dafür, dass zumindest eine serifenlose Schrift verwen- det wird – diejenige, die im Browser des Benutzers als serifenlose Standardschrift eingestellt ist (Serifen sind die kleinen »Häkchen« an den Enden der Buchstaben, wie sie z. B. bei der Schrift Times zu finden sind; Verdana und Arial sind dagegen serifen- lose Schriften). Sie werden später sehen, dass die Einschränkung auf bestimmte Schriften, die Desi- gner jahrelang gequält hat, dank CSS inzwischen nicht mehr gilt! Abbildung 1.5 Einfache Webseite im Browser Chrome Probieren Sie es selbst einmal aus: Nehmen Sie das Listing 1.1 aus dem Download- Sie erkennen sicher im unteren Teil des Listings den HTML-Code, der hier nur aus paket (oder schreiben Sie den Code schnell ab – so viel ist es ja nicht), und ändern Sie den Elementen(Überschrift erster Ordnung) und
(Absatz) besteht. die Schriftgröße oder Farbe. Können Sie auch der Überschrift eine andere Farbe Die per CSS bewirkte Formatierung wird im oberen Teil des Dokuments zwischen zuweisen? den Tags definiert. Dort werden für die im HTML-Bereich vor- handenen Elemente entsprechende Eigenschaften notiert. Für das Element
sind Die CSS-Anweisung das Etwas allgemeiner formuliert: Eine CSS-Anweisung besteht immer aus zwei Teilen
font-family: "Courier New", Courier, monospace – dem Selektor und der Deklaration. Der Selektor beschreibt, was (also welches Ele- ment, z. B.
) formatiert werden soll, und die Deklaration bestimmt, wie dies und geschehen soll (also z. B. welche Farbe das Element haben soll). Dabei befindet sich links stets der Selektor und rechts die Deklaration in geschweiften Klammern (siehe font-size: 200% Abbildung 1.6).
22 23 3876.book Seite 24 Montag, 30. November 2015 4:25 16
1 Was sind Cascading Stylesheets?
Selektor Eigenschaft Wert
Deklaration
Abbildung 1.6 Schema einer CSS-Anweisung
Die Deklaration selbst (in geschweiften Klammern notiert) besteht wiederum aus zwei Teilen: der Eigenschaft und dem Wert, der dieser Eigenschaft zugeordnet wer- den soll. Getrennt werden die beiden durch einen Doppelpunkt. Die in diesem Beispiel verwendeten Eigenschaften und Werte sind natürlich nur ein kleiner Ausschnitt der Möglichkeiten von CSS. Sie fragen sich vielleicht, ob man die Schriftgröße nicht auch in Pixeln angeben kann (kann man) oder ob es andere Mög- lichkeiten gibt, Farben anzugeben, als die etwas unintuitive hexadezimale Schreib- weise (gibt es). Aber bevor Sie weiter in die Details von CSS einsteigen, müssen Sie sich ein klein wenig mit HTML befassen.
24 3876.book Seite 25 Montag, 30. November 2015 4:25 16
Kapitel 2 2 2 HTML und CSS
Grundlage für die Anwendung von Cascading Stylesheets ist die Struk- tur des Dokuments – der HTML-Code. In diesem Kapitel geht es um HTML, um Semantik und darum, wie HTML und CSS zusammenwirken.
Als Tim Berners-Lee im Jahr 1990 die Sprache HTML entwickelte, dachte er nicht an das Aussehen von Dokumenten. Ihm ging es um eine Sprache, mit der sich Struktur und Inhalt einer Seite beschreiben lassen.
2.1 Die Grundlage – das semantische HTML-Dokument
Berners-Lee entwarf daher eine Sprache, mit der man die strukturelle Bedeutung eines Dokumentelements beschreiben kann – unabhängig von seiner Darstellung. Deshalb enthält HTML Elemente wie »Überschrift erster Ordnung« (
) oder »ungeordnete Liste« (). Das in Deutschland wohl bekannteste Kompendium zu HTML ist SelfHTML (ursprünglich) von Stefan Münz. Das elektronische Tutorial ist nicht nur eine gute Einführung und ein unverzichtbares Nachschlagewerk für HTML, sondern bietet auch Informationen zu XML, CSS, JavaScript und anderen Programmiersprachen, die für Webentwickler interessant sind (siehe Abbildung 2.1). Ergänzt wird es durch allgemeine Hinweise über das Publizieren im Web. Unter der URL https:// wiki.selfhtml.org/wiki/Startseite existiert ein Onlineportal mit der aktuellen Version, News, Tipps und Diskussionsforen rund um HTML. Weitere Dokumentation bieten z. B. die Mozilla-Stiftung (https://developer.mozilla. org/de/learn/html) oder der HTML5-Doctor an (http://html5doctor.com – englisch- sprachig). HTML-Dokumente bestehen aus einer Ansammlung von ineinander verschachtelten Elementen, die eine hierarchische Struktur (ähnlich der Ordnerstruktur eines Datei- systems) darstellen. Das erste und oberste Element einer jeden HTML-Seite ist das -Element. Darin befinden sich die Elemente und , die wiederum ihrerseits Elemente enthalten (z. B. Absätze oder Bilder im -Element).25 3876.book Seite 26 Montag, 30. November 2015 4:25 16 3876.book Seite 27 Montag, 30. November 2015 4:25 16
2HTML und CSS 2.2 Schnelleinstieg HTML
bestimmte HTML-Elemente. Obwohl es in diesem Buch nicht in erster Linie um HTML geht, hier also ein kleiner Ausflug ins HTML. 2 Die grundsätzliche Struktur eines HTML-Dokuments haben Sie in Kapitel 1, »Was sind Cascading Stylesheets?«, schon kennengelernt. Hier kommt sie noch einmal – zunächst auf das Minimum reduziert:
Dokumententitel Listing 2.1 Minimales HTML-Dokument nach dem Standard HTML5
Danach beginnt ein HTML-Dokument mit dem sogenannten Doctype, der angibt, in welcher Sprachversion das Dokument geschrieben ist. Mit HTML5 ist glücklicher- Abbildung 2.1 SelfHTML – der Klassiker weise Schluss mit langen und komplizierten Doctypes – reicht. Als Nächstes folgt das öffnende , das am Ende des Dokuments auch wieder So finden sich im Sprachschatz der ersten HTML-Versionen auch nur Befehle, die die geschlossen sein muss: . Funktion oder Bedeutung eines Dokumentenbestandteils beschreiben. Beispiele Diese hierarchische Ordnung ist ein Grundprinzip von HTML: Ein Dokument besteht sind: aus verschiedenen ineinander verschachtelten Elementen oder Schichten, ähnlich ̈
...
steht für einen Absatz. wie die russischen Matroschka-Figuren (siehe Abbildung 2.2). Im Gegensatz zu Ma- ̈ ...
stellt eine Überschrift erster Ordnung dar. troschka-Puppen kann ein HTML-Element allerdings beliebig viele »Kinder« haben … ̈ ... erzeugt einen Link auf ein anderes Dokument.Strukturierte Dokumente mit HTML Die Idee dieser Konstruktion war es, ein Dokument so zu beschreiben, dass es auf vielen unterschiedlichen Anzeigegeräten gemäß seiner Bedeutung (»logische Aus- zeichnung«) wiedergegeben werden kann. So ist es für ein HTML-Dokument im Prin- zip egal, ob es auf einem hochauflösenden 30-Zoll-Monitor, einem winzigen Handy- Display angezeigt oder vorgelesen werden soll. Das jeweilige Endgerät entscheidet selbst, wie beispielsweise eine Überschrift erster Ordnung präsentiert werden soll.
2.2 Schnelleinstieg HTML
Um eine Webseite mit Stylesheets zu gestalten, muss eine HTML-Struktur vorhanden Abbildung 2.2 Eine Webseite ist ein Stück weit wie eine Matroschka-Puppe: Elemente in sein. Grundsätzlich wirken die im Stylesheet notierten Eigenschaften immer auf Elementen in Elementen …
26 27 3876.book Seite 28 Montag, 30. November 2015 4:25 16 3876.book Seite 29 Montag, 30. November 2015 4:25 16
2HTML und CSS 2.3 Code follows Content
Die nächste Schicht bilden dann die Elemente
... und ... . Da sie sich innerhalb des HTML-Elements befinden, werden sie auch »Kind« Ein einfaches Dokument
2 oder »child« genannt. Im Gegenzug ist dann das ein »Elternelement« oder Dieses Dokument wird per CSS formatiert
»parent« von und . Manchmal wird von dem Elternelement auch als »übergeordnetem Element« gesprochen. Listing 2.2 Inhalt gehört in den . Auch dies ist ein Prinzip, das wir später noch oft antreffen werden. Innerhalb von anderen Elementen platzierte Elemente werden als »Kinder« bezeichnet und Der Bereich ist zusätzlichen Angaben über das Dokument vorbehalten. Diese »erben« von ihren »Eltern« Eigenschaften. Das ist meist sehr praktisch, da Sie oft werden nicht (oder zumindest nicht direkt) im Browser angezeigt, sondern enthalten benötigte Eigenschaften wie die verwendete Schrift nur einmal notieren müssen, Informationen, die dem Browser das Darstellen des Dokuments ermöglichen. In die- nämlich für das oberste Element, quasi den Stammvater (oder die Stammmutter). sem Beispiel gibt es hier eine Metainformation über das Dokument – nämlich den Titel des Dokuments und die CSS-Anweisungen: Diese Art, Elemente zu verschachteln, ist von der objektorientierten Programmie- rung her bekannt. Dort wird auch von einer Objekthierarchie gesprochen, die aus einem HTML-Dokument gebildet wird (siehe Abbildung 2.3). Ein einfaches Dokument Listing 2.3 Im
werden Informationen über das Dokument gegeben." " 2.3 Code follows Content
Der erste Schritt beim Erstellen einer Website ist daher, sich Gedanken über die semantische Struktur der Inhalte zu machen. Bei Überschriften und Absätzen ist das noch recht einfach, bei anderen Elementen fällt dies schon etwas schwerer, und für Abbildung 2.3 Baumstruktur eines HTML-Dokuments viele Situationen gibt es (noch) kein passendes HTML-Element. Einen großen Schritt in Richtung mehr Semantik macht die neueste Generation von HTML – HTML5.
Das Document Object Model (DOM) Für Überschriften werden die Elemente
bis verwendet. Dabei gibt die Num- mer der Überschrift deren Bedeutung an – als wird die erste, wichtigste Über- Tatsächlich betrachtet ein Webbrowser eine HTML-Seite als Objekt. Somit sind sämt- schrift der Seite verwendet, in der Regel der Seitentitel. wäre dann die liche Elemente einer Webseite Unterobjekte – Kinder – des ersten Elements HTML nächstwichtige usw. Um ein regelkonformes, semantisches Dokument zu erstellen, und können z. B. per JavaScript angesprochen werden. In diesem Zusammenhang ist dürfen auch keine Überschriftenebenen ausgelassen werden. Ein weiteres schon oft vom Document Object Model, kurz DOM, die Rede. Gemeint ist damit der »Baum« bekanntes Element ist der Absatz
. aller Objekte, aus denen eine HTML-Seite aufgebaut ist (siehe Abbildung 2.3). Semantik findet sich auch bei den Textauszeichnungen: Statt einen kursiven Text Im Grunde ist mit ,
, und <body> auch schon ein vollständiges, mit dem ebenfalls verfügbaren Element <i> auszuzeichnen, sollten Sie das Element syntaktisch korrektes HTML-Dokument geschrieben. Allerdings noch ohne Inhalte. <em> verwenden. Das sichtbare Ergebnis ist dasselbe: Der Text wird »schräg«. Wäh- Diese werden dann im Bereich <body> notiert. In unserem ersten Beispiel sind das rend <i> jedoch lediglich besagt, dass der markierte Text kursiv (italic) dargestellt eine Überschrift (<h1>) und ein Absatz (<p>): wird, trägt das Element <em> eine semantische Bedeutung und markiert den Text als</p><p>28 29 3876.book Seite 30 Montag, 30. November 2015 4:25 16 3876.book Seite 31 Montag, 30. November 2015 4:25 16</p><p>2HTML und CSS 2.3 Code follows Content</p><p> betont (emphasised). Wird der Text später einmal von einem Screenreader vorgele- <ul> sen, kann dieser mit <em> etwas anfangen – mit <i> nicht. Das gilt auch für Fettdruck. <li><img src="bild1.gif" alt="Erstes Bild"></li> 2 Statt hier <b> (bold) zu verwenden, ist <strong> die semantisch richtige Wahl. <li><img src="bild2.gif" alt="Zweites Bild"></li> <li><img src="bild3.gif" alt="Drittes Bild"></li> Die Verwendung der Listenelemente <ul> und <ol> im Inhaltsbereich ist klar – eben </ul> für unsortierte und sortierte (nummerierte) Listen. Mittlerweile ist es Standard, auch Navigationsmenüs als Listen auszuzeichnen. Schließlich ist ein Navigationsmenü Listing 2.4 Ungeordnete Liste als semantisches Element für Bildergalerien nichts anderes als eine Liste von Links: Nun sieht die Bildergalerie erst einmal nicht so aus, wie wir es von üblichen Textlis- <ul> ten her kennen. Statt untereinander sind die Bilder nebeneinander angeordnet, und <li><a>...</a></li> Aufzählungszeichen gibt es auch keine. Hier helfen uns die Möglichkeiten von CSS, <li><a>...</a></li> alle bekannten Eigenschaften von HTML-Elementen umzudefinieren. Ich zeige spä- <li><a>...</a></li> ter in Abschnitt 9.7.4, »Grafiken präsentieren – die CSS-Bildergalerie«, an einem kon- </ul> kreten Beispiel einer Bildergalerie, wie das geht. Aber auch in anderen Situationen ist eine Liste geeignet – wie sieht es z. B. mit dieser In anderen Fällen ist die Situation nicht so einfach zu entscheiden, oder es gibt meh- Bildergalerie in Abbildung 2.4 aus? rere semantisch geeignete Möglichkeiten für ein Element. Wie sieht es z. B. mit der auf vielen Websites vorhandenen »Brotkrumen-Navigation« (Breadcrumb-Naviga- tion) aus, die anzeigt, wo sich ein Besucher befindet (siehe Abbildung 2.5)?</p><p>Abbildung 2.5 Typische Breadcrumb-Navigation</p><p>Statt einfach Links aneinanderzusetzen, lassen sich die Breadcrumbs als Pfad inner- halb der Struktur einer Website begreifen, wobei es zwei Möglichkeiten der Auszeich-</p><p>Abbildung 2.4 Eine Bildergalerie ist auch eine Liste. nung gibt (vielleicht fallen Ihnen ja noch weitere ein): Eine etwas umständliche Möglichkeit wäre es, die Breadcrumbs als Menge ineinander verschachtelter Listen Eindeutig eine Liste von Bildern! Warum sie also nicht auch so auszeichnen? von Links zu sehen, wobei die Verschachtelungstiefe der Listen der Struktur der Web- site entspricht.</p><p>30 31 3876.book Seite 32 Montag, 30. November 2015 4:25 16 3876.book Seite 33 Montag, 30. November 2015 4:25 16</p><p>2HTML und CSS 2.4 Sektionen einer Webseite</p><p>Sieht also die Webseite so aus wie in Abbildung 2.6, könnten Sie die auf der Seite »Pro- dukt 2« angezeigte Brotkrumenleiste so darstellen: 2 <div id="breadcrumbs">Sie sind hier: <ul> <li><a href="#">Startseite</a> <ul> <li><a href="#">Produkte</a> <ul> <li>Produkt 2</li> </ul> </li> </ul> </li> </ul> </div></p><p>Listing 2.5 Breadcrumbs als verschachtelte Listenkonstruktion</p><p>Abbildung 2.7 Per CSS gestaltbare Breadcrumb-Navigation mit semantischem Unterbau</p><p>Was Sie im unteren Teil des Screenshots sehen, ist im Übrigen die nützliche <a href="/tags/Firefox/" rel="tag">Firefox</a>- Abbildung 2.6 Struktur einer einfachen Website Extension »<a href="/tags/Firebug_(software)/" rel="tag">Firebug</a>«. Sie und andere Analysetools beschreibe ich detaillierter in Abschnitt 12.9, »Werkzeuge für CSS-Entwickler«. Vielleicht blättern Sie einmal kurz Genauso passend und etwas weniger aufwendig wäre es, eine einzige Liste zu ver- vor und installieren diese Extension (besuchen Sie einfach das Erweiterungsportal wenden und die Ebenentiefe durch eine Nummerierung darzustellen. Praktischer- Ihres Firefox-Browsers, und suchen Sie dort nach »Firebug«; auch für andere Browser weise gibt es in HTML ein Element für sortierte Listen. Das sähe dann so aus: gibt es entsprechende Erweiterungen – dazu mehr in Abschnitt 12.9). Es wird sich <div id="breadcrumbs">Sie sind hier: auch für die später folgenden Beispiele lohnen. Alternativ können Sie auch die einge- <ol> bauten Analysewerkzeuge Ihres Browsers nutzen – bei Firefox und Chrome sind <li><a href="#">Startseite</a></li> diese inzwischen genauso gut wie Firebug. <li><a href="#">Produkte</a></li> Ein ganzes Buch zum Thema »Auswahl passender HTML-Strukturen« zu inhaltlichen <li>Produkt 2</li> Vorgaben ist »Transcending CSS« von Andy Clarke, das informativ und leicht ver- </ol> ständlich anhand konkreter Beispiele das Prinzip verdeutlicht. </div></p><p>Listing 2.6 Breadcrumbs als einzelne sortierte Liste 2.4 Sektionen einer Webseite Ohne Stylesheet sieht das beides noch recht unschön aus, aber mit ein paar gezielten Anweisungen bekommen Sie eine schöne und semantische Breadcrumb-Navigation Viele Webseiten sind strukturell gesehen sehr ähnlich: Sie haben ein Hauptmenü, (siehe Abbildung 2.7). In Abschnitt 9.2, »CSS-Menüs mit Listen«, zeige ich die einzel- eine Art Identitätsbereich oder Header (meist ein Logo am oberen Rand der Seite, nen Schritte, um Menüs zu verschönern. eventuell mit einem Bild), einen Inhaltsbereich für die Hauptinhalte sowie oft eine</p><p>32 33 3876.book Seite 34 Montag, 30. November 2015 4:25 16 3876.book Seite 35 Montag, 30. November 2015 4:25 16</p><p>2HTML und CSS 2.4 Sektionen einer Webseite</p><p>Marginalie für weniger wichtige Inhalte – manchmal mehrere Spalten mit Inhalt. <head> Darüber hinaus gibt es meist eine Art Fußzeile, die das Impressum oder andere for- <title>Ein einfaches Dokument male Informationen aufnimmt. (division). Dabei hat das keine spezielle Bedeutung, zeichnet also keinen bestimmten Bereich aus, sondern wird für alle Arten von Bereichen, Sektionen oder Containern verwendet. Um unterschiedliche Bereiche später leichter wiederzuerken- Kopfzeile nen und unterschiedlich gestalten zu können, müssen Sie die -Elemente also unterschiedlich kennzeichnen. HTML bietet dazu ein passendes Attribut: die ID. Ein einfaches Dokument
... Dieses Dokument wird per CSS formatiert
Damit tatsächlich auch alle Bereiche unterscheidbar sind, müssen IDs eindeutig sein, das heißt, in einem Dokument darf eine ID nur einmal vorkommen. In unserem Beispiel könnten Sie einen Seitenkopf (Header) und eine Fußzeile er- gänzen: Listing 2.8 Komplette Seite mit Navigationsmenü Mit diesem einfachen HTML-Dokument sind Sie nun gut gerüstet, um es mit CSS zu verschönern (siehe Abbildung 2.8). Ein einfaches Dokument Kopfzeile Ein einfaches Dokument
Dieses Dokument wird per CSS formatiert
Listing 2.7 HTML-Dokument mit Sektionen
In der aktuellen HTML5-Spezifikation gibt es eine größere Auswahl an Elementen, um spezifische Sektionen zu beschreiben – dazu komme ich gleich. Als (zunächst) Letztes fügen wir noch einen Bereich für ein (Haupt-)Menü in unsere Seite ein:
Abbildung 2.8 Noch sieht unsere Webseite recht nackt aus.
34 35 3876.book Seite 36 Montag, 30. November 2015 4:25 16 3876.book Seite 37 Montag, 30. November 2015 4:25 16
2HTML und CSS 2.5 HTML5 und CSS
Die Möglichkeiten von HTML5 sind verführerisch; das W3C hat daher HTML5 ein Exkurs: Das Browser-Stylesheet eigenes Logo und eine eigene schick gestylte Website spendiert (siehe Abbildung 2.9): Auch wenn Sie einem HTML-Dokument kein Stylesheet zugeordnet haben, werden www.w3.org/html/logo. 2 die Elemente in einer bestimmten Gestaltung angezeigt. So sind die Überschriften »wie von selbst« größer als der normale Text, und die Abstände zwischen den Ele- menten sind unterschiedlich. Wie kommt das? Jeder Browser hat bereits ein Stylesheet eingebaut, das dann zum Einsatz kommt, wenn auf der aufgerufenen Webseite kein eigenes Stylesheet vorhanden ist. Leider sind die Voreinstellungen der verschiedenen Browser recht unterschiedlich, z. B. was Schriftgrößen und Abstände betrifft, so dass Sie später lernen, wie Sie diese Unter- schiede durch ein »Reset-Stylesheet« verhindern.
Aber vorher werfe ich noch einen Blick auf die aktuelle Entwicklung und zeige auf, was HTML für uns bereithält.
2.5 HTML5 und CSS
Eigentlich sollte der Weg von HTML 4 in Richtung X(HT)ML gehen, so hatte es das W3C vorgegeben und schon begonnen, nach XHTML 1 an XHTML 2 zu arbeiten. Aus verschiedenen Gründen gingen wesentliche Browserhersteller diesen Weg jedoch nicht mit, sondern schlugen stattdessen einen eigenen Weg ein: HTML5. 2006 hat das W3C eine eigene Arbeitsgruppe zu HTML5 ins Leben gerufen und setzt nun auch Abbildung 2.9 Eins, zwei, drei, ganz viele HTML5-Logos … auf HTML5. Die Entwicklung von XHTML 2 wurde eingestellt. Die Website gibt einen guten Überblick über die verfügbaren Technologien wie CSS, Exkurs: Wer sagt eigentlich, was HTML ist? auch wenn CSS eigentlich kein Teil von HTML5 ist, sondern eine eigene Spezifikation. Und wenn Sie wollen, können Sie sich ein Logo-Badge generieren, das alle Technolo- Das W3C (World Wide Web Consortium) ist ein Standardisierungsgremium für HTML gien anzeigt, die Sie auf Ihrer Website verwenden. und andere Webtechnologien. Es veröffentlicht zu allen behandelten Technologien sogenannte Empfehlungen (recommendations), die zwar keinen (gesetzlich) binden- den Charakter haben, aber als Quasistandards beschreiben, wie der fachlich korrekte 2.5.1 HTML5 im Vergleich zu HTML 4 und XHTML und empfehlenswerte Gebrauch dieser Technologien aussieht. Da auch Browserher- Worin unterscheidet sich HTML5 nun von XHTML 1 und HTML 4? Ein erster erfreu- steller diese Empfehlungen (mehr oder weniger) befolgen, sollten Sie sich so weit licher Unterschied ist der Doctype. Während es bei HTML 4 und XHTML 1 eine Viel- wie möglich an diese Empfehlungen halten. zahl von recht komplizierten Doctypes gab, lautet der Doctype von HTML5 schlicht: Das W3C betreibt auch eine Validierungssoftware, mit der Sie Code testen können. Nähere Informationen finden Sie unter www.w3.org und http://validator.w3.org.
Alle modernen Browser verstehen diesen Doctype und stellen damit ausgezeichnete Grundsätzlich ist HTML5 ein Schritt in Richtung Pragmatismus und in vielen Fäl- Dokumente in der standardkonformen Art dar. len wesentlich toleranter, als es der XHTML-2-Standard vorgesehen hatte. Des Weiteren ist es (im Unterschied zu XHTML) nicht erforderlich, einzeln stehende Bis auf den inzwischen kaum noch relevanten Internet Explorer 8 (dort können Sie Tags mit einem »Pseudoende« zu versehen. Statt mit ein klein wenig JavaScript auch noch eine Ausgabe erreichen) interpretieren alle Browser die HTML5-Strukturelemente. 
können Sie jetzt (wieder) schreiben.
36 37 3876.book Seite 38 Montag, 30. November 2015 4:25 16 3876.book Seite 39 Montag, 30. November 2015 4:25 16
2HTML und CSS 2.5 HTML5 und CSS
2.5.2 Neue Elemente in HTML5 ment. Als Problem erweist sich allerdings, dass sich die verschiedenen Beteiligten aus lizenzrechtlichen und marktstrategischen Überlegungen heraus nicht auf ein ein- HTML5 hat eine ganze Reihe neuer Elemente eingeführt, die u. a. dazu gedacht sind, heitliches Kodierungsformat einigen konnten und somit verschiedene Formate 2 die Struktur eines Dokuments besser darzustellen. Zur Auszeichnung der Struktur angeboten werden müssten. Ernest Delgado beschreibt, wie das Element zu nutzen einer Webseite stehen die in Tabelle 2.1 genannten Elemente zur Verfügung. ist und wie dem Problem der unterschiedlichen Formate begegnet werden kann: Element Verwendung www.html5rocks.com/de/tutorials/video/basics/.
section inhaltlich zusammenhängender Bereich Ein weiteres interessantes neues Element ist
aside nebengeordnete Informationen, z. B. Marginalien Eine ganze Reihe von Verbesserungen gibt es für Formulare – meiner Meinung nach überfällig! Hier sind es nicht neue Elemente, sondern neue Typen und Attribute für header Kopfbereich das bekannte Element , so u. a. die in Tabelle 2.2 genannten. footer Fußzeile Type Bedeutung Tabelle 2.1 Neue HTML-Elemente in HTML5 date ein gültiges Datum in lokalisierter Form
Unser Beispiel von vorhin (siehe Listing 2.8) würde jetzt so aussehen (der Übersicht datetime eine Kombination aus Datum und Zeit
halber zeige ich nur den
-Bereich). Ich habe das Element noch nicht ver- url eine gültige URL wendet, da es im Internet Explorer (bis Version 11) noch nicht unterstützt wird. number eine Zahl Kopfzeile range ein Zahlenbereich (von … bis) email eine gültige E-Mail-Adresse Tabelle 2.2 Auswahl neuer HTML5-Möglichkeiten für Formulare können Sie mithilfe eines regulären Ausdrucks vorgeben, welche Form als Eingabe erlaubt ist. Mit Listing 2.9 HTML-Dokumentenstruktur würde die Eingabe als fünfstellige Zahl validiert. Viel beachtet wurden die Elemente
25 3876.book Seite 26 Montag, 30. November 2015 4:25 16 3876.book Seite 27 Montag, 30. November 2015 4:25 16
2HTML und CSS 2.2 Schnelleinstieg HTML
bestimmte HTML-Elemente. Obwohl es in diesem Buch nicht in erster Linie um HTML geht, hier also ein kleiner Ausflug ins HTML. 2 Die grundsätzliche Struktur eines HTML-Dokuments haben Sie in Kapitel 1, »Was sind Cascading Stylesheets?«, schon kennengelernt. Hier kommt sie noch einmal – zunächst auf das Minimum reduziert:
Listing 2.1 Minimales HTML-Dokument nach dem Standard HTML5
Danach beginnt ein HTML-Dokument mit dem sogenannten Doctype, der angibt, in welcher Sprachversion das Dokument geschrieben ist. Mit HTML5 ist glücklicher- Abbildung 2.1 SelfHTML – der Klassiker weise Schluss mit langen und komplizierten Doctypes – reicht. Als Nächstes folgt das öffnende , das am Ende des Dokuments auch wieder So finden sich im Sprachschatz der ersten HTML-Versionen auch nur Befehle, die die geschlossen sein muss: . Funktion oder Bedeutung eines Dokumentenbestandteils beschreiben. Beispiele Diese hierarchische Ordnung ist ein Grundprinzip von HTML: Ein Dokument besteht sind: aus verschiedenen ineinander verschachtelten Elementen oder Schichten, ähnlich ̈
...
steht für einen Absatz. wie die russischen Matroschka-Figuren (siehe Abbildung 2.2). Im Gegensatz zu Ma- ̈...
stellt eine Überschrift erster Ordnung dar. troschka-Puppen kann ein HTML-Element allerdings beliebig viele »Kinder« haben … ̈ ... erzeugt einen Link auf ein anderes Dokument.Strukturierte Dokumente mit HTML Die Idee dieser Konstruktion war es, ein Dokument so zu beschreiben, dass es auf vielen unterschiedlichen Anzeigegeräten gemäß seiner Bedeutung (»logische Aus- zeichnung«) wiedergegeben werden kann. So ist es für ein HTML-Dokument im Prin- zip egal, ob es auf einem hochauflösenden 30-Zoll-Monitor, einem winzigen Handy- Display angezeigt oder vorgelesen werden soll. Das jeweilige Endgerät entscheidet selbst, wie beispielsweise eine Überschrift erster Ordnung präsentiert werden soll.
2.2 Schnelleinstieg HTML
Um eine Webseite mit Stylesheets zu gestalten, muss eine HTML-Struktur vorhanden Abbildung 2.2 Eine Webseite ist ein Stück weit wie eine Matroschka-Puppe: Elemente in sein. Grundsätzlich wirken die im Stylesheet notierten Eigenschaften immer auf Elementen in Elementen …
26 27 3876.book Seite 28 Montag, 30. November 2015 4:25 16 3876.book Seite 29 Montag, 30. November 2015 4:25 16
2HTML und CSS 2.3 Code follows Content
Die nächste Schicht bilden dann die Elemente
... und ... . Da sie sich innerhalb des HTML-Elements befinden, werden sie auch »Kind«Ein einfaches Dokument
2 oder »child« genannt. Im Gegenzug ist dann das ein »Elternelement« oderDieses Dokument wird per CSS formatiert
»parent« von und . Manchmal wird von dem Elternelement auch als »übergeordnetem Element« gesprochen. Listing 2.2 Inhalt gehört in den . Auch dies ist ein Prinzip, das wir später noch oft antreffen werden. Innerhalb von anderen Elementen platzierte Elemente werden als »Kinder« bezeichnet und Der Bereich ist zusätzlichen Angaben über das Dokument vorbehalten. Diese »erben« von ihren »Eltern« Eigenschaften. Das ist meist sehr praktisch, da Sie oft werden nicht (oder zumindest nicht direkt) im Browser angezeigt, sondern enthalten benötigte Eigenschaften wie die verwendete Schrift nur einmal notieren müssen, Informationen, die dem Browser das Darstellen des Dokuments ermöglichen. In die- nämlich für das oberste Element, quasi den Stammvater (oder die Stammmutter). sem Beispiel gibt es hier eine Metainformation über das Dokument – nämlich den Titel des Dokuments und die CSS-Anweisungen: Diese Art, Elemente zu verschachteln, ist von der objektorientierten Programmie- rung her bekannt. Dort wird auch von einer Objekthierarchie gesprochen, die aus einem HTML-Dokument gebildet wird (siehe Abbildung 2.3).Listing 2.3 Im
werden Informationen über das Dokument gegeben." " 2.3 Code follows Content
Der erste Schritt beim Erstellen einer Website ist daher, sich Gedanken über die semantische Struktur der Inhalte zu machen. Bei Überschriften und Absätzen ist das noch recht einfach, bei anderen Elementen fällt dies schon etwas schwerer, und für Abbildung 2.3 Baumstruktur eines HTML-Dokuments viele Situationen gibt es (noch) kein passendes HTML-Element. Einen großen Schritt in Richtung mehr Semantik macht die neueste Generation von HTML – HTML5.
Das Document Object Model (DOM) Für Überschriften werden die Elemente
bis verwendet. Dabei gibt die Num- mer der Überschrift deren Bedeutung an – als wird die erste, wichtigste Über- Tatsächlich betrachtet ein Webbrowser eine HTML-Seite als Objekt. Somit sind sämt- schrift der Seite verwendet, in der Regel der Seitentitel. wäre dann die liche Elemente einer Webseite Unterobjekte – Kinder – des ersten Elements HTML nächstwichtige usw. Um ein regelkonformes, semantisches Dokument zu erstellen, und können z. B. per JavaScript angesprochen werden. In diesem Zusammenhang ist dürfen auch keine Überschriftenebenen ausgelassen werden. Ein weiteres schon oft vom Document Object Model, kurz DOM, die Rede. Gemeint ist damit der »Baum« bekanntes Element ist der Absatz
wird die erste, wichtigste Über- Tatsächlich betrachtet ein Webbrowser eine HTML-Seite als Objekt. Somit sind sämt- schrift der Seite verwendet, in der Regel der Seitentitel. wäre dann die liche Elemente einer Webseite Unterobjekte – Kinder – des ersten Elements HTML nächstwichtige usw. Um ein regelkonformes, semantisches Dokument zu erstellen, und können z. B. per JavaScript angesprochen werden. In diesem Zusammenhang ist dürfen auch keine Überschriftenebenen ausgelassen werden. Ein weiteres schon oft vom Document Object Model, kurz DOM, die Rede. Gemeint ist damit der »Baum« bekanntes Element ist der Absatz
. aller Objekte, aus denen eine HTML-Seite aufgebaut ist (siehe Abbildung 2.3). Semantik findet sich auch bei den Textauszeichnungen: Statt einen kursiven Text Im Grunde ist mit ,
, keine spezielle Bedeutung, zeichnet also keinen bestimmten Bereich aus, sondern wird für alle Arten von Bereichen, Sektionen oder Containern verwendet. Um unterschiedliche Bereiche später leichter wiederzuerken-
Kopfzeile
nen und unterschiedlich gestalten zu können, müssen Sie die -Elemente also unterschiedlich kennzeichnen. HTML bietet dazu ein passendes Attribut: die ID. Damit tatsächlich auch alle Bereiche unterscheidbar sind, müssen IDs eindeutig sein, das heißt, in einem Dokument darf eine ID nur einmal vorkommen. In unserem Beispiel könnten Sie einen Seitenkopf (Header) und eine Fußzeile er- gänzen: Listing 2.8 Komplette Seite mit Navigationsmenü Mit diesem einfachen HTML-Dokument sind Sie nun gut gerüstet, um es mit CSS zu verschönern (siehe Abbildung 2.8). Ein einfaches Dokument noch nicht ver- url eine gültige URL wendet, da es im Internet Explorer (bis Version 11) noch nicht unterstützt wird. number eine Zahl Kopfzeile range ein Zahlenbereich (von … bis) email eine gültige E-Mail-Adresse Tabelle 2.2 Auswahl neuer HTML5-Möglichkeiten für Formulare können Sie mithilfe eines regulären Ausdrucks vorgeben, welche Form als Eingabe erlaubt ist. Mit Listing 2.9 HTML-Dokumentenstruktur würde die Eingabe als fünfstellige Zahl validiert. Viel beachtet wurden die Elemente
Ein einfaches Dokument
...
Dieses Dokument wird per CSS formatiert
Kopfzeile
Ein einfaches Dokument
Dieses Dokument wird per CSS formatiert
Listing 2.7 HTML-Dokument mit Sektionen
In der aktuellen HTML5-Spezifikation gibt es eine größere Auswahl an Elementen, um spezifische Sektionen zu beschreiben – dazu komme ich gleich. Als (zunächst) Letztes fügen wir noch einen Bereich für ein (Haupt-)Menü in unsere Seite ein:
Abbildung 2.8 Noch sieht unsere Webseite recht nackt aus.
34 35 3876.book Seite 36 Montag, 30. November 2015 4:25 16 3876.book Seite 37 Montag, 30. November 2015 4:25 16
2HTML und CSS 2.5 HTML5 und CSS
Die Möglichkeiten von HTML5 sind verführerisch; das W3C hat daher HTML5 ein Exkurs: Das Browser-Stylesheet eigenes Logo und eine eigene schick gestylte Website spendiert (siehe Abbildung 2.9): Auch wenn Sie einem HTML-Dokument kein Stylesheet zugeordnet haben, werden www.w3.org/html/logo. 2 die Elemente in einer bestimmten Gestaltung angezeigt. So sind die Überschriften »wie von selbst« größer als der normale Text, und die Abstände zwischen den Ele- menten sind unterschiedlich. Wie kommt das? Jeder Browser hat bereits ein Stylesheet eingebaut, das dann zum Einsatz kommt, wenn auf der aufgerufenen Webseite kein eigenes Stylesheet vorhanden ist. Leider sind die Voreinstellungen der verschiedenen Browser recht unterschiedlich, z. B. was Schriftgrößen und Abstände betrifft, so dass Sie später lernen, wie Sie diese Unter- schiede durch ein »Reset-Stylesheet« verhindern.
Aber vorher werfe ich noch einen Blick auf die aktuelle Entwicklung und zeige auf, was HTML für uns bereithält.
2.5 HTML5 und CSS
Eigentlich sollte der Weg von HTML 4 in Richtung X(HT)ML gehen, so hatte es das W3C vorgegeben und schon begonnen, nach XHTML 1 an XHTML 2 zu arbeiten. Aus verschiedenen Gründen gingen wesentliche Browserhersteller diesen Weg jedoch nicht mit, sondern schlugen stattdessen einen eigenen Weg ein: HTML5. 2006 hat das W3C eine eigene Arbeitsgruppe zu HTML5 ins Leben gerufen und setzt nun auch Abbildung 2.9 Eins, zwei, drei, ganz viele HTML5-Logos … auf HTML5. Die Entwicklung von XHTML 2 wurde eingestellt. Die Website gibt einen guten Überblick über die verfügbaren Technologien wie CSS, Exkurs: Wer sagt eigentlich, was HTML ist? auch wenn CSS eigentlich kein Teil von HTML5 ist, sondern eine eigene Spezifikation. Und wenn Sie wollen, können Sie sich ein Logo-Badge generieren, das alle Technolo- Das W3C (World Wide Web Consortium) ist ein Standardisierungsgremium für HTML gien anzeigt, die Sie auf Ihrer Website verwenden. und andere Webtechnologien. Es veröffentlicht zu allen behandelten Technologien sogenannte Empfehlungen (recommendations), die zwar keinen (gesetzlich) binden- den Charakter haben, aber als Quasistandards beschreiben, wie der fachlich korrekte 2.5.1 HTML5 im Vergleich zu HTML 4 und XHTML und empfehlenswerte Gebrauch dieser Technologien aussieht. Da auch Browserher- Worin unterscheidet sich HTML5 nun von XHTML 1 und HTML 4? Ein erster erfreu- steller diese Empfehlungen (mehr oder weniger) befolgen, sollten Sie sich so weit licher Unterschied ist der Doctype. Während es bei HTML 4 und XHTML 1 eine Viel- wie möglich an diese Empfehlungen halten. zahl von recht komplizierten Doctypes gab, lautet der Doctype von HTML5 schlicht: Das W3C betreibt auch eine Validierungssoftware, mit der Sie Code testen können. Nähere Informationen finden Sie unter www.w3.org und http://validator.w3.org.
Alle modernen Browser verstehen diesen Doctype und stellen damit ausgezeichnete Grundsätzlich ist HTML5 ein Schritt in Richtung Pragmatismus und in vielen Fäl- Dokumente in der standardkonformen Art dar. len wesentlich toleranter, als es der XHTML-2-Standard vorgesehen hatte. Des Weiteren ist es (im Unterschied zu XHTML) nicht erforderlich, einzeln stehende Bis auf den inzwischen kaum noch relevanten Internet Explorer 8 (dort können Sie Tags mit einem »Pseudoende« zu versehen. Statt mit ein klein wenig JavaScript auch noch eine Ausgabe erreichen) interpretieren alle Browser die HTML5-Strukturelemente. können Sie jetzt (wieder) schreiben.
36 37 3876.book Seite 38 Montag, 30. November 2015 4:25 16 3876.book Seite 39 Montag, 30. November 2015 4:25 16
2HTML und CSS 2.5 HTML5 und CSS
2.5.2 Neue Elemente in HTML5 ment. Als Problem erweist sich allerdings, dass sich die verschiedenen Beteiligten aus lizenzrechtlichen und marktstrategischen Überlegungen heraus nicht auf ein ein- HTML5 hat eine ganze Reihe neuer Elemente eingeführt, die u. a. dazu gedacht sind, heitliches Kodierungsformat einigen konnten und somit verschiedene Formate 2 die Struktur eines Dokuments besser darzustellen. Zur Auszeichnung der Struktur angeboten werden müssten. Ernest Delgado beschreibt, wie das Element zu nutzen einer Webseite stehen die in Tabelle 2.1 genannten Elemente zur Verfügung. ist und wie dem Problem der unterschiedlichen Formate begegnet werden kann: Element Verwendung www.html5rocks.com/de/tutorials/video/basics/.
section inhaltlich zusammenhängender Bereich Ein weiteres interessantes neues Element ist
aside nebengeordnete Informationen, z. B. Marginalien Eine ganze Reihe von Verbesserungen gibt es für Formulare – meiner Meinung nach überfällig! Hier sind es nicht neue Elemente, sondern neue Typen und Attribute für header Kopfbereich das bekannte Element , so u. a. die in Tabelle 2.2 genannten. footer Fußzeile Type Bedeutung Tabelle 2.1 Neue HTML-Elemente in HTML5 date ein gültiges Datum in lokalisierter Form
Unser Beispiel von vorhin (siehe Listing 2.8) würde jetzt so aussehen (der Übersicht datetime eine Kombination aus Datum und Zeit
halber zeige ich nur den
-Bereich). Ich habe das Element