Testen Sie Ihre Fähigkeiten: Links

Ziel dieses Fähigkeitstests ist es zu überprüfen, ob Sie verstehen, wie man Links 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 uns über einen unserer Kommunikationskanäle erreichen.

Aufgabe 1

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

  • Der erste Link sollte mit einer Seite namens whales.html verlinkt werden, die sich im gleichen Verzeichnis wie die aktuelle Seite befindet.
  • Wir möchten auch, dass Sie ihm ein Tooltip geben, das beim Überfahren mit der Maus dem Benutzer mitteilt, dass die Seite Informationen über Blauwale und Pottwale enthält.
  • Der zweite Link sollte so gestaltet werden, dass er beim Klicken eine E-Mail in der Standardanwendung des Benutzers öffnet, wobei der Empfänger auf "whales@example.com" gesetzt wird.
  • Sie erhalten einen Bonuspunkt, wenn Sie auch einstellen, dass die Betreffzeile der E-Mail automatisch als "Frage zu Walen" ausgefüllt wird.

Hinweis: Die beiden Links im Beispiel haben das target="_blank"-Attribut. Dies ist nicht unbedingt best practice, aber wir haben es hier so gemacht, damit die Links nicht im eingebetteten <iframe> geöffnet werden, wodurch Ihr Beispielcode verschwinden würde.

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

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 ausfüllen, dass sie an die entsprechenden Stellen verlinken:

  • Der erste Link sollte auf ein Bild namens blue-whale.jpg verlinken, das sich in einem Verzeichnis namens blue innerhalb des aktuellen Verzeichnisses befindet.
  • Der zweite Link sollte auf ein Bild namens narwhal.jpg verlinken, das sich in einem Verzeichnis namens narwhal befindet, das eine Verzeichnisebene über dem aktuellen Verzeichnis liegt.
  • Der dritte Link sollte auf die UK Google-Bildersuche verlinken. Die Basis-URL ist https://www.google.co.uk, und die Bildersuche befindet sich in einem Unterverzeichnis namens imghp.
  • Der vierte Link sollte auf den Absatz ganz unten auf der aktuellen Seite verlinken. Dieser hat die ID bottom.

Hinweis: Die ersten drei Links im Beispiel haben das target="_blank"-Attribut, damit sie beim Klicken die verlinkte Seite in einem neuen Tab öffnen. Dies ist nicht unbedingt best practice, aber wir haben es hier so gemacht, damit die Seiten nicht im eingebetteten <iframe> geöffnet werden, wodurch Ihr Beispielcode verschwinden würde.

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

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 verlinken auf eine Infoseite über Narwale, eine Support-E-Mail-Adresse und ein PDF-Dokument mit Fakten, das 4 MB groß ist. In dieser Aufgabe sollen Sie:

  • Die bestehenden Absätze mit schlecht formulierten Linktexten überarbeiten, sodass sie gute Linktexte enthalten.
  • Eine Warnung zu allen Links hinzufügen, die eine Warnung benötigen.

Hinweis: Der erste und dritte Link im Beispiel haben das target="_blank"-Attribut, damit sie beim Klicken die verlinkte Seite in einem neuen Tab öffnen. Dies ist nicht unbedingt best practice, aber wir haben es hier so gemacht, damit die Seiten nicht im eingebetteten <iframe> geöffnet werden, wodurch Ihr Beispielcode verschwinden würde.

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

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