<IMG />とsrc属性
やっぱり、きれいな絵が入っていないと、ちっとも面白くないですよね。文章だけではなく、きれいな絵を入れて、自分の伝えたいことを効果的に演出しましょうよ。絵を入れる時には、<IMG />を使います。
<IMG src="sample.gif" />
と、src属性のところに表示させたい絵のURLを書けばいいです。実際には、このように絵が表示されます。
<IMG />は終了タグがないので、これまで説明してきたタグとは異なり、"<要素名 />"という書き方になっています。注意してください。
また、<IMG />と書くだけではなく、表示させたい絵がどこにあるのかを、srcという属性で指定します。ダブルクォーテーションで囲まれたものが、表示させたいファイル名です。ファイル名のところは、スラッシュ"/"で始めれば絶対パス、そうではなければ相対パスで表すことになります。ここでいう絶対パスとは、Webサーバーが定めたルート・ディレクトリーからのパスのことです。これだけだとわかりにくいでしょうが、うまく表現できなくて申し訳ないです。また、表示させたい絵は違うサーバーから持って来ることも可能で、
<IMG src="http://www.company.com/some/sample.gif" />
とsrc属性のところに表示させたい絵のURLを書けばいいです。
alt属性
<IMG />には、他にも大切な属性があります。もし、絵が表示されなかったときや、テキスト・ベースのブラウザーを使っているときに絵の代わりに表示させる文字を書くalt属性です。例えば、
<IMG src="sample.gif" alt="[サンプルの絵]" />
というふうに使い、絵が表示されない場合に[サンプルの絵]と表示されるようにしておくのです。すなわち、文字の代わりに絵で置換えていると考えてください。ですから上の絵は、
<P><IMG src="sample.gif" alt="[サンプルの絵]" /></P>
と書いて表示させています。ひとつのパラグラフの中に、文字の代わりに絵だけがあるわけです。これまでの応用ですね。
これは、PCでよく使われているブラウザー以外(主にテキスト・ベースのブラウザー)の汎用性を考えると、非常に重要なことです。「今時、テキスト・ベースのブラウザーなんて」と私も思っていましたが、目の不自由な方がテキスト・ベースのブラウザーを使ってWebを楽しんでいるのを知ってから、気を付けて書くようにしています。
height属性とwidth属性
それから、もうひとつの大切な属性で、絵の縦横の大きさを書き込むためのwidth属性とheight属性というものがあります。
<IMG src="sample.gif" alt="[サンプルの絵]" width="80" height="40" />
という具合に、横のピクセル数をwidth属性に、縦のピクセル数をheight属性に書きます。これを調べるのが面倒かもしれませんが、この値を書いておくと、ページの表示が速くなります。最近のPCとブロードバンドの組合せであれば、あまり影響はないかもしれませんが、古いPCや3Gデータ通信のような環境だと、明らかに速く表示されます。
ちなみに、HTMLとは?で、HTMLには論理的情報を書くと説明しましたが、唯一の矛盾がwidth属性とwidth属性です。これらは幅と高さという物理的情報なのですが、HTMLからうまく切り離せなかったのでしょう。
さて、これまで、青い下線付の文字やボタンの絵をクリックすると、次のページが現れましたよね。これをハイパー・リンクといいます。これがあるからHTML(正確にはWeb)はすごいのです。では、ハイパー・リンクのお話と、その作り方を説明しましょう。