Multimedia und Einbettung

Wir haben bisher viel Text in diesem Kurs behandelt, aber das Web wäre wirklich langweilig, wenn es nur Text verwenden würde. Lassen Sie uns damit beginnen, das Web mit interessanterem Inhalt zum Leben zu erwecken! Dieses Modul untersucht, wie Sie HTML nutzen können, um Multimedia in Ihre Webseiten einzubinden, einschließlich der verschiedenen Möglichkeiten, wie Bilder eingebunden werden können, und wie man Video, Audio und sogar ganze Webseiten einbettet.

Voraussetzungen

Bevor Sie dieses 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, sollten Sie es zuerst durcharbeiten und dann zurückkommen!

Hinweis: Wenn Sie an einem Computer/Tablet/anderen Gerät arbeiten, auf dem Sie keine eigenen Dateien erstellen können, können Sie (die meisten) der Codebeispiele in einem Online-Coding-Programm wie JSBin oder Glitch ausprobieren.

Leitfäden

Dieses Modul enthält die folgenden Artikel, die Sie durch alle Grundlagen der Einbettung von Multimedia auf Webseiten führen.

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 einfaches Bild in eine Webseite einzubinden. In diesem Artikel werden wir untersuchen, wie man es ausführlicher verwendet, einschließlich der Grundlagen, der Annotation mit Bildunterschriften durch <figure> und wie es sich auf CSS-Hintergrundbilder bezieht.
Video- und Audioinhalte: Als Nächstes werden wir uns ansehen, wie man die HTML-Elemente <video> und <audio> verwendet, um Video und Audio auf unseren Seiten einzubetten, einschließlich der Grundlagen, der Bereitstellung von Zugriff auf verschiedene Dateiformate für verschiedene Browser, dem Hinzufügen von Untertiteln und Bildunterschriften und wie man Rückfallebenen für ältere Browser hinzufügt.
Von <object> zu <iframe> — andere Einbettungstechnologien: An diesem Punkt möchten wir einen Seitenschritt machen und uns ein paar Elemente ansehen, die es Ihnen erlauben, eine Vielzahl von Inhaltstypen in Ihre Webseiten einzubetten: die Elemente <iframe>, <embed> und <object>. <iframe>s sind für die Einbettung anderer Webseiten gedacht, und die beiden anderen erlauben es Ihnen, externe Ressourcen wie PDF-Dateien einzubetten.
Hinzufügen von Vektorgrafiken zum Web: Vektorgrafiken können in bestimmten Situationen sehr nützlich sein. Anders als reguläre Formate wie PNG/JPG verzerren oder pixeln sie nicht, wenn sie vergrößert werden — sie bleiben beim Skalieren glatt. Dieser Artikel führt Sie in die Welt der Vektorgrafiken ein und wie Sie das beliebte SVG-Format in Webseiten einbinden.
Responsive Bilder: In diesem Artikel werden wir über das Konzept von responsiven Bildern sprechen — Bilder, die auf Geräten mit sehr unterschiedlichen Bildschirmgrößen und Auflösungen gut funktionieren — und uns ansehen, welche Tools HTML bereitstellt, um sie zu implementieren. Dies trägt zur Verbesserung der Leistung auf verschiedenen Geräten bei. Responsive Bilder sind nur ein Teil des responsive Designs, ein zukünftiges CSS-Thema, das Sie lernen werden.

Bewertungen

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

Mozilla-Splash-Seite: In dieser Bewertung testen wir Ihr Wissen über einige der in den Artikeln dieses Moduls besprochenen Techniken, indem Sie einige Bilder und Videos zu einer coolen Splash-Seite über Mozilla hinzufügen!

Siehe auch

Ein Hitmap über ein Bild hinzufügen: Bild-Maps bieten eine Mechanik, um verschiedene Teile eines Bildes mit verschiedenen Orten zu verlinken. (Denken Sie an eine Karte, die auf weitere Informationen über jedes Land, auf das Sie klicken, verlinkt.) Diese Technik kann manchmal nützlich sein.
Web-Literacy-Grundlagen II: Ein exzellenter Kurs der Mozilla Foundation, der einige der Fähigkeiten untersucht und testet, die in diesem Modul Multimedia und Einbettung besprochen werden. Tauchen Sie tiefer in die Grundlagen des Erstellens von Webseiten, des Designs für Barrierefreiheit, des Teilens von Ressourcen, der Verwendung von Online-Medien und des offenen Arbeitens (was bedeutet, dass Ihre Inhalte frei verfügbar und von anderen teilbar sind) ein.