Testen Sie Ihre Fähigkeiten: Links

Ziel dieses Fähigkeitstests ist es zu beurteilen, 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 sich über einen unserer Kommunikationskanäle an uns wenden.

Aufgabe 1

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

  • Der erste Link sollte auf eine Seite namens whales.html verweisen, die im selben Verzeichnis wie die aktuelle Seite liegt.
  • Wir möchten auch, dass Sie ihm einen Tooltip geben, der dem Benutzer beim Überfahren mit der Maus mitteilt, dass die Seite Informationen über Blau- und Pottwale enthält.
  • Der zweite Link sollte in einen klickbaren Link umgewandelt werden, der eine E-Mail in der Standarde-Mailanwendung des Benutzers öffnet, wobei der Empfänger auf "whales@example.com" gesetzt ist.
  • Sie erhalten einen Bonuspunkt, wenn Sie es auch so einrichten, dass die Betreffzeile der E-Mail automatisch mit "Question about Whales" ausgefüllt wird.

Hinweis: Die beiden Links im Beispiel haben das Attribut target="_blank" gesetzt. Dies ist zwar nicht unbedingt die beste Praxis, wurde hier jedoch so gemacht, damit die Links nicht im eingebetteten <iframe> geöffnet werden und somit Ihr Beispielcode verloren geht!

Versuchen Sie, den Live-Code unten 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 daran zu arbeiten.

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie die vier Links so ausfüllen, dass sie zu den entsprechenden Stellen führen:

  • Der erste Link sollte auf ein Bild namens blue-whale.jpg verweisen, das sich in einem Verzeichnis namens blue im aktuellen Verzeichnis befindet.
  • Der zweite Link sollte auf ein Bild namens narwhal.jpg verweisen, das sich in einem Verzeichnis namens narwhal befindet, welches eine Verzeichnisebene über dem aktuellen Verzeichnis liegt.
  • Der dritte Link sollte zur UK 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 auf den Absatz ganz unten auf der aktuellen Seite verweisen, der die ID bottom hat.

Hinweis: Die ersten drei Links im Beispiel haben das Attribut target="_blank" gesetzt, sodass sie beim Anklicken die verlinkte Seite in einem neuen Tab öffnen. Das ist zwar nicht unbedingt die beste Praxis, wurde hier jedoch so gemacht, damit die Seiten nicht im eingebetteten <iframe> geöffnet werden und somit Ihr Beispielcode verloren geht!

Versuchen Sie, den Live-Code unten 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 daran zu arbeiten.

Aufgabe 3

Die folgenden Links verweisen auf eine Infoseite über Narwale, eine Support-E-Mail-Adresse und eine PDF-Datei mit Facts, die 4MB groß ist. In dieser Aufgabe möchten wir, dass Sie:

  • Die vorhandenen Absätze mit schlecht geschriebenem Linktext nehmen und sie so umschreiben, dass sie guten Linktext haben.
  • Eine Warnung zu allen Links hinzufügen, bei denen eine Warnung hinzugefügt werden muss.

Hinweis: Der erste und dritte Link im Beispiel haben das Attribut target="_blank" gesetzt, sodass sie beim Anklicken die verlinkte Seite in einem neuen Tab öffnen. Das ist zwar nicht unbedingt die beste Praxis, wurde hier jedoch so gemacht, damit die Seiten nicht im eingebetteten <iframe> geöffnet werden und somit Ihr Beispielcode verloren geht!

Versuchen Sie, den Live-Code unten 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 daran zu arbeiten.