画像(image)表示するタグ
ページに画像を表示するためには、<img>というタグを使います。
<img>タグには、表示する画像ファイルを指定するsrcという属性が必須です。
index.htmlで画像を入れたい箇所は２つ。
それぞれ、下記のように書き換えると画像が表示されます。
カッコが全角のままだと表示されないので、注意してください。
- ＜画像：top.png＞→
<img src="images/top.png"> - ＜画像：banner.png＞→
<img src="images/banner.png">
画像の意味を示すalt属性
imgタグはsrc属性とその属性値だけでも、Webページ上に画像を表示することができます。が、もう一つ、セットで記述しておきたい情報があります。
それはalt属性(オルト属性)という、画像の代わりとなるテキスト情報。 代替えテキストとも呼ばれます。
alt属性を設定しておくと、通信状況が悪いなど、Webブラウザで画像が表示できないときに、画像の代わりに設定したテキストが表示されます。 また、検索エンジンに画像の情報を伝える役割もあるので、SEOにも役立ちます。
alt属性は以下のように記述します。
制作するページによっては、装飾のために画像を使うこともあります。
特に意味のない画像の場合は、alt=""と属性値を空にして書いておきましょう。
index.htmlのサイドバナーは、まだどんな情報を載せるか決まっていません。 代替えテキストが「バナー」では分からないので、空にしておきます。
