サイトの構造

Ⅲ．サイトの構造

ドキュメントファイルとテキストファイル

　まず、ドキュメントファイルとテキストファイルについて説明します。

ドキュメントファイル

　ワープロソフト（ワードやライター等）で作成されたファイルです。内容は文字情報の他に、画像や図表などの情報を含んでいます。作成されたファイルの拡張子は、作成したソフトにより独特の拡張子が付けられます。（例えば、ワードで作成すると、拡張子は doc または docx となる。）　一般に、画像等を含んだチラシ等はドキュメントファイルとして作成します。

テキストファイル（プレーンテキストファイルとも言います。）

　文字情報以外の情報は一切含まないファイルです。文字装飾（文字の大きさ、色、フォント等）情報も一切含みません。作成には、テキストエディタ（テキスト作成ソフトの総称です。メモ帳もそのひとつです）を使います。作成したファイルの拡張子は、テキストエディタと無関係に付けられます。一般的には、拡張子として txt が付けられます。）

テキストファイルの利点

　ドキュメントファイルは、そのドキュメントを作成したソフトでないと閲覧・編集ができません。（例えば、ワードで作成したファイルはワードでしか、閲覧・編集ができません。）テキストファイルは、どのテキストエディタでも閲覧・編集が可能です。（ワープロソフトでの閲覧・編集も可能です。また、ブラウザでの閲覧が可能です。）

実習で作成したサイトの構造

　実習で作成したフォルダ hptest をエクスプローラで開いて下さい。そこには、一つのファイル index.html とひとつのフォルダ index.file があります。
　フォルダ index.file には、ワードで挿入した画像（のコピー）が、（名前は変更されていますが）あります。
　ワードでファイルを 1 つ作成したつもりでしたが、 Web ファイルとして保存することにより、
　　　同時にフォルダが 1 つ作成され、更に、
　　　作成されたフォルダに画像が数枚置かれています。
これが、実習で作成したサイトです。
　実習時にブラウザで開いたファイル index.html は、テキストファイルです。
テキストファイルですから、文字情報しかありません。が、ブラウザでこのファイルを開くとワードで作成した内容が表示されました。文字情報しかないファイルを開いたのに、
　　　文字は装飾され、画像が表示され、リンクまである。

理由は次の通りです：

ファイル index.html には、HTML の規約に従って、ブラウザへの命令：

・次の文字列は、文字サイズ○○、色??、太字で表示しろ　とか、
・フォルダ index.file にある▲▲という画像を表示しろ　とか、
・ ▽▽（ハイパーリンクで設定したURL)にリンクを張れ　とか

が書かれています。
　ファイルの拡張子が html（もしくは、htm ）なので、ブラウザは、文字情報をそのまま表示するのではなく、 HTML の規約に従って解釈し実行します。
それで、文字列は装飾され、画像が表示され、リンクが張られるわけです。

試しに、次の (1) と (2) を行ってみて下さい。

(1) ファイル index.html を名前変更で拡張子を txt に変更し、

1.1．ファイルを右クリック
1.2．メニューの「名前の変更」を左クリック
1.3．枠内に半角文字で index.txt と入力し、Enter キーを押す
1.4．OSから警告が表示されるけど無視して「はい」を左クリック

(2) ブラウザで開いてみて下さい。

2.1．名前変更したファイルを右クリック
2.2．メニューの「プログラムから開く」を左クリック
2.3．サブメニューの「インターネットエクスプローラ」を左クリック

(結果)

　ブラウザは、拡張子 txt のファイルを文字情報そのもののファイルと解釈しますから、呪文のような意味不明の文字列が表示されたと思います。（←ソースコードといいます。）
納得したら（納得しなくても）、再度「名前の変更」で、index.html にして下さい。

ひとつのページは複数のファイルで構成される

作成したサイトと同様、一般に、ひとつのページは複数のファイル：

・拡張子 html のファイル（これはひとつ）
・そのページで使用される画像ファイル（画像の個数分）
・スタイルファイル（html ファイルの中に入れてしまい、ない場合もある。）
・スクリプトファイル（動的ページで必要。）
・音楽とか動画とかがあれば、そのファイル

等で構成されます。それらのファイルの置き場所は自由に決められます。
（フォルダを作成して、幾つかのファイルはそこに置く等。）
一般に、画像ファイルは、画像フォルダであることが分かる名前（例えば、img とか image とか）を付けて、まとめてそこに置きます。

（余談）

　インターネット用のファイル拡張子が htm と html の二種類あるのを不思議に思ったかもしれません。二種類あるなら、何かの違いがあるんではないかと。ありません。歴史的ないきさつからです。
　昔々、まだ MicroSoft（以下、MS と略記）が Windows を開発していなかった時代。当時から、MS は、パーソナルコンピュータ（以下、PCと略記）のオペレーティングシステム（以下、OSと略記）をMS-DOS という名前で売っていました。まだ、PC内の全メモリ容量が、現在と比べてすごく少なかったです。そのため、至る処でメモリの節約をする工夫がされていました。そのうちのひとつとして、「拡張子は３文字以内」がありました。だから、当時のインターネット用ファイルの拡張子は htm でした。
　html は、Hyper Text Markup Language の頭文字を並べたものだけど、やっぱ最後のLはあったほうがいいということで、拡張子が html になりました。けど、MSは、頑なに htm でも使用可能である姿勢を崩さないので、他のブラウザも同調して htm も扱えるようにしています。