img要素(画像)

img要素を使って画像を挿入する。空要素なので終了タグは不要だが「 />」が必要。src属性とalt属性は必須。意味のない画像の代替テキストは不要だが、空の値「alt=""」が必要。イメージサイズを設定するにはwidth(ウィズ)属性、height(ハイト)属性を使用する。ピクセル値または%で指定できるが、%はブラウザに依存するのでピクセル値で指定するのが一般的。インライン要素。

1)src属性(画像ファイルのURI)
<img src="URL" />
2)alt属性(代替テキスト)
<img alt="テキスト" />
3)title属性(画像の説明)
<img title="テキスト" />
4)longdesc属性(altの補完、ページのURL)
<img longdesc="URL" />
5)width属性(画像の幅)
<img width="ピクセル値(単位不要)" />
6)height属性(画像の高さ)
<img height="ピクセル値(単位不要)" />

例:longdesc属性でその画像について説明の書かれているページのURLを指定し、alt属性を補完する場合。


◆html

<p>
<img src="./images/cat.jpg"
alt="猫" longdesc="./cat/index.html" />
</p>	

例:p要素やa要素の内容が追加され、img要素でリンクマークを追加する場合。


◆html

<p>
詳しくは<a href="./info.html">
<img src="./image/link.gif alt="" />お知らせ
<p>

例:h1要素が追加され見出しを画像化する場合。


◆html


<h1>
<img src="./image/title03.gif 
alt="新着一覧" />
</h1>

例:イメージ画像をサイズ指定する場合。


◆html

<img src="./images/aaa.jpg" 
alt="" width="200" height="150" />

リンクを設定した画像の枠線は、従来「border属性」を使用していたが、CSSで指定すべき。


◆CSS

img { 
	border : 0 ;
}

go to top