initial commit

2 files changed, 203 insertions, 0 deletions

diff --git a/files/de/learn/html/multimedia_and_embedding/index.html b/files/de/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..80ad15ca25
--- /dev/null
+++ b/files/de/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,77 @@
+---
+title: Multimediainhalte einbinden - Übersicht
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Assessment
+  - Audio
+  - Beginner
+  - CodingScripting
+  - Embedding
+  - Flash
+  - Guide
+  - HTML
+  - Images
+  - Landing
+  - Learn
+  - Multimedia
+  - NeedsTranslation
+  - SVG
+  - TopicStub
+  - Video
+  - Web
+  - iframes
+  - imagemaps
+  - img
+  - responsive
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">In diesem Kurs haben wir uns bisher viel zum Thema Text angesehen. Das Internet wäre allerdings ziemlich langweilig, wenn es nur aus reinem Text bestehen würde. Deshalb wollen wir uns nun ansehen, wie wir die Inhalte lebendiger und interessanter gestalten können.</p>
+
+<p class="summary">Dieses Modul zeigt, wie wir HTML einsetzen können, um Multimediainhalte in unsere Webseiten zu integrieren, egal ob es sich dabei um Bilder, Videos, Tonaufnahmen oder etwa ganze Webseiten handelt.</p>
+
+<h2 id="Vorwissen">Vorwissen</h2>
+
+<p>Bevor Sie dieses Modul beginnen, sollten Sie über zuverlässiges HTML-Grundlagenwissen verfügen, wie es zuvor in <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a> behandelt wurde. Falls Sie dieses Modul noch nicht bearbeitet haben (und auch nichts ähnliches), beginnen Sie am besten damit und kommen Sie später wieder!</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>:Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf welchem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie <a class="external external-icon" href="http://jsbin.com/" rel="noopener">JSBin</a> oder <a class="external external-icon" href="https://thimble.mozilla.org/" rel="noopener">Thimble </a>ausprobieren.</p>
+</div>
+
+<h2 id="Einführung">Einführung</h2>
+
+<p>Dieses Modul unterteilt sich in nachfolgende Abschnitte, um Ihnen die Grundlagen zur Einbettung von multimedialen Inhalten in Webseiten zu erläutern.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Bilder in HTML</a></dt>
+ <dd>Man kann an die verschiedensten Arten von Multimediainhalten denken, die man einbinden könnte, aber wir fangen hier mit dem einfachsten Typ an, nämlich mit einem  {{htmlelement("img")}}, mit welchem ein einfaches Bild in die Webseite eingefügt werden kann. In diesem Abschnitt sehen wir uns dies nun genauer an, beginnend bei den Mindestangaben, welche wir dann um eine Beschriftung ergänzen, welches durch den Einsatz eines {{htmlelement("figure")}} geschieht. Wie diese Angaben dann in Bezug zu Hintergrundgrafiken stehen, welche durch CSS Angaben definiert werden, werden wir uns anschliessend ansehen.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video- und Audioinhalte</a></dt>
+ <dd>Next, we'll look at how to use the HTML5 {{htmlelement("video")}} and {{htmlelement("audio")}} elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Von &lt;object&gt; bis &lt;iframe&gt; — andere Einbindungstechniken</a></dt>
+ <dd>At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}} elements. <code>&lt;iframe&gt;</code>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology on its way out, but which you may still see semi-regularly.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vektorgrafiken einbinden</a></dt>
+ <dd>Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are and how to include the popular {{glossary("SVG")}} format in web pages.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive Bilder</a></dt>
+ <dd>With so many different device types now able to browse the web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now, we'll look at the tools HTML has available to create responsive images, including the {{htmlelement("picture")}} element.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the HTML basics covered in the guides above:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></dt>
+ <dd>In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt>
+ <dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt>
+ <dd>
+ <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).E</p>
+ </dd>
+</dl>
diff --git a/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
new file mode 100644
index 0000000000..5be24777e1
--- /dev/null
+++ b/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -0,0 +1,126 @@
+---
+title: Mozilla splash page
+slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+tags:
+  - Anfänger
+  - Aufgabe
+  - Bilder
+  - CodingScripting
+  - Einbinden
+  - Grafiken
+  - HTML
+  - JPG
+  - PNG
+  - Video
+  - img
+  - responsiv
+  - src
+  - srcset
+  - youtube
+translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Mit dieser Aufgabe testen wir Ihr Wissen über einige der Techniken, die in den Artikeln dieses Moduls angesprochen wurden. Wir lassen Sie einige Bilder und ein Video zu einer funky Mozilla-Startseite hinzufügen!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>Bevor Sie sich dieser Aufgabe stellen, sollten Sie bereits den Rest des <a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimediainhalte einbinden</a>-Moduls bearbeitet haben.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Testen des Wissens über das Einbinden von Bildern und Videos in Webseiten, Frames und HTML-Techniken von responsiven Grafiken.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Startpunkt">Startpunkt</h2>
+
+<p>Um diese Aufgabe zu beginnen, holen Sie sich die HTML und alle Bilder aus dem <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a>--Directory auf Github. Legen Sie auf Ihrer Festplatte ein neues Verzeichnis an und speichern Sie darin die Inhalte von <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> in einer Datei mit dem Namen <code>index.html</code> auf Ihrer Festplatte. Speichern Sie im selben Verzeichnis <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> (mt einem Rechtsklick auf das Bild eröffnet Ihnen das Kontextmenü eine Option, das Bild zu speichern).</p>
+
+<p>Speichern Sie auf dieselbe Weise, aber zunächst in einem anderen Verzeichnis, auch die anderen Bilder aus dem <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a>-Verzeichnis; Sie werden einige der Bilder noch mit einem Bildbearbeitungsprogramm verändern müssen, bevor sie einsatzbereit sind.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Das HTML-Beispiel beinhaltet ein recht umfangreiches CSS, um die Seite zu stylen. Sie brauchen das CSS nicht zu touchieren, sondern lediglich die HTML innerhalb des {{htmlelement("body")}}-Elementes — solange Sie die korrekten Auszeichnungen verwenden, wird das Styling ebenfalls korrekt aussehen.</p>
+</div>
+
+<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2>
+
+<p>In dieser Aufgabe präsentieren wir Ihnen eine fast-fertige Mozilla Startseite, deren Ziel es ist, etwas nettes und interessantes darüber zu kommunizieren, wofür Mozila steht, sowie einige Links zu weiterführenden Quellen bereitzustellen. Leider sind bisher noch keine Bilder oder Videos eingepflegt worden — das ist schließlich Ihr Job! Sie müssen einige Medien hinzufügen, damit die Seite ansprechender aussieht und ihrem Ziel gerecht wird. Die nachfolgenden Abschnitte beschreiben Ihre Aufgabe detaillierter:</p>
+
+<h3 id="Bilder_vorbereiten">Bilder vorbereiten</h3>
+
+<p>Erzeugen Sie mit Ihrem bevorzugten Bildbearbeitungsprogramm 400px- und 120px-breite Versionen von:</p>
+
+<ul>
+ <li><code>firefox_logo-only_RGB.png</code></li>
+ <li><code>firefox-addons.jpg</code></li>
+ <li><code>mozilla-dinosaur-head.png</code></li>
+</ul>
+
+<p>Geben Sie ihnen sprechende Namen, z.B. <code>firefoxlogo400.png</code> und <code>firefoxlogo120.png</code>.</p>
+
+<p>Gemeinsam mit <code>mdn.svg</code> werden diese Bilder Ihre Icons sein, mit denen Sie auf weiterführende Quellen verlinken, innerhalb des <code>further-info</code>-Bereichs. Sie werden außerdem auf das Firefox-Logo im Seitenheader verlinken. Speichern Sie Kopien all dieser Bilder im selben Verzeichnis, in dem sich <code>index.html</code> befindet.</p>
+
+<p>Haben Sie dies abgeschlossen, erzeugen Sie eine 1200px-breite Landscape-Version von <code>red-panda.jpg</code> und eine 600px-breite Version, die den Panda in einem Close-Up-Shot zeigt. Geben Sie auch diesen Bildern sprechende Namen, damit Sie sie leicht wiederfinden. Speichern Sie eine Kopie davon im selben Verzeichnis, in dem sich <code>index.html</code> befindet.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Sie sollten Ihre JPG- und PNG-Bilder am besten auf eine Weise komprimieren, auf die sie so klein wie möglich sind und dabei dennoch gut aussehen. <a href="https://tinypng.com/">tinypng.com</a> ist ein toller Service, um dies einfach zu erreichen.</p>
+</div>
+
+<h3 id="Dem_Header_ein_Logo_hinzufügen">Dem Header ein Logo hinzufügen</h3>
+
+<p>Innerhalb des {{htmlelement("header")}}-Elements fügen Sie ein {{htmlelement("img")}}-Element hinzu, das die kleine Version des Firefox-Logos in den Header einbindet.</p>
+
+<h3 id="Dem_Hauptteil_des_Artikels_ein_Video_hinzufügen">Dem Hauptteil des Artikels ein Video hinzufügen</h3>
+
+<p>Fügen Sie einfach das {{htmlelement("article")}}-Element hinzu (direkt under dem öffnenden Tag) und binden Sie das YouTube-Video unter dem Link <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a> ein, indem Sie geeignete YouTube-Tools verwenden, um den Code zu generieren. Das Video soll 400px breit sein.</p>
+
+<h3 id="Responsive_Grafiken_zu_den_further_info-Links">Responsive Grafiken zu den "further info"-Links</h3>
+
+<p>Innerhalb des {{htmlelement("div")}}-Elements mit der Klasse <code>further-info</code> finden Sie vier {{htmlelement("a")}}-Elemente — jedes davon verlinkt auf eine interessante Mozilla-zugehörige Seite. Um diesen Teil abzuschließen, müssen Sie innerhalb jeden dieser Elemente ein {{htmlelement("img")}}-Element hinzufügen, die geeignete {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}-, {{htmlattrxref("srcset", "img")}}- und {{htmlattrxref("sizes", "img")}}-Attribute enthalten.</p>
+
+<p>In jedem Fall (außer einem — der von sich aus responsiv ist?) möchten wir, dass der Browser die 120px-breite Version anzeigt, wenn das Anzeigedisplay 480px breit oder kleiner ist, und die 400px-breite Version in allen anderen Fällen.</p>
+
+<p>Stellen Sie sicher, dass die richtigen Bilder mit den richtigen Links verbunden sind!</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Um die <code>srcset</code>/<code>sizes</code>-Beispiele zu testen, müssen Sie Ihre Seite auf einen Server uploaden (<a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> ist eine einfache und freie Lösung). Von dort aus können Sie testen, ob sie korrekt funktionieren, indem Sie Browser-Entwicklertools verwenden, wie in <a href="/de/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a> beschrieben.</p>
+</div>
+
+<h3 id="Ein_art_directed_Roter_Panda">Ein art directed Roter Panda</h3>
+
+<p>Innerhalb des {{htmlelement("div")}}-Elementes mit der Klasse <code>red-panda</code> möchten wir ein {{htmlelement("picture")}}-Element einfügen, das das kleine Panda-Portrai zeigt, wenn das Anzeigedisplay 600px breit oder schmaler ist, und das große Landscape-Bild bei breiteren Anzeigedisplays.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Die nachfolgenden Screenshots zeigen, wie die Startseite nach der korrekten Auszeichnung aussehen sollte, auf einem breiten und einem schmalen Bildschirm.</p>
+
+<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
+
+<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
+
+<h2 id="Einschätzung">Einschätzung</h2>
+
+<p>Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">Diskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC-Channel auf <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>.Versuchen Sie es zunächst selbst — mit Mogeleien ist nichts gewonnen!</p>
+
+<div class="blockIndicator note">
+<p><strong>Anmerkung</strong>: Falls Sie ihre Aufgabe mit den Developer-Tools des im Chrome-Browsers überprüfen, kann es sein, dass der Browser nicht die richtigen Bilder lädt, egal, wie klein Sie die Breite unter 'responsive view' auswählen. Es scheint sich hierbei um eine Eigenart von Chrome zu handeln. Der Firefox-Browser sollte das richtige Bild laden (sofern Ihre HTML korrekt ist).</p>
+</div>
+
+<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>