趣味友遊
画像を挿入する



写真や画像を入れたい！

そんな時に活躍するのが・・・

<img src=△ width=□ height=□>

イメージタグ




その前に、挿入したい写真、または画像を、
hpフォルダにコピーしておきます。

　△　にファイルの名前、この場合は　himitu.jpg　を入力

width=の　□　には指定する横幅。 height=の　□　には指定する縦幅を入力。

元のファイルのままの大きさで表示したい場合は入力しなくてもかまいません。

また、イメージタグにはセンタータグやテーブルタグが使用できます。


<center>
<table border=10>
<tr><td>
<img src=himitu.jpg>
</td></tr>
</table>
</center>



こんな感じです。


サイズを指定すると・・・・・

<center>
<table border=5>
<tr><td>
<img src=himitu.jpg width=100 heigth=75>
</td></tr>
</table>
</center>



こんな感じです。



それでは、ソースに書き込んでいきましょう。


<html>
<head>
<title>ひみつのお部屋</title>
</head>
<body bgcolor=paleturquoise text=green>
<br>
<i><font size=6 color=red>ひみつ</font><font size=6>のお部屋</font></i><br>
<br>
<table border=5>
<tr><td>
<img src=himitu.jpg width=200 height=150>
</td></tr>
</table>
 <br>
ここは私のひみつのお部屋です。<br>
ひみつの日記やひみつの写真をアップします。<br>
ひみつなので見た人はぶっとばします。<br>
<br>
<br>
自己紹介<br>
日記のお部屋<br>
写真のお部屋<br>
</body>
</html>


こんな感じになります。


画像を挿入するイメージタグで気をつけることは、
ファイルの拡張子が　.JPG　となっていたらかならず　.jpg　と小文字に直しておくこと。



写真ファイルのリサイズについて。





ついでに自己紹介の部屋でも作っときますか？




hpフォルダで aaa.html をコピーして貼り付け、 jikosyoukai.html　と名前を変換します。
自己紹介で使用したい画像をコピーしておいてＴＯＰページのように作っていきます。



<html>
<head>
<title>ひみつのお部屋</title>
</head>
<body bgcolor=paleturquoise text=green>
<br>
<i><font size=6>自己紹介</font></i><br>
<br>
<br>
マハリクマハリタテクマクマヤコンエロイムエッサイム！<br>
<br>
<table border=5>
<tr><td colspan=2>
<img src=jikosyoukai.jpg>
</td></tr>
<tr><td>人種</td><td>ひみつの魔法使い</td></tr>
<tr><td>特技</td><td>嘘つき</td></tr>
<tr><td>好きなもの</td><td>ワラ人形</td></tr>
</table>
<br>
<ＴＯＰに戻る>
<br>
</body>
</html>

自己紹介の部屋のポイントは、結合の　colspan　ですね。



次は日記でも書きましょっか？


え？　さすがにもうだめ？



次へ


趣味友遊的ホームページ講座
五目の部屋
TOP
inserted by FC2 system