子供と超初心者のためのホームページ作成教室、htmlの基礎から、フリー素材や掲示板チャットなどのCGI解説、javascriptなどの例も

最初に皆さんに4つの画像をフロッピィに保存していただきましたね。それが以下の4つの画像です。ここでは画像のデータと、画像をあつかうタグについてこれらを使って説明しますね。画像名の後ろに書いてあるのはその画像の大きさです。
watasi.gif(1.39K)

mail.gif(1.04k)

home.gif(1.44K)

line1.gif(1.11K)

インターネットのホームページで使うことの出来る絵や写真などの画像の種類で主なものはGIF形式の画像とJPEG形式の画像です。それぞれ拡張子(かくちょうし)は.gif.jpg(または.jpeg)です。
GIF画像は256色まで扱える画像ファイルで、絵をあつかうのに向いています。JPEG画像は16万色の表示が可能で、写真などをあつかうのに向いています。
「16万色ならJPEGの方がいいな!!」と思うお友達がいるかもしれませんね。この違いは画像データの大きさに関係があります。
画像についての種類や大きさ色数などくわしい説明はこちらを見てね

画像をあつかうタグについて

<IMG src="watasi.gif">

<IMG src="watasi.gif" width="55" height="81">

ここで画像の大きさを指定した場合、ブラウザが計算する手間がかからないので、表示速度が少し速くなります。

<IMG src="watasi.gif" width="55" height="81" border="1">

画像に線をつけます。borderの数字を変えてみて色々試してね。

<IMG src="watasi.gif" width="55" height="50">

画像のサイズを変更してみました。高さ(height)を変更してみましたので、背が小さくなりますね。これをうまく使えば、ダイエットした自分の写真が・・・・・(笑)

<IMG SRC="http://www.kidsmc.com/logomini.gif" WIDTH="158" HEIGHT="58">

ここでは、画像ファイルをインターネット上から持ってきて表示しました。ここではキッズメディアクラブのサーバー上にあるlogomini.gifという画像を表示しています。
つまり、自分のフロッピィやフォルダにない画像でも、インターネットにつながっていれば、こうして表示することが出来るわけです。
ただこの場合、その画像の著作権などに注意して使用しなければなりませんね。
また、その画像が接続先のサーバーから削除されてしまったり、何らかの事情でサーバーに接続できなかった場合、あるいはインターネットに接続していない状態の場合など、右の下のようになってつぶれてしまうことに注意してください。

画像と文字の関係について

<IMG src="watasi.gif" width="55" height="81">普通に文章を書いていくと画像と文章の位置関係はこのようになります 普通に文章を書いていくと画像と文章の位置関係はこのようになります
<IMG src="watasi.gif" width="55" height="81" align="top">上に文章を書いていくと画像と文章の位置関係はこのようになります 上に文章を書いていくと画像と文章の位置関係はこのようになります
<IMG src="watasi.gif" width="55" height="81" align="middle">中央に配置した文章の位置関係はこのようになります 中央に配置した文章の位置関係はこのようになります
<IMG src="watasi.gif" width="55" height="81" ALIGN="left">普通に文章を書いていくと画像と文章の位置関係はこのようになります文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります 文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります
<IMG src="watasi.gif" width="55" height="81" align="right">文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります 文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります

<IMG src="watasi.gif" width="55" height="81" ALIGN="left">普通に文章を書いていくと画像と文章の位置関係はこのようになります<BR CLEAR="left">

ここから違う文章を書く出す場合回り込みを取消してあげなければいけませんね。<P>

<IMG src="watasi.gif" width="55" height="81" align="right">文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります<BR CLEAR="right"> ここでも違う文章を書く出す場合回り込みを取消してあげなければいけませんね

文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります
ここから違う文章を書く出す場合回り込みを取消してあげなければいけませんね。

文章の回りこみを指定して、普通に文章を書いていくと画像と文章の位置関係はこのようになります
ここでも違う文章を書く出す場合回り込みを取消してあげなければいけませんね