Medienbezogene Tags

Dieser Artikel erklärt medienbezogene Tags.

Erläutert, wie man Bilder, Videos, Audio usw. in HTML beschreibt, sowie einklappbare Elemente und Inline-Frames.

YouTube Video

Medienbezogene Tags

<img>-Tag

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• Das <img>-Tag wird verwendet, um Bilder einzubetten. Das src-Attribut gibt den Bildpfad an, und das alt-Attribut liefert eine Beschreibung, wenn das Bild nicht angezeigt werden kann.

<figure>- und <figcaption>-Tags

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• Das <figure>-Tag gruppiert Medieninhalte wie Bilder oder Illustrationen zusammen mit einer Bildunterschrift mit dem <figcaption>-Tag.

<picture>-Tag

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• Das <picture>-Tag wird verwendet, um responsive Bilder zu unterstützen, sodass das passende Bild basierend auf unterschiedlichen Anzeigeanforderungen ausgewählt werden kann.

• Das media-Attribut gibt Bedingungen im gleichen Format wie CSS-Medienabfragen an.

  • Sie können Bedingungen wie die Mindestbreite (min-width), die Maximalbreite (max-width) oder die Bildschirmorientierung (orientation) angeben.

• In diesem Beispiel werden je nach Bildschirmbreite die folgenden Bilder angezeigt.

  • Wenn die Bildschirmbreite 800px oder mehr beträgt, wird large.jpg angezeigt.
  • Wenn die Bildschirmbreite 400px oder mehr, aber weniger als 800px beträgt, wird medium.jpg angezeigt.
  • Wenn die Bildschirmbreite weniger als 400px beträgt, wird small.jpg (das Bild im <img>-Tag) angezeigt.

<canvas>-Tag

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• Das <canvas>-Tag bietet einen Bereich, in dem mit JavaScript dynamische Grafiken gezeichnet werden können.

<map>-Tag

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• Das <map>-Tag wird verwendet, um eine Bildkarte zu definieren. Klickbare Bereiche innerhalb der Karte werden mit dem <area>-Tag definiert. Dies ermöglicht es, bestimmte Teile eines Bildes anklickbar zu machen, die zu einem Link führen.
• Geben Sie den Namen des zugehörigen Karten-Elements (<map>-Tag) im usemap-Attribut des <img>-Tags an, vorangestellt mit #.
• Durch die geeignete Angabe des alt-Attributs des <area>-Tags können Sie die Zugänglichkeit für sehbehinderte Nutzer verbessern.

<embed>-Tag

1<embed src="movie.mp4" width="300" height="200">

• Das <embed>-Tag wird verwendet, um externe Inhalte wie PDF-Dokumente, Videos oder Audio einzubetten.

<video>-Tag

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• Das <video>-Tag wird verwendet, um Videoinhalte einzubetten. Sie können mehrere Formate mit dem <source>-Tag angeben.

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• Das Attribut preload ermöglicht es Ihnen, anzugeben, wie viel von einem Video vom Browser geladen werden soll, bevor die Wiedergabe beginnt.
  • auto weist den Browser an, die gesamte Mediendatei vorzuladen. Dies kann die Verzögerung beim Start der Wiedergabe verringern, jedoch können Daten heruntergeladen werden, auch wenn der Benutzer die Mediendatei nicht abspielt.
  • metadata lädt nur die Metadaten der Mediendatei (z. B. Dauer, Track-Informationen). Die Mediendaten selbst werden erst geladen, wenn der Benutzer die Wiedergabe startet. Dies ist geeignet, wenn Sie zusammenfassende Informationen über die Mediendatei benötigen.
  • none lädt die Mediendatei nicht vor. Die Mediendatei lädt keine Ressourcen herunter, bevor die Wiedergabe beginnt. Dies ist geeignet, wenn Sie den Datenverbrauch minimieren möchten.

<audio>-Tag

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• Das <audio>-Tag wird verwendet, um Audioinhalte einzubetten. Das <source>-Tag unterstützt mehrere Formate.
• Wie das <video>-Tag kann das Attribut preload verwendet werden, um anzugeben, wie viel Audio vor Beginn der Wiedergabe geladen werden soll.

<track>-Tag

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• Das <track>-Tag wird verwendet, um Textspuren wie Untertitel und Audiobeschreibungen anzugeben. Es kann innerhalb von <audio>- oder <video>-Tags verwendet werden.
• Das Attribut kind ermöglicht es, den Zweck der Spur anzugeben (z. B. Untertitel, Audiobeschreibungen, Kapitel, etc.). Sie können die folgenden Werte angeben.
  • subtitles bieten Untertitel, die den Inhalt eines Videos oder Audios übersetzen oder den Zuschauern das Verständnis erleichtern. Der Hauptzweck besteht in der direkten Übersetzung von Audio.
  • captions bieten neben dem Audio zusätzliche Informationen wie Musik und Soundeffekte für Gehörlose oder Schwerhörige.
  • descriptions sind Spuren, die den visuellen Inhalt eines Videos, wie Aktionen und Landschaften, für sehbehinderte Personen beschreiben.
  • chapters bieten Kapitelmarkierungen (Kapitelüberschriften), um bestimmte Punkte innerhalb eines Videos zu kennzeichnen.
  • metadata bietet zusätzliche Informationen für das Parsen oder Verarbeiten der Mediendatei, wird jedoch den Benutzern nicht angezeigt.

<iframe>-Tag

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• Das <iframe>-Tag wird verwendet, um andere HTML-Seiten oder externe Inhalte (wie Websites, Videos oder Dokumente) in die aktuelle Seite einzubetten. Es wird häufig verwendet, um YouTube-Videos auf einer Seite einzubetten.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video