Tag 3: Links, Bilder & Medien

Ziel

Lerne, wie du Interaktivität und Medien zu deinen HTML-Seiten hinzufügst mit Links, Bildern sowie Audio- und Video-Elementen.

Themen

• Links: <a>
• Bilder: <img>
• Audio: <audio>
• Video: <video>

Links

Links ermöglichen es Nutzern, zu anderen Seiten oder Websites zu navigieren.

<a href="https://example.com">Externer Link</a>  <!-- Führt zu einer anderen Website -->
<a href="about.html">Interner Link</a>  <!-- Führt zu einer Seite deiner Website -->

Bilder

Bilder können mit dem <img>-Tag eingefügt werden. Verwende immer ein alt-Attribut für Barrierefreiheit.

<img src="image.jpg" alt="Eine Beschreibung des Bildes">

Audio & Video

Du kannst Audio und Video direkt in deine Seite einfügen.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Dein Browser unterstützt das Audio-Element nicht.
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt das Video-Tag nicht.
</video>

Übung

Versuche, Medien und Links zu deiner Seite hinzuzufügen:

• Füge mindestens zwei Links ein: eine interne Seite und eine externe Website.
• Füge ein Bild mit einem passenden alt-Text ein.
• Füge ein Video oder Audio mit <video> oder <audio> ein.

Beispiel

<h1>Meine Lieblingsmedien</h1>

<p>Schau dir meine Lieblingsseite an: <a href="https://example.com">Beispiel</a></p>
<p>Gehe zu meiner Über-mich-Seite: <a href="about.html">Über mich</a></p>

<h2>Bild Beispiel</h2>
<img src="myphoto.jpg" alt="Foto von mir">

<h2>Video Beispiel</h2>
<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt das Video-Tag nicht.
</video>