Webseite Schnellstart – Bilder und Video

Nun haben wir mit Texten gearbeitet. Wird Zeit, dass wir mal auf andere Inhaltsarten umsteigen. Ein Bild hast Du bereits im letzten Modul verwendet. Jetzt möchte ich dir ein paar Details dazu zeigen.

Mit dem img-Element und dem src-Attribut, kannst du ein Bild auf deiner Webseite zeigen:

<img src="milkyway.png">

Du erinnerst dich an das <br> und <hr>-Element? Auch das img-Element benötigt kein Endelement!

Das img-Element hat aber noch weitere Attribute. Die beiden Wichtigsten sind width und height.

Mit width , bestimmst du die Breite des Bildes und mit height die Höhe.

Der Wert ist ein Zahlenwert, der in die Größe in Pixeln angibt (z.B. width="150").

Wenn du die genauen Pixel nicht kennst, kannst du aber auch einen Zahlenwert in Prozent verwenden (z.B. wert="50%"), dann wird die Größe relativ zum Elternelement bestimmt.

Bilder auf der Webseite zu zeigen hilft uns zur Verschönerung deiner Webseite. Aber wie wäre es, wenn wir noch weiter gehen?

Dank des modernen Webs, kannst du weitere Medien über den Browser abspielen. Du kannst Audio un Video abspielen und sogar Inhalte von anderen Webseiten einbetten.  Starten wir mit dem Audio-Element.

Audio-Element

Das audio-Element spielt eine Audio Datei ab. Dafür benötigst du das src-Attribut. Möchtest du die Bedienelemente anzeigen, gibst du zusätzlich das Attribut controls an.

<audio src="https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand60.wav" controls>

Einfach, oder?

Video-Element

Nun beim Video-Element ist es ähnlich einfach. Dieses besitzt ähnliche Attribute, wie das audio-Element.

<video src="https://upload.wikimedia.org/wikipedia/commons/a/a6/Apollo_11_Landing_-_first_steps_on_the_moon.ogv" controls></video>

iframe-Element

Neben Audio und Video kannst du auch ganze Webseiten integrieren. Youtube bietet zum Beispiel eine Möglichkeit Videos von der Seite einzubetten.

<iframe src="https://www.youtube.com/embed/cFC71rFejvo?controls=0" frameborder="0" allowfullscreen></iframe>

Wissenswert: Beim Attribut video und iframe kannst du übrigens auch die Breite und Höhe bestimmen. Das funktioniert genauso, wie beim img-Element.