スキルテスト: HTML 画像
このスキルテストの目的は、あなたが画像と HTML への埋め込みを行う方法を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題 1
このタスクでは、いくつかのブルーベリーの単純な画像をページに埋め込んでいただきます。必要なことは次の通りです。
この課題を完成させるには、次のようにしてください。
- 画像へのパスを適切な属性に追加して、ページに埋め込みましょう。画像は
blueberries.jpgという名前で、カレントフォルダー内のimagesというフォルダーに入っています。 - 画像を見ることができない人のために、適切な属性に代替テキストを追加して記述してください。
<img>要素に適切なwidthとheightを与え、正しい縦横比で表示されるようにし、ページ上に表示するための十分な空間を確保しましょう。画像の内在サイズは 615 × 419 ピクセルです。
html
<h1>Basic image embed</h1>
<img />
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<h1>Basic image embed</h1>
<img src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images/blueberries.jpg?raw=true"
alt="A pile of small blue berries"
width="400" />
課題 2
この課題では、すでに完全な形の画像が用意されていますが、画像にマウスを乗せたときに現れるツールチップを追加していただきたいと思います。ツールチップに適切な情報を入れましょう。
html
<h1>Basic image title</h1>
<img
src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/larch.jpg?raw=true"
alt="Several tall evergreen trees called larches" />
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<h1>Basic image title</h1>
<img
src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/larch.jpg?raw=true"
alt="Several tall evergreen trees called larches"
title="And now, Number 1, The Larch" />
課題 3
この課題では、すでに完全な形の画像とキャプションのテキストが用意されています。ここで必要なのは、画像とキャプションを関連付ける要素を追加することです。
html
<h1>Image and caption</h1>
<img
src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/firefox.png?raw=true"
alt="An abstract flaming fox wrapping around a blue sphere"
width="446"
height="460" />
The 2019 Firefox logo
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<h1>Image and caption</h1>
<figure>
<img
src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/firefox.png?raw=true"
alt="An abstract flaming fox wrapping around a blue sphere"
width="446"
height="460" />
<figcaption>The 2019 Firefox logo</figcaption>
</figure>