HTML作成編

5.画像関連タグ




HomePage(HP)に画像を貼り付けましょう。
 <img src="***.gif"> (JPGファイルなどでも良い)

<img src=***.gif>に付け加えれる記述

「width=** height=**」
「alt=" 文字列 "」
「align=top」
「align=center」
「align=bottom」
「align=left」
「align=right」
「hspace=**」
「vspace=**」
「border=**」
同じ画像を使って説明します。

<img src="images/purlogo_k.jpg">

画像表示

画像が出ないところ

<img src="images/purlogo_k.jpg" width=120 height=100>


画像表示

画像が出ないところ

<img src="images/purlogo_k.jpg" width=120 height=100 alt="PurPose">

PurPose
画像表示
PurPose
画像が出ないところ

 どうして画像が出なところをわざわざ作ったか分かりますね
width=** height=**の指定では、これで大きくしたり小さくしたり出来ます。
 ここでは、実際の大きさを指定しました。 これで画像を送る前に画像の範囲を先に取っておくので 少し転送が早くなるそうです。
 次に、alt="文字列"ですがこれを入れておくと画像が転送されなくても ある程度何があるか分かります。特に画像でリンクをしている場合は、 記述した方が良いでしょう。

ここからは、
「HomePage作成支援」の文字列の位置にも注目!

<img src="images/purlogo_k.jpg" width=120 height=100 align=top alt="PurPose">
HomePage作成支援
PurPose HomePage作成支援

<img src="images/purlogo_k.jpg" width=120 height=100 align=center alt="PurPose">
HomePage作成支援

PurPose HomePage作成支援

<img src="images/purlogo_k.jpg" width=120 height=100 align=bottom alt="PurPose">
HomePage作成支援

PurPose HomePage作成支援

<img src="images/purlogo_k.jpg" width=120 height=100 align=reft alt="PurPose">
HomePage作成支援

PurPose HomePage作成支援

<img src="images/purlogo_k.jpg" width=120 height=100 align=right alt="PurPose">
HomePage作成支援

PurPose HomePage作成支援

ここからは、
以下のように画像を並べてみるので違いを見て下さい。

<img src="images/purlogo_k.jpg" width=120 height=100>
<img src="images/purlogo_k.jpg" width=120 height=100><br>
<img src="images/purlogo_k.jpg" width=120 height=100>
<img src="images/purlogo_k.jpg" width=120 height=100>


<img src="images/purlogo_k.jpg" width=120 height=100 vspace=5>
<img src="images/purlogo_k.jpg" width=120 height=100 vspace=5><br>
<img src="images/purlogo_k.jpg" width=120 height=100 >
<img src="images/purlogo_k.jpg" width=120 height=100 vspace=5 >

PurPose PurPose
PurPose PurPose

<img src="images/purlogo_k.jpg" width=120 height=100 hspace=5>
<img src="images/purlogo_k.jpg" width=120 height=100 ><br>
<img src="images/purlogo_k.jpg" width=120 height=100 hspace=5>
<img src="images/purlogo_k.jpg" width=120 height=100 hspace=5>

PurPose PurPose
PurPose PurPose

以上の様に vspace=*は、画像の上下にスペースを空け
hspace=*は、画像の左右にスペースを空ける記述です。




次のPAGEは、リンク関連タグです。



戻る
次へ




The Purposeロゴ
http://www.web-purpose.com/purpose/
Copyright (C) 1997-2005 Tomio Sato. All Rights Reserved.