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