スキルテスト: HTML 画像

このスキルテストの目的は、あなたが画像と HTML への埋め込みを行う方法を理解しているかどうかを評価することです。

メモ: このページのインタラクティブエディターや、CodePenJSFiddleGlitchなどのオンラインエディターで解決策を試すことができます。

もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。

課題 1

このタスクでは、いくつかのブルーベリーの単純な画像をページに埋め込んでいただきます。必要なことは次の通りです。

  • 画像へのパスを適切な属性に追加して、ページに埋め込みましょう。画像は blueberries.jpg という名前で、カレントフォルダー内の images というフォルダーに入っています。
  • 画像を見ることができない人のために、適切な属性に代替テキストを追加して記述してください。
  • <img> 要素に適切な widthheight を与え、正しい縦横比で表示されるようにし、ページ上に表示するための十分な空間を確保しましょう。画像の内在サイズは 615 × 419 ピクセルです。

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

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

課題 2

この課題では、すでに完全な形の画像が用意されていますが、画像にマウスを乗せたときに現れるツールチップを追加していただきたいと思います。ツールチップに適切な情報を入れましょう。

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

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

課題 3

この課題では、すでに完全な形の画像とキャプションのテキストが用意されています。ここで必要なのは、画像とキャプションを関連付ける要素を追加することです。

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

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