画像を挿入する
演習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
ページの中央に画像が表示されました。画像がないときに比べて、ページ全体がいきいきとしてきました。
