Bilder

Auf eine Webseite gehören meistens auch Bilder. Wie man Fotos und andere Grafiken in eine Webseite einbinden kann wird in diesem Kapitel erklärt.
Je nach Größe und Menge der Bilder, die auf einer HTML-Seite dargestellt werden sollen, kann es sinnvoll sein diese als Vorschaubild oder Thumbnail (engl.Daumennagel) zu verkleinern. Dieses kann man mit einem Grafikprogramm erledigen.

Wir gehen jetzt davon aus, dass uns Bilder und die dazugehörigen Vorschaubilder zur Verfügung stehen. (Bei den hier benutzten Bildern macht ein Vorschaubild nicht wirklich Sinn, aber es dient ja nur der Demonstration.) Die Bilder speichern wir im Verzeichnis bilder in unserem Projektverzeichnis ab.
Wir werden dann drei Möglichkeiten ausführen.

• Öffnen des Bildes im aktuellen Browserfenster
• Öffnen des Bildes in einem neuen Browserfenster
• Öffnen des Bildes durch ein JavaScript in einem kleinen Fenster

Die ersten beiden Möglichkeiten sind recht einfach.
Die dritte Möglichkeit ist recht elegant, aber auch aufwändiger.

Wir öffnen die Datei vorlage.html und speichern die Datei als bilder.html. Dann fügen wir den unten stehenden Text ein. Die Datei speichern wir anschließend als bilder.html.

<div class="inhalt">
<h1>Bilder der Wollmaus</h1>

<p>Hier finden sich einige der wenigen Bilder der Wollmaus</p>
<table width="100%" border="0">
<tr>
<td>
<a href="bilder/wollmaus1.jpg">
<img src="bilder/mini_wollmaus1.jpg" width="100" height="100" alt="Wollmaus auf Boden"  />
</a>
<br />
Bild öffnet sich im Aktuellen Browserfenster, mit der Zurück-Taste des Browsers wieder auf diese Seite zurück.
</td>
<td>
<a href="bilder/wollmaus2.jpg" target="_blank">
<img src="bilder/mini_wollmaus2.jpg" width="100" height="39" alt="Wollmaus in Ecke" />
</a>
<br />
Bild öffnet ein neues Browserfenster. Diese Seite bleibt erhalten.
</td>
</tr>
</table>

</div>


Dort wird mit <table> (engl. Tabelle) eine Tabelle erzeugt (genaue Syntax bei selfhtml nachlesen), mit <tr> (tablerow engl. Tabellenzeile) eine Tabellenzeile und mit <td> (tabledata engl. Tabellendaten) eine Tabellenzelle.
In so eine Tabellenzelle wird jetzt ein Link zu dem anzuzeigenden Bild erstellt. Dieses wird, wie bei anderen Links auch, mit <a href="..."> eingeleitet. Als Quelle geben wir den Pfad und den Dateinamen der zu öffnenden Datei an.
Dort, wo bei einem Textlink der Text stehen würde, wird dann mit dem <img scr="..."> Tag die Vorschaugrafik eingefügt. Mit width (engl. Breite) und height (engl. Höhe) werden die Breite und Höhe der Grafik (evlt. mit Grafikprogramm ermitteln) eingetragen. Werden dort "falsche" Werte eingetragen, so wird die Grafik im Browser verzerrt dargestellt. Hinter alt (alternate engl. Alternative) kommt ein Text, der als Alternative zur Grafik angezeigt wird, wenn die Grafik im Browser nicht dargestellt wird. Dieser Text sollte kurz das Beschreiben, was auf der Grafik/Bild zu sehen ist.

• Z.B. weil der User um Seiten schneller zu laden, die Grafiken deaktiviert hat.
• Oder weil der Browser textbasiert ist und gar keine Grafiken darstellen kann.
• Oder weil der Browser mit Sprachausgabe arbeitet. (Sehbehindert).

Wenn wir uns jetzt die Seite ansehen, so werden wir feststellen, dass die Texte in der Tabelle in einer anderen Farbe wie der Rest der Seite dargestellt wird.
Auch stehen die Grafiken nicht in einer Linie ausgerichtet.
Da müssen wir noch etwas in der Stylesheet Datei ändern.

h1, h2, h3, h4, h5, h6, p, td
{
color:#909395;
background:transparent;
}

Dazu wird in der obigen Zeile das td ergänzt. Komma nicht vergessen! und schon nimmt die Tabellenzelle diese Texteigenschaften an.

Um die Grafiken oben am Rand der Tabellenzelle darzustellen fügen wir noch die folgende Zeile in unsere StyleSheet-Datei ein.

h1, h2, h3, h4, h5, h6, p, td
{
color:#909395;
background:transparent;
}
td
{
vertical-align:top;
}

Mit diesen Änderungen sieht unser Projekt nun so aus.