Multimedia und Einbettung

Bevor Sie mit diesem Modul beginnen, sollten Sie ein vernünftiges Verständnis der Grundlagen von HTML haben, wie es zuvor in der Einführung in HTML behandelt wurde. Wenn Sie dieses Modul (oder etwas Ähnliches) noch nicht durchgearbeitet haben, arbeiten Sie es zuerst durch und kehren Sie dann zurück!

Dieses Modul enthält die folgenden Artikel, die Ihnen alle Grundlagen zur Einbettung von Multimedia auf Webseiten näherbringen.

Bilder in HTML

Es gibt andere Arten von Multimedia zu berücksichtigen, aber es ist logisch, mit dem bescheidenen <img>-Element zu beginnen, das verwendet wird, um ein Bild in eine Webseite einzubinden. In diesem Artikel werden wir uns genauer ansehen, wie Sie es verwenden können, einschließlich der Grundlagen, der Beschriftung mit <figure>, und wie es sich auf CSS-Hintergrundbilder bezieht.

Video- und Audioinhalte

Als nächstes schauen wir uns an, wie die HTML-Elemente <video> und <audio> verwendet werden, um Video und Audio auf unseren Seiten einzubetten, einschließlich der Grundlagen, Bereitstellung unterschiedlicher Dateiformate für verschiedene Browser, Hinzufügen von Untertiteln und wie man Fallbacks für ältere Browser hinzufügt.

Von <object> zu <iframe> — andere Einbettungstechnologien

An dieser Stelle möchten wir einen kleinen Seitenblick wagen und uns einige Elemente ansehen, die es ermöglichen, eine Vielzahl von Inhaltstypen in Ihre Webseiten einzubetten: die <iframe>, <embed> und <object>-Elemente. <iframe>s dienen zum Einbetten anderer Webseiten, während die anderen beiden das Einbetten externer Ressourcen wie PDF-Dateien ermöglichen.

Vektorgrafiken zum Web hinzufügen

Vektorgrafiken können in bestimmten Situationen sehr nützlich sein. Anders als reguläre Formate wie PNG/JPG verzerren/pixeln sie nicht beim Vergrößern – sie bleiben glatt, wenn sie skaliert werden. Dieser Artikel führt Sie in das Thema Vektorgrafiken ein und wie das beliebte SVG-Format in Webseiten eingebettet werden kann.

Responsive Bilder

In diesem Artikel werden wir das Konzept der responsiven Bilder erlernen – Bilder, die auf Geräten mit sehr unterschiedlichen Bildschirmgrößen, Auflösungen und anderen Merkmalen gut funktionieren – und uns ansehen, welche Werkzeuge HTML bietet, um diese zu implementieren. Dies trägt zur Verbesserung der Leistung auf verschiedenen Geräten bei. Responsive Bilder sind nur ein Teil des responsiven Designs, ein zukünftiges CSS-Thema, das Sie lernen werden.

Die folgende Bewertung wird Ihr Verständnis des in den Leitfäden behandelten Materials testen.

Mozilla-Startseite

In dieser Bewertung testen wir Ihr Wissen über einige der in den Artikeln dieses Moduls besprochenen Techniken, indem Sie dazu gebracht werden, einige Bilder und Videos zu einer coolen Startseite über Mozilla hinzuzufügen!

Eine Hitmap auf ein Bild legen

Bildkarten bieten einen Mechanismus, um verschiedene Teile eines Bildes mit verschiedenen Orten zu verknüpfen. (Denken Sie an eine Karte, die Sie zu weiteren Informationen über jedes Land verlinkt, auf das Sie klicken.) Diese Technik kann manchmal nützlich sein.

Web Literacy Basics II

Ein ausgezeichneter Kurs der Mozilla Foundation, der einige der im Modul Multimedia und Einbettung besprochenen Fähigkeiten erkundet und testet. Tauchen Sie tiefer in die Grundlagen der Webseiten-Komposition, des Designs für Zugänglichkeit, des Teilens von Ressourcen, der Nutzung von Online-Medien und der offenen Arbeit ein (was bedeutet, dass Ihre Inhalte frei verfügbar und von anderen teilbar sind).