さて、それぞれのタグの意味。
今回は一番よく出てくると思われる<img>タグについてです。
<img>は
画像を置くという命令のタグです。
ただ置くだけなので『ここまで』という意味である</img>は必要ありません。
でもよく見ると<img>の中にはwidthとかheightとか色々書いてありますよね?
では今回はペログーの投稿画面を例に見てみましょう(^^
ペログーで投稿する時、写真を貼り付けるとこんな文が出てくると思います。
※『左側』を押して投稿した場合、『省略』はその名の通り省略してます(笑
<a href="http://(省略).jpg" target="_blank"><img src="http://(省略).jpg" width="350" height="262" alt="1188134983884541.jpg" border="0" hspace="5" align="left"></a>今回のテーマは<img>タグなので赤い部分だけ注目して下さいね。
タグの中身を更に省略してみると・・・
<img src="〜" width="〜" height="〜" alt="〜" border="〜" hspace="〜" align="〜">・・・こんな風になっていると思います。
実はこの『<img』から『>』までの間に書かれている内容には
『どんな飾りを付け加えるか』が書かれています。
つまり『src』『width』『height』『alt』『border』『hspace』『align』という飾りつけを施して
貼り付けましょうという意味になっているんです(^^
タグを書くときは『="〜"』の『〜』の部分を自分好みに変えたり、
必要な装飾部分だけ書いたりすることができます。
(もちろん要らない装飾部分は消すことも可ですv)
以下はそれぞれの飾りの意味です。
src→画像が置いてあるURL(必須)。
ペログー(猫カテゴリー)でアップロードして使うと
【http://cat.pelogoo.com/ユーザー名/pic/アップロードした時のナンバー.jpg(もしくは『.gif』『.png』)】という形になる。
width、height→画像の大きさ。widthは幅でheightは高さ。
alt→カーソルを置いたときに出てくる説明文。
border→画像の周りを囲む線の太さ。数字が大きいほど太い線。
リンクが貼ってある場合のみ『border="0"』と書かないと勝手に囲まれてしまう。
hspace→画像の左右の余白。数字が大きいほど隣に書かれた文字が離れる。
(
vspace→画像の上下の余白 もあります。)
align→画像の隣に文字を書くときの位置指定。
leftは画像が左、文字が右。
rightは画像が右、文字が左。
一行だけ入れる場合は『top』『middle』『bottom』も使えます
二行目以降は画像の下に配置されます。
例:
topの場合
middleの場合
bottomの場合
※真ん中にしたいときは<div align="center">を使って移動させているので
imgタグの中には含まれていません。
imgの中のalignは、画像と文字の位置関係と考えると解り易いかもです。
ちなみに写真の左右どちらにも文字を入れたくない場合は
『align="〜"』を消して1行改行してから書き始めると
写真の下にレイアウトされます。