16.3.13 画像の埋め込み

WWWではHTML文書以外にも，画像・音声・動画などのマルチメディアデータを扱うことができます．ここではその中で， HTML 文書の中に画像を埋め込む方法について学びます．

Word文書などでは文書と画像を一体として扱うことがありますが，HTML文書では文書本体と画像のファイルを独立に用意します．そしてHTML文書中で画像を表示するときは，次のようにimg要素を用いて画像をHTML文書の中に埋め込みます．

<img src="画像のURL" alt="代わりに表示する文字列"> 

src属性で画像のURLを指定します． img 要素は内容を持たない要素です(空要素)．このため終了タグは書きません．

alt属性で指定するものは，画像を表示できないブラウザが画像の代わりに表示する文字列です．例えばテキストのみのブラウザや音声読み上げブラウザがこの属性を利用します．alt属性は省略できない要素ですので，必ず書くようにしてください．また画像を表示できるブラウザでは，画像の上にマウスを持っていくとalt属性で指定されたテキストが表示されます．

例として， はいぱーワークブックのロゴ を埋め込んでみましょう． はいぱーワークブックのロゴのURLは，

http://hwb.ecc.u-tokyo.ac.jp/current/image/hwb3.png

ですので，次のように書きます．

<img src="http://hwb.ecc.u-tokyo.ac.jp/current/image/hwb3.png"
     alt="[HyperWorkBook]">

これを，次のように，前のページで作ったはいぱーワークブックへのリンクのアンカーの中に入れることもできます．

<a href="http://hwb.ecc.u-tokyo.ac.jp/">
<img src="http://hwb.ecc.u-tokyo.ac.jp/current/image/hwb3.png"
     alt="[HyperWorkBook]">
はいぱーワークブック</a>

すると，ブラウザには次のように表示されます．

はいぱーワークブック

上の画像をクリックすると，はいぱーワークブックのトップページに飛びます．

このように，画像をリンクのアンカーにすることもできます．

自分で画像を作ろうというときは，23. 描画システム を参照してください．

ここで示した例のように，他人のウェブページの画像を 自分のウェブページに埋め込むことは，技術的にはできます． しかし，著作権に注意してください．明示的に許可されている場合以外は， 無断で埋め込むことはしない方が無難でしょう．