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 namensblue
im aktuellen Verzeichnis befindet. - Der zweite Link sollte zu einem Bild namens
narwhal.jpg
führen, das sich in einem Verzeichnis namensnarwhal
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 namensimghp
. - 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.