画像を挿入する
演習1.6 画像を挿入する
☑画像を表示する <img src= “画像ファイル名”>
Webページに写真やイラストなどの画像を加えると訴求力が生まれ、全体が生き生きとしてきます。
ここでは、インパクトのある可愛らしい子猫の写真を中央に配置してみます。
1. 写真を挿入する
画像を挿入するには、<img src=”画像ファイル名”>を記述します。
以下のように、記述を追加してください。
①ソース・フォルダー :html/ch06
②ファイル名 :index.html
➢ index.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>子猫と子犬の部屋</title> <body bgcolor="#FFFFCC"> <h1><font color="#2A7e55">子猫と子犬の部屋</font></h1> <h3><font color="red">かわいい動物たちの写真館</font></h3> <img src="img/img01.jpg"><br><br> <font color="#2A7e55" size="5"><strong>子猫と子犬の部屋にようこそ!</strong></font><br> <strong>子猫と子犬</strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。<br><br> 今後も色々と紹介していきますので、楽しんでください。<br> <hr width="540"> </body> </html>
2. 属性を指定する
続いて、画像の挿入に関して細かな設定をする属性を指定します。
先ほど追加した記述に、以下のように、属性を追加してください。
~前略~ <img src="img/img01.jpg" border="0" alt="メイン写真"><br><br> ~後略~
ここでは、画像に属性を追加することで、以下の指定を加えました。
① border=”0″
画像の枠線をピクセル数で指定します。
② alt=”メイン写真”
代替テキストと呼ばれ、画像を表示できない環境の場合、ここで指定した説明が表示されます。
3. HTMLファイルを保存
記述が終わったら、上書き保存をしてください。
4. ブラウザで表示
では、ここまで修正した内容がブラウザでどのように表示されるか、確認してみましょう。
図 1.6.1
ページの中央に画像が表示されました。画像がないときに比べて、ページ全体がいきいきとしてきました。