演習1.5 画像を挿入する
- 画像を表示する <img src= “画像ファイル名”>
Webページに写真やイラストなどの画像を加えると訴求力が生まれ、全体がいきいきとしてきます。
ここでは、インパクトのある可愛らしい子猫の写真を中央に配置してみます。
1. 写真を挿入する
画像を挿入するには、<img src=”画像ファイル名”>を記述します。
以下のように、記述を追加してください。
①ソース・フォルダー ：html/ch06
②ファイル名 ：index.html
➢ index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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. 属性を指定する
続いて、画像の挿入に関して細かな設定をする属性を指定します。
先ほど追加した記述に、以下のように、属性を追加してください。
11 | <img src="img/img01.jpg" alt="メイン写真"><br> |
ここでは、画像に属性を追加することで、以下の指定を加えました。
① alt=”メイン写真”
代替テキストと呼ばれ、画像を表示できない環境の場合、ここで指定した説明が表示されます。
3. HTMLファイルを保存
記述が終わったら、上書き保存をしてください。
4. ブラウザで表示
では、ここまで修正した内容がブラウザでどのように表示されるか、確認してみましょう。
図 1.5.1
ページの中央に画像が表示されました。画像がないときに比べて、ページ全体がいきいきとしてきました。