LESSON4:イメージ処理を学ぶ
 テキストだけのページ表示に時間がかからないことが魅力ですが,面白さに欠けます。 ホームページの魅力は何と言ってもイメージファイルを自由に表示出来ることです。 ここではイメージを表示するタグとそのアトリビュートについて学習していきます。

●イメージタグの基本
gifファイルや jpgファイルの制作については,残念ながらここでは扱いません。 これらのファイルを制作済みということにして話を進めます。 このLesson4で扱うイメージはimagesフォルダーにあらかじめ用意してあります。 これらは安物デジタルカメラでわたしの散歩道を撮影して加工したものです。

○基本のイメージタグ;<IMG SRC=" ">
<IMG SRC="images/sanpo-2.png">で下のようにイメージが表示されます。

イメージを表示するにはこのタグのみで十分です。

○イメージタグのアトリビュート
イメージタグ<IMG>のアトリビュートは以下のように沢山あります。

■イメージの変わりにテキストを表示させる;ALT="テキスト"
これはイメージをサポートしていないブラウザの画面でイメージの代 わりに表示させるテキストを指定するものです。イメージのダウンロー ドに失敗したときなどにも代わりに表示されます。 <IMG SRC="イメージ名.png" ALT="テキスト">のように使います。

■イメージの大きさを変化させる;WIDTH, HEIGHT
 表示するイメージの大きさを変えることが出来ます。 大きさを画面の絶対位置による大きさ(ドット数)とブラウザの表示 画面での相対的な大きさの指定(何パーセントか)が出来ます。 ブラウザの大きさを変えて見てください。上のイメージは変化しない のに下の絵は変化するでしょう。tableの中では割合が変わらないので table内では,無効です。
<IMG SRC="images/sanpo-1.jpg" WIDTH=200 HEIGHT=100>

<IMG SRC="images/sanpo-8.jpg" WIDTH=30% HEIGHT=20%>
■イメージとテキストの垂直位置を指定する;ALIGN="値"
 イメージとその前後のテキストの垂直位置を決めます。 値にはtop, center(middleでも同じ), bottomの3種類が入ります。 デフォルト(指定なし)の場合はbottomと同じになります。

テキスト<IMG SRC="images/sanpo-1.png">テキスト は下のようになります。
テキストテキスト

テキスト<IMG SRC="images/sanpo-1.png" ALIGN="top">テキストは 下のようになります。
テキストテキスト

テキスト<IMG SRC="images/sanpo-1.png" ALIGN="center">テキストは 下のようになります。
テキストテキスト

<IMG SRC="images/sanpo-1.png" ALIGN="center">長いテキストは 下のようになります。
長い--------------------------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------テキスト

以上のアトリビュートでは,イメージの横に入るテキストは一行だけで 一行に収まらない長いテキストは,イメージの下行に自動的に移動します。

■テキストの回り込みをさせる;ALIGN="left"または"right"
 前節の指定ではテキストは一行しか表示できませんでしたが, leftとrightのアトリビュートを指定するとテキストを回り込ま せることが出来ます。
<IMG SRC="images/sanpo-1.png" ALIGN="left">長いテキストは 下のようになります。
長い---------------------------------------------- --------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------- -----------------------------------------------------テキスト

■テキストの回り込み停止タグ;<BR CLEAR=" ">
" "にはcenter,top.bottomが入ります。省略するとallを指定したことに なります。

■水平方向の隙間を指定するタグ;<HSPACE=" ">
<IMG SRC="images/sanpo-1.png" ALIGN="left" HSPACE=50>長いテキストは 下のようになります。

長い------------------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------テキスト

■枠を付けるアトリビュート;BORDER
<IMG SRC="images/sanpo-2.png" BORDER="5">で下のようにイメージが表示されます。

2.回線が遅い場合に配慮して
 イメージはあると楽しいいのですが,回線が混んでいるとなかなか表示されませんのでいきなり大きなイメージを張ってあるページは嫌われます。 小さなイメージを張っておいて見たい人には大きなイメージを表示するようにリンクを張ってあげると親切です。「朝の散歩道」のサンプルページは, 比較的軽いファイルであるgifイメージを張っておいて見たい人には,jpgファイルで大きくて奇麗なイメージを提供するようにしています。


LESSON3| LESSON5