確認テスト: HTML 画像
この確認テストの目的は、あなたが画像と HTML への埋め込みを行う方法を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、確認テスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
画像 1
このタスクでは、いくつかのブルーベリーの単純な画像をページに埋め込んでいただきます。必要なことは次の通りです。
この課題を完成させるには、次のようにしてください。
- 画像へのパスを適切な属性に追加して、ページに埋め込みましょう。画像は
blueberries.jpgという名前であり、https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images/blueberries.jpg?raw=trueのパスで利用できます。 - 画像を見ることができない人のために、適切な属性に代替テキストを追加して記述してください。
<img>要素に適切なwidth属性を490にし、適切なheight属性を設定し、正しいアスペクト比で表示されるようにし、読み込み時に再描画が行われないようにしてください。画像の内在サイズは 615 × 419 ピクセルです。
この課題の出発点は次のようなものです。
この出発点となる基本的なコードは以下の通りです。
html
<h1>Basic image embed</h1>
<img />
<p>You should see a picture of some blueberries above.</p>
更新されたコンテンツは次のようになります。
ここをクリックすると、模範解答を表示します。
完了した 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="blueberries" width="400" height="273" />
<p>You should see a picture of some blueberries above.</p>
正しい height 値を設定するために、計算式 400 × 419 / 615 を使用して算出しました。
画像 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>