Die Media-Elemente und das Link-Element

Mit den Media-Elementen können Videos, Audio und Bilder in die Webseite eingefügt werden. Video und Audio kamen mit html5 neu dazu. Somit ist es nun recht einfach Video- und Audiomaterial einzubinden. Bilder werden schon seit dem Anfang von html unterstützt.

Auch das Link-Element wird schon seit Anfang an unterstützt. Es ist recht einfach zu Handhaben. Ohne dieses Element wäre das Verlinken von Seiten innerhalb und ausserhalb einer Webseite nicht möglich. Das World Wide Web gäbe es schlicht nicht.

Das video-Element, wie es funktioniert

Das video-Element besteht aus einem Start- und einem End-Tag. Es enthält die Attribute src, type und controls. Mit src wird die Adresse zum gewünschten Video angegeben. Type gibt das abzuspielende Format an und controls ermöglicht das Anzeigen von einem einfachen Menü für das Video.

  • src
  • type
  • controls
<video src="video.mp4" type="video/mp4" controls>Video wird nicht unterstützt</video>

Mp4 wird von den meisten Browsern unterstützt. Daher sollte darauf geachtet werden, dass das Video im mp4-Format steht.

Der Inhalt eines video-Elements wird dann angezeigt, wenn es vom Browser nicht unterstützt wird.

Das audio-Element gleicht dem video-Element

Das audio-Element ist gleich aufgebaut wie das video-Element mit Start- und End-Tag. Anstatt eine mp4-Datei wird in src eine mp3-Datei angegeben. Im type-Attribut steht audio/mpeg. Und das controls-Attribut wird genau gleich eingefügt.

  • src
  • type
  • controls
<audio src="audio.mp3" type="audio/mpeg" controls>Audio wird nicht unterstützt</audio>

Die meisten Browser unterstützen für dieses Element das mp3-Format.

Für den Inhalt des audio-Elements gilt das gleich wie für das video-Element.

Das img-Element

Mit dem img-Element werden Bilder auf die Webseite eingefügt. Es besteht nur aus einem Tag. Es enthält die Attribute src und alt. Mit src wird der Pfad zum Bild angegeben. alt fasst einen Text, der von Screen-Readern vorgelesen werden kann oder wenn der Pfad zum Bild korrupt ist, angezeigt wird.

  • src
  • alt
<img src="bild.jpg" alt="Beschreibung">

Vektorbilder werden mit dem svg-Element definiert.

Mit dem a-Element einen Link definieren

Ein Link wird mit dem a-Element definiert. Es hat einen Start- und End-Tag. Es enthält die Attribute href und target. href zeigt auf die zu linkende Seite oder Abschnitt. target hat als Default-Wert _self. Mit _self öffnet der Link im gleichen Tab, deshalb ist es nicht zwingend target zu setzen. Wenn der Link in einem neuen Tab geöffnet werden soll, muss target mit dem Wert _blank gesetzt werden. Der Inhalt des a-Elements ist der eigentliche Link auf der Webseite.

  • href
  • target
<a href="seite.html" target="_blank">Link</a>

Mit der Raute wird auf der gleichen Seite gelinkt. Dabei zeigt href auf das id-Attribut des Elements wo hingesprungen werden soll.

<a href="#abschnitt">Link</a>

img-Element als Kind-Element von einem a-Element

Wenn ein Bild als Linker dienen soll, muss als Inhalt des a-Elements ein img-Element stehen.

<a href="seite.html" target="_blank"><img src="bild.jpg" alt="Beschreibung"></a>

Zusammenfassung

Die in html5 neu dazu gekommenen Elemente video und audio sind sehr hilfreich für die Gestaltung von einer Webseite. Das img-Element ist eine Bereicherung für jede Seite. Und ohne das a-Element würde das www nicht funktionieren.

Hier noch ein Link zu einer Seite wo diese Elemente in Aktion sind.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.