絵を入れよう <IMG>

やっぱり、きれいな絵が入っていないと、ちっとも面白くないですよね。文章だけではなく、きれいな絵を入れて、自分の伝えたいことを効果的に演出しましょうよ。絵を入れる時には、<IMG>を使います。

<IMG src="sample.gif">

と、src属性のところに表示させたい絵のURLを書けばいいです。実際には、このように絵が表示されます。

<IMG>は終了タグがありません(省略しなければならない)。また、<IMG>と書くだけではなく、表示させたい絵がどこにあるのかを、srcという属性で指定します。ダブルクォーテーションで囲まれたものが、表示させたいファイル名です。ファイル名のところは、スラッシュ"/"で始めれば絶対パス、そうではなければ相対パスで表すことになります。ここでいう絶対パスとは、HTTPDが定めたルート・ディレクトリーからのパスのことです。これだけだとわかりにくいでしょうが、うまく表現できなくて申し訳ないです。また、表示させたい絵は違うサーバーから持って来ることも可能で、

<IMG src="http://www.company.com/some/sample.gif">

とsrc属性のところに表示させたい絵のURLを書けばいいです。

<IMG>には、他にも大切な属性があります。もし、絵が表示されなかったときや、テキスト・ベースのブラウザーを使っているときに絵の代わりに表示させる文字を書くalt属性です。例えば、

<IMG src="sample.gif" alt="[サンプルの絵]">

というふうに使い、絵が表示されない場合に[サンプルの絵]と表示されるようにしておくのです。すなわち、文字の代わりに絵で置換えていると考えてください。ですから上の絵は、

<P><IMG src="sample.gif" alt="[サンプルの絵]"></P>

と書いて表示させています。ひとつのパラグラフの中に、文字の代わりに絵だけがあるわけです。これまでの応用ですね。ですから、見出しとして絵を使う場合は、

<H1><IMG src="header.gif" alt="見出し"></H1>

にするべきです。

これらのことは、PCでよく使われているブラウザー以外(PDAやテキスト・ベースのブラウザー)の汎用性を考えると、非常に重要なことです。「今時、テキスト・ベースのブラウザーなんて」と私も思っていましたが、目の不自由な方がテキスト・ベースのブラウザーを使ってWebを楽しんでいるのを知ってから、気を付けて書くようにしています。

それから、もうひとつの大切な属性で、絵の縦横の大きさを書き込むためのwidth属性とheight属性というものがあります。

<IMG src="sample.gif" alt="[サンプルの絵]" width="80" height="40">

という具合に、横のピクセル数をwidth属性に、縦のピクセル数をheight属性に書きます。これを調べるのが面倒かもしれませんが、この値を書いておくと、ページの表示が速くなります。書いてある場合と書いてない場合を作って、ご自分で試してみてください。明らかに違いますよ。

また、文章のベースラインを絵のどこにあわせるのかを指定することもでき、alignという属性を使います。デフォルトでは、絵から見て一番下に文字が来ますが、alignでmiddleやtopを指定すると、文字が真中や上に来ます。こんな感じです。

<IMG src="sample.gif">と書くと、こんな感じです。

<IMG src="sample.gif" align="middle">と書くと、こんな感じです。

<IMG src="sample.gif" align="top">と書くと、こんな感じです。

これまで、青い下線付の文字やボタンの絵をクリックすると、次のページが現れましたよね。これをハイパー・リンクといいます。これがあるからHTML(正確にはWeb)はすごいのです。では、ハイパー・リンクのお話と、その作り方を説明しましょう。