リンクと画像を入れてみよう

LESSON 03 · ページをつなぐ

リンクは別のページへの入り口です。画像は文章だけでは伝わりにくい形や様子を見せられます。行き先と画像の場所を指定してみましょう。

今日できるようになること

公式の学習ページへのリンクと、自分の写真を表示します。前のレッスンの index.html と同じフォルダーに、自分で撮った写真を flower.jpg という名前で用意してください。

リンクには a を使い、href で行き先を指定します。画像には img を使い、src で画像の場所を指定します。この追加情報を属性＊1と呼びます。

＊1 属性：タグに付け足す設定です。href="行き先" のように、名前と値を書きます。

次のコードを、練習用ファイルの body の中に追加します。写真の説明は、用意した画像に合わせて変えてください。

<p>
  <a href="https://developer.mozilla.org/ja/docs/Web/HTML">
    MDNでHTMLの説明を読む
  </a>
</p>
<img src="flower.jpg" alt="公園の花壇に咲く黄色い花">

「MDNでHTMLの説明を読む」という文字を押すと、指定したページが開きます。その下には用意した写真が表示されます。「こちら」だけでなく、行き先が分かる言葉をリンクにしましょう。

alt は代替テキスト＊2を指定します。写真で伝えたい内容を短く書きましょう。意味を持たない飾りの画像なら alt="" と空にします。

＊2 代替テキスト：画像の代わりになる文章です。画像が表示できないときや、画面を音声で読むときに役立ちます。

写真を images というフォルダーに移しました。画像の指定をどう直しますか？このフォルダーは index.html と同じ場所に作ります。

答えを確かめる

<img src="images/flower.jpg" alt="公園の花壇に咲く黄色い花">

保存場所と名前を確認します。flower.jpg と flower.png は別の名前です。大文字・小文字も実際のファイルにそろえましょう。img に終了タグは付けません。