BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Hintergrundgestaltung


In einem HTML-Dokument erscheint der Hintergrund, sofern nichts Anderes bestimmt wurde, üblicherweise Weiß. Abgesehen davon, dass es sich hier um den Standardeintopf handelt, hat Weiß am Bildschirm einen Nachteil, den es am Papier nicht hat: Es strengt die Augen beim Lesen stark an, weil es sehr hell leuchtet. Deshalb ist der Hintergrund dieses Tutorials in einer matten Farbe gehalten.

Der Hintergrund kann auf verschiedene Arten verändert werden. Die einfachste besteht darin, eine Farbe zu bestimmen. Dies geschieht im Stylesheet als Attribut des Body-Tags und sieht so aus:

body { background-color: #E6E8FA; }.

Die zweite Möglichkeit ist, ein Hintergrundbild zu wählen. Dieses sollte mehrere Kriterien erfüllen:

  1. geringe Dateigröße, um die Ladezeit kurz zu halten
  2. optischer Gewinn für die Seite
  3. keine Beeinträchtigung der Lesbarkeit des Textes

Ein abschreckendes Beispiel kann auf dieser Seite bewundert werden. Die Dateigröße von 29k ist ausreichend klein, die anderen Kriterien lassen allerdings zu wünschen über.

  1. Unser Hintergrundbild macht das Lesen praktisch unmöglich. Es ist eine gewisse Herausforderung, hier die richtige Schriftformatierung zu finden.
  2. Die ewige Wiederholung des Bildes - Kachelung lautet der Fachausdruck - verbessert den optischen Eindruck auch nicht unbedingt. Man muss den Eindruck gewinnen, ein krankhafter Fan von Präsident Abraham Lincoln wäre am Werk gewesen.
  3. Zudem wird die letzte Bilderreihe dort abgeschnitten, wo der Text zu Ende ist - auch nicht gerade ein schöner Eindruck.

Aufgrund des gezeigten Beispiels sollte klar sein, dass der Auswahl eines Hintergrundbilds große Aufmerksamkeit gewidmet werden sollte. Wenn es schon für nötig erachtet wird, dann soll es den Text und allfällige andere Bilder auf dieser Seite nicht stören, sondern unterstützen.

Ordnung usw.

Es ist aus Gründen der Übersichtlichkeit mehr als ratsam, alle zu einer Homepage bzw. zu einem Projekt gehörenden *.htm-Dateien in ein Verzeichnis zu geben. Dieses wiederum sollte ein Unterverzeichnis mit dem Namen images enthalten, in dem alle Bilder gespeichert werden. Zudem sollte es ein weiteres Unterverzeichnis mit dem Namen style geben, in dem alle Stylesheets gespeichert werden. Weiters möchte ich dringend raten, alle Dateinamen und Erweiterungen immer klein zu schreiben sowie auf Leerschritte, Umlaute und Sonderzeichen zu verzichten, da diese auf bestimmten Webservern - vor allem UNIX/LINUX und Apache - Fehlermeldungen verursachen, sodass die Webseiten nicht oder nicht korrekt dargestellt werden.


Aufgaben 10 & 11

  1. Erstelle die Datei hintergrund.css. Füge dort für den <body>-Tag ein Hintergrundbild deiner Wahl ein. Weise weiters Schriftart. Schriftgröße und Schriftfarbe zu. Speichere hintergrund.css im Ordner style.
  2. Öffne die Datei geruest.htm und weise ihr hintergrund.css als Stylesheet zu. Danach fügst du 8 Absätze Text zu je 4 Zeilen ein und speicherst das Ergebnis als uebung08.htm ab.