Bilder und Medien

Bilder sind sehr wichtig für Internetseiten. Damit der Browser sie darstellen kann, sollte man die Formate JPEG, GIF, PNG und SVG verwenden. Der Tag um ein Bild einzubinden lautet <img>, dieser Tag wird nicht geschlossen, aber er braucht noch das Attribut src. In diesem Attribut steht die Adresse, des Bildes. Dabei gelten die gleichen Regeln wie bei der Link-Adresse.

Für eine bessere Übersicht der Daten ist es sinnvoll einen eigenen Ordner für Bilder anzulegen.

Größe verändern

Mit den Attributen width für die Breite, und height für die Höhe, lassen sich die Abmessungen des Bildes angeben und verändern. Es ist auf jeden Fall sinnvoll diese Angaben immer zu machen. Selbst wenn das Bild noch nicht geladen ist, weiß der Browser wie groß das Bild sein soll und reserviert diesen Platz. Ansonsten könnte das Layout der Seite beim Ladeprozess durcheinander geraten.

Wie man hier gut erkennen kann, sieht das verändern der Abmessung nicht sehr gut aus. Es ist immer besser das Bild schon vorher in die passende Größe zu bringen.

Alternativtext

Ein weiteres Attribut ist alt für einen Alternativtext. Fals das Bild beschädigt oder nicht vorhanden ist, wird stattdessen dieser Text gezeigt. Noch wichtiger ist es für Menschen die nicht oder wenig sehen können und die Seite vorlesen lassen. Auch Suchmaschienen benutzen das alt-Attribut für die Bildersuche. Genau wie das src-Attribut ist dieses hier immer zu benutzen.

Beschriftung

Mit HTML5 kann man Bilder auch beschriften. Dieser Text gehört zum Bild und wird direckt unter dem Bild gezeigt. Der dafür passende Tag ist <figure>. In ihm befindet sich das img-Tag und ein weiter Tag <figcaption> In diesem steht der Text zum Bild.

Audio

Um einen Sound einzufügen habe ich von der Internetseite https://www.bensound.com ein Stück herunter geladen und in einen Ordner namens audio gespeichert. Damit sie auf diese Seite eingebunden werden kann, wird der Tag audio mit dem Attribut controls verwendet. In ihm befindet sich noch das Tag source mit dem Attribut src. Das controls-Attribut braucht erstmal keinen Wert, damit der Sound eingebunden wird. controls kann darüber hinaus den Wert autoplay und loop haben.

Innerhalb des audio-Tags können mehrere source-Tags eingefügt werden. Für den Fall das der Browser die Datei nicht unterstüzt, kann zusätlich im audio-Tag ein Text hinterlegt werden, der dann statt dessen angezeigt wird.

Video