Im vorigen Kapitel haben wir mit nur 16 elementaren HTML-Befehlen diese Webseite erstellt. Rekapitulieren wir nochmals, wofür wir die HTML-Tags eingesetzt haben: Mit Hilfe der Tags haben wir die Seite in Überschriften, normale Textabsätze, Tabellen, Listen, Links und Bilder gegliedert.

Ich betone nochmals, dass HTML eine Seitenbeschreibungssprache ist. Mit Hilfe der HTML-Tags haben wir nur die Seite beschrieben. Wir haben an keiner Stelle gesagt, wie das Layout der Seite nun tatsächlich aussehen soll, d.h. welche Farbe eine Überschrift haben soll, wie groß die Tabelle sein soll, wo das Bild platziert werden soll oder überhaupt welche Größe normaler Text haben soll. All dies erledigt der Browser für uns. Mit Hilfe der von uns erstellten Gliederung versucht dieser, die Seite möglichst übersichtlich darzustellen.

Auch wenn wir mit unserer Seite schon recht zufrieden sind, kommt vielleicht doch noch der Wunsch auf, etwas mehr Einfluss auf die Darstellung zu nehmen. Mit Hilfe sogenannter Attribute können wir die 16 uns bekannten HTML-Tags "manipulieren".

Formatierung der Gesamtseite

Das <body> Tag markiert den Beginn des eigentlichen Seiteninhalts. Diesem Tag fügen wir jetzt noch Attribute hinzu, die die Darstellung der Gesamtseite beeinflussen. Mit dem Attribut bgcolor=lightgrey bewirken wir, dass der gesamte Textkörper (body) als Hintergrundfarbe (bgcolor = background color) hellgrau annimmt. Das Attribut text=black bewirkt, dass sämtlicher Text auf der Seite in schwarz dargestellt wird. Mit dem Attribut link=red bewirken wir, dass unsere beiden Links in rot dargestellt werden. Das Attribut vlink=yellow bewirkt, dass Links, die bereits einmal angeklickt wurden (vlink = visited link), gelb markiert werden.

<body bgcolor=lightgrey text=black link=red vlink=yellow
      leftmargin=20px topmargin=50px>

Damit haben wir mit 4 Attributen wesentlichen Einfluss auf die farbliche Darstellung der Seite genommen. Mit Hilfe zweier weiterer Attribute bestimmen wir die Platzierung der Seite im Fenster. Mit dem Attribut leftmargin=20px bewirken wir, dass der Seiteninhalt 20 Pixel gemessen vom linken Fensterrand dargestellt wird. Das Attribut topmargin=50px bewirkt entsprechend einen Abstand von 50 Pixel zum oberen Fensterrand. Mit obigen 6 Attributen sieht unsere Seite dann so aus.

Ein interessantes Attribut für das <body> Tag möchte ich noch erwähnen: Durch das Attribut <body background="MeinHintergrund.gif"> wird die Grafik MeinHintergrund.gif als Hintergrund für die ganze Seite verwendet.

Formatierung der Überschriften und der Textabsätze

In unserem Beispiel haben wir den gesamten Text mit Hilfe einer Hauptüberschrift <h1>, dreier Unterüberschriften <h2> und zahlreicher Textabsätze <p> strukturiert. Für diese 3 elementaren Tags verwenden wir nun auch Attribute, um Einfluss auf die Absatzdarstellung zu nehmen. Mit Hilfe des align Attributes kann man festlegen, ob ein Absatz oder eine Überschrift linksbündig, rechtsbündig, zentriert oder als Blocksatz (justified) dargestellt werden soll.

<p align="left">     <h1 align="left">     <h2 align="left">
<p align=right>    <h1 align=right>    <h2 align=right>
<p align="center">   <h1 align="center">   <h2 align="center">
<p align=justify>  <h1 align=justify>  <h2 align=justify>

In unserem Beispiel zentriere ich alle Überschriften, die ersten 3 Textabsätze stelle ich in Blocksatz dar, den vierten Textabsatz rechtsbündig, den fünften linksbündig und den letzten zentriert. Solche Vielfalt ist natürlich Spielerei; unsere Seite sieht jetzt so aus.

Formatierung von Listen

In unserem Beispiel haben wir mit Hilfe der beiden Tags <ul> und <li> eine Liste mit 6 Punkten erzeugt. Auch diese Liste können wir mit Attributen beeinflussen. Mit Hilfe des Attributes type bestimmen wir, wie das Aufzählungszeichen aussehen soll. Standardmäßig wird eine ausgefüllte Scheibe (type=disc) verwendet. Alternativ dazu kann man einen Kreis (type=circle) oder ein ausgefülltes Quadrat (type=square) verwenden.

<ul type=disc>
<ul type=circle>
<ul type=square>

In unserem Beispiel ersetze ich die ausgefüllte Scheibe durch ein Quadrat. Als Resultat erhalten wir unsere Web-Seite in dieser Form.

Formatierung von Tabellen

In der jetzigen Version unseres HTML-Files stört noch am Meisten, dass die Tabelle so primitiv dargestellt wird. Auch dies ändern wir Schritt für Schritt mit Attributen. Ursprünglich sah unsere Tabelle so aus. Als erstes fügen wir der Tabelle einen Rahmen der Dicke 5 Pixel hinzu. Dazu fügen wir dem table Tag folgendes Attribut hinzu:

<table border=5>

Unsere Tabelle sieht damit so aus. Als nächstes setzen wir den Abstand der einzelnen Zellen auf 10 Pixel:

<table border=5 cellspacing=10>

Unsere Tabelle sieht damit schon deutlich besser aus. Noch schöner wird unsere Tabelle, wenn wir in den einzelnen Zellen noch einen Abstand von 5 Pixeln zum Text festlegen.

<table border=5 cellspacing=10 cellpadding=5>

Damit nimmt unsere Seite diese Gestalt an. Wir sind immer noch beim <table> Tag. Mit einem weiteren Attribut können wir der ganzen Tabelle die Hintergrundfarbe hellblau zuweisen. Außerdem legen wir mit dem Attribut with=600 fest, dass unsere Tabelle genau 600 Pixel breit sein soll.

<table border=5 cellspacing=10 cellpadding=5 bgcolor=lightblue width="600">

Unsere Tabelle nimmt damit diese Form an. Wir haben nur die Gesamtbreite der Tabelle auf 600 Pixel festgelegt. Die Anpassung der Breite der einzelnen Spalten übernimmt der Browser automatisch, es sei denn wir nehmen über weitere Attribute selbst Einfluss auf die Breite der einzelnen Spalten. Mit Hilfe der Attribute width und height können wir die Breite und Höhe einer jeden Zelle bestimmen.

<td width="150" height=50>

Verwendet man in unserem Beispiel einheitlich eine Breite von 120 Pixel, so sieht unsere Tabelle so aus. Man beachte den Zeilenumbruch in der letzten Spalte. Wo wir gerade dabei sind, das <td> Tag zu attributieren: Für jede einzelne Zelle können wir bestimmen, ob der Inhalt links, rechts, zentriert oder justiert ausgerichtet wird. Für unsere Tabelle verwende ich mit Hilfe des Attributes <td align="center"> eine zentrierte Ausrichtung der Prozentsätze. So sieht das Ergebnis aus.

Auch die vertikale Ausrichtung des Inhalts einer jeden Zelle kann man mit einem Attribut festlegen: Mit dem Attribut valign legt man fest, ob der Zellinhalt oben, in der Mitte oder unten ausgerichtet werden soll. Dieses Attribut kann man sowohl für eine einzelne Zelle (Tag <td>) oder für eine ganze Zeile (Tag <tr>) verwenden. In den meisten Tabellen benötigt man jedoch keine erzwungene vertikale Ausrichtung der Zellinhalte.

<td valign="top">    <tr valign="top">
<td valign="middle"> <tr valign="middle">
<td valign=bottom> <tr valign=bottom>

Wir führen eine abschließende Formatierung unserer Tabelle mit einem schon bekannten Attribut durch. Um die erste Zeile und die erste Spalte von der übrigen Tabelle etwas abzuheben verwenden wir als Hintergrundfarbe hellgrau. Dazu setzen wir das schon bekannte Attribut bgcolor=lightgrey in das <tr> Tag der ersten Zeile und in die <td> Tags der ersten Spalte ein:

<tr bgcolor=lightgrey>
<td bgcolor=lightgrey>

Damit sieht unsere fertige Tabelle nun so aus. Was für ein Unterschied zu unserer ersten Version. Wohlgemerkt, wir haben keine neuen HTML-Befehle verwendet, wir haben einzig und allein die schon bekannten 3 HTML-Befehle <table>, <tr> und <td> um wenige Attribute erweitert.

Formatierung von Bildern

Sehen wir uns unsere Webseite mit der formatierten Tabelle an. Es bleibt ein kleiner Schönheitsfehler: unser kleines Bildchen scheint beliebig irgendwo oben auf unserer Seite platziert zu sein. Auch die Formatierung des Bildes geschieht mit einigen Attributen für das schon bekannte <img> Tag.

<img src="Muenzstapel.gif" width=32 height=32 border="1" alt="Geld anlegen"
     align="left" hspace=10 vspace=0>

Das Attribut src="Muenzstapel.gif" bestimmt den Namen und Speicherort der Datei. Hier kann auch eine relative Pfadangabe oder eine komplette Web-Adresse stehen, wie z.B. src="http://www.patrickwagner.de/Grafiken/Muenzstapel.gif". Mit Hilfe der Attribute width=32 height=32 geben wir die Breite und Höhe des Bildes an. Auf diese Weise kann man ein Bild beliebig vergrößern, verkleinern oder verzerren. Das Attribut border=1 fügt um das Bild einen 1 Pixel breiten Rahmen herum. Mit dem Attribut align="Geld anlegen" legen wir fest, welcher Text erscheint, wenn man mit der Maus auf die Grafik fährt.

Schließlich legen wir fest, wie der Text um die Grafik herumfließen soll. Mit dem Attribut align="left" bestimmen wir, dass die Grafik links auf der Seite sein soll und der Text rechts um das Bild herumfließen soll. Die Attribute hspace=10 vspace=0 legen fest, dass der horizontale Abstand der Grafik zum Text (hspace = horizontal space) 10 Pixel betragen soll, der vertikale Abstand der Grafik zum Text (vspace = vertical space) dagegen 0 sein soll.

Unsere Webseite nimmt jetzt diese Gestalt an. Wer den vollständigen HTML-Code sehen will, gehe auf die Webseite, klicke mit der rechte Maustaste auf die Seite und dann auf Quellcode anzeigen.

Zusammenfassung

Obwohl wir in diesem Kapitel unsere Webseite ganz schön aufgepeppt haben, haben wir keinen einzigen neuen HTML-Befehl gelernt. Wir haben lediglich die bereits bekannten 16 HTML Grundbefehle um sogenannte Attribute erweitert.

Wir haben gelernt, wie man im <body> Tag die Hintergrundfarbe bgcolor=lightgrey und die Textfarbe text=black des ganzen Dokumentes festlegt, wir haben auch im <body> Tag die Abstände der Gesamtseite zum Fensterrand leftmargin=20px und topmargin=50px festgelegt. Dann haben wir die Textausrichtung der Überschriften <h1 align="center"> und der normalen Textabsätze <p align=justify> festlegt. Für unsere Liste haben wir als Aufzählungszeichen ein Quadrat <ul type=square> ausgewählt.

Unsere Tabelle haben wir mit zahlreichen Attributen aufgepeppt: Im <table> Tag legten wir mit dem Attribut border=5 einen Rahmen fest. Mit den Attributen cellspacing=10 und cellpadding=5 bestimmten wir den Abstand der Zellen untereinander und zum Zelltext. Mit bgcolor=lightblue wählten wir eine andere Hintergrundfarbe aus. Mit dem Attribut <td width=120> legten wir manuell die Breite einer jeden Zelle fest.

Schließlich fügten wir dem <img> Tag einige Attribute hinzu, um die Größe (width=32 height=32) festzulegen, einen Rahmen (border=1) um das Bild zu legen, den Text rechts um das Bild herumfließen zu lassen (align="left") und die horizontalen (hspace=10) und vertikalen (vspace=0) Abstände des Bildes zum Text festzulegen.

bgcolor=lightgrey   <body><table><tr><td>
text=black          <body>
leftmargin=20px     <body>
topmargin=50px      <body>
align="center"        <h1><h2><p>
type=square         <ul>
border=5            <table><img>
cellspacing=10      <table>
cellpadding=5       <table>
width="600"           <table><td><img>
height=150          <tr><td><img>
align="left"        <img>
hspace=10           <img>
vspace=0            <img>

Insgesamt haben wir unseren 16 bekannten elementaren HTML-Tags 14 verschiedene Attribute hinzugefügt. Manche Attribute konnten wir unterschiedlichen Tags hinzufügen (siehe Tabelle oben). Damit haben wir die Möglichkeit, die verschiedensten, buntesten und schönsten HTML-Seiten zu erstellen. Natürlich bietet HTML noch viel viel mehr, aber diese 16 Tags und 14 Attribute reichen für die meisten Webseiten wirklich aus.

Zurück zum Inhaltsverzeichnis HTML-Einführung