Nachdem uns “HTML für Anfänger” Teil 1 einen kleinen Einblick in die Welt des HTMLs verschafft hat. So wollen wir uns in Teil 2 um einige große und wichtige Themen widmen. Den Bildern und Tabellen. Sie sind grundlegende Komponenten im Webseiten-Aufbau. So sind Tabellen ein wichtiges Stilmittel um der Webseite ein Layout zu geben und Bilder das grafische Etwas, dass jeder Webseite einen Glanz vergibt, wie es Farben nie hätten machen können.
Bilder
Um ein Bild in HTML zu implementieren, muss man den <IMG>-Tag benutzen. Dessen Hauptattribute sind “border”, “alt”, “title”, “width”, “height” und “style”. Wobei “style” (fast) auf jeden Tag angewendet werden kann und somit kein spezielles Attribut von Bildern ist. Nun einige Beispiele:
Laden eines lokalen Bildes ohne Attribute:
<img src=”bild.jpg”>
Laden eines externen Bildes ohne Attribute:
<img src=”http://www.webseite.de/ordner/bild.jpg”>
Skalierung eines Bildes auf die Größe 200×200:
<img src=”bild.jpg” width=”200″ height=”200″>
Alternative Skalierung eines Bildes auf die Größe 200×200 per CSS:
<img src=”bild.jpg” style=”width:200px; height:200px;”>
Ein Bild mit einem 5px dicken Rahmen:
<img src=”bild.jpg” border=”5″>
Ein Bild mit einem 5px dicken Rahmen per CSS:
<img src=”bild.jpg” style=”border:5px;”>
Setzen eines Alternativ-Textes, der angezeigt wird, falls das Bild nicht verfügbar ist:
<img src=”pferde.jpg” alt=”Meine Pferde im Stall”>
Setzen eines MouseOver-Textes, der angezeigt wird, falls die Maus das Bild berührt:
<img src=”pferde.jpg” title=”Deine Maus berührt gerade meine Pferde :D”>
Tabellen
Um eine Tabelle in HTML zu erstellen, muss man den <TABLE>-Tag benutzen, welcher folgende Attribute besitzt: “border”, “width”, “height”, “cellpadding”, “cellspacing” und “style”. Nun einige Beispiel zum Aufbau und zu den einzelnen Attributen:
Eine Tabelle mit 1 Zeile und 2 Spalten:
<table>
<tr>
<td>Zeile 1 Spalte 1</td>
<td>Zeile 1 Spalte 2</td>
</tr>
</table>
Eine Tabelle mit 2 Zeilen und 1 Spalte:
<table>
<tr>
<td>Zeile 1 Spalte 1</td>
</tr>
<tr>
<td>Zeile 2 Spalte 1</td>
</tr>
</table>
Eine Table mit einem 5 px dickem Rahmen und einer Breite sowie Höhe von 200 px:
<table border=”5″ width=”200″ height=”200″>
<tr>
<td>Diese Tabelle ist genau 200 x 200 px groß!</td>
</tr>
</table>
Eine Tabelle dessen Abstand von Text zum Rahmen 4 px groß ist und der Abstand zwichen allen Kästchen 8 px groß ist:
<table cellpadding=”4″ cellspacing=”8″ border=”1″>
<tr>
<td>Dieser Text hat einen Abstand von 4 px zum Rahmen</td>
<td>Dieser Text ist 8px vom vorherigen Text entfernt</td>
</tr>
</table>