ここでは、png画像を例にホームページ内に画像を配置する方法について検討していきましょう。

画像を配置するための要素には、object要素とimg要素があります。 object要素はアプレット等様々なデータ形式に対応させるように仕様が決められていますが、 実際に対応しているブラウザはほとんどないようです。

ここでは、画像の表示に従来からあるimg要素を使った例のみ利用してみることにしましょう。

まず、画像はHTMLファイルとは別に用意しなくてはなりません。 ここでは、PictBear等を使って、 png形式で用意しておきましょう。 ここでは、robot01.pngというファイル名で保存しておきました。

robot01.pngの画像

ソース	表示
<img src="robot01.png" alt="ロボットのイラスト">

img要素のsrc属性で、表示する画像ファイルを指定します。 alt属性は、画像が表示できない場合に代わりに表示されます。 以下に、間違った画像ファイル名を指定して、この効果を見てみましょう。

また、マウスポインタを画像の上に持っていき、 説明が表示されるかどうか確認して見ましょう。