WWW の歴史的経緯からしても,WWW ページの画像は重要なものである。ここでは,画像の挿入方法について説明する。
img
要素 XHTML において,画像を挿入するには,img
要素を用いる。img
要素は必須の属性,src
および alt
を持ち,少なくとも次のような書式になる。
<img src="
URI" alt="
代替テキスト" />
ご覧のとおり,img
要素には内容がなく,空要素タグで記述される。空要素タグは“/>
”で終わるが,上記のようにその直前に空白を入れておくのがよい。
さて,img
要素の src
属性に与えるのは挿入する画像ファイルの URI である。a
要素の href
属性と同様,URI は絶対的に指定しても相対的に指定しても構わない。挿入できる画像の種類はブラウザによって異なるが,WWW では次の 3 種類の形式がよく用いられている。
.gif
”。.jpg
”。.png
”。 Windows ビットマップ(.bmp
)や Macintosh PICT(.pict
,.pct
)は,多くのブラウザで表示できない。これらの形式の画像は,上記の形式のいずれかに変換しておく必要がある。
alt
属性は,その画像に対して与える代替テキストである。この画像が表示されない場合に置き換えるべきテキストを記述する。これに関しては Section 8 で詳しく述べる。
img
要素はテキストなどと同等の扱いで,パラグラフ・見出しなどの中に含むことができる。ただし,body
要素の内容にはならない。
画像ファイル“fshibuya.jpg
”をパラグラフ中に挿入するための記述を見てみよう。
<p><img src="fshibuya.jpg" alt="渋谷駅前" /> 渋谷駅前のスクランブル交差点。信号が変わると,人の波が堰を切ったように交差点を埋め尽くす。</p>
お手元の環境では,次のような出力が得られる。
渋谷駅前のスクランブル交差点。信号が変わると,人の波が堰を切ったように交差点を埋め尽くす。
さて,img
要素には width
属性と height
属性が指定可能である。これを指定することにより,画像がその寸法で出力される。それぞれ,値は数値で
width
属性の場合)および高さ(height
属性の場合)を 100% とした割合で,寸法が決められる。これにより,画像固有の寸法と異なる寸法で出力させることもできるが,画像固有の寸法で出力させる場合も,この属性を指定しておくことをお勧めする。これによって,一般に,ブラウザは画像のためのスペースが前もってわかることになるから,画像のレイアウトがスムーズになる。
たとえば,これらの属性を指定して,見出しの内容として画像を挿入する場合,次のように記述する。
<h1><img src="fwelcome.gif" alt="Welcome to my web site!" width="400" height="80" /></h1>
これも参考に出力例を掲げておく。