html３分間クッキング「画像のはさみ揚げ」

用意する物
・道具・・・・・・	ＰＣＰＣ内メモ帳（windows）ＰＣ内Symple　Text（マック）適当な画像その壱で作ったhtmlファイルブラウザブラウザ(オフラインモードで使用) ※ブラウザは、インターネットエクスプローラー（ＩＥ）か　ネットスケープ（ネスケ）がいいです。　私が他のものをもってないので、確認できない為です。　決して回し者ではありません。/^-^；
下ごしらえ
・用意した画像を「その壱」で作ったHTMLファイルと同じディレクトリ（フォルダ内）に入れておきましょう。

●まず、メモ帳を開け、その壱で作ったhtmlファイルを読み込みます。（マックの場合は、その壱で作ったhtmlファイルをダブルクリックしてファイルを開けます。）そして右下のように画像を表示させるタグを追加して上書き保存します。 (ここでは、『guruguru-s.jpg』を使います。) 保存後、そのファイルをダブルクリック(windows) ブラウザからファイルを開く（マック）して、表示させましょう。
ソース（１）	画面表示（１）
<html> <head> <title> 練習のページ </title> </head> <body> <center> <br><br> <font color="purple">わたしの</font><font size="5">ホームページ</font>へ<br>ようこそ♪ <br><br> <img src="guruguru-s.jpg" width="50" height="100"> <br><br> <img src="guruguru-s.jpg">くくりです、<br>よろしく～♪ </center> </body> </html>	わたしのホームページへようこそ♪ くくりです、よろしく～♪
<img src="画像ファイル名">→画像を表示させる width="数字（単位：ピクセル）"→画像の横幅を指定 height="数字（単位：ピクセル）"→画像の高さを指定 ※大きさの指定がない場合は、その画像の大きさそのもので表示されます。 ※画像ファイルは、gifかjpgファイルを使用します

●では、次に、少し調味調を・・・
ソース（２）	画面表示（２）
<html> <head> <title> 練習のページ </title> </head> <body> <center> <br><br> <font color="purple">わたしの</font><font size="5">ホームページ</font>へ<br>ようこそ♪ <br><br> <img src="guruguru-s.jpg" align="left">くくりです、<br>よろしく～♪ </center> </body> </html>	わたしのホームページへようこそ♪ くくりです、よろしく～♪
※align="left"→画像を左側に置く
ソース（３）	画面表示（３）
<html> <head> <title> 練習のページ </title> </head> <body> <center> <br><br> <font color="purple">わたしの</font><font size="5">ホームページ</font>へ<br>ようこそ♪ <br><br> <img src="guruguru-s.jpg" align="right">くくりです、<br>よろしく～♪ </center> </body> </html>	わたしのホームページへようこそ♪ くくりです、よろしく～♪
※align="right"→画像を右側に置く
ソース（４）	画面表示（４）
<html> <head> <title> 練習のページ </title> </head> <body> <center> <br><br> <font color="purple">わたしの</font><font size="5">ホームページ</font>へ<br>ようこそ♪ <br><br> <img src="guruguru-s.jpg"> <br><br> くくりです、<br>よろしく～♪ </center> </body> </html>	わたしのホームページへようこそ♪ くくりです、よろしく～♪
最後に、次回の為にこのソースにして、保存しておいてください。

上手く画像のはさみ揚げ（表示）ができたでしょうか？

実は画像と文字の表示位置については、まだありますが・・・
テーブルを使った方が表示が簡単かな？と思い、ここまでとしました。
テーブル（表）については、また後日。

次は、生地<body>の加工方法とリンクについてです。