Herausforderung: Creepy-crawly Splash-Seite

In dieser Herausforderung werden wir Ihr Wissen über einige der in den letzten Lektionen behandelten Techniken testen, indem wir Sie dazu bringen, einige Bilder und ein Video zu einer Splash-Seite hinzuzufügen, die sich ganz um Käfer und andere Krabbeltiere dreht.

Ausgangspunkt

Um diese Herausforderung zu lösen, erwarten wir, dass Sie ein einfaches Website-Projekt erstellen, entweder in einem Ordner auf der Festplatte Ihres Computers oder mit einem Online-Editor wie CodePen oder JSFiddle. Ein Großteil des benötigten Codes wird bereits bereitgestellt.

Erstellen Sie einen neuen Ordner an einem geeigneten Ort auf Ihrem Computer mit dem Namen splash-page-challenge (oder öffnen Sie einen Online-Editor und führen Sie die erforderlichen Schritte durch, um ein neues Projekt zu erstellen).

Speichern Sie das folgende HTML-Listing in einer Datei in Ihrem Ordner mit dem Namen index.html (oder fügen Sie es in das HTML-Feld Ihres Online-Editors ein).

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Creepy crawlies!</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#beetles">Beetles</a></li>
          <li><a href="#true_bugs">True bugs</a></li>
          <li><a href="#butterflies_moths">Butterflies and moths</a></li>
          <li><a href="#flies_mosquitos">Flies and mosquitos</a></li>
          <li><a href="#bees_wasps_ants">Bees, wasps, and ants</a></li>
          <li><a href="#spiders">Spiders</a></li>
        </ul>
      </nav>
      <section>
        <h1>Creepy-crawlies splash page!</h1>

        <p>
          In casual language, people use “bugs” to mean all sorts of small
          creepy-crawlies: insects, spiders, etc. However, “Bugs” (true bugs)
          are actually just one order of insects (Hemiptera). This page
          provides a summary of the main classes or groups of
          creepy-crawlies.
        </p>
      </section>
    </header>
    <main>
      <section id="beetles">
        <h2>Beetles (Coleoptera)</h2>

        <p>
          Beetles make up the largest order of insects, with more than
          350,000 known species. They are recognized by their hardened
          forewings (elytra) that cover and protect the delicate hindwings
          and abdomen. This feature gives them a tough, armored look and
          helps them survive in many environments, from forests to deserts.
          Beetles can vary greatly in size, color, and habits, ranging from
          tiny grain beetles to massive stag beetles with impressive jaws.
        </p>
        <p>
          Many beetles play important ecological roles. Some, like ladybugs,
          are beneficial predators that feed on crop pests such as aphids.
          Others, such as dung beetles, recycle nutrients by breaking down
          animal waste. However, certain species like the Colorado potato
          beetle or Japanese beetle are major agricultural pests. Their
          diversity and adaptability make beetles one of the most successful
          groups of insects on Earth.
        </p>

        <p class="copyright">
          Image by URSchmidt - Own work, CC BY-SA 4.0,
          <a href="https://commons.wikimedia.org/w/index.php?curid=70137401"
            >https://commons.wikimedia.org/w/index.php?curid=70137401</a
          >.
        </p>
      </section>
      <section id="true_bugs">
        <h2>True Bugs (Hemiptera)</h2>

        <p>
          True bugs include a wide range of insects such as stink bugs,
          cicadas, aphids, and water striders. Unlike beetles, their
          forewings are partly hardened and partly membranous, and they
          possess distinctive piercing-sucking mouthparts. These mouthparts
          are adapted for feeding on plant sap, blood, or other insects. Many
          true bugs have scent glands that produce strong odors as a defense
          mechanism, which is why some are called “stink bugs.”
        </p>

        <p>
          True bugs are found worldwide and occupy a variety of habitats,
          including plants, soil, and water. While some species are harmless
          or even beneficial predators, others are destructive agricultural
          pests that weaken plants by draining their sap. Certain bugs, like
          bed bugs and kissing bugs, can also affect humans directly by
          biting or transmitting diseases.
        </p>

        <p class="copyright">
          Image created by user B. Schoenmakers at Waarneming.nl, a source of
          nature observations in the Netherlands. - This image is uploaded as
          image number 29046158 at Waarneming.nl, a source of nature
          observations in the Netherlands.This tag does not indicate the
          copyright status of the attached work. A normal copyright tag is
          still required. See Commons:Licensing for more information., This
          site now requires authentication, however, the same image and
          copyright information is also available via
          <a href="https://world.observation.org/foto/view/29046158"
            >https://world.observation.org/foto/view/29046158</a
          >
          since it uses the same data, CC BY 3.0,
          <a href="https://commons.wikimedia.org/w/index.php?curid=92410673"
            >https://commons.wikimedia.org/w/index.php?curid=92410673</a
          >.
        </p>
      </section>
      <section id="butterflies_moths">
        <h2>Butterflies & Moths (Lepidoptera)</h2>

        <p>
          Butterflies and moths are some of the most recognizable insects
          thanks to their large, often colorful wings covered in tiny scales.
          These scales give their wings shimmering, patterned appearances and
          are one of the defining traits of this group. Butterflies are
          usually active by day, while moths are mostly nocturnal, though
          there are exceptions. Both undergo complete metamorphosis, with a
          dramatic transformation from caterpillar to winged adult.
        </p>

        <p>
          As caterpillars, they primarily feed on leaves, sometimes causing
          damage to crops and plants. As adults, butterflies and many moths
          are important pollinators, transferring pollen as they sip nectar
          from flowers. They are also ecologically vital as food sources for
          birds, bats, and other animals. Their beauty and ecological
          importance make them a favorite group for nature enthusiasts and
          scientists alike.
        </p>

        <p class="copyright">
          Image by Didier Descouens - Own work, CC BY-SA 4.0,
          <a href="https://commons.wikimedia.org/w/index.php?curid=19303857"
            >https://commons.wikimedia.org/w/index.php?curid=19303857</a
          >.
        </p>
      </section>
      <section id="flies_mosquitos">
        <h2>Flies & Mosquitoes (Diptera)</h2>

        <p>
          Flies and mosquitoes belong to the order Diptera, meaning “two
          wings.” Unlike most other insects, they have only one functional
          pair of wings; the hind pair has evolved into tiny balancing organs
          called halteres. This adaptation gives them incredible agility in
          flight. Their mouthparts vary widely: some species have sponging
          mouthparts (like houseflies), while others have piercing-sucking
          ones (like mosquitoes).
        </p>

        <p>
          These insects are among the most ecologically and medically
          significant. Many flies are decomposers, helping break down waste
          and recycle nutrients. Mosquitoes, however, are infamous as disease
          vectors, spreading malaria, dengue, and other illnesses. Despite
          their negative reputation, flies and mosquitoes are essential in
          ecosystems, serving as pollinators and as a major food source for
          many animals.
        </p>

        <p class="copyright">
          Image created by user Dick Belgers at Waarneming.nl, a source of
          nature observations in the Netherlands. - This image is uploaded as
          image number 5105758 at Waarneming.nl, a source of nature
          observations in the Netherlands.This tag does not indicate the
          copyright status of the attached work. A normal copyright tag is
          still required. See Commons:Licensing for more information., CC BY
          3.0,
          <a href="https://commons.wikimedia.org/w/index.php?curid=27659589"
            >https://commons.wikimedia.org/w/index.php?curid=27659589</a
          >.
        </p>
      </section>
      <section id="bees_wasps_ants">
        <h2>Bees, Wasps, Ants (Hymenoptera)</h2>

        <p>
          Bees, wasps, and ants are a diverse group known for their complex
          behaviors and social structures. Many species live in colonies with
          distinct roles for workers, queens, and males. Bees are especially
          famous for pollination, producing honey, and communicating with
          each other through dances. Wasps are often predators or
          parasitoids, while ants are skilled builders and cooperative
          foragers.
        </p>

        <p>
          This group has a huge ecological impact. Bees and wasps contribute
          to pollination, supporting food crops and wild plants. Some wasps
          help control pest populations by preying on or parasitizing other
          insects. Ants are critical soil engineers, aerating the ground and
          recycling nutrients. While stings and aggressive behaviors make
          some species feared, they are vital players in natural and
          agricultural systems.
        </p>

        <p class="copyright">
          Image by Trounce - Own work, CC BY-SA 2.5,
          <a href="https://commons.wikimedia.org/w/index.php?curid=1997709"
            >https://commons.wikimedia.org/w/index.php?curid=1997709</a
          >.
        </p>
      </section>
      <section id="spiders">
        <h2>Spiders (Araneae)</h2>

        <p>
          Spiders are arachnids, not insects, and are easily distinguished by
          their eight legs and lack of antennae. Almost all spiders are
          predators, using venom and silk to capture prey. Many build
          intricate webs to trap insects, while others are active hunters
          that chase or ambush their food. Their silk is an incredibly strong
          and versatile material, used for webs, egg sacs, or safety lines.
        </p>

        <p>
          Spiders are found in nearly every habitat on Earth, from deserts to
          caves to homes. While some people fear them, very few species pose
          a danger to humans. In fact, spiders are highly beneficial because
          they help control insect populations, including pests. They play a
          crucial role in balancing ecosystems, making them one of the most
          important non-insect “bugs” people commonly encounter.
        </p>

        <p class="copyright">
          Image by AJC ajcann.wordpress.com from UK, CC BY-SA 2.0
          <a href="https://creativecommons.org/licenses/by-sa/2.0"
            >https://creativecommons.org/licenses/by-sa/2.0</a
          >, via Wikimedia Commons.
        </p>
      </section>
    </main>
  </body>
</html>

Speichern Sie das folgende CSS-Listing in einer Datei in Ihrem Ordner mit dem Namen style.css (oder fügen Sie es in das CSS-Feld Ihres Online-Editors ein).

css

/* type */

body {
  font: 1.2em / 1.5 system-ui;
  margin: 0 auto;
  width: 90%;
  min-width: 800px;
  max-width: 1200px;
}

h1 {
  text-align: center;
}

.copyright {
  font-size: 0.8em;
}

/* nav menu */

ul {
  padding: 0;
  list-style-type: none;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

li {
  flex: auto;
}

nav a {
  font-size: 1.2em;
  padding: 0 20px;
}

/* General link styles */

a {
  text-decoration: none;
  color: red;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* header section layout */

header section {
  display: grid;
  grid-template-areas:
    "heading heading"
    "text video"
    "text video";
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

h1 {
  grid-area: heading;
}

header p {
  grid-area: text;
  margin: 0;
}

video {
  grid-area: video;
  width: 100%;
  border: 1px solid black;
}

/* image floats */

figure {
  float: right;
  margin-left: 20px;
  padding: 20px;
  background: orange;
  border: 1px solid black;
}

figcaption {
  font-size: 0.6em;
}

Später müssen Sie die folgenden URLs in Ihrer Seite einbinden.

bee.jpg: Bild für den Abschnitt "Bees, Wasps, Ants (Hymenoptera)".
beetle.png: Bild für den Abschnitt "Beetles (Coleoptera)".
butterfly.jpg: Bild für den Abschnitt "Butterflies & Moths (Lepidoptera)".
mosquito.jpg: Bild für den Abschnitt "Flies & Mosquitoes (Diptera)".
spider.jpg: Bild für den Abschnitt "Spiders (Araneae)".
true_bug.jpg: Bild für den Abschnitt "True Bugs (Hemiptera)".
bug_video_640.mp4: Header-Video.

Projektbeschreibung

In dieser Bewertung präsentieren wir Ihnen eine nahezu fertige Splash-Seite über verschiedene Krabbeltiere. Leider wurden bisher keine Bilder oder Videos hinzugefügt – das ist Ihre Aufgabe! Sie müssen einige Medien hinzufügen, um die Seite interessanter zu gestalten. Die folgenden Unterabschnitte erläutern, was Sie tun müssen.

Hinzufügen eines Videos zum Header

Fügen Sie direkt unter dem <h1> ein <video>-Element hinzu, das unser Header-Video in die Seite einbettet. Wir möchten, dass es Folgendes tut:

Geben Sie den Medientyp des Videos an.
Das Video soll beim Laden automatisch abgespielt werden (damit dies in zumindest einigen Browsern funktioniert, müssen Sie auch angeben, dass das Video stummgeschaltet werden soll).
Endlos loopen statt nur einmal abspielen.
Die Videoinhalte vorladen.
Es sollen keine Bedienelemente angezeigt werden.

Hinzufügen von Sektion-Bildern

In den erweiterten Informationsabschnitten zu jedem Käfertyp möchten wir, dass Sie unter jedem <h2> ein Bild-Element hinzufügen, das das entsprechende Bild für jede Sektion einbettet. Geben Sie jedem Bild einen passenden Alternativtext zum Nutzen von Screenreader-Nutzern (und falls das Bild nicht geladen wird) und beschränken Sie jedes Bild auf Abmessungen von 250 x 180.

Außerdem möchten wir, dass Sie eine Bildunterschrift für jedes Bild einfügen; überlegen Sie, welches Container-Element benötigt wird, um die beiden semantisch miteinander zu verknüpfen. Lassen Sie die Bildunterschrift nicht einfach den Alternativtext wiederholen; sie sollte zusammen mit dem Alternativtext und dem Bild funktionieren.

Fügen Sie Bug-Emojis oder -Icons zum Navigationsmenü und zu den `<h2>`s hinzu

Zum Spaß möchten wir, dass Sie Icons am Anfang jedes Navigationslistenpunkts und das gleiche Icon am Anfang jedes entsprechenden <h2>s hinzufügen. Sie könnten dies mithilfe von eingebetteten Bildern tun, aber es ist einfacher, einfach passende Emojis zu finden und sie in den HTML-Text selbst einzufügen.

Hinweise und Tipps

Sie können den W3C HTML-Validator verwenden, um Fehler in Ihrem HTML zu finden.
Sie müssen kein CSS wissen, um diese Bewertung durchzuführen; Sie müssen nur die bereitgestellte HTML-Datei bearbeiten. Der CSS-Teil ist bereits für Sie erledigt.

Beispiel

Der folgende Screenshot zeigt, wie die Splash-Seite aussehen sollte. Wenn Sie Schwierigkeiten haben, wie Sie einige dieser Dinge erreichen können, sehen Sie sich die Lösung unter dem Live-Beispiel an.

Unser Beispiel-Splash-Seite

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges HTML sollte ungefähr so aussehen: