このページは、XHTML 文書で画像を表示したり、他の XHTML 文書にリンクする書き方を説明したものです。この文書で説明している要素を使ったサンプルを見ながら説明を読むと分かりやすいと思います。
旅行記などを書いていて旅行した時の写真などを載せたい、複雑な説明なので図で分かりやすくしたい、など画像が必要になることは多いと思います。XHTML 文書では、img 要素を使って画像を表示することが出来ます。次の例を見てください。
画像を表示してみます。
<p> 画像を表示してみます。 <img src="box.png" alt="赤い箱" height="26" width="24" /> </p>
img 要素は空要素なので、終了タグはありません。4つの属性があるのが分かると思いますが、それぞれ順番に説明していきます。
src 属性ですが、画像のファイルを指定します。画像のファイルを XHTML 文書のファイルと同じ場所に転送しているのなら、ファイル名だけで問題ないです。違う場所に転送している場合には、相対 URL か絶対 URL で指定します。
例えば、「http://example/html/」に XHTML 文書があるとします。この「http://example/html/」のことを基準 URL と呼びます。相対 URL は、基準 URL からの位置関係で指定します。絶対 URL は基準 URL も含んだ形で指定します。例えば、「http://example/html/img/」に「sample.gif」という画像ファイルがある場合、相対 URL が「img/sample.gif」となり、絶対 URL なら「http://example/html/img/sample.gif」となります。
alt 属性には、代替テキストを指定します。代替テキストというのは、画像が表示されないブラウザで、画像の代わりに表示される文章のことです。ですから、レイアウト目的や、単純な飾りなど意味を持たない画像の場合、「alt=""」のように alt 属性には何も指定しません。
height 属性、width 属性にはそれぞれ、画像の縦のサイズ、横のサイズを指定します。このサイズを指定しておかないと、画像を読み込むまでブラウザの方でサイズが分からないため、表示が遅くなることがあります。
リンクとは、ある XHTML 文書と、他の XHTML 文書や色々なファイルとの関連付けのことです。関連する情報が載っているページとリンクすることで、有用な情報を提供することが出来ます。XHTML 文書でリンクする時に使われるのは a 要素です。次の例を見てください。
インフォシークは、ホームページを自動的に巡回する検索ロボットと呼ばれるものを利用して情報を収集しています。
<p> <a href="http://www.infoseek.co.jp/">インフォシーク</a>は、 ホームページを自動的に巡回する検索ロボットと呼ばれるものを 利用して情報を収集しています。 </p>
a 要素になっている「インフォシーク」の部分がリンクになっています。このリンクを辿ることで、インフォシークのホームページを見ることが出来ます。a 要素には href 属性があり、この属性にリンク先の XHTML 文書ファイルを指定します。また、a 要素は img 要素、つまり画像を含むことも出来ます。
ウェブの箱のバナーです。
<p> ウェブの箱のバナーです。 <a href="http://park17.wakwak.com/~hal/"> <img src="banner.png" alt="ウェブの箱" height="31" width="88" /> </a> </p>
同じ XHTML 文書内の指定した位置にリンクすることも出来ます。リンク先の位置を指定するためには、id 属性を使います。まず、リンク先にしたい要素に id 属性を加えます。id 属性には、好きな名前を指定します。ただし、同じ XHTML 文書の中で重複しないようにしてください。次に、他の XHTML 文書にリンクするのと同じように a 要素を使います。ただし、href 属性には、「#id属性に指定した値」のように指定します。
次の例では、この XHTML 文書の大見出しの「楽の出来るホームページの書き方」の位置にリンクしています。
大見出しの位置とリンクしています。
<p><a href="#heading">大見出しの位置</a>とリンクしています。</p>
そして、大見出しの部分は次のように書かれています。
<h1 id="heading">楽の出来るホームページの書き方</h1>
このようにリンク元とリンク先を指定しておくとことで、同じ XHTML 文書内でもリンクすることが出来ます。
XHTML 文書では、テキストファイル、画像ファイル、圧縮ファイル、音楽ファイルなどの XHTML 文書ではないファイルにもリンクすることが出来ます。リンクしたファイルをどう扱うかはブラウザによります。表示する場合もあれば、ダウンロードする場合もあります。
<p><a href="travel.jpg">旅行した時の写真</a>です。</p> <p> <a href="sample.lzh">圧縮したもの</a>をダウンロード出来ます。 </p>
