　9:34 99/08/28
[ HOME PAGE ]

　ＨＴＭＬの作法

タグと属性（＋属性値）の説明

Ｗｅｂページを作るには、ＨＴＭＬ(Hypertext Markup Language)という簡単なマークアップ言語を使用して書きます。

[ 　できあがりを確認する。　 ]

[　１．　ＨＴＭＬで書くことを宣言します。　]

タ　グ	属　性	説　明
<html>・・・</html>	－	ＨＴＭＬで書くことを宣言する。

[　２．　文書全体に関する情報を書きましょう。　]

タ　グ	属　性	説　明
<head>・・・</head>	－	文書全体に関する情報を書く

[　３．　タイトル文字を書きましょう。　]

タ　グ	属　性	説　明
<title>・・・</title>	－	タイトル文字を書くここに書いた文字がブラウザの左上に表示されます。また、ブックマークしたときのタイトルになりなす。

[　４．　本文であることを宣言しましょう。　]

タ　グ	属　性	説　明
<body>・・・</body>	－	本文であることを宣言する。
－	background	背景にする画像を指定(bgcolorとの併用はできません。) 　例えば、　background="ABC.jpg"　と書きます。
－	bgcolor	背景の色を指定(backgroundとの併用はできません。) 例えば、　bgcolor="#ff0000"　と書きます。#ff0000は、色番号です。色番号は、こちらを参照してください。[ 　Color Guide　 ]
－	text	本文の文字の色を指定
－	link	まだクリックしていないリンクが張ってある文字の色を指定
－	vink	クリックして既にリンクした文字の色を指定
－	alink	リンクが張ってある文字をクリックした瞬間の色を指定

[　５．　改行しましょう。]

タ　グ	属　性	説　明
<br>	－	改行する。 <br><br><br>と繰り返し入力すると、繰り返し入力した回数分（この例では３行分）改行します。 </○○>で閉める必要はありません。

[　６．　段落を作りましょう。]

タ　グ	属性	説　明
<p>・・・</p>	－	段落をつくる（改行し、さらに１行分あける。） <p><p><p>と繰り返し入力しても１行しかあきません。つまり、繰り返し使用はできません。 </○○>を省略できます。

[　７．　見出しをつけましょう。]

タ　グ	属　性	説　明
<h1>・・・</h1>	－	見出しをつける。 h1　～　h6　まで、第１レベルの見出しから第６レベルの見出しまであります。数字が大きくなるほど文字が小さくなります。 hx　は、見出しを表すタグですので、フォントサイズの代わりに使うのは間違いです。

[　８．　中央そろえ（センタリング）にしましょう。]

タ　グ	属　性	説　明
<center>・・・</center>	－	見出しや文章をセンタリングする。

[　９．　文字の大きさや、色を指定しましょう。]

タ　グ	属　性	説　明
<font>・・・</font>	－	文中の任意の箇所の色や文字の大きさを指定します。
－	color="色番号（#RRGGBB）"	文中の任意の箇所の色を指定します。色番号は、[ Color Guide ]を参照してください。
－	size="フォントサイズ（1-7）"	文字の大きさを数字で指定します。１～７まで有り数字が大きくなるほど文字が大きくなります。

[　１０．　横線をひきましょう。]

タ　グ	属　性	説　明
<hr>	－	横線をひく属性（アトリビュート）を使わず単独でも使えます。細かく指定したいときは、属性を使いましょう。
－	width="○○○"	線の長さ <hr width="50%" size="2" align="left"> 標準を　100%　として、その半分なら　50%
－	size="○○○"	線の太さ <hr width="70%" size="4" align="center"> 標準の太さは　2　、２倍の太さにするなら　4
－	align="○○○"	線の位置 <hr width="100%" size="6" align="right"> 左寄りは　left　、中央は　center　、右寄りは　right

[　１１．　テーブルを組みましょう。]

タ　グ	属　性	説　明
<table>・・・</table>	－	表を作るタグです。いわゆるテーブルタグ表内の情報全体の前後を<table>と終了を表すタグ</table>ではさみます。
－	border="1"	テーブルの外枠の線の太さを指定するタグです。 border　を書かないとテーブルの枠線は表示されません。（枠表示無しとなります。）数字が大きくなるほど外枠の線が太くなります。
－	cellspacing="5"	表の中の罫線すべての太さを指定します。数字が大きくなるほど太くなります。
－	cellpadding="0"	表の枠と枠内のテキストや絵などとの間隔を調整します。数字が大きくなるほど間隔が広がります。
<td>・・・</td>	－	列を表すタグです。列の開始を表す<td>　と　列の終了を表すタグ</td>　で列内に表示する文章とか絵などをはさみます。） <td>・・・</td>の繰り返し回数が列の数になります。
<tr>・・・</tr>	－	行を表すタグです。行の開始を表す<tr>　と　行の終了を表すタグ</tr>　で列の情報をはさみます。 <tr>・・・</tr>の繰り返し回数が行の数になります。

[　１２．　絵を入れましょう。]

タ　グ	属　性	説　明
<img src="○○○">	－	画像を入れる。 ○○○は、表示したい画像のファイル名を拡張子と共に書きます。たとえば、drive01.jpg　とか　email03.gif　とか
－	alt="○○○"	絵の代わりになるテキストを書きます。例えば、<img src="photoABC.jpg" alt="木の実" width="150" height="100">　とか
－	width="○○○"	画像の表示する大きさ(ヨコ幅)を指定します。 <img src="photoABC.jpg" alt="木の実" width="○○○" height="100"> ○○○は、ピクセル数（100とか150とか）またはウィンドウに対するパーセンテージ（標準を100%として、その半分なら50%）
－	height="○○○"	画像の表示する大きさ（タテ幅）を指定します。 <img src="photoABC.jpg" alt="木の実" width="150" height="○○○"> ○○○は、ピクセル数（100とか150とか）またはウィンドウに対するパーセンテージ（標準を100%として、その半分なら50%）

[　１３．　自分の中の他のＷｅｂページにリンクをはりましょう。]

タ　グ	属　性	説　明
<a href="○○○">△△△</a>	－	リンクをはる。 ○○○は、リンク先のファイル名を拡張子付きで書きます。 △△△は、Ｗｅｂページの見出しなどリンク先の案内文を書きます。

[　１４．　自分あての返信メールを仕掛けましょう。]

タ　グ	属　性	説　明
<a href="mailto:自分のメールアドレス"><img src="適当なメールアイコン" alt="アイコンのテキスト" width="表示サイズ" height="表示サイズ" border="0">mailto:自分の名前など</a>	－	自分あての返信メール青色の文字の部分はオプションです。記述しなくともＯＫです。

[　１５．　音楽が流れるようにしましょう。　]

タ　グ	属　性	説　明
<bgsound src="サウンドファイル">	－	このタグは、マイクロソフトのインターネットエクスプローラー用です。ネットスケープでは、鳴りません。
－	loop="1"	青色の文字の部分は、曲の繰り返し回数を表します。たとえば、”１”は曲を１回繰り返すの意味です。

[ HOME PAGE ]