Testen Sie Ihre Fähigkeiten: Links

Ziel dieses Fähigkeitstests ist es zu überprüfen, ob Sie verstehen, wie man Hyperlinks in HTML implementiert.

Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.

Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.

Aufgabe 1

In dieser Aufgabe möchten wir, dass Sie helfen, die Links auf unserer Seite mit Informationen über Wale zu ergänzen:

  • Der erste Link sollte zu einer Seite namens whales.html führen, die sich im gleichen Verzeichnis wie die aktuelle Seite befindet.
  • Wir möchten auch, dass Sie ihr ein Tooltip hinzufügen, das beim Darüberfahren mit der Maus dem Benutzer mitteilt, dass die Seite Informationen über Blau- und Pottwale enthält.
  • Der zweite Link sollte so gestaltet sein, dass er beim Anklicken eine E-Mail im Standard-E-Mail-Programm des Benutzers öffnet, mit dem Empfänger "whales@example.com".
  • Sie erhalten einen Bonuspunkt, wenn Sie auch den Betreff der E-Mail automatisch auf "Frage über Wale" ausfüllen lassen.

Hinweis: Die zwei Links im Beispiel haben das Attribut target="_blank" gesetzt. Dies ist nicht unbedingt best practice, aber wir haben es hier gemacht, damit die Links nicht im eingebetteten <iframe> geöffnet werden und dabei Ihr Beispielcode verloren geht!

Versuchen Sie, den unten stehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie die vier Links so ergänzen, dass sie an die entsprechenden Stellen verweisen:

  • Der erste Link sollte zu einem Bild namens blue-whale.jpg führen, das sich in einem Verzeichnis namens blue im aktuellen Verzeichnis befindet.
  • Der zweite Link sollte zu einem Bild namens narwhal.jpg führen, das sich in einem Verzeichnis namens narwhal befindet, das eine Verzeichnisebene über dem aktuellen Verzeichnis liegt.
  • Der dritte Link sollte zur britischen Google Bildersuche führen. Die Basis-URL ist https://www.google.co.uk, und die Bildersuche befindet sich in einem Unterverzeichnis namens imghp.
  • Der vierte Link sollte zum Absatz ganz unten auf der aktuellen Seite führen. Er hat die ID bottom.

Hinweis: Die ersten drei Links im Beispiel haben das Attribut target="_blank" gesetzt, so dass sie beim Anklicken die verlinkte Seite in einem neuen Tab öffnen. Dies ist nicht unbedingt best practice, aber wir haben es hier gemacht, damit die Seiten nicht im eingebetteten <iframe> geöffnet werden und dabei Ihr Beispielcode verloren geht!

Versuchen Sie, den unten stehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.

Aufgabe 3

Die folgenden Links verweisen auf eine Informationsseite über Narwale, eine Support-E-Mail-Adresse und ein PDF-Datenblatt, das 4 MB groß ist. In dieser Aufgabe möchten wir, dass Sie:

  • Die bestehenden Absätze mit schlecht geschriebenem Link-Text überarbeiten, so dass sie einen guten Link-Text haben.
  • Eine Warnung zu allen Links hinzufügen, die eine Warnung benötigen.

Hinweis: Die ersten und dritten Links im Beispiel haben das Attribut target="_blank" gesetzt, so dass sie beim Anklicken die verlinkte Seite in einem neuen Tab öffnen. Dies ist nicht unbedingt best practice, aber wir haben es hier gemacht, damit die Seiten nicht im eingebetteten <iframe> geöffnet werden und dabei Ihr Beispielcode verloren geht!

Versuchen Sie, den unten stehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.