HTML-Farben und Tabellen für eine übersichtliche Website

Soweit zur Theorie – nun soll es darum gehen, wie diese Farbcodes in die Gestaltung einer Website einfließen. Zum Üben eignet sich der Texteditor, der auf Windows-PCs ab Werk installiert ist.

In unserem Beispiel soll ein gelber Text auf rotem Hintergrund erscheinen. Im Editor sieht das Ganze so aus:

„Body Style“ in der dritten Zeile legt die Hintergrundfarbe fest – in diesem Fall handelt es sich eben um ein kräftiges Rot. „Span Style“ legt eine Zeile darunter die Textfarbe fest. Der besseren Lesbarkeit wegen haben wir zudem die Schriftgröße mit „Font Size“ auf das Maximum von 7 erhöht. Speichert man diese Datei nun mit der Endung .htm und öffnet sie per Doppelklick, wird die Webversion im Standardbrowser angezeigt:

Wollen Sie einen Link in einer anderen Farbe setzen, geht das selbstverständlich ebenfalls. Wir haben uns für Blau entschieden, der entsprechende Code sieht folgendermaßen aus:

Zur Erklärung:

• „a“ steht in HTML für einen Link
• Unter „href“ wird das Linkziel angegeben, in diesem Fall unser Blog
• target=“_blank“ zeigt dem Browser an, dass der Link in einem neuen Tab geöffnet werden soll
• „Hier geht es zum AS-Blog“ soll der Linktext werden

So sieht die fertige Datei im Editor aus:

Hinweis: Mit „p“ haben wir einen Absatz eingefügt, mit „h2“ die Größe geändert, indem wir den Linktext als Überschrift formatiert haben. Als Website sieht die Datei folgendermaßen aus:

Es gibt neben den Farbcodes noch eine weitere Möglichkeit, eine Website per HTML bunt zu gestalten, nämlich die Farbnamen zu verwenden. Das Prinzip ist eigentlich genau das gleiche, nur dass eben statt dem Code der Name eingefügt wird. Blau lässt sich also auf zwei verschiedenen Arten darstellen:

Nach diesem Muster funktionieren auch alle anderen Farben. Im Internet gibt es zahlreiche Tabellen, anhand derer Sie sehen können, wie die Farbe heißt, die Sie verwenden möchten.

Um eine Website mit viel Inhalt übersichtlich zu gestalten, bietet es sich an, mit Tabellen zu arbeiten. Sie sind als Layout-Elemente zwar nicht mehr so beliebt wie noch vor einigen Jahren, haben aber einen großen Vorteil: Sie machen Informationen auf einen Blick verfügbar, und man muss sich nicht mühsam durch den Fließtext „kämpfen“.

Dabei kann man per HTML genau festlegen, wie viele Spalten es geben soll und wie die Hintergrundfarbe aussehen soll, damit sie optisch ins Gesamtkonzept der Website passt.

In unserem Beispiel gestalten wir eine sehr übersichtliche Tabelle, die dennoch alle wichtigen Elemente enthält. In HTML sieht sie folgendermaßen aus:

Zur Erklärung:

• Mit dem Befehl „table“ wird klar, dass eine Tabelle erstellt wird
• „table style“ definiert die Hintergrundfarbe
• „thead“ zeigt an, dass es sich im die Kopfzeile handeln soll
• Mit „th“ wird festgelegt, wie diese Kopfzeile befüllt werden soll. In unserem Fall bleibt die erste Spalte leer
• „tbody“ leitet nun die eigentliche Tabelle an. Was danach unter „th“ steht, wird nicht oben, sondern vorne platziert.
• „td“ steht für table data, also den Inhalt der einzelnen Spalten
• „tfoot“ zeigt an, dass nun die untere Zeile beginnt
• In einer weiteren Zeile haben wir mit dem Befehl „colspan“ festgelegt, dass der Inhalt über die gesamte Breite der Tabelle geht. Die „3“ bedeutet hier drei Zellen, bei mehr muss diese Zahl entsprechend angepasst werden.

Im Browser sieht das Ergebnis so aus:

Die Anzeigensprache HTML ist ein idealer Weg, um erste Schritte im Webdesign zu gehen. Schon mit ein wenig Einlesen ist es kein Problem mehr, ein ansprechendes Grunddesign zu entwickeln, das es dem Leser einfach macht, die Inhalte einer Website schnell zu überblicken und das zu finden, was er sucht. Mit Farbcodes und Tabellen kann das Gesamtbild aufgelockert werden – und das sehr individuell. Für den Einstieg ist diese Anzeigensprache also bestens geeignet.