Kurzkompendium HTML

1. Struktur  2. Links  3. Bilder  4. Farben  5. Tabellen  6. Frames  7. CSS  

Hinweis zur Verwendung der Quelltexte: Um einen Quelltext in ein anderes Dokument zu kopieren den Link "Quelltext auswählen" anklicken, anschließend den Inhalt mit STRG+C in die Zwischenablage kopieren, das Zieldokument in einem Editor aufrufen und mit STRG+V den Inhalt einfügen... Andere kurze HTML-Befehle können mit der Maus markiert und auf die gleiche Weise kopiert werden.

1. Struktur eines HTML-Dokumentes

HTML-Dateien besitzen die Endung ".htm" oder ".html". Sie werden vom Browser (z.B. Internet Explorer, Netscape Navigator) angezeigt. Vom Browser wird dabei die spezielle Befehlssprache HTML (Hyper Text Markup Language) interpretiert. Konkret werden einzelne Befehle, sogenannte Tags, vom Browser umgesetzt. Diese Tags werden mit "<" und ">" geschrieben.

Das Grundgerüst einer normalen HTML-Datei sieht dabei immer wie folgt aus:

Quelltext auswählen

Die meisten Tags haben einen Anfangs- und einen Endbefehl. Der Tag wirkt dann auf alles, was zwischen diesen beiden Befehlen steht, der Endbefehl unterscheidet sich nur durch das Zeichen "/" vom Anfangsbefehl. Der Body-Tag etwa ist dafür verantwortlich, was auf der Seite angezeigt wird. Tags können verschachtelt werden, es gilt aber die Regel "first in, last out".

2. Links

Das zentrale Element von HTML und damit des Internets sind die Links. Durch Anklicken des Verweistextes einer solchen, sich vom übrigen Text abhebenden Verknüpfung wird eine neue Seite aufgerufen. Der Verweistext lässt sich auch durch Bilder ersetzen. Die zentrale Unterscheidung von Links ist die in absolute und relative Verknüpfungen.

2.1. Relative Links

Relative Links sind solche Verknüpfungen, die sich aus der relativen Lage von Ausgangs- und Zieldatei in einer Verzeichnisstruktur ergeben, also z.B. in übergeordneten oder untergeordneten Ordnern.

Relative Links kommen immer dann zum Einsatz, wenn eine Struktur von anzulegenden HTML-Dokumenten auf andere Datenträger übertragen werden sollen. Dies gilt insbesondere für das Anlegen einer Homepage, die zunächst auf dem Laufwerk des eigenen Computers erstellt und anschließend auf einen Server übertragen wird.

Beispiele:
Ein Link zu der Datei "datei.htm", die in demselben Verzeichnis liegt...
<A HREF="datei.htm">Verweistext</A>


Ein Link zu der Datei "datei.htm", die eine Verzeichnisebene höher liegt...
<A HREF="../datei.htm">Verweistext</A>


Ein Link zu der Datei "datei.htm", die im Unterverzeichnis namens "tiefer" liegt...
<A HREF="tiefer/datei.htm">Verweistext</A>


2.2. Absolute Links

Absolute Links beinhalten die genaue "Lage" einer Zieldatei - unabhängig von der Ausgangsdatei eines Links. Solche absoluten Links kommen immer dann zum Einsatz, wenn eine Verknüpfung aus einer HTML-Dateistruktur zu einer festen Adresse (URL) herausführt. Der Name des Servers ist dabei (im Gegensatz zur Eingabe im Browser) vollständig anzugeben.

Beispiel:
Ein Link zur Adresse des Deutschen Bundestages...
<A HREF="http://www.bundestag.de">Verweistext</A>


Unberührt von der Art des Links, muss es nicht immer Text sein, der verlinkt ist. Kleine Bilder in Form von Buttons u.ä. peppen die Seite nicht nur auf, sondern dienen auch einer intuitiven, leserfreundlichen Benutzerführung. Um ein Bild anstelle eines Textes zu verlinken, muss lediglich der Verweistext durch die Angabe einer Bildquelle ersetzt werden. Wie eine Bildquelle gewählt wird, beschreibt der dritte Abschnitt.

2.3. Links innerhalb einer Seite

Nicht immer muss ein Link zu einer anderen Seite führen. Manche HTML-Dokumente sind so lang, dass auch ein Link zu einer bestimmten Stelle auf der Seite sinnvoll sein kann (dies ist auch auf dieser Seite der Fall). Ein interner Link muss deshalb ein Ziel haben, das an der Stelle der Seite sitzt, an die der Browser springen soll.

Beispiele:
Der Link...
<A HREF="#ziel">zum Ziel</A>
führt zur Stelle auf der Seite, an der der folgende Tag steht:
<A NAME="ziel"></A>


Natürlich ist es auch möglich, solche Ziele auf anderen Seiten anzusteuern. Der folgende Link ruft die Seite "datei.htm" auf und springt dort sofort an das "ziel":
<A HREF="datei.htm#ziel">zum Ziel</A>

3. Bilder

Ursprünglich war HTML ausschließlich auf das Anzeigen von Text ausgelegt. Aber mit der Weiterentwicklung der Browser konnten auch andere Elemente angezeigt werden wie etwa Bilder. Aber anders als in Programmen der Textverarbeitung werden Bilder nicht innerhalb eines HTML-Dokuments gespeichert, sondern bleiben als externe Dateien bestehen.

3.1. Bilderformate

Formate für Bilder existieren wie Sand am Meer: Fast jeder Softwareentwickler, der Bildbearbeitungsprogramme vertreibt, hat ein eigenes Bildformat, das sich an der Dateiendung erkennen lässt: ".bmp", ".psp",...

Die aktuellen Browser unterstützen jedoch nur zwei Formate: ".gif" und ".jpg". Mit diesen beiden Formaten kann aber alles notwendige erreicht werden. Das JPG-Format ist bestens geeignet für die Darstellung von realistischen Fotos. Die Bilddateien lassen sich mit entsprechender Software bezüglich ihres Speicherbedarfs so weit komprimieren, dass erträgliche Datenübertragungszeiten zustande kommen. Das GIF-Format ist wegen seiner Beschränkung auf maximal 256 Farben ungeeignet für die Darstellung von Fotos. Es bietet aber zwei Vorteile: Zum einen kann eine Farbe des Bildes als transparent bestimmt werden, wodurch der Bildhintergrund zum Vorschein kommt. Zum anderen bietet das Format die Möglichkeit, Animationen zu erstellen, die dann wie Daumenkinos funktionieren: Durch die schnelle Abfolge einer Bilderreihe entsteht der Eindruck eines ablaufenden Films. Die Wahl des Formates richtet sich also nach der beabsichtigten Wirkung. Eines sollte jedoch beim Einsatz von Bildern immer im Hinterkopf bleiben: Bilder sind im Vergleich zu Text sehr speicherintensiv, ihr Einsatz somit stets auf Notwendigkeit zu hinterfragen.

3.2. Einbau von Bildern

Prinzipiell gibt es zwei Möglichkeiten der Verwendung von Bildern in HTML: Ein Bild kann als Hintergrund (Wallpaper) für die gesamte Seite gewählt werden oder als Einzelbild an einer bestimmten Stelle der Seite eingefügt werden.

Wie beschrieben sind Bilder externe Bestandteile einer Seite; es muss auf sie verwiesen werden. Dies leistet der Image-Tag.

Beispiele:
Das Bild "picture.gif" als Einzelbild. Der Tag wird an entsprechender Stelle im Quelltext eingegeben.
<IMG SRC="picture.gif">

Das Bild "picture.jpg" als Hintergrundbild. Der Befehl ergänzt den einleitenden Body-Tag.

<BODY BACKGROUND="picture.jpg">

Befehle lassen sich auch verschachteln. Hier wird ein Bild verlinkt: Das Anklicken des Bildes "button.gif" bewirkt das Aufrufen der Seite "datei.htm".

<A HREF="datei.htm"><IMG SRC="button.gif"></A>

Bei den beschriebenen Beispielen wird davon ausgegangen, dass die Bilder in demselben Verzeichnis liegen wie die Datei, in der sie vom Browser angezeigt werden sollen. Hier gelten dieselben Konventionen wie für Links: Liegt ein Bild in einem untergeordneten bzw. übergeordneten Verzeichnis, so muss der Link zur Bildquelle entsprechend angepasst werden. Bei umfangreichen Seitenstrukturen bietet es sich an, alle Bilder in einem eigenen Ordner zu speichern (z.B. "images")

4. Farben

Farben sind ein besonders wichtiges Kapitel beim Anlegen einer HTML-Seite, aber nicht weil eine besonders bunte Seite besonders gut ist... Ganz im Gegenteil: Eine Seite soll lesbar sein und nicht in den Augen weh tun. Spätestens dann, wenn man ein schönes Hintergrundbild gefunden hat, auf dem sich aber leider die Schrift nicht mehr lesen lässt, lohnt es sich, einen Blick auf die HTML-Farblehre zu werfen.

4.1. Hexadezimalcodes

Üblicherweise werden Farbangaben in HTML-Dateien durch Hexadezimalzahlen gemacht. Unser normales Dezimalsystem besitzt 10 Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8 und 9. Das Hexadezimalsystem besitzt die folgenden Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E und F. Das sind insgesamt 16 Ziffern, woher das Hexadezimalsystem seinen Namen hat. Um die Zahl 10 im Dezimalsystem zu schreiben, braucht man bereits 2 Ziffern, im Hexadezimalsystem genügt das A. Entsprechend schreibt man hexadezimal F für die Dezimalzahl 15. Aber was macht man, wenn man 16 im Hexadezimalsystem schreiben will? Ganz einfach: Man nimmt eine neue Stelle hinzu: 10 (ein mal 16 plus 0) steht dann für die dezimale 16, 1F für die dezimale 31 (ein mal 16 plus 15), FF für die dezimale 255 (15 mal 16 plus 15)... Man kann also mit zwei Hexadezimalziffern Zahlen bis 255 ausdrücken.

Diese Tatsache mag die Begründung für die Verwendung des Hexadezimalsystems sein. Die Browser können 256 verschiedene Farbanteile anzeigen. Die Farbangaben im Quelltext erfolgen über 6-stellige Codes, beginnend mit dem Gatterzeichen "#". Die ersten beiden Stellen stehen für den Rotanteil, die beiden mittleren Stellen stehen für den Grünanteil, die beiden letzten Stellen stehen für den Blauanteil. die Codes heißen deshalb englisch wie deutsch RGB-Codes. Für jeden Anteil gibt es wie beschrieben 256 Intensitätsmöglichkeiten, durch Mischen ergeben sich dann 256 mal 256 mal 256, also über 16 Mio. Farbkombinationen!

Beispielweise liefert die Kombination "#FF0000" ein reines Rot, "#FF00FF" ergibt violett usw. Ein Problem besteht aber darin, dass nicht alle Kombinationen mit Sicherheit von jedem Browser angezeigt wird. Garantie gibt die 33er Regel: Man verwendet nur 00, 33, 66, 99, CC und FF. Das sind aber noch immer 216 Kombinationen, man findet die passende... Übrigens: "#000000" ist schwarz, "#FFFFFF" ist weiß.

Zum Umrechnen von Hexadezimalzahlen und umgekehrt, benutze den Hexa-Dezi-Umrechner.

4.2. Verwendung von Farben

Farben lassen sich auf zweierlei Arten nutzen: zum einen als Hintergrundfarbe (anstelle eines Hintergrundbildes), zum anderen für den Text.

Beispiele:
Die Ergänzung des Body-Tags liefert ein Rot als Hintergrundfarbe...
<BODY BGCOLOR="#FF0000">


Einzelne Textbereiche lassen sich (hier z.B. die Worte "Ich bin grün!" in Grün) so formatieren...
<FONT COLOR="#00FF00">Ich bin grün!</FONT>


Links sind spezieller Text, sie lassen sich nicht einfach umformatieren, ihre Darstellung hängt von der Einstellung des verwendeten Browsers ab. Dennoch gibt es die Möglichkeit, bestimmte Farben für Links zu vergeben. Hierbei ist zu unterscheiden von (unbenutzten) Links, aktiven (gerade benutzten) Links und visited (bereits besuchten) Links.

Beispiel:
Die Ergänzung des Body-Tags liefert verschiedene Farben für normalen Text sowie unbenutzte, benutzte und aktive Links...
<BODY TEXT="#F0000F" LINK="#FF0000" VLINK="#00FF00" ALINK="#0000FF">

Wie ein Farbcode in hexadezimaler Form als reale Farbe aussieht, kann man hier mit dem Farbanzeiger testen.

5. Tabellen

Normalerweise verwendet man Tabellen, um Zahlen und Datenmaterial übersichtlich in Zeilen und Spalten darzustellen. Natürlich kann man sie auch in HTML dazu verwenden. Verbreiteter ist aber mit Sicherheit ihre Nützlichkeit beim Formatieren. Zwei Beispiele: Ein Text soll nicht über die gesamte Breite des Browserfensters angezeigt werden, neben eingebauten Bildern soll ein beschreibender Text stehen.

5.1. Grundaufbau einer Tabelle

Tabellen werden von dem Table-Tag eingeschlossen: <TABLE> </TABLE>, eine Tabellenzeile beginnt mit <TR> und endet mit </TR>, eine Datenzelle innerhalb einer Reihe beginnt mit <TD> und endet mit </TD>. Innerhalb des TD-Tags steht der Inhalt der Datenzellen. Die kann neben Text auch ein Link sein, oder ein Bild, oder beides zusammen...

Beispiel:

Der folgende Quelltext liefert eine Tabelle mit zwei Zeilen (table rows) und zwei Spalten (table data), in der jeweils die Positionen stehen.

Quelltext auswählen

5.2. Formatierung von Tabellen

Im einleitenden Table-Tag bewirkt der Zusatzbefehl WIDTH="80%", dass die Tabellenbreite nur 80 Prozent des Browserfensters ausfüllt; die Angabe kann auch absolut in Pixel gemacht werden. Der Zusatzbefehl BORDER="0" bewirkt, dass kein Rahmen angezeigt wird (blinde Tabelle), höhere Zahlen bewirken stärkere Rahmen. Mit BORDERCOLOR kann eine Farbe für den äußeren Rahmen bestimmt werden. Weitere Farbbefehle gehören nicht zum Standard der HTML-Programmierung. Der Befehl ALIGN ist zuständig für die horizontale Ausrichtung einer Tabelle: Der Wert "left" ist Standard, die Werte "center" und "right" liefern zentrierte bzw. rechtsbündige Ausrichtung.

Mit CELLSPACING="2" wird die Dicke der Gitter innerhalb der Tabelle festgelegt, mit CELLPADDING="2" der Abstand des Textes von den Gittern, jeweils als Beispiel mit 2 Pixel. FONT="Arial" bewirkt die Schriftart Arial, sofern diese auf dem Computer vorhanden ist.
Auch eine Hintergrundfarbe oder ein Hintergrundbild kann mit BGCOLOR bzw. BACKGROUND festgelegt werden (siehe hierzu die Abschnitte zu Farben bzw. Bildern.)

Standardmäßig sind die Spalten einer Tabelle gleich breit. Dies macht aber nicht immer Sinn. Die Spaltenbreite kann durch den Zusatz WIDTH="20%" innerhalb des Table-Data-Tags in der ersten Tabellenzeile beispielweise auf 20 Prozent der gesamten Tabellenbreite festgelegt werden - die Angabe kann auch absolut in Pixel gemacht werden. Dieser Befehl wirkt sich dann auf alle darunter liegenden Zellen - also die gesamte Spalte - aus, die Eingabe in jede Zelle der Spalte erübrigt sich. Durch den Befehl HEIGHT="300" im ersten Table-Data-Tag einer Zeile wird eine einheitliche Höhe von 300 Pixel für die ganze Zeile festgelegt; auch hier ist eine Wiederholung des Befehls für jede einzelne Datenzelle in der Zeile nicht notwendig, eine Angabe eines Prozentwertes ist nicht zulässig.

Insbesondere bei Tabellen zeigt sich, wie sinnvoll es für die Übersichtlichkeit ist, im Quelltext Befehle einzurücken und nicht einfach nur Zeile für Zeile hinzuschreiben. Umbrüche in der Quelltextdatei werden im Browser nicht angezeigt. Dafür gibt es mit <BR> einen eigenen Befehl.

6. Frames

Mit Frames (Rahmen) hat man die Möglichkeit, den Anzeigebereich des Browser in verschiedene, rechteckige Bereiche einzuteilen, in denen dann verschiedene HTML-Dokumente angezeigt werden können. Der typische Anwendungsbereich von Frames ist der einer Menüleiste, die immer sichtbar sein, aber nicht in jedem einzelnen Dokument einer Seitenstruktur eingegeben werden soll, und eines eigentlichen Anzeigebereichs. Hierzu wird der gesamte Anzeigebereich des Browsers in zwei Segmente geteilt: eines für das Menü und eines für die im Menü ausgewählten Seiten, die angezeigt werden sollen.

6.1. Aufbau von Framesets

Der Aufbau eines Frame-Set unterscheidet sich vom gewöhnlichen Aufbau einer HTML-Seite. Statt des üblichen, im Browserfenster anzuzeigenden Body-Bereichs wird ein Frameset definiert, in dem festgelegt wird, wie der Anzeigebereich des Browsers unterteilt werden soll und welche HTML-Dokumente bei Aufruf der Seite in welchem Segment anzuzeigen sind. Prinzipiell gibt es die Möglichkeit, den Anzeigebereich in Zeilen (rows) oder Spalten (columns) aufzuteilen und dabei die Maße anzugeben. Dabei muss jedem Segment auch mit FRAME NAME ein Name zugewiesen werden, mit SRC werden diejenigen Quelldateien benannt, die beim Aufruf des Framsets zunächst angezeigt werden sollen.

Beispiele:

Der folgende Quelltext liefert eine Aufteilung des Browseranzeigebereichs in zwei Spalten. In der linken Spalte wird die Datei "file1.htm" geladen, in der rechten die Datei "file2.htm". Der Name des linken Segments ist "links", der des rechten "rechts". Dabei wird der ersten Spalte eine Breite von 200 Pixel zugewiesen, die zweite Spalte füllt den Rest des Anzeigefensters, was durch den Platzhalter "*" angewiesen wird.

Quelltext auswählen

Statt COLS kann auch mit ROWS das Anzeigefenster in Zeilen aufgeteilt werden. Statt den absoluten Größenangaben können auch Prozentwerte angegeben werden. So liefert der folgende Quelltext eine Aufteilung in drei Zeilen mit den entsprechenden Inhalten und einer Höhe von 10%, 20% und 70%.

Quelltext auswählen

Framesets können natürlich auch ineinander verschachtelt werden. Der folgende Quelltext liefert eine Aufteilung zunächst in zwei Zeilen (äußerer Frameset), wobei die erste eine Höhe von 150 Pixel besitzt, die zweite den Rest der Höhe ausfüllt. Die zweite Zeile ist zudem in zwei Spalten unterteilt (innerer Frameset), die erste mit einer Breite von 30%, die zweite mit dem Rest der Fensterbreite.

Quelltext auswählen

6.2. Links innerhalb von Frames

Normalerweise wird ein Link in demjenigen Browserfenster aufgerufen, in dem es angeklickt wird. Dies gilt auch für Frames, macht aber hier wenig Sinn. Hat man etwa eine schmale Menüleiste in einem Frame, so möchte man, dass der Link im breiten Anzeigefenster des Framesets aufgerufen wird und eben nicht dort, wo das Menü angezeigt wird - denn dieses soll schließlich permanent sichtbar bleiben. An dieser Stelle kommt der Name eines jeden Frames ins Spiel: Im Link kann durch den Zusatzbefehl TARGET der Browser angewiesen werden, die Verknüpfung in einem anderen Frame aufzurufen, nämlich dem, das dem TARGET-Befehl zugewiesen wird.

Beispiel:

Angenommen man hat ein Frameset, das aus zwei Spalten besteht - links die Menüleiste mit dem Framenamen FRAME NAME="menu", rechts ein breiteres Anzeigefenster mit dem Framenamen FRAME NAME="anzeige". Als Quelldatei dient für den Menu-Rahmen die Datei "menu.htm". Dann bewirkt der folgende Link-Befehl in der Datei "menu.htm", dass die Seite "file1.htm" im Anzeigefenster - also dem Frame mit dem Namen "anzeige" - aufgerufen wird:

<A HREF="file1.htm" TARGET="anzeige">Verweistext</A>

6.3. Besonderheiten von Frames

Im Frame-Tag selbst kann das Aussehen und das Verhalten des jeweiligen Frames weiter beeinflusst werden: Der Zusatz NORESIZE verhindert, dass der Betrachter die Rahmen mit der Maus verschieben kann. SCROLLING="no" verhindert die Scrollbalken - auch dann, wenn nicht die ganze Seite angezeigt werden kann. Mit FRAMEBORDER="0" wird der Rahmen unsichtbar, größere Werte bewirken dickere Rahmen.
Auf einiges ist bei Frames noch zu achten: Zunächst unterstützen ältere Browser die Anzeige von Frames nicht. Der Benutzer bekommt nichts angezeigt. Um dieses Problem zu umgehen - oder dem Benutzer zumindest bewusst zu machen -, bietet es sich an, den folgenden Quelltext in die Frameset-Datei im Anschluss an die Framedefinitionen einzufügen; der Browser liest dann zumindest das, was im BODY-Bereich steht:

Beispiel:
<NOFRAMES>
<BODY>
Ihr Browser unterstützt keine Frames!!!
</BODY>
</NOFRAMES>

Im Head eines jeden HTML-Dokuments kann mit dem TITLE-Tag ein Titel festgelegt werden. Wird eine Seite allerdings innerhalb eines Framesets aufgerufen, so erscheint nicht ihr Titel, sondern der des Framsets.
Bei Frames ist darauf zu achten, dass die Seite übersichtlich bleibt. Schließlich besteht die der Verschachtelung die Möglichkeit Frames innerhalb von Frames aufzurufen. Irgendwann aber werden die einzelnen Fenster zu klein, und nicht jeder besitzt einen Monitor so groß wie ein Fernsehgerät.

7. CSS - Cascading Style Sheets

Cascading Style Sheets - kurz CSS - sind für HTML-Dokumente das, was für Textverarbeitungsprogramme wie etwa Word die Dokumentvorlagen sind: In ihnen sind die Informationen für das Design eines Dokuments festgelegt. Dies sind in HTML-Dokumenten etwa die vom Browser zu verwendende Schriftart, Farbe und Größe, die Festlegung von Hintergrundfarben bzw. -bildern, die Festlegung von Aufzählungszeichen, die Art der Darstellung von Links etc.
CSS-Befehle finden sich in Bezug auf HTML-Dokumente in dreierlei Form: Zum einen können sie als CSS-Angaben direkt im Head eines HTML-Dokuments untergebracht, zum zweiten als externe CSS-Datei ausgelagert und zum dritten direkt in einzelnen Tags untergebracht werden.
Dabei empfiehlt sich zumindest bei größeren Projekten in jedem Fall die zweite Variante, denn durch sie kommen die Vorteile der Cascading Style Sheets erst wirklich zum Tragen: Sie ersparen erstens übermäßig viele Formatierungsangaben innerhalb eines Dokuments, verringern dadurch die Länge einer HTML-Datei, was zu geringerer Dateigröße und zu kürzeren Übertragungszeiten führt. Zweitens ist mit der Verwendung externer CSS-Dateien die Möglichkeit gegeben, schnell und einfach ein Re-Design über eine beliebig große Anzahl von HTML-Dokumenten durchzuführen, etwa um auf allen Seiten die zu verwendende Schriftart zu modifizieren.

7.1. Einbau der CSS-Angaben in HTML-Dokumente

Im Falle von CSS-Anweisungen innerhalb eines HTML-Dokuments stehen diese im Head-Bereich des Dokuments und sind vom STYLE-Tag eingeschlossen:

<style type="text/css">

... irgendwelche CSS-Angaben zur Formatierung und Darstellung...

</style>


Sollen die Formatierungsanweisungen in eine externe CSS-Datei ausgelagert werden, so steht der folgende Befehl im HEAD-Bereich eines jeden zu formatierenden HTML-Dokuments: Bei HREF ist entsprechend der Link zur CSS-Datei anzupassen; dies kann über einen relativen oder einen absoluten Link geschehen:

<link rel=stylesheet type="text/css" HREF="css-datei.css">


Die dritte Variante von CSS-Formatierungen bezieht sich auf einzelne Tags. Diesen werden mit dem Zusatz STYLE Formatierungszuweisungen direkt gegeben.

7.2. Beispiele für CSS-Angaben

Unabhängig davon, ob die Anweisungen innerhalb eines HTML-Dokuments gemacht oder ausgelagert werden, sind die Style-Sheet-Befehle identisch: Im Fall der Unterbringung im HTML-Dokuments selbst, sind sie lediglich innerhalb des STYLE-Tags unterzubringen. Im Fall der Auslagerung werden sie ohne weitere notwendige Zusatzbefehle einfach aufgelistet, was in jedem Text-Editor geschehen kann. Die Datei sollte dann unter der Endung ".css" gespeichert werden.
Der Aufbau einer Formatierungsanweisung ist prinzipiell immer derselbe: Der zu formatierende Tag-Befehl steht ohne die Tag-Zeichen "<" und ">" am Anfang, z. B. "a" für einen Link. Gegebenenfalls folgt ein Doppelpunkt und eine Spezifikation des Tags, z. B. ":visited" für einen bereits besuchten Link. Anschließend folgen nach einem Leerzeichen innerhalb eines geschweiften Klammerpaars die Anweisungen, wobei jeweils Anweisung und Zuweisung wieder durch einen Doppelpunkt getrennt werden, z.B. "{ text-decoration: none}" bedeutet bei Links, dass sie nicht wie üblich unterstrichen werden - nebenbei bemerkt: Die Linkunterstreichungen zu unterbinden kann nur durch CSS-Angaben geschehen. Abschließend folgt ein Semikolon. Sollen für einen bestimmten Tag mehrere Angaben gemacht werden, so können diese hintereinander aufgelistet werden.
Beispiele:

a { font-family:Arial, Helvetica, sans-serif; }
a:link { text-decoration: none;color:#FF0000; }
a:visited { text-decoration: none;color:#00FF00; }
a:active { text-decoration: none;color:#0000FF; }
a:hover { text-decoration: none;color:#FF0000; }
p, ul, body, td, h1, h2, h3, h4, h5, h6 { font-family:Arial, Helvetica, sans-serif; color:white; }
p {text-align: justify;}


Die obigen CSS-Angaben sorgen für folgende Effekte: Links werden in der Schriftart Arial angezeigt - wie übrigens auch normaler Text, Tabelleninhalte, Überschriften... die Links sind nicht unterstrichen und es werden ihnen je nach Zustand verschiedene Farben zugeordnet. Absätze werden im Blocksatz dargestellt.

body { background-color:#000000; background-image:url(images/picture.gif);
   background-repeat:repeat-x; }
ul {list-style-image:url(ul.gif) }

Die beiden obigen CSS-Angaben beziehen sich auf die Verwendung von Bildern und Farben: Hintergrundfarbe ist hier schwarz, als Hintergrundbild wird die Datei "picture.gif" aus dem Unterordner "images" bestimmt, die - falls nicht das ganze Browserfenster ausfüllend - übrigens nur in horizontaler Richtung "gekachelt" wird. Für das Aufzählungszeichen wird das Bild "ul.gif" verwendet. Die letzte CSS-Angabe zeigt ein kleines Problem mit Cascading Style Sheets: Nicht alle Befehle werden von allen Browsern erkannt wie etwa der Befehl für das Aufzählungszeichen von Netscape 4.X nicht. Es lohnt sich also in jedem Fall, das Ergebnis von CSS-Formatierungen in den Standardbrowsern zu überprüfen.
Wie beschrieben können Formatierungsangaben mit CSS auch direkt im Quelltext mittel STYLE im betreffenden Tag stehen:

<P STYLE="background-color:#FF0000; color:#000000;">Dies ist ein speziell formatierter Absatz.</P>


Im konkreten Beispiel wird ein Absatz definiert, der Rot als Hintergrundfarbe erhält und Schwarz als Textfarbe.

CSS beinhaltet auch die Möglichkeit der Definition eigener Formatierungsklassen: Im HEAD-Bereich bzw. in der ausgelagerten CSS-Datei können diese nach dem Schema

.klassenname {css-eigenschaft:wertzuweisung;}

definiert werden. Im einzelnen Tag werden dann mit dem Zusatzbefehl CLASS die Anweisungen abgerufen:
Beispiel:

Die Definition

.rotschwarz {background-color:#FF0000; color:#000000;}


in Verbindung mit dem Tag

<P CLASS="rotschwarz">Dies ist ein speziell formatierter Absatz.</P>


erreicht dasselbe wie die Formatierung mittels STYLE, durch die Verwendung eigener Klassen kann man aber die Formatierung einzelner Tags mit dem Vorteil des schnellen Re-Designs verbinden.
Diese Einführung in CSS soll an dieser Stelle mit einem Hinweis beendet werden: Ein scheinbar schlecht designte Web-Seite ist vielleicht unter Verwendung von CSS entstanden und sieht nur deshalb so aus, weil man selbst nicht in der Lage ist, einen aktuellen Browser zu installieren...

letzte Aktualisierung: 2.12.2001Download als ZIP
© Christian Eckes