③htmlファイルを作ろう
いよいよ、実際にHPの方を作っていきます。
＜初めに＞
HPのページは基本的にhtmlというファイルで構成されています。
これからそれを作っていくわけですが、その前に拡張子を表示させる設定にしておきましょう。
※拡張子：ファイルの種類を表すもの。テキストファイルならtxt。jpegファイルならjpgなど。
windows98の場合
メニュー → 設定 → フォルダオプション → 表示 →
登録されているファイルの拡張子は表示しない、のチェックをはずす
で設定できますので必ず設定しておいてください。
＜htmlファイル作成＞
htmlファイルをこれから作成していきます。
htmlファイルはタグというもので構成されています。
タグを打ちこまなければ改行一つできません。
htmlファイルを作るということは当然タグと言う物をしっている必要があります。
が、
実際は面倒くさいのでHP作成ソフトを使います。
タグのことは忘れてください。（爆）
タグなんてどうでもいいです
HP作成ソフトといわれると、買わなければならないのか？
と思われる方もいるかも知れませんが、
windowsなら、大抵標準でFrontPage Expressというソフトが付いてきます。
（インターネットエクスプローラーとセット）
メニュー → プログラム → Internet Explorer → FrontPage Express
では早速起動させてみてください。
（もしPCに入っていなかった場合はネット上で手に入ると思います。）
＜練習＞
起動させたらワープロみたいな画面が出ると思います。
では練習として簡単なhtmlファイルを作ってみましょう。
使い方はワープロと同じです。
書きたいことを適当に書いてみましょう。
書き終わったら上の赤丸の中のボタンを押して保存します。
保存の画面です。
ページタイトルをつけて、「ファイルとして保存」を選びましょう。
上のOKとかキャンセルとかは使いませんので無視してください。
拡張子はhtml（htm）です。
標準でそうなってるはずなのでそのまま名前つけて保存してください。
うまく保存できましたか？
では、うまくできているかちょっと見てみましょう。
先ほど保存したファイルを開いてみてください。
うまくHPっぽく表示されてますね。
これで完成です。（早
あとは次の章で説明するweb上へのアップをすれば、普通にHPとして機能します。
文字の大きさや色などは上のメニューで簡単に変更できます。
（範囲指定→文字の色や大きさ変更）
＜画像をいれる＞
＜練習＞でやったようにやればワープロ感覚で文字だけの日記は作れると思います。
ただ、せっかくUO日記を書くのだから画像を入れてみましょう。
作り方ですが、まずFrontPageExpressで新しいページを作成し
まずそれを保存します。
日記一話分ごとに画像をフォルダにいれ、同じフォルダに保存すると良いと思います。
保存する際の名前はindex.htm(html)をお勧めします。（index.htmについては後述）
なぜ最初に保存しなければならないかといいますと、
これは画像へのリンクの際の相対パスというものが関係します。
次で説明
では次に実際に画像をいれて見ましょう
上のメニューのこのボタンを押してください。
このような画面がでますね。
参照を押して、日記に載せたい画像を選んでください。
画像が追加されるはずです。
画像が追加されたら右クリックをしてプロパティを見てみましょう
画像のソースというものがあります。
これは、htmlファイルのある場所に対して画像がどの場所にあるか（相対パス）を示しています。
最初にページ保存したのはhtmlファイルの場所を決めるためです。
上は同じフォルダの中にあるtestというフォルダの中のm.JPGという画像にリンクしているということです。
最初に保存しなかった場合、
相対パスではなく絶対パス（相対的な位置ではなく、絶対的な位置）でリンクされますが、
この場合自分のPCの中に直接リンクされるためweb上にアップすると画像が表示されなくなります。
（自分では見れますが・・・）
＜背景などの変更＞
この手順で問題なく画像付き日記が書けると思います。
なれてきたら背景などを変えて自分好みにページをカスタマイズしてみましょう。
適当に右クリックをし、メニューを開いてみてください。
ページのプロパティを選び背景やテキストの色などを変えてみましょう。
背景に画像を使うこともできます。
＜リンク＞
複数のページを作ったらそれをつなげてみましょう。
リンクさせる範囲を指定し、上のメニューのこのボタンを押してみてください。
リンクについてのメニューがでてくるはずです。
自分以外の他のHPにリンクするには、このままURLを直接入力すればOKです。（絶対パス）
自分のHPの他のページにリンクするには
リンクの種類を（その他）にし、相対パス（リンク元のページに対しての場所）を入力します。
面倒くさい場合は
つなげるページを両方ともFrontPageExpressで開きます。
「開いているページ」を開き、リンク先のページを選択します。
選択したら「WWW」を選択してみましょう。
自動的に相対パスが設定されます。
これでリンクはOKです。
注：「開いているページ」でリンク先を選び、「WWW」に戻らずそのままリンク先をOKしてしまうと
ローカル（自分のPCの中）にリンクされてしまい、web上にアップしたときに
正常にリンクされなくなってしまいます。
リンクをうまくつかって見やすいページを作りましょう。
（日記一覧のページを作り各ページにリンクするなど。）
<index.htm(html)について>
直接htmlファイルではなくフォルダを指定してリンクすると、
そのフォルダの中のindex.htmが開かれます。
index.htmを指定していない場合はそのフォルダに入っているファイル一覧が表示されます。
トップページなどはindex.htmにしましょう。
フォルダを指定するだけでよいのでURLの短縮になります。
また、ファイルへの不正なアクセスの防止にもなります。