Warum sollte man seine Seite mit CSS formatieren statt rein mit Html? Geht ja alles, oder besser vieles mit Html.
Nun der Grund ist einfach und kann man auch gut mit einem Beispiel erklären. Wie in dem Html Lehrgang und dem CSS Lehrgang schon beschrieben, sollte lediglich der Seitenaufbau über Html geschehen.
Klar kann man seine Seite auch komplett mit Tabellen gestalten, Schriftarten fix per Html definieren. Doch was wenn man mal das Layout der Seite umstellen möchte?
Viele, unzählige Probleme kommen auf einen zu, der Inhalt bleibt meist gleich nur Farben und Positionierungen ändern sich oft. Wie erklärt man einer Tabelle das nun das Menü nicht mehr rechts sondern links, oder gar oben zu finden ist? Da hilft dann oft nur eines, Seitenaufbau komplett neu schreiben und den Inhalt dementsprechend in die neuen Zellen kopieren.
Wäre es da nicht einfach lediglich eine Datei, nämlich die CSS Datei zu editieren?
Div-Container lassen sich in CSS beliebig positionieren ohne dafür x Datein über arbeiten zu müssen.
Viele kennen die Aussagen, wie z.B. „Ich kann kein HTML programmieren, deswegen benutze ich Frontpage oder ähnliches“.
Ich will nun hier anderes aufzeigen und Euch beweisen, dass es doch anders gehen kann, und zwar leichter, als mit einem WYSIWYG-Editor.
Dazu zeige ich Euch einmal das konservative Tabellen-Design, wie z.B. in einem soeben genannten Editor und die vernünftige Textauszeichnung mittels DIV und CSS.
Eins vorweg, HTML programmiert man nicht. HTML ist lediglich eine Textauszeichnungssprache die durch Browser geparst und somit dargestellt wird.
Zur vernünftigen Formatierung des ganzen benutzen wir CSS, in der wir alles, wirklich alles, was Formatierung betrifft auslagern.
Alle Formatierungen sind hier in das HTML eingefasst. Dieses Beispiel zeigt noch ein ziemlich harmloses Beispiel einer Tabellenstruktur.
So richtig weiß man nicht was da steht, besonders nicht, wenn man noch nie eine Tabellenformatierung per Hand geschrieben hat.
Nun möchte ich Euch die sinnvolle Lösung schildern:
Wir beginnen mit einem alles umfassenden DIV-Container, den benötigt man nicht zwingend, wir machen es aber um einen Rahmen um das ganze zu legen, anschließend in der CSS-Datei.
Wir belegen es mit der ID „all“. Die ID bezieht sich auf das ausgelagerte CSS, hierauf kommen wir später zu sprechen.
Wir haben also schon ein Grundgestell, das ging ja einfach ;-). Nun machen wir das ganze ein wenig komplexer und teilen in die verschiedenen Bereiche auf.
Für den Bereich des Headers benötigen wir lediglich eine Grafik, in HTML leitet man eine Grafik so ein und schließt sie im selben Tag ab. Ich gehe nun einfach mal davon aus, dass Ihr eine Grafik nehmt, ansonsten müsst Ihr halt noch einen zusätzlichen DIV-Container anlegen.
So nun habt Ihr bereits den Kopf und die Grundstruktur, machen wir nun zwei Schritte in einem, nämlichen den Navigationsteil und den Inhalts-Teil.
Dazu benutzen wir ebenfalls 1 DIV-Container, das ist fürs erste das leichteste, wenn Ihr später Eure Navigationen über Listenelemente erstellt, dann werdet Ihr ebenfalls darüber Tutorials im Internet finden bzw. im CSS Lehrgang , die Euch einen DIV-Container für die Navigation sparen. Wir machen es erstmal ein wenig leichter.
Für den Inhaltsteil braucht Ihr nicht zwingend einen DIV-Container, warum erklärt sich aber erst in der CSS-Datei, wir lassen ihn also erstmal weg.
Hier haben wir nun ein fertiges Gerüst für unsere HTML-Seite, natürlich fehlt in meinem Beispiel das Grundgerüst aus dem eine HTML-Datei besteht. Diese setze ich als Grundwissen bei Euch voraus.
Nun gehts an den etwas schwierigeren Teil unserer Seite. Bisher war es ja recht leicht, doch nun benötigen wir die Formatierungen des ganzen.
Das Kürzel lautet CSS (kurz für Cascading Style Sheet)!
Ich erkläre direkt in der CSS-Datei, ein Kommentar fügt man hier mit einem Slash ( / ) und einem Stern ( * ) ein und dies gilt ebenfalls nur anders herum um das Kommentar wieder abzuschließen. Beispiel: /* Kommentar */
Diese Sachen müssen anschließend in einer Datei gespeichert werden, bei mir heißt diese Datei style.css.
Eine externe CSS-Datei muss wie folgt in das HTML-Grundgerüst im Header importiert werden:
Eine externe Datei ist deshalb zu empfehlen, damit eine CSS-Datei portabel gemacht wird, dass soll bedeuten, dass man das CSS auf mehreren Seiten durch einfügen, des oben gezeigten Import-Aufrufs, das CSS aufruft und die Formatierung somit für mehrere Seiten benutzen kann.
Damit wären wir auch schon am Ende unseres kleinen ersten Einblicks in die Welt von strukturierter Textauszeichnung mittels DIV-Container und sinnvoller Formatierung mittels CSS.
Leider noch kein Kommentar vorhanden.
Hier kannst Du Deinen Kommentar zu diesem Artikel schreiben.
