Bilder und Multimedia

Bilder/Grafiken einfügen:

<img src="../../Public/Images/wwdbk.jpg" alt="Warum ist die Banane krumm?" title="Warum ist die Banane krumm?">

Wenn wir den HTML-Code anschauen, fällt auf, dass das img-Element (von englisch: image, Bild) nur einen Tag besitzt.
Genau genommen hat es auch keinen Inhalt, sondern ist nur ein Platzhalter für die Grafik.

Anders als ein Word-Dokument, in dem neben dem Text an sich auch die Bilder selbst gespeichert werden (und die Datei-Größen entsprechend aufblähen), gibt das img-Element nur einen Verweis auf die an anderer Stelle gespeicherte Grafik-Datei.

Das „img-Tag“ enthält zwei Attribute:

  • das src-Attribut (englisch: source = Quelle). Als Wert erhält es die URL, die „Adresse“ der Datei, die angezeigt soll.
  • das alt-Attribut liefert einen Alternativtext, falls die Grafik nicht geladen oder angezeigt werden kann.
  • der title-Tag ist für die Suchmaschinen sehr wichtig.
Hinweis zum Alt-Text:

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.

Sollten die Bilder zu groß sein, können wir mit z.B. width="200px" ODERheight="200px" die Dimensionen verändern.

Da sind wir bei der Zielgruppe:
Für unseren Anbieter 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.

Videos einbinden:

<video src="../../Public/Videos/Banana.mp4" controls></video>

Genau wie das img-Element gibt es ein src-Attribut für die Quelle des Videos. Ein alt-Attribut gibt es dagegen nicht, das wurde beim video-Element anders gelöst.

Hier schreiben Sie den Ersatztext einfach zwischen <video> und </video>.

Wenn der Browser das <video> Element nicht kennt, zeigt er diesen Text.

Hinzu kommt ein weiteres Attribut: controls.

Dieses Attribut erzeugt die Bedienelemente für die Videowiedergabe.
Ohne dieses Attribut müssten Sie mit Hilfe von JavaScript die Videosteuerung selber übernehmen.