演習1.5 画像を挿入する

  • 画像を表示する  <img src= “画像ファイル名”>

Webページに写真やイラストなどの画像を加えると訴求力が生まれ、全体がいきいきとしてきます。
ここでは、インパクトのある可愛らしい子猫の写真を中央に配置してみます。

1. 写真を挿入する

画像を挿入するには、<img src=”画像ファイル名”>を記述します。
以下のように、記述を追加してください。

①ソース・フォルダー :html/ch06
②ファイル名     :index.html

➢ index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>子猫と子犬の部屋</title>
    </head>
    <body>
        <h1>子猫と子犬の部屋</h1>
        <h3>かわいい動物たちの写真館</h3>
        <p>
            <img src="img/img01.jpg"><br>
            <strong>子猫と子犬の部屋にようこそ!</strong><br>
            <strong>子猫と子犬 </strong>の<strong>とってもかわいい写真</strong>をご用意しました。<br><br>
            今後も色々と紹介していきますので、楽しんでください。<br>
        </p>
        <hr>
    </body>
</html>

2. 属性を指定する

続いて、画像の挿入に関して細かな設定をする属性を指定します。
先ほど追加した記述に、以下のように、属性を追加してください。

<img src="img/img01.jpg" alt="メイン写真"><br>

ここでは、画像に属性を追加することで、以下の指定を加えました。

① alt=”メイン写真”

  代替テキストと呼ばれ、画像を表示できない環境の場合、ここで指定した説明が表示されます。

3. HTMLファイルを保存

記述が終わったら、上書き保存をしてください。

4. ブラウザで表示

では、ここまで修正した内容がブラウザでどのように表示されるか、確認してみましょう。

図 1.5.1

ページの中央に画像が表示されました。画像がないときに比べて、ページ全体がいきいきとしてきました。