写真やイラストを「ページ」に貼り付ける際のマーク付けは、リンクのマーク付けに似ている点があります。次のように、貼り付けたい画像ファイルのURLを属性値として用いるのです。
<img src="./sample-image.gif" alt="見本画像">
HTMLでは、画像の貼り付けを示すimg要素は、タグで挟むような内容を持たず、終了タグが存在しないと定義されています。
また、属性が2種類記してありますが、画像ファイルのURLを示す「src属性」の他に、画像の表示を行なわない/行なえない環境で画像情報を代用する「代替テキスト(altanative text)」というものを、「alt属性」によって必ず示すよう、HTML 4仕様13.2節は規定しています。
また、img要素は行内要素なのでbody要素の直接の子要素にはなれない、という点にも注意しましょう(関連:要素の親子関係の決まり)。画像のレイアウトに関しては、「ページレイアウト」のページで扱います。
HTMLでは、画像ファイル(の内容)だけでなく、音声ファイル(の内容)や動画ファイル(の内容)などを「ページ」に貼り付けられます。こうした貼り付けたい「モノ一般」を、HTMLでは「object要素」として表します。
object要素はimg要素と違って内容を持ち、この内容が「代替テキスト」の役割を果たします。画像ファイルもobject要素として扱って構いませんので、さっきの例は次のように表せます。
<object data="./sample-image.gif" type="image/gif">GIF形式の見本画像</object>
object要素ではファイルのURLをdata属性で表し、またそのファイル形式をtype属性で表します。
プラグインを必要とするモノやJavaアプレットなどをobject要素として記述することになるでしょうから、HTMLの知識だけがあってもしょうがないという面もありますが、HTMLの規定については、詳しくはHTML 4仕様13.2節をご覧ください。
ポピュラーなWWWブラウザはGIF形式の画像やJPEG形式の画像などは自力で「ページ」の一部として表示できますが、他の形式の画像や音声などを再生する能力は持っていません。こうしたデータを、プラグインなどの補助手段を用いて「ページ」中に埋め込む場合は上述のobject要素などとして表しますが、ダウンロードして「ページ」の外で再生してもらいたいような場合もあるでしょう。
この場合、a要素のリンク先ファイルとして文書中に記述すれば、WWWブラウザが自力で表示できないような形式のファイルの場合、読み手が当該リンクをアクティブにするとダウンロード処理が始まります。
たいていのWWWブラウザはzip形式などの書庫ファイルはページ中に表示すべきデータではなくダウンロードすべきファイル形式だと知っていますし、転送時間も節約できますから、書庫ファイルにしたデータをHTMLファイルや一般の画像ファイル等と同様にしてWWWに置き、文書中で次のように記述するとよいでしょう。
<a href="hogege.zip">「はじめてのWebドキュメントづくり」のダウンロード用ファイル(zip形式)</a>
画像に関連した「ページ」づくりで気になるものに、「イメージマップ」があるかもしれません。例えば、日本地図の中で北海道をクリックすると北海道のページ、九州をクリックすると九州のページへ移動する、といった仕掛けになっているものがイメージマップです。
これについては仕様の記述が充分に判りやすいと思いますので、HTML 4仕様13.6.1節をご覧ください。
Thanks a lot for visits since April 13, 1999.
1999 - 2001 内田明