HTML & CSS Design - Wie funktioniert das?

HTML und CSS sind die beiden grundsätzlichen Sprachen, mit denen moderne Websites erstellt werden. Auch Content Management Systeme formatieren ihre Inhalte auf diese Art und Weise (Joomla Design, Typo3 Vorlagen). In HTML strukturiert man die Inhalte mit Hilfe von Elementen für Überschriften, Absätze, Listen, Tabellen und andere. Mit Hilfe von CSS bestimmt man dann, wie diese Elemente zum Beispiel im Browser-Fenster angezeigt und formatiert werden.

Was ist ein HTML-Element

HTML Design: Ein HTML-Element besteht in den meisten Fällen aus einer Anfangsmarkierung und einer Endmarkierung, den sogenannten Tags. So wird zum Beispiel ein Absatz durch das Anfangs-Tag und das End-Tag < p > und < / p > (ohne die Leerzeichen) markiert. Anfangs- und End-Tags werden dabei immer in spitze Klammern eingeschlossen. Die End-Tags sind jederzeit daran zu erkennen, dass sofort hinter der öffnenden spitzen Klammer ein Schrägstrich folgt.

CSS – Cascading Style Sheets

Das HTML-Tag ist ein wesentliches HTML-Element. Mit diesem kann man aber noch kein schickes Layout bewerkstelligen. Hierzu benötigt man Cascading Style Sheets, also CSS. Eine Formatierungsmöglichkeit ist das style-Attribute. Dieses Attribut darf man in allen HTML-Elementen einfügen, die sichtbare Inhalte haben. Die Wertzuweisung an das style-Attribute erfolgt dann in der CSS-Syntax. Das Tag, mit dem Absatz markiert wird, soll auch hier wieder als Beispiel dienen. Will man, dass der betreffende Absatz in einer bestimmten Schriftgröße dargestellt wird, dann fügt man hier ganz einfach ein style-Attribut ein. Das sieht dann so aus: < p style= " font-size : 20px; " > für das Anfangstag und < / p > für das End-Tag (wieder ohne Leerzeichen, außer zwischen "p" und "style").

Wiederverwendbare Formatierungen

Wenn man eine Seite mit vielen Absätzen veröffentlicht, muss man, wenn CSS in HTML nur über das style-Attribute eingebunden wird, die Schriftgröße in jedem einzelnen Absatz wiederholen. Glücklicherweise ist das nicht nötig. Es besteht nämlich die Möglichkeit, CSS-Angaben zentral zu definieren und auf eine größere Anzahl von Elementen anzuwenden. Im letzten Abschnitt wurde bewusst das style-Attribut angesprochen, weil dies die unmittelbarste Methode ist, HTML-Elemente mit CSS zu gestalten. Gedacht ist diese Methode jedoch eigentlich nur für Fälle, in denen bestimmte Elemente individuell formatiert werden sollen. In allen Fällen dagegen, wo die gleichen CSS-Eigenschaften auf mehr als ein Element anwendbar sind, sollte man auf jeden Fall auf zentrale Formatdefinitionen zurückgreifen. CSS bietet zwei Varianten an, um Formate zentral zu definieren: im Dateikopf einzelner HTML-Seiten oder in einer separaten Datei, die dann in beliebig vielen HTML-Seiten eingebunden werden kann. Die erste Variante ist sinnvoller, wenn man die Formate nur für ein einzelnes Dokument definieren will. Die zweite Variante ist dagegen vorzuziehen, wenn man einheitliche Formate für eine komplette Website, bestehend aus mehreren HTML-Dateien, definieren will.