Große Websites selbst bauen
Erste Schritte: Das erste Hintergrundbild
Das erste Hintergrundbild
Auf dieser Seite
Mit Bild
Mit einer schlichten Text-Datei locken Sie im Internet schon lange keinen Hund mehr hinterm Ofen hervor. Es mag noch so richtig und wichtig sein, was Sie dort schreiben, aber es soll auch lesefreundlich präsentiert sein.
Mit Bild
Beispielsweise sollten alle Seiten ein einheitliches Layout haben, sodass die Benutzer immer sehen können, wo sie sich befinden. Das gilt auch dann, wenn Sie keine berufliche Internet-Präsenz, sondern eine eher privat orientierte betreiben (ein Beispiel dafür wäre igi.siebes.de zum Thema "Ahnenforschung").
Mit Bild
Die einfachste Lösung für ein einheitliches Design ist ein Hintergrundbild, welches in jede HTML-Datei eingebunden wird. Damit es auch auf großen Bildschirmen nicht zu früh aufhört, sollten Sie es großzügig planen. Sehr großzügig!
Mit Bild
Selbst wenn große Teile davon weiße Fläche enthalten, würde ich es wenigstens 2.000 Pixel hoch und 3.000 Pixel breit machen. Wenn die Grafik nicht gerade voller Fotos ist (was für einen Hintergrund sowieso zu unruhig wäre), ist die Dateigröße ohnehin kein Problem. Das hier benutzte Bild ist beispielsweise 65 kB klein und sieht so aus:
Mit Bild

(Verkleinertes) Hintergrundbild mit extra Weißbereich als Reserve für große Bildschirme
Mit Bild
Speichern Sie das zukünftige Hintergrundbild im Bilder-Verzeichnis. Damit es im Browser angezeigt wird, ergänzen Sie das body-Element so:
Mit Bild
<body background="bilder/hintergrund.png">
Mit Bild
Laden Sie die Seite dann erneut im Browser, um das Ergebnis zu betrachten:
Mit Bild

Seite mit Hintergrundbild
Mit Bild
Das Bild ist vorhanden, aber es sieht insgesamt nicht besonders überzeugend aus. Um die Schönheit können wir uns später kümmern, jetzt gibt es erstmal konzeptionelle Probleme zu lösen: Ein Hintergrundbild ist ein grafisches Element und gehört damit eigentlich grundsätzlich nicht in die HTML-Datei.
HTML ist nämlich eine Sprache, mit welcher die Struktur Ihrer Dokumente beschrieben wird. Je besser Sie also Inhalt und Layout trennen, desto sauberer wird der Code und vor allem desto pflegeleichter werden die Dateien.
Für kleinere Seiten kann man vielleicht noch eine <b>fette (bold)</b> oder <i>kursive (italic)</i> Auszeichnung im Text durchgehen lassen, aber eigentlich gehört eine solche Schriftformatierung nicht in die HTML-Datei.