１．１ 必要なもの
- 心構え
- Java を勉強しよう、CGI て何だ、と悩んでいないで、「ホームページ作りは簡単だ！すぐ始めよう。」と考えて下さい。先ず、自分のパソコンの中にホームページを作って、「楽しかったあの旅行の思い出を、写真と一緒に記録して置こう。」と考えましょう。
- キーボードでの日本語入力ができれば十分です。
- ソフト
- 特別なソフトは不要です。Windowsに付属の「メモ帳」と「インターネットエクスプローラ」があれば十分です。
- ホームページ作成ソフトはＨＴＭＬを理解してから使うようにしましょう。
- 基礎知識：ファイルとフォルダ
- パソコンで扱うソフト（ホームページもソフトです）は全てファイルで構成されていて、ファイルを整理するためのフォルダに入っていることを理解して下さい。
- ファイルについてもう少し詳しく知りたい方はここをクリックして下さい。
１．２ ホームページ用のフォルダを作る
ホームページを構成するファイルを保存するために、パソコンのハードディスクの中に、ホームページ用のフォルダを作って管理し易くします。フォルダの名前はあなたの好きな名前でかまいませんが、ここでは homepage としておきます。
フォルダの作り方はここを見て下さい。
注意事項
- フォルダやファイルの名前は半角英数字小文字を使いましょう。
- 日本語は使わない方が良いでしょう。
- 英字は大文字と小文字が区別されるので注意しましょう。
１．３ ＨＴＭＬファイルを作る
１．３．１ ＨＴＭＬの構造
ＨＴＭＬファイルの実態はテキストファイルです。従って、メモ帳で作成することが出来ます。そして、表示方法などを指定する「タグ」と呼ばれるものと、その表示方法に従って表示される「文章」によって構成されています。
画像などは別のファイルに用意し、「タグ」によって必要な個所に呼び出して表示します。
「タグ」は半角の < と > によって囲みます。「文章」は普通の日本語ですが、改行は<BR>というタグによって行います。なお、半角のカナは使わない方がいいようです。
｢タグ」は通常、開始と終了がありその間に効力がおよびます。終了タグは / がついたものです。
１．３．２ 「index.html」を作る
それでは、ホームページの最初のページである「index.html」ファイルを作りましょう。下記の<HTML>から</HTML>までをメモ帳で入力し、第１章で作成した c:\homepage フォルダに、index.htmlという名前で保存します。（
日本語以外は全て半角英数字記号です。半角英数字記号は「直接入力」モードで入力するようにしましょう。）
<HTML>
<HEAD><TITLE>エムの旅日記</TITLE></HEAD>
<BODY>
エムの旅日記<BR>
これは、私（エム）の旅の記録です。<BR>
◆自己紹介<BR>
‥‥‥‥‥‥‥‥‥‥<BR>
◆Ｘ山への挑戦<BR>
‥‥‥‥‥‥‥‥‥‥<BR>
</BODY>
</HTML>
青色の部分は決まったパターンとして必ず書くようにします。<BODY>〜</BODY>の間に記述された内容がブラウザの画面に表示されます。
<TITLE>〜</TITLE>の間に記述された内容はブラウザの画面には表示されませんが、ブラウザのタイトルバーや履歴に表示されるので必ず書くようにします。
<BODY>〜</BODY>の間に記述した文章はブラウザのウインド幅に応じて折り返して表示されます。ＨＴＭＬファイル上で単に改行してもブラウザでは改行されません。改行させるには<BR>というタグを挿入します。
ブラウザのアドレス部に file:///c:/homepage/index.html と入力すれば作成したＨＴＭＬファイルが表示されます。下のボタンを押したものと同じであればＯＫです。
１．３．３ ページに味付けする
（１）ページに色をつける
<BODY STYLE="background:色１;color:色２">のようにBODYタグのSTYLE属性を指定することで、全体の背景色（色１）と文字の色（色２）を指定できます。
<BODY STYLE="background:blue;color:white">とすれば、全体が青色で文字が白色になります。:（コロン）と;（セミコロン）に注意して下さい。
色の指定方法についてはここを参照して下さい。
（２）文字を修飾する
文字の大きさや色などは、DIVタグやSPANタグでSTYLE指定することで可能です。DIVは行単位で、SPANは文字単位で指定できます。〜の部分が修飾されます。
<DIV STYLE="font-size:文字の大きさ;color:文字の色">〜</DIV>
<SPAN STYLE="font-size:文字の大きさ;color:文字の色">〜</SPAN>
文字の大きさは%で指定しましょう。200%とすれば通常の２倍の大きさになります。（font-sizeを記述しなければ通常の大きさです。）
STYLEの中に、font-weight:boldを追加すると太字に、font-style:italicを追加するとイタリック体になります。（項目を追加する場合は、;（セミコロン）で区切ります。）
<DIV STYLE="text-align:center">〜</DIV>の中に記述されたものは、中央揃えに表示されます。
（３）水平線を引く
<HR>で水平線が引けます。終了タグは有りません。
次の様な属性を指定することで、色々な水平線が引けます。
◆長さ：WIDTH=n nは数値、単位はピクセル、％指定も可（画面に対する）
◆幅 ：SIZE=n 単位はピクセル
◆色 ：COLOR="色"（インターネットエクスプローラのみ）
◆影無し：NOSHADE
（４）index.htmlを書き換える
１．３．２で作成したＨＴＭＬファイルを次の様に書き換えてみましょう。（太字を追加）
<HTML>
<HEAD><TITLE>エムの旅日記</TITLE></HEAD>
<BODY STYLE="background:aqua">
<DIV STYLE="text-align:center">
<SPAN STYLE="font-size:200%;font-style:italic;font-weight:bold">エムの旅日記</SPAN><BR>
<HR COLOR=green SIZE=8 WIDTH=60%>
<SPAN STYLE="color:blue">これは、</SPAN>
<SPAN STYLE="font-size:300%;color:red">私（エム）</SPAN>の旅の記録です。
<HR COLOR=green>
</DIV>
<SPAN STYLE="font-weight:bold">
◆自己紹介<BR>
‥‥‥‥‥‥‥‥‥‥<BR>
◆Ｘ山への挑戦<BR>
‥‥‥‥‥‥‥‥‥‥<BR>
</SPAN>
</BODY>
</HTML>
下のボタンをクリックしてどのように表示されるか確認して下さい。