1.5 Grafiken

Mit Hilfe des img-Elements (image) kann innerhalb des body-Elements ein Verweis auf eine Grafikdatei erstellt werden. Der Browser zeigt an der jeweiligen Stelle dann die entsprechende Grafik an.

Quellcode
HTML
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Kaufmännische Schule Tauberbischofsheim</title>
    </head>

    <body>
        <img src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
        <h1>Kaufmännische Schule Tauberbischofsheim</h1>
        <h2>Herzlich Willkommen</h2>
        <img src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
        <p>

Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.

        </p>
    </body>

</html>
Abb. 1-12: Startseite index.html (Zwischenstand Kapitel 1-5)

img-Element

Beim img-Element handelt es sich um ein void-Element (standalone tag), das weder einen Inhalt noch einen End-Tag besitzt.

Das Attribut src

Das Attribut src (source) enthält den Pfad zur Grafikdatei. Die Pfadangabe erfolgt relativ zum Speicherort der HTML-Datei. Das heißt, liegt die Grafikdatei im gleichen Ordner wie die HTML-Datei, reicht die Angabe des Dateinamens.

HTML
...
   <body>
      <img src="logo.png">
      <h1>...
      <h2>...
      <img src="eingang.jpg">
      ...
   </body>
...
Abb. 1-13: Einbinden einer Grafik, die sich im gleichen Ordner wie die HTML-Datei befindet.

Liegt Sie in einem untergeordneten Ordner, müssen im Pfad die entsprechenden Unterordner, jeweils durch einen Schrägstrich getrennt, dem Dateinamen vorangestellt werden.

HTML
...
   <body>
      <img src="img/logo.png">
      <h1>...
      <h2>...
      <img src="img/eingang.jpg">
      ...
   </body>
...
Abb. 1-14: Einbinden einer Grafik, die sich im Unterordner img befindet.

Um in der Ordnerhierarchie einen Ordner höher zu springen, fügt man im Pfad an der entsprechenden Stelle ../ ein.

HTML
...
   <body>
      <img src="../img/logo.png">
      <h1>...
      <h2>...
      <img src="../img/eingang.jpg">
      ...
   </body>
...
Abb. 1-15: Einbinden einer Grafik, die sich eine Ordnerebene höher und dort im Ordner img befindet.
Das Attribut alt

Das Attribut alt (alternative) dient dazu einen alternativen Text anzugeben, der angezeigt wird, wenn die Grafik nicht geladen werden kann.

HTML
...
   <body>
      <img src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
      <h1>...
      <h2>...
      <img src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
      ...
   </body>
...
Abb. 1-16: Angabe eines Alternativtextes, für den Fall, dass die Grafik nicht geladen werden kann.