ＨＴＭＬの勉強（イメージリンク編）

タグは、<img rc="イメージファイルへのURL">を使いますが、"イメージファイルへのURL"は、相対的に現在の位置（このプログラムが保存されているディレクトリ）からイメージファイルまでのパスとそのイメージファイルのファイル名を書きます。
　たとえば以下のようなディレクトリになっているとすれば、
　　
　「html5-1.htm」に「image5-1.jpg」をリンクさせるためには、以下のプログラムになります。
　<img src="./images/image5-1.jpg"> になります。
　　「./」は、現在のディレクトリからという意味で省略できます。
　　「/」は、区切りを表します。
　　 この場合、「image5-1.jpg」 は、「html5-1.htm」から見て、自分の配下にある「imeges」ディレクトリの中にある「image5-1.jpg」にリンクさせるために上述のように書きます。もう少しわかりやすく言うと、自分（「html5-1.htm」）に貼り付けたいイメージ（「image5-1.jpg」）が自分（「html5-1.htm」）の配下の「images」ディレクトリにあります。これをプログラムにすると上述のようになります。
　では、イメージがもう少し深い階層にあればどうなるのでしょうか。これは、ディレクトリの階層を上から順に「/」で区切って書いていけばいいことになります。
　<img src="./images/picts/image5-2.jpg"> になります。
　次に、イメージファイルが自分の配下にないところのイメージはどうなるのでしょうか。以下のようになります。
　 <img src="../page1/images/image5-3.jpg">
　　「../」は、 自分（「html5-1.htm」）より一つ上のディレクトリを表します。
　　一つ上には「page1」ディレクトリがあり、そのディレクトリを指定すれば参照できるようになりますので上述のようになります。後は、同じです。
　　「../../」と書けば、二つ上のディレクトリを指します。

「image5-1.jpg」にリンクしイメージを表示させます。

「image5-2.jpg」にリンクしイメージを表示させます。

「image5-3.jpg」にリンクしイメージを表示させます。

　存在しないイメージファイルやファイルが破損しているときは、以下の属性を使って代替テキストを表示できます。
　<img src="イメージファイルのURL" alt="わけあって表示できません">
　この属性がなかった場合は、「×」が表示されます。

属性：ＡＬＴがない場合

属性：ＡＬＴがある場合

イメージサイズは、任意に拡大／縮小できます。イメージサイズは以下の属性を使って変更します。
　<img src="イメージファイルのURL" width="横幅" height="高さ">
　　横幅、高さは、ピクセルまたは、パーセントで指定できます。パーセントで指定した場合は、ブラウザのホームページ表示範囲を横幅、高さとも最大を１００％として計算されます。また、height属性を省略するとwidth属性を基準に等比で拡大／縮小されます。

デフォルトでのイメージの表示

縮小したイメージの表示

拡大したイメージの表示

４）

Ｔｏｐです。（左） Ｔｏｐです。（右）

Ｍｉｄｄｌｅです。（左）Ｍｉｄｄｌｅです。（右）

Ｂｏｔｔｏｍです（左）Ｂｏｔｔｏｍです（右）

ＴｅｘｔＴｏｐです。 ＴｅｘｔＴｏｐです。

ＡｂｓＭｉｄｄｌｅです。ＡｂｓＭｉｄｄｌｅです。

ＡｂｓＢｏｔｔｏｍです。ＡｂｓＢｏｔｔｏｍです。

ＡｂｓＢｏｔｔｏｍです。ＡｂｓＭｉｄｄｌｅです。　←合わせ技

イメージの左右にテキストは、基本的に1行しか配置できません。しかし、align属性にleft、rightパラメータを指定することで複数行のテキストが配置できるようになります。このときleft、rightパラメータは文字の位置を表すのでなくイメージの位置を示します。たとえば、イメージが左でテキストが右にある場合は、leftパラメータを指定します。
　イメージの途中で強制的に回り込みを解除したい場合は、<br clear="all">タグで行います。

イメージとテキストの余白（余白なし）

　　　　　　　　上部テキスト
左テキスト右テキスト
　　　　　　　　下部テイスト

イメージとテキストの余白（余白あり）

　　　　　　　　上部テキスト
左テキスト右テキスト
　　　　　　　　下部テイスト

ページ２