スキルテスト: リンク

このスキルテストの目的は、あなたが HTML でのハイパーリンクの実装を行う方法を理解しているかどうかを評価することです。

メモ: 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePenJSFiddleGlitchなどのオンラインツールを使用して作業することが便利な場合もあります。

もし行き詰まった場合は、コミュニケーションチャンネルのいずれかから私たちに連絡することができます。

課題 1

このタスクでは、クジラの情報ページのリンクを埋めるのを手伝っていただきます。

  • 最初のリンクは、現在のページと同じディレクトリーにある whales.html というページにリンクされるようにします。
  • また、マウスオーバーしたときに、このページにはシロナガスクジラやマッコウクジラの情報が含まれていることをユーザーに指示するツールチップを付けましょう。
  • 2 つ目のリンクは、ユーザーの既定のメールアプリケーションで、受信者を "whales@example.com" に設定してメールを開くためのリンクに変更しましょう。
  • メールの件名が「クジラについての質問」と自動的に記入されるように設定すると、ボーナスポイントも得られます。

メモ: この例の 2 つのリンクには target="_blank" 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた <iframe> で開かないようにし、その過程で例のコードを削除するようにしています。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2

この課題では、4 つのリンクが適切な場所にリンクするように記入していただきます。

  • 最初のリンクは、カレントディレクトリーの中の blue というディレクトリーにある blue-whale.jpg という画像にリンクするようにしましょう。
  • 2 つ目のリンクは、カレントディレクトリーの 1 つ上のディレクトリーである narwhal というディレクトリーにある narwhal.jpg という画像にリンクするようにしましょう。
  • 3 つ目のリンクは、UK の Google 画像検索にリンクしてください。ベース URL は https://www.google.co.uk で、画像検索は imghp というサブディレクトリーに配置されています。
  • 4 つ目のリンクは、現在のページの一番下にある段落にリンクしましょう。これは bottom という ID が付いています。

メモ: この例で最初の 3 つのリンクには target="_blank" 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた <iframe> で開かないようにし、その過程で例のコードを削除するようにしています。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 3

以下のリンクは、一角獣に関する情報ページ、対応するメールアドレス、および 4MB の PDF ファクトファイルへのリンクです。この課題では、次のことを行ってください。

  • リンクテキストの書き方が悪い既存の段落を選び、良いリンクテキストがあるように書き直しましょう。
  • 警告を追加する必要があるリンクには、警告を追加しましょう。

メモ: この例における最初と 3 つ目のリンクには target="_blank" 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた <iframe> で開かないようにし、その過程で例のコードを削除するようにしています。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。