Testen Sie Ihre Fähigkeiten: Links

Aufgabe 1

Bei dieser Aufgabe möchten wir, dass Sie helfen, die Links auf unserer Informationsseite über Wale zu vervollständigen.

Um die Aufgabe abzuschließen, aktualisieren Sie die Links wie folgt:

1. Der erste Link sollte auf eine Seite namens whales.html verlinken, die sich im gleichen Verzeichnis wie die aktuelle Seite befindet.
2. Geben Sie ihm einen Tooltip, der dem Benutzer beim Überfahren mit der Maus mitteilt, dass die Seite Informationen über Blauwale und Pottwale enthält.
3. Der zweite Link sollte in einen anklickbaren Link verwandelt werden, um eine E-Mail im Standard-Mailprogramm des Benutzers zu öffnen, wobei der Empfänger auf "whales@example.com" gesetzt ist.
4. Bonuspunkte, wenn Sie es auch so einrichten, dass die Betreffzeile der E-Mail automatisch als "Frage über Wale" ausgefüllt wird.

<h1>Information on Whales</h1>

<p>
  For more information on our conservation activities and which Whales we study,
  see our <a target="_blank">Whales page</a>.
</p>

<p>
  If you want to ask our team more questions, feel free to
  <a target="_blank">email us</a>.
</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

p {
  color: gray;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

<h1>Information on Whales</h1>

<p>
  For more information on our conservation activities and which Whales we study,
  see our <a target="_blank" href="whales.html" title="Includes information on Blue Whales and Sperm Whales">
  Whales page</a>.
</p>

<p>
  If you want to ask our team more questions, feel free to
  <a target="_blank" href="mailto:whales@example.com?subject=Question%20about%20Whales">
  email us</a>.
</p>

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie die vier Links ausfüllen, damit sie zu den entsprechenden Orten verlinken.

Um die Aufgabe abzuschließen, aktualisieren Sie die Links wie folgt:

1. Der erste Link sollte zu einem Bild namens blue-whale.jpg verlinken, das sich in einem Verzeichnis namens blue im aktuellen Verzeichnis befindet.
2. Der zweite Link sollte zu einem Bild namens narwhal.jpg verlinken, das sich in einem Verzeichnis namens narwhal befindet, das eine Verzeichnisebene über dem aktuellen Verzeichnis liegt.
3. Der dritte Link sollte zur UK Google Bilder-Suche verlinken. Die Basis-URL ist https://www.google.co.uk, und die Bildsuche befindet sich in einem Unterverzeichnis namens imghp.
4. Der vierte Link sollte zu dem Absatz am Ende der aktuellen Seite verlinken. Er hat die ID bottom.

<h1>List path tests</h1>

<ul>
  <li><a target="_blank">Link me to the blue whale image</a></li>
  <li><a target="_blank">Link me to the narwhal image</a></li>
  <li><a target="_blank">Link me to Google image search</a></li>
  <li><a>Link me to the paragraph at the bottom of the page</a></li>
</ul>

<div></div>

<p id="bottom">The bottom of the page!</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

li {
  color: gray;
  margin: 0.5em 0;
}

div {
  height: 600px;
}

<h1>List path tests</h1>

<ul>
  <li><a target="_blank" href="blue/blue-whale.jpg">
    Link me to the blue whale image
  </a></li>
  <li><a target="_blank" href="../narwhal/narwhal.jpg">
    Link me to the narwhal image
  </a></li>
  <li><a target="_blank" href="https://www.google.co.uk/imghp">
    Link me to Google image search
  </a></li>
  <li><a href="#bottom">
    Link me to the paragraph at the bottom of the page
  </a></li>
</ul>

<div></div>

<p id="bottom">The bottom of the page!</p>

Aufgabe 3

Die folgenden Links verweisen auf eine Informationsseite über Narwale, eine Support-E-Mail-Adresse und ein PDF-Datenblatt, das 4MB groß ist.

Um die Aufgabe abzuschließen:

1. Nehmen Sie die vorhandenen Absätze mit schlecht geschriebenem Link-Text und überarbeiten Sie sie so, dass sie einen guten Link-Text enthalten.
2. Fügen Sie eine Warnung zu allen Links hinzu, die eine Warnung benötigen.

<p>
  We do lots of work with Narwhals. To find out more about this work,
  <a href="narwhals.html" target="_blank">click here</a>.
</p>

<p>
  You can email our support team if you have any more questions —
  <a href="mailto:whales@example.com">click here</a> to do so.
</p>

<p>
  You can also <a href="factfile.pdf" target="_blank">click here</a> to download
  our factfile, which contains lots more information, including an FAQ.
</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

p {
  color: gray;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

<p>
  We do lots of work with Narwhals. <a href="narwhals.html" target="_blank">Find out more about this work</a>.
</p>

<p>
  You can <a href="mailto:whales@example.com">email our support team</a> if you have any more questions.
</p>

<p>
  You can also <a href="factfile.pdf" target="_blank">download
  our factfile</a> (PDF, 4MB), which contains lots more information, including an FAQ.
</p>

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter