画像の表示、横に文字を入れる
(<IMG SRC="*******.gif" ALIGN="left">, <BR CLEAR="all">) 

画像の表示

画像を表示するには、 GIF ファイルや JPEG ファイルの画像圧縮ファイルを扱
うことが多い。

書き方は、
<IMG SRC="../IBMimage/draw015.gif" ALT="draw015.gif">

のように、画像のあるディレクトリ(パス指定という)とファイル名を先に書き、
続けて ALT オプションで画像の説明文(通常はファイル名を使う)を入れる。

表示では、下図のようになる。
draw015.gif 
もし、そのディレクトリに画像が存在しない場合、例えば間違って、
<IMG SRC="../IBMimage00/draw015.gif" ALT="draw015.gif">
としてしまった場合、
表示では、下図のよう画像が壊れたような画像と説明文になる。
draw015.gif 
また、この <IMG SRC="****.***" ALT="******"> の終了タグはありません。
簡単な HTML の書き方に戻る

画像の横に文字を入れるオプション指定など

画像にワクをつける場合(指定しない場合はワク無し)

書き方は、
<font color="#0000ff">
<IMG SRC="../IBMimage/draw016.gif" ALT="draw016.gif" BORDER="5">
</font>

のように、BORDER オプションをつけて、ワクを入れることもできる。
BORDER の数字はピクセル数、色はフォントの色指定で挟み込む。

表示では、下図のようになる。
draw016.gif 

画像の表示に戻る
簡単な HTML の書き方に戻る

画像の横に１行だけの文字を入れる場合

書き方は、<font color="#0000ff">
<IMG SRC="../IBMimage/draw017.gif" ALT="draw017.gif" ALIGN="top">
私の名前はダディっていうの</font><BR>
表示では、下図のようになる。
draw017.gif 私の名前はダディっていうの
 

のように、ALIGN オプションをつけて、画像の一番上に入れる場合(ALIGN="top")
や画像の中央に入れる場合(ALIGN="middle")、デフォルト(指定の無い場合)では、
(ALIGN="bottom")に指定されている。

画像の表示に戻る
簡単な HTML の書き方に戻る

画像の横に複数行の文字を入れる場合

書き方は、
<font color="#0000ff">
<IMG SRC="../IBMimage/draw009.gif" ALT="draw009.gif" ALIGN="left">
私の名前はミケっていうの。 <BR>
ライオンだと自分では思っているのにあまり恐くない。 <BR>
それとも、かわいい猫ちゃんに見えてしまう。<BR>
</font><BR>

表示では、下図のようになる。
draw009.gif 私の名前はミケっていうの。
ライオンだと自分では思っているのにあまり恐くない。
それとも、かわいい猫ちゃんに見えてしまう。


のように、ALIGN オプションをつけて、画像の左側(ALIGN="left")
や画像の右側に入れる場合(ALIGN="right")で指定する。

また、途中でテキストの回り込みを解除するには、
<BR CLEAR="all">を非常によく使う。

書き方は、
<font color="#0000ff">
<IMG SRC="../IBMimage/draw010.gif" ALT="draw010.gif" ALIGN="left">
私はかわいいねずみです。<BR>
子どもには好かれているのに、 <BR>
<BR CLEAR="all">
大人の女性には嫌われているの、どうして？？<BR>
</font><BR>

表示では、下図のようになる。
draw010.gif 私はかわいいねずみです。
子どもには好かれているのに、

大人の女性には嫌われているの、どうして？？

 
画像の表示に戻る
簡単な HTML の書き方に戻る