Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: Body-Tag mit eingebundener CSS-Datei
Beschreibung: Beispiel für den 🌍 body-Tag in HTML mit einer eingebundenen ✅ CSS-Datei für die Gestaltung der Seite außerhalb der HTML-Struktur.
In den Anfängen des Webdesign wurde der body-Tag für den Inhaltsbereich ergänzt, etwa durch die Einstellung einer Hintergrundfarbe. Das kann man auch heute noch machen, es funktioniert technisch. Aber es wird dringend empfohlen, stattdessen mit der externe CSS-Datei zu arbeiten und die Formatierungen über diese externe Datei durchzuführen.
Daher braucht es im Kopfteil das Integrieren dieser Datei, damit der Browser sie gleich mitlädt und die entsprechenden Formatierungen übernehmen kann. Andernfalls würde die Darstellung nicht so erfolgen, wie man sich das gewünscht hat.
Das Beispiel zeigt die Einbindung der CSS-Datei im Kopfteil und im Anschluss die Formatierung in der CSS-Datei selbst, die durch die Einbindung für die Seite wirksam wird. Fakt ist, dass die große Veränderung zu den zuvor präsentieren Möglichkeiten, den Inhalt der HTML-Seite generell zu formatieren, darin besteht, dass eine externe Datei eingebunden wird.
Typischerweise nennt man sie styles.css, sie könnte aber auch heute_nicht.css lauten. Da in der Datei die styles, also die grafischen Vorgaben festgelegt werden, hat sich der Name styles eingebürgert. Durch den link-Befehl wird die Datei eingebunden und dieses Konzept ist elementar. Die Befehle, die im zweiten Teil beginnend mit body { angeführt sind, werden in der styles.css gespeichert und beinhalten ziemlich genau die gleichen Befehle, wie im letzten Artikel.
Dadurch, dass per externer CSS-Datei die Formatierung vorgesehen ist, entfallen sämtliche Zusätze beim body-Tag selbst. Denn dieser erhält sein Aussehen durch die Befehle via CSS-Datei. Das bedeutet auch, dass jede Änderung der vorgesehen Hintergrundfarbe in der Datei automatisch nach dem Speichern und Aktualisieren die HTML-Datei ändert.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Und das ist der wesentliche Vorteil gegenüber der bisher vorgestellten Lösungen, weil man 20 oder auch 200 Unterseiten mit einem Schlag ändern kann. Stellen Sie sich vor, Sie beginnen mit einer kleinen Hobbyseite mit zehn Seiten Inhalt. Die Leute finden die Seite aber und finden sie sogar gut und Sie basteln weiter - plötzlich haben Sie 50 Seiten und möchten die Hintergrundfarbe ändern - wenn Sie eine CSS-Datei eingebunden haben, brauchen Sie dafür fünf Minuten. Haben Sie die Hintergrundfarbe in jeder Datei im body-Tag festgelegt, müssen Sie alle 50 Seiten manuell überarbeiten. CSS erscheint am Anfang lästig, hilft aber viel Zeit sparen und ist nicht wirklich schwierig.
Außerdem ist damit auch sichergestellt, dass die gesamte Seite mit allen Unterseiten das gleiche Erscheinungsbild hat. In den Anfangszeiten des Webdesign hatte man 40 HTML-Dokumente, die man auch verschieden formatieren konnte, wodurch sich das Design nicht durchgezogen hatte. Das war nicht gleich aufgefallen, später war viel Arbeit nötig, um diese Unterschiede auszugleichen. Bei einer zentralen CSS-Datei fällt das Problem komplett weg.
Die Einführung in die Beschreibungssprache HTML beginnt damit, dass man verstehen muss, wie die Tags eingesetzt werden, die den Befehlsatz darstellen. Es braucht ein Grundgerüst für jede Seite mit der Deklaration, unter welchen Spielregeln man arbeiten möchte und mit welchem Zeichensatz man die Seite aufbaut.
Jede Seite sollte über einen Kopfteil verfügen und über den eigentlichen Inhalt mit dem body-Tag, in dem sich Text, Bilder und Videos befinden. Im Kopfteil gibt es die Meta-Tags mit Grundeinstellungen für die Suchmaschinen, den Titel der Seite sowie auch die Links zu den CSS-Dateien.
Außerdem sollte man das Grundverständnis haben, warum die alte Methode mit direkten HTML-Formatierungen nicht so gut ist wie die moderne mit der CSS-Datei als externe Formatierungsquelle.
Themenseiten
Artikel-Thema: Body-Tag mit eingebundener CSS-Datei
Beschreibung: Beispiel für den 🌍 body-Tag in HTML mit einer eingebundenen ✅ CSS-Datei für die Gestaltung der Seite außerhalb der HTML-Struktur.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel