04 - Es kommt Farbe ins Spiel

Dazu benutzen wir CSS.

Viele Aspekte des Aussehens von Text lassen sich auch in HTML verwirklichen, z.B. die Text- oder die Hintergrundfarbe, die Schriftart oder die Schriftgröße oder die Absatzausrichtung (zentriert, links- bzw. rechtsbündig oder Blocksatz) Dazu werden die öffnenden HTML-Tags mit sogenannten Attributen erweitert, denen Werte zugeordnet werden. Das kann dann so aussehen:

<h1 align="center">Die polyglotte Katze</h1>

Hier ist align eines der für <h1> zugelassenen Attribute, welchem einer der Werte {left|rigth|center|justify} zugewiesen werden kann. Das ganze betrachten wir, wenn überhaupt, nur mit historischem Interesse. Was wir uns merken, ist, dass man HTML-Tags um Attribut-Wert-Paare in der Form <tag attribut="wert"> erweitern kann.

Inline- und Blockelemente

HTML unterscheidet zwei grundlegende Klassen von Elementen: Inline-Elemente und Block-Elemente. Inline-Elemente verändern den Textfluss nicht, sie fließen sozusagen mit der Zeile mit. Blockelemente hingegen erzwingen bei ihrem Auftreten einen Zeilenumbruch. Die <hx>-Tags und das <p> Tag sind Blockelemente. die <i> <b> und <em> Tags sind Inline-Elemente.

<span> (Inline) und <div> (Block) sind zwei HTML-Tags die schlicht nichts tun, ausser Style-Attribute aufzunehmen. Das kann dann so aussehen:

Die <span style="color:red">Katze</span> sitzt vorm Mauseloch,<br>

Zwischen den Anführungszeichen des style-Attributs bewegen wir uns in den unendlichen Weiten der Cascading Style Sheets (CSS). Innerhalb der Anführungszeichen begegnen uns wieder attribut:wert-Paare, die diesmal jedoch der CSS-Syntax entsprechen müssen. Mehrere solcher Paare werden durch ein Semikolon ; voneinander getrennt.

Farben

Die CSS-Attribute color und background-color nehmen Farbwerte auf verschiedene Weise an. Die geläufigsten sind die Angabe des RGB-Wertes in hexadezimaler Schreibweise: Jede Farbe wird durch das Mischungsverhältnis der Grundfarben Rot, Grün und Blau wiedergegeben, wobei für jede der Grundfarben ihr Anteil an der resultierenden Farbe mit einer Zahl zwischen [00000000]₂ und [11111111]₂ wiedergegeben wird. Schwarz ist die Abwesenheit aller Farben und ist dementsprechend #000000 (hexadezimal), Weiß sind alle Farben zugleich: #FFFFFF. Die reinen Grautöne sind alle Farben, bei denen der Anteil der drei Grundfarben jeweils gleich ist. Frage: Wieviele shades of grey gibt es im RGB-Farbraum?

Eine andere, durchaus charmante Möglichkeit der Farbgestaltung bieten sogenannte Farbnamen. Neben den bekannten englischen Farbvokabeln gibt eine deutlich dreistellige Zahl an festgelegten Farbnamen. Eine Übersicht dazu findet sich zum Beispiel hier.

Aufgabe

Markiert alle Reimpaare des Gedichts mit einer je eigenen Farbe.

Zusatzaufgabe

Bevor Ihr Euch langweilt: Mit dem <div> Tag könnt Ihr ganze Bereiche Eurer Webseite, z.B. das ganze Gedicht "einpacken" und zum Beispiel dafür sorgen, dass das Gedicht insgesamt zentriert erscheint, wobei es nach wie vor linksbündig gesetzt sein sollte. (Bei einem einfachen text-align:center habt Ihr rechts und links Flattersatz. Das gibt schließlich kein Bild.) Dazu müsst Ihr Euch mit dem Box-Modell von CSS beschäftigen.