はじめてのWebドキュメントづくり「画像などをページに貼り付ける」

画像などをページに貼り付ける

写真やイラストを「ページ」に貼り付ける

写真やイラストを「ページ」に貼り付ける際のマーク付けは、リンクのマーク付けに似ている点があります。次のように、貼り付けたい画像ファイルの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>