５．１ ＨＴＭＬファイルの構造
ホームページの実体は、各種のファイルであり、それをブラウザで開くことによってモニタ上に表示され目に見えるようになります。
そのファイルの中で主体をなすものがＨＴＭＬファイルです。ＨＴＭＬファイルを作成することがすなわちホームページを作ることです。
ＨＴＭＬファイルの実体は、テキストファイルです。従って特別のソフトは不要で、メモ帳などのテキストエディタで作成できます。ＨＴＭＬファイルの構造は次のとおりです。
<HTML>
<HEAD><TITLE>タイトル</TITLE></HEAD>
<BODY>
本文
</BODY>
</HTML>
解説
- タイトルのところに書かれた文字が、ブラウザのタイトルバーに表示されます。
- 本文のところに書かれた文字が、ブラウザの表示部に表示されます。
- 青色の部分はタグで、ブラウザへの表示方法を示すものです。
５．２ 基本タグの説明
- < と > で囲まれたものをタグといい、ブラウザ上には表示されません。
- タグは開始タグと終了タグが対になっており、その間に効力が及びます。
- 終了タグは / の付いたものです。
- タグには属性で詳細を指示できるものがあります。属性は半角スペースで区切ります。
- タグの中でさらに別のタグを使うことが出来ますが、タグは入れ子にします。
- <HTML>〜</HTML>
ＨＴＭＬ文書であることを示します。
- <HEAD>〜</HEAD>
ヘッダ部であることを示します。この部分に次のタイトルを必ず記述します。
- <TITLE>〜</TITLE>
ここに書かれた文字がタイトルとして扱われ、ブラウザのタイトルバーに表示されたりブックマークのタイトルになります。
- <BODY>〜</BODY>
ここに書かれたものが本文として扱われ、ブラウザの表示部に表示されます。
通常のＨＴＭＬファイルには必ずこれらのタグを記述するようにします。
５．３ 必要最小限のタグ
５．３．１ ページ全体に関するもの
ページの背景や文字の色は
<BODY> の
STYLE属性で指定します。
| 指定するもの | STYLEのプロパティと値
|
| 背景色 | background:色
|
| 背景画像 | BACKGROUND:URL(画像ファイル)
|
| 本文の文字の色 | color:色
|
使用例：
<BODY STYLE="background:white;color:green">
指定しないものは見る人のブラウザの指定によります。
色の値はここを見て下さい。
５．３．２ 文字に関するもの
文字の色や大きさは
<BODY>や<DIV>や<SPAN> の
STYLE属性で指定します。
| 指定するもの | STYLEのプロパティと値
|
| 文字の色 | color:色
|
| 大きさ | font-size:大きさ
大きさは200%のように割合で指定することをお奨めします。
|
| 行間隔 | line-height:行間隔
行間隔も120%のように割合で指定することをお奨めします。
|
| その他 | font-weight:boldで太字
font-style:italicでイタリック体
|
使用例：<SPAN STYLE="font-size:200%;color:blue;font-weight:bold">ここの文字は２倍の大きさで青色で太字</SPAN>
改行すべきところには
<BR>を入れます。これには終了タグは不要です。また改行させたくない部分は
<NOBR>〜</NOBR>で囲みます。
５．３．３ 配置に関するもの
<CENTER>〜</CENTER>で囲まれた部分は、中央揃えで表示されます。
<DIV>,<Hn>,<P>タグはALIGN=centerを指定することで、中央揃えで表示できます。またこれらのタグは、ALIGN=right(left)で右（左）揃えで表示することもできます。
５．３．４ リンクに関するもの
リンクに関するタグは
<A>〜</A>です。属性により次のように応用します。
- 他のページにリンクする
<A HREF="他のページのＵＲＬ">他のページ</A>
注）：ＵＲＬは 同じホームページ内であればパスとファイル名、違うホームページならhttp://ではじまるものです。
- あるページの特定の個所にリンクする
- あるページの特定の個所に名前をつけます。
<A NAME="名前">あるページの特定の個所です。</A>
- リンクしたい所に次のように記述します。
<A HREF="他のページのＵＲＬ#名前">あるページの特定の個所へ</A>
同じページの他の個所にリンクする場合は「他のページのＵＲＬ」を省略します。
５．３．５ 画像に関するもの
画像を貼り付けるタグは
<IMG SRC="パス/画像ファイル名">ですが、次の属性を付属することにより見易くなります。
| 属性 | 説明
|
WIDTH=xxx
HEIGHT=yyy | 画像の大きさ（幅＝xxx、高さ＝yyy）をピクセル単位で指定することにより画像が読み込まれなくても画像のスペースが確保され、レイアウトが途中で変化しません。
|
| ALT="説明" | 画像が読み込まれるまで、"説明"が表示されます。リンク画像の場合には、リンク先を書くことにより画像の読み込みが完了しなくても分かるページができます。 |
５．３．６ TABLEタグについて
<TABLE>タグは表形式で表示する場合に使います。その基本形式は次のとおりです。
<TABLE BORDER=1>
<TR><TD>セル１−１</TD><TD>セル１−２</TD></TR>
<TR><TD>セル２−１</TD><TD>セル２−２</TD></TR>
</TABLE>
（</TR>と</TD>は省略可能ですが、セルの中にさらに表を入れる場合は、中側の表の</TR>と</TD>は省略しないようにしましょう。ネットスケープで表示が乱れます。）
上のように記述すると、次のように表示されます。
すなわち<TR>〜</TR>で行を指定し、<TD>〜</TD>で行の中を分割したセルを指定します。
次に、属性によって表を修飾してみましょう。（タグに属性を付ける場合は属性の前に半角スペースを１個付けます。）
- 外枠（線）の幅を変える
| BORDER=n | <TABLE>タグで使用し、nの数値で外枠の幅が決まります。
n=0（またはBORDER=0を書かない）とすれば枠および罫線が表示されません。 |
- 表に色を付ける
| BGCOLOR=色 | <TABLE>、<TR>、<TD>タグに有効でそれぞれ表全体、行の色、セルの色を指定できます。但しネットスケープでは表全体や行を指定しても罫線の部分には色が付きません。 |
- 表全体やセルの横幅を変える
| WIDTH=n | 表全体やセルの横幅は書かれる文字数によって決まりますが、nにピクセル数またはウインド幅に対する割合("n％")を入れると文字数によらず表全体やセルの横幅が決まります。
<TABLE WIDTH=n>で表の、<TD WIDTH=n>でセルの横幅を指定します。 |
- 文字の配置
| ALIGN=xxx | <TD>で使うとxxxにcentrで中央揃えに、rightで右揃えに配置されます。 |
| VALIGN=xxx | <TD>で使うとxxxにtopでセルの上部に、bottomで下部に配置されます。 |
- セルの統合
セルを統合することにより、見易い表ができます。<TD>タグで使います。
| ROWSPAN=n | n行を統合して一つのセルにします。 |
| COLSPAN=m | m列を統合して一つのセルにします。 |
例
<TABLE BORDER=1>
<TR><TD ROWSPAN=3>Ａ</TD><TD>Ｂ</TD><TD>Ｃ>/TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD></TR>
<TR><TD>Ｆ</TD><TD>Ｇ</TD></TR>
</TABLE>
<TABLE BORDER=1>
<TR><TD COLSPAN=3>Ａ</TD></TR>
<TR><TD>Ｂ</TD><TD>Ｃ>/TD><TD>Ｄ</TD></TR>
<TR><TD>Ｅ</TD><TD>Ｆ</TD><TD>Ｇ</TD></TR>
</TABLE>