Hinweis

Aufgrund technischer Probleme ist unser Forum im Moment nicht erreichbar. Wir bitten um Verständnis und hoffen auf Beseitigung der Schwierigkeiten bis spätestens Montag, 25.6. Unser Blog und unser Wiki sind nach wie vor auch im Moment verfügbar.

HTML/Tutorials/Einstieg/Kapitel6

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Bilder und wie man sie in HTML einbindet

Nun endlich kommen wir zu den Bildern! Herr Meier möchte ja sehr gern, dass seine Kunden wissen, was er anzubieten hat. Wie kann man diesen Eindruck besser vermitteln als mit Bildern? Also gibt es jetzt eine Seite, auf der Herr Meier sich, seine Mitarbeiter und seine Produkte im Bilde vorstellt. Na ja, wir haben gerade kein Foto von Herrn Meier und seinen Mitarbeitern; also beschränken wir uns doch lieber auf die Produkte.

Beispielgrafik Bett "Beispielgrafik Baum Beispielgrafik Schreibtisch Beispielgrafik Stuhl

Bitte sichern Sie diese Bilder vermittels eines Rechtsklicks und dann „Bild speichern unter…“ oder „Grafik speichern unter…“. Speichern Sie die Bilder dann bitte in dem Verzeichnis mit dem Namen img ab.

So, wo Sie jetzt ein paar Bilder haben, die Sie kreativ in die Seite unseres Schreinermeisters einbauen können, brauchen Sie ja nur noch zu wissen, wie das gehen soll.

Herr Meier wird seine Bilder sicher „Bilder“ nennen – Sie sind angehender Webworker und wissen es besser. Fotos, digitalisierte Zeichnungen, die schicken Diagramme, die von Tabellenkalkulationen erzeugt werden, sind Grafiken. Und nun möchte Herr Meier also eine neue Seite machen (wir nennen sie bilder.html und legen sie im Verzeichnis html ab), in der er einen Überblick über das gibt, was er zu produzieren in der Lage ist. Wir fangen also noch eine neue Seite an:

Beispiel: für eine Seite, die Bilder enthält ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Produkte</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="../index.html">Startseite</a></li>
        <li><a href="preise.html">Unsere Preise</a></li>
        <li>Bilder von unseren Produkten</li>
      </ul>
    </nav>
    <h1>Unsere Produkte</h1>
    <p>Lorem ipsum dolor sit amet, …</p>
    <p>
      <img src="../img/bett.jpg" alt="Bett">
      <img src="../img/kiefer.jpg" alt="Kiefer">
      <img src="../img/schaukelstuhl.jpg" alt="Schaukelstuhl">
      <img src="../img/schreibtisch.jpg" alt="Schreibtisch">
    </p>
  </body>
</html>

„Bild“ in dem Sinn, in dem wir es oben beschrieben haben, heißt auf Englisch image, die Abkürzung für HTML lautet img. Was für Grafikdateien ein Browser tatsächlich anzeigen kann, ist unterschiedlich, aber die Formate JPG, GIF und PNG beherrschen sie eigentlich alle. Man muss dem Browser natürlich auch sagen, wo er das Bild findet, also eine Quellenangabe machen. Wie oben beim a-Element ist auch hier ein Attribut dafür zuständig. Das englische Wort für „Quelle“ ist source, abgekürzt für HTML src. Wichtig ist auch hier wieder, dass Sie die Anführungszeichen nicht vergessen und darauf achten, dass auch wirklich angegeben ist, wo das Bild liegt – also das Verzeichnis (so Sie das Bild wie empfohlen in einem eigenen Verzeichnis abspeichern) und den korrekten Namen des Bildes.

Hierbei gilt dasselbe, was Sie schon beim href-Attribut des a-Elements gelernt haben. Und wie bereits erläutert, ist es auch beim src sinnvoll, die gleiche Groß- und Kleinschreibung wie bei den eigentlichen Dateien zu verwenden, auch wenn es unter Windows keine Rolle spielt.

Pfadangaben für Bilder

Auch hier können wir wieder nicht einfach quer durch die Botanik zu den Bildern huschen, sondern wieder schön Schritt für Schritt, damit der Browser uns auch folgen kann:

Also erstmal eine Ebene zurück (in der Abbildung nach links): Dieses „Zurück“ schreibt man mit zwei Punkten (..). Darauf folgt der normale Schrägstrich zum Trennen der Bestandteile des Pfades.

Und nun gehen wir wieder in die entgegengesetzte Richtung (in der Abbildung nach rechts), um ins Verzeichnis img reinzukommen. Also ist img die nächste Angabe, gefolgt vom Schrägstrich. Und dort befindet sich dann das Bild, das wir meinen, z.B. bett.jpg. So setzt sich z.B. die Pfadangabe: ../img/bett.jpg zusammen.

Breite und Höhe des Bildes

Sie können den Browser bei der Darstellung der Bilder unterstützen, indem Sie Angaben zur Breite (width) und Höhe (height) der Grafikdatei machen. Diese werden in der Einheit Pixel gemacht, und die Werte erhalten Sie gewöhnlich mit einem Grafikprogramm. Ein Pixel, also ein „Bildpunkt“, ist einer von den vielen kleinen Punkten, aus denen sich das Bild auf dem Bildschirm zusammensetzt. Vielleicht haben Sie schon einmal etwas von einer Bildschirmauflösung wie z.B. 1024 × 768 gehört. Das besagt, dass der Bildschirm in der Breite eben aus 1024 und in der Höhe aus 768 Pixeln besteht.

Sie können die Grafik mit den Attributen width und height auch verkleinern oder vergrößern, oder, wenn Sie ein vom Originalbild abweichendes Seitenverhältnis angeben, auch die Darstellung der Grafik in die eine oder andere Richtung verzerren.

Beispiel: für verzerrte Bilder ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Verzerrte Bilder</title>
  </head>
  <body>
    <h1>Verzerrte Bilder:</h1>
    <h2>Normal:</h2>
    <p><img src="schaukelstuhl.jpg" width="201" height="216" alt="Schaukelstuhl"></p>
    <h2>Sehr breit:</h2>
    <p><img src="schaukelstuhl.jpg" width="600" height="216" alt="Schaukelstuhl"></p>
    <p>(sieht jetzt eher wie eine Liege aus)</p>
    <h2>Sehr hoch:</h2>
    <p><img src="schaukelstuhl.jpg" width="201" height="600"  alt="Schaukelstuhl"></p>
  </body>
</html>

Weitere Informationen dazu erhalten Sie unter HTML/Multimedia und Grafiken/Grafiken optionale Breiten- und Höhenangaben

Empfehlung: Im Normalfall unterlassen Sie Breiten-und Höhenangaben und regeln das über CSS (Mehr dazu im Kapitel 8). Dabei können Sie für unterschiedliche Geräte auch verschiedene Größen festlegen.

Ein Alternativtext zur Grafik

Das Attribut alt ist tatsächlich recht wichtig und es sollte dort auch möglichst eine kurze Beschreibung des Bildes notiert sein. Jetzt werden Sie wieder fragen, warum, denn die Grafik wird ja auf dem Monitor angezeigt. Da sind wir wieder bei der Zielgruppe: Für unseren Schreiner ist es wichtig, möglichst alle Menschen zu erreichen, auch die, die z.B. blind sind und sich die HTML-Seiten daher nicht auf einem Monitor ausgeben, sondern sie sich von einem Computerprogramm (einem sogenannten Screenreader) vorlesen lassen oder auf einer Braillezeile mit den Fingern lesen. Diese Menschen können dann zwar das Bild nicht sehen, erfahren aber durch die Beschreibung im alt-Attribut wenigstens, was auf dem Bild zu sehen ist.

Hauptartikel: Barrierefreiheit
Empfehlung: Mit einem Validierungs-Stylesheet können Sie während der Entwicklung Ihrer Webseite überprüfen, ob alle Grafiken ein alt-Attribut besitzen.
(Mehr über die Formatierung mit Stylesheets erfahren Sie im nächsten Kapitel.)

Sind Sie inzwischen eigentlich gelangweilt vom Aussehen unserer Webseiten? Dann sollten wir sie endlich hübscher machen! Auf der nächsten Seite legen wir damit los.