path: root/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html

---
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>