HTML-Medien

Imagemaps machten Bereiche eines Bildes klickbar. Medien im Web sind breiter: Standbilder, Ton, bewegte Bilder und manchmal eingebettete Seiten oder gehostete Player. HTML liefert zweckgebaute Tags, damit Browser diese Ressourcen mit Steuerelementen und Barrierefreiheits-Hooks anzeigen oder abspielen können. Diese Sitzung ist Ihre Karte, bevor Video, Audio, YouTube und Plug-ins in die Tiefe gehen.

Was „Medien“ hier bedeutet

In der Alltagssprache des Kurses bedeuten Medien Inhalte, die nicht nur Absätze und Überschriften sind — Fotos, Icons, Sprachclips, Demos und Embeds. Das richtige Element hilft Browsern, native Abspiel-UI freizugeben, den passenden Ressourcentyp zu laden und assistiver Technik eine klarere Rolle zu geben als ein mysteriöses <div> voller Skripte.

Direkte Antwort

• Bilder → img (und manchmal picture für mehrere Dateien)
• Ton → audio
• Filme und Clips → video
• Verschachteltes Browsing (Karten, Player anderer Sites) → oft iframe
  Bevorzugen Sie das passende Element für die Aufgabe. Geben Sie Nutzern controls bei Audio und Video, sofern Sie keinen starken, barrierefreien Custom-Player haben. Wenn Medien wichtige Informationen tragen, planen Sie Textalternative, Untertitel oder Transkript.

Bausteine auf einen Blick

Ein winziger Sampler

Sie kennen img bereits. So sitzen Audio und Video daneben auf einer ersten Übungsseite — Pfade sind Beispiele; nutzen Sie Dateien, die Sie wirklich haben, wenn Sie das zu Hause ausprobieren.

Den Sampler lesen

• img braucht weiterhin src und sinnvolles alt
• audio und video nutzen src (oder verschachtelte source-Kinder in späteren Lektionen) und profitieren von controls
• width am video kann Layout-Platz reservieren, während die Datei lädt
• Leere Dateien oder falsche Pfade scheitern wie andere Assets — Ordner früh prüfen

Controls sind eine Anfänger-Gewohnheit

Das Attribut controls fordert den Browser auf, Play, Pause und verwandte UI zu zeigen. Autoplay von Ton ohne klare Nutzeraktion wird oft blockiert und meist als störend empfunden. Beginnen Sie mit sichtbaren Controls. Custom-Player kommen später, wenn ein Projekt sie wirklich braucht.

Das richtige Werkzeug wählen

• Podcast oder Sprachnotiz → audio
• Bildschirmaufzeichnung oder Clip → video
• Foto oder Diagramm → img / picture
• Karten-Widget oder Drittanbieter-Player-Seite → oft iframe (mit Performance- und Sicherheitsbewusstsein)
  Zwingen Sie kein Video in ein Image-Tag und keine ganze externe App in einen mysteriösen Skriptklumpen, wenn ein natives Element existiert.

Barrierefreiheit und Bedeutung

Wenn Medien etwas vermitteln, planen Sie, wie jemand, der sie nicht hören oder sehen kann, die Idee trotzdem bekommt: alt für informative Bilder, Untertitel für gesprochenes Video, Transkripte für langes Audio. Dekorative Bewegung ohne Information sollte Fokus nicht einfangen und nicht laut autoplayen. Spätere Speziallektionen gehen tiefer; verankern Sie die Gewohnheit jetzt.

iframe-Kosten (Vorschau)

iframe bettet einen anderen Browsing-Kontext ein. Das ist mächtig für Karten und gehostete Player und bringt auch Skripte, Cookies und Layout-Gewicht einer anderen Seite in Ihre. Nutzen Sie es, wenn Verschachtelung das echte Ziel ist — nicht als Default für jede Mediendatei, die Sie selbst hosten. Native audio / video / img bleiben für Ihre eigenen Dateien einfacher.

Wie die nächsten Lektionen passen

Nach dieser Karte: Video und Audio lehren Attribute, mehrere Quellen und praktische Dateigewohnheiten. Plug-ins und YouTube decken ältere oder gehostete Muster ab. Iframe geht tiefer aufs Einbetten ein. Behandeln Sie diese Seite als Verzeichnis; jene Seiten als Workshops.

Übung in Ihrem Editor

1. Nennen Sie aus der Tabelle, welches Element Sie für eine Podcast-Datei wählen würden (audio).
2. Fügen Sie einer Übungsseite ein img mit klarem alt hinzu (das kennen Sie schon).
3. Wenn Sie eine kleine mp3 oder mp4 haben, fügen Sie audio oder video mit controls hinzu.
4. Schreiben Sie eine Zeile in Ihre Notizen: „Untertitel/Transkripte für gesprochenen Inhalt.“
5. Überfliegen Sie die Titel der nächsten Medien-Sitzungen, damit die Roadmap vertraut wirkt.

Leichte Fehler

• Autoplay von Ton ohne Controls oder klare Nutzergeste
• Riesige Videos einbetten ohne Größenüberlegung und ohne Plan für Alternativtext
• iframe für jede Datei nutzen, obwohl natives audio/video/img reicht
• Vergessen, dass Iframes Sicherheits- und Performance-Kosten einer anderen Seite importieren
• Diese Übersicht als „für immer genug“ behandeln und Speziallektionen überspringen, wenn Sie wirklich Medien veröffentlichen

Zusammenfassung

• HTML-Medien umfassen Bilder, Audio, Video und Embeds
• Bevorzugen Sie das passende Element für die Aufgabe
• Geben Sie Nutzern Controls und planen Sie Alternativen, wenn Medien Bedeutung tragen
• Native Tags für Ihre eigenen Dateien; iframe, wenn Sie wirklich eine andere Seite oder einen gehosteten Player verschachteln
• Nächste Lektionen spezialisieren jeden Typ — diese Seite ist die Karte