<IMG>タグ

<IMG src=" ファイル名" alt=" 代替文字">

■画像を表示します、alt属性で代替文字を指定します、代替文字は画像が 表示できないブラウザのために、テキストで画像がなにかを知らせるものです。
また、画像が表示できるまでの目印にもなります。

【実行結果】

綺麗でしょ!

画像の上にマウスをあててみてください、説明文のようなものが出ます、これがalt属 性で書いた文章です。


 <IMG src=" ファイル名" width=" 画像の横幅" height="画像の縦幅">

■画像の横幅、縦幅を指定して表示します。上のサイズの指定にはピクセル数か%で指定します。

【実行結果】

ちっこくなったでしょ!

画像のサイズは圧縮されていないので表示されている画像は粗いですがファイルサイズは変わりません。


 <IMG src=" ファイル名" align=" 位置">

■画像の表示されている周りに文章を書く事が出来ます、align属性に以 下のようなものを書く事が出来ます↓

left absmiddle
right absbottom
top texttop
bottom middle

【実行結果】

どうですか?画像の右側に文章を書いています

これはalign属性にleftと書いています。

この画像の周りに文章が回りこむのを解除したい場合は改行タグである<BR>タグの中にclear属 性を書きます
    ↓
<BR clear=" 解除するキーワード">
    ↑となっています、ここで回り込みを解除します
解除方法としてleft,right,allのみっつがあります。
 下は上の【実行結果】のところのソースです。ちょっとわかりずらいです が・・・・

<IMG height="145" src="a002ban.gif" width="200" align="left" border="0" alt="どうですか?">画像の右側に文章を書いています<BR>
<BR>これはalign属性にleftと書いています。<BR>
<BR>
この画像の周りに文章が回りこむのを解除したい場合は改行タグである<BR>タグの中に<FONT color=#0000ff>clear</FONT>属性を書きます↓<BR>
<FONT color=#ff0000>BR</FONT> <FONT color=#0000ff>clear</FONT>="解除するキーワード"><BR>
↑となっています、ここで回り込みを解除します<BR clear=left>解除方法として<FONT color=#009900>left</FONT>,<FONT color=#009900>right</FONT>,<FONT color=#009900>all</FONT>のみっつがあります。


<IMG lowsrc=" ファイル名">

■低解像度の画像を表示する時に使用します、このタグで呼び出した場合、src属性で画像を表示するよりも早く表示できます、通常は白黒 画像を使用するようです。

【実行結果】




<IMG src=" ファイル名"border=" 境界線の太さ">

■画像のまわりの境界線の太さを指定します。

【実行結果】




<IMG src=" ファイル名"hspce=" 左右の文章との間隔値"vspace="上下の文章との間隔値">

■文章と画像との間隔を指定する事が出来ます。
 効果は使ってみてのお楽しみ・・・・ってか!

<IMG>はImageの略で、 画像を表示するタグです。表示する画像ファイルはsrc属性(srcはsourceの略)で指定します。Webに使用できる画像形式 は、現在のところGIF・JPEG・PNGの三種類ですが、それぞれ特徴があるので、状況により使い分けます。

width属性とheight属性は、画像ファイルのブラウザ上での表示サイズを指定します。画像の表示サイズはできるだけ指定する とよいようです。。画像サイズを指定することで、画像の読み込みに時間がかかる場合にも、指定したサイズ分の画像表示スペースが空け られて先にテキスト部分を表示するので、閲覧者にとっては表示速度が早く感じられるからです。

HTML4.0からは<IMG>のalt属性が必須となっています。alt属性では画像を表示できない場合に代わりに表 示するテキストを指定します。ここで指定するテキストは、読み上げソフトで音声になったり、点字で表現される場合があるので、適切な ものを指定しなくてはなりません。

alt属性では画像に関する説明をするのではなく、そのページ全体をテキストだけで表現する際に置き換わるべきものを 指定します。例えばそのページがラジオで放送されたり、そのページの内容を電話で伝えることを想定してみると良いのだそうです。画像 の上にマウスを乗せた際に、画像に関する説明等のテキストを表示させることが目的の場合には、title属性を使用してください。