全体に関わる説明の大体の部分を終えたので、そろそろサンプルのページを実際に作ってみましょう。次のように準備をしてください。
「サイトマップを作る」  のページにあるようにディレクトリを作ります。同じ階層（1つのフォルダ内）に「img」「profile」「macintosh」「travel」「enquete」という5つの空のフォルダを作ります。先ほどダウンロードした画像ファイル全てを「img」フォルダへ移動します。
まずはトップページを作ります。このトップページは「index.html」というファイル名にし、やはり同じ階層（5つのフォルダと同じ場所）に保存します。タイトルは「ようこそ！Kimura's Roomへ」、BGCOLORは「#ececec」、テキストは黒なので指定しなくても構いません。index.htmlは以下のようになります。
|
<HTML>
<HEAD>
<TITLE>ようこそ！Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
</BODY>
</HTML>
|
文字のサイズを変える（絶対的）
●<FONT SIZE="n">
サンプルのトップページ には画像や表組などが使われていますが、最初はとりあえずは文字だけで作ることにします。
まずは<BODY>の中に「ようこそ！」と入力しましょう。ブラウザで確認してください。ちゃんと「ようこそ！」と表示されていますね？何も指定しない状態で（デフォルト）文字を入力すると、その文字は「3」という大きさで表示されます。これを見だし文字らしく、大きくしてみまます。文字のサイズを変えるタグは<FONT SIZE="n">です。文字の大きさは1から7まで指定できます。1が最小で7が最大です。「n」の部分（パラメータ）に1〜7のサイズを入力します。ここではサイズ「5」にしてみます。
<FONT SIZE="5">ようこそ！</FONT>
他のサイズも試してみてください。
|
 |
|
<HTML>
<HEAD>
<TITLE>ようこそ！Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<FONT SIZE="5">ようこそ！</FONT>
</BODY>
</HTML>
|
文字のサイズを変える（相対的）
●<BASEFONT SIZE="n">
●<FONT SIZE="+n"・"-n">
デフォルトの文字サイズ「3」に対して「何段階大きくする・小さくする」という指定の仕方もあります。パラメータにデフォルトのサイズの差を書き込みます。サイズを5にしたい場合、+2と書き込みます。サイズ2にしたければ、-1です。またデフォルトのサイズ自体（つまり全体のサイズ）を変えることもできます。<HEAD>内に
<BASEFONT SIZE="n">
を書きます。ただし、環境によってはテーブル（後で説明します）の中には、この指定が及ばないこともあります。何も指定しない場合の通常のサイズを「2」、強調したい部分を相対指定で「4」にしたければ、以下のようになります。
|
|
|
<HTML>
<HEAD>
<TITLE>ようこそ！Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<BASEFONT SIZE="2">
</HEAD>
<BODY BGCOLOR="#ececec">
ここに書かれた文字は上のBASEFONTの指定により、サイズ「2」で表示されます。
<FONT SIZE="+2">ここに書かれた文字は「+2」ですからサイズ「4」で表示されます。</FONT>
ここからまたサイズ「2」に戻ります。
</BODY>
</HTML>
|
文字のサイズを1段階だけ変える
●<BIG><SMALL>
どれだけ大きくするかは指定できませんが、文字をデフォルトのサイズに対して1段階だけ大きくする、小さくする、というタグもあります。<FONT SIZE="+1"><FONT SIZE="-1">と同じ結果になります。オプションタグではないのでFONT SIZE="n"で指定するより入力は少なくてすみます（笑）。
<BIG>1段階大きな文字</BIG>
<SMALL>1段階小さな文字</SMALL>
デフォルトが「3」なら<BIG>は「4」で、<SMALL>は「2」で表示されます。
|
|
|
<HTML>
<HEAD>
<TITLE>ようこそ！Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
ここに書かれた文字はデフォルトのサイズ「3」です。
<BIG>サイズ4になります</BIG>
<SMALL>サイズ2になります</SMALL>
ここからまたサイズ「3」に戻ります。
</BODY>
</HTML>
|
