ＨＴＭＬ Lesson ・・・No.4

横線(水平線）は、画面を分割したり、
見やすくしたり、アクセントをつける効果があります。

・・・横線(水平線）のタグ・・・

<hr>	横線（horizon)を引く

これだけで、画面の端から端まで横線が引けます。
そして、前後に改行が入ります。

↓　　　こんな感じです。

色をつけたり、長さや幅を変えたりできます。

・・・横線タグの属性・・・

width="・・・"	横線の長さを指定（ピクセル指定と％指定）
size="・・・"	横線の幅（太さ）を指定　（１から１００までの数字）
align="left" align="center" align="right"	左寄せに引く中央に引く右寄せに引く
color="・・・"	色を指定　（色名または色番号）
noshade	影のない罫線になる

・・・いろいろな横線を引いて見ましょう・・・

自分のHPの中の適当なところに、
横線タグを書き入れて見ましょう。
No. 14

更新手続きをしたらこんな風になります。

	画面いっぱいの線
	太さ指定
	影なし
	色と長さ指定
	太さも指定
	長さと太さ変更
	長さ％指定
	色変更
	太さと長さ変更
	左寄せ
	右寄せ

HPの中に効果的に横線を入れて
アクセントをつけてください。

画像を作ろう

自分で作った画像を入れると、ぐっとたのしくなりますね。

Windowsについている「ペイント」を使ってみましょう。
「ペイント」は、「アクセサリ」の中にあります。

　「ペイント」のアイコン　→　

ツールのボタンをいろいろ試しながら、自在に画像を作ってください。

できたら、｢ファイル」＞「名前を付けて保存」で保存しましょう。

保存時の注意は、
「ファイルの種類」を「GIF形式」　にしてください。

そして、「画像を貼ろう」の項を参照して貼り付けてください。
自分の作った画像を貼り付けると、一段と楽しくなります。

「ペイント」の使い方は、
「ペイント」画面の「ヘルプ」を読むとわかります。

背景に画像を貼ろう

画像があったら、背景に画像が貼れます。
色だけより、ぐっといい感じ・・・
ただ、全体のバランスを考えて
邪魔にならないものを選びましょう。

・・・ｂｏｄｙタグの属性・・・

背景の画像を指定

・・・実験してみましょう・・・

右の画像を「画像の取り込み」の
方法で取り込んでください。
ファイル名は「agra03.gif」です

ソースNo.12に赤字の部分を書き加えて見ましょう。

No. 15

<html>
<head>
<title>
ＨＴＭＬ勉強会
</title>
</head>
<body background="agra03.gif" bgcolor="lavenderblush">
<center>
<img src="logo.gif" border="1" width="297" height="77" alt="これは、ロゴです！"><br><br>

<h2>自分のＨＰを持とう！</h2>

お手本は<a href="http://www.yahoo.co.jp/">ヤフー</a>で探そう！<br><br><br>

わたしの<a href="like.htm">お気に入り</a>も見てください！<br><br><br>

</center>
</body>
</html>

更新手続きをしてください。

自分のＨＰを持とう！

お手本はヤフーで探そう！

わたしのお気に入りも見てください！

・・・注意・・・

bodyタグの中で、背景色を指定しています。
これは、一見、不必要に見えますが、
画像が送られてくるまでの間、画面に色がつきます。
指定しないときは、白紙です。

次回は表の作成

制作者のＨＰかぼちゃの旅