　ＨＴＭＬ講座　第五回目

　１限目　（画像を貼り付ける）

それではいよいよ、画像の貼り付けに入りましょう！！
　まずは、何か適当な画像ファイルを用意いましょう。何でもいいです。適当なものがなければ、左フレームのメニュー、オリジナル素材集から適当にピックアップし、ＨＴＭＬファイルを保存しているフォルダーへコピーしましょう。
● それでは、またメモ帳で次の通りＨＴＭＬソースを書いて下さい。
　但し、画像ファイルは turu.gif（オリジナル素材集の鶴を使用）で説明します。
　これ以外の画像を使った方は、ファイル名の変更をお忘れなく！

<html>
<body>
<img src="turu.gif">
</body>
</html>

そして、適当なファイル名（＊＊＊.html ）で保存しましょう。
これをエクスプローラーから開くと、

　
　
　

　このように、なりましたか？
　この <img> タグが画像を貼り付ける為のタグです。
　そして、ファイル名は src="*.*" で指定します。
　簡単ですね。次の時間では、この応用を勉強します。
　ちょっと難しいですよっ！！
キーンコーンカーンコーン・・・（１限目終了）

　２限目　（画像貼り付けの応用）

それでは、次はこのように記述してみましょう。

<html>
<body>
<img src="turu.gif">鈴木辰之
</body>
</html>

すると、次の様に画像の右に、下付けで表示されたと思います。
これが、画像を貼り付けたときに表示される、文字の標準位置です。

鈴木辰之
　

次に、画像のトップに文字を出力したい場合と、センターに出力したい場合の例を示します。

<img src="turu.gif" align="top">鈴木辰之
　このように align="top" を付けると
鈴木辰之
上付けされて表示されます。
　
<img src="turu.gif" align="center">鈴木辰之
　このように align="center" を付けると
鈴木辰之
画像右側中央に表示されます。
　
また、align="bottom" と記述した場合、標準文字位置で表示されます。

これらの設定では、画像の右側に１行のみ表示され、２行以上の表示はできません。
それでは、２行以上表示するにはどうすればいいでしょうか？
それは、次のように align="left" を記述します。

<html>
<body>
<img src="turu.gif" align="left">
しかしたっちゃんは言った。 
「果たしてそうかな？」 
だが、彼も引かない。 
「何？、ならば君の意見を聞こう。」 
たっちゃんは語り出した。 
「君の言いたいことは良く解るがしかし、そもそもの原因を考えると、・・・・・・・・・つづく
</body>
</html>

次のように、文字の左側に画像が入り込んだように表示されます。

しかしたっちゃんは言った。
「果たしてそうかな？」
だが、彼も引かない。
「何？、ならば君の意見を聞こう。」
たっちゃんは語り出した。
「君の言いたいことは良く解るがしかし、そもそもの原因を考えると、・・・・・・・・・つづく

また今度は、align="right" と記述すると

・・・そもそもの原因は、そう、あの日
ちょうど１週間前のあの日だ。
君もはっきり覚えているはずだ。」
「あぁ、でもあれは・・・」
「いや、あれなんだ、あれが原因なんだ、
「君は実に、事実の半分も知らないんだ、じつはあの後・・・・・・・・・つづく

このように、文字の右側に画像が入り込んだように表示されます。
また、例は示しませんが、役に立つオプションをいくつか紹介します。
hspace="*"　　　　画像の左右に空白を入れます。
vspace="*"　　　　画像の上下に空白を入れます。
width="* or *%"　画像の横幅を変更できます。
height="* or *%"　画像の縦幅を変更できます。
（「*」には数字が入りますが、１桁の数字とは限りません。）
これらは自分なりに、或いはホームルームで試してみましょう！！ホームルームでは、タグがうまく動かなくても、そのまま消さずに残しておいて貰えれば、コメントを付けて修正します。 (^^)/
キーンコーンカーンコーン・・・（２限目終了）

　３限目　（背景に、画像を貼り付けるには＋ α）

これは、とっても簡単です。
ササッと覚えてしまいましょう！！
● それでは、またメモ帳で次の通りＨＴＭＬソースを書いて下さい。

<html>
<title>たっちゃんのホームページ</title>
<body background="turu.gif">
</body>
</html>

気付きましたか？
<title> と <title> でタイトルを挟むと、ブラウザーのタイトルバーにタイトルを表示することができます。でも、記述する場所に注意です！！
<html> と <body> タグの間に記述して下さい。
次に、<body> タグ内に background="*.*" と記述すると、その画像がなんと、背景になってしまうのです！！
結果は次の通りです。

たっちゃんのホームページ
　
　
　
　
　

あぉ、もうこんな時間かぁ、今日はここまでっ！！
キーンコーンカーンコーン・・・（３限目終了）
最後に、１問だけ宿題です。
今日の宿題は大変難しいですが、挑戦してみて下さい！！
（問い）今日の講座で、画像を右や、左に持って来ることはできましたが、さて、ブラウザーの真ん中に表示するにはどうしたらいいでしょうか？
　それぞれ、適当な画像を用意して（ turu.gif も可）ホームルームに表示してみて下さい。
それでは、解さぁ～ん！！

たっちゃんのＨＴＭＬ講座

[Back]