さて前項でホームページ用ファイル作成ソフトのことをお話ししました。何を選ぶかは皆さんの自由ですが、その前に何ごとも基本が大切 というわけで、特別なソフトウェア抜きで簡単な HTML ファイルを作ってみましょう。
最初は「何これ、面倒くさそう」と思われるかも知れませんが、ここでは決して複雑なことまで踏み込みませんので、ちょっとつき合ってみて下さいね。
まずはテキストファイルを作成する準備です。Windows の方はメモ帳（Notepad）を、Macintosh の方は SimpleText を起動して下さい。Mac OS X の方は TextEdit を起動して、くどいようですが必ず標準テキスト編集モードにしておいて下さい。既に他のテキストエディタをお使いの方は、それを使っても構いません。
起動したら、まだ何も入力されてない真っ白な画面になっていることを確認して下さい。なってなければ、メニューから "新規作成" を実行しましょう（以後、説明は Windows のメモ帳を想定して書いていますので、他の場合は適当に読み替えて下さい）。
さて、いよいよ入力です。まず、次のように打ち込んで下さい。必ず半角で打つのですよ。以後、タグを打つときは気をつけましょう。
|
<html> </html> |
ここで、良ければいったんメモ帳を閉じて、今作った test.html のアイコンを確かめてみて下さい。何となく、ホームページ用ファイルのアイコンみたいになってませんか？ ダブルクリックしたら、ブラウザで真っ白な画面が開くでしょう。これはもう、内容こそないけど、ホームページ用の HTML ファイルなのです。
確認したら、ブラウザを閉じて、再びメモ帳や SimpleText などで開いて、続きを書きましょう。
さて、HTML 文書には、ヘッダの部分と本文部分があります。
ヘッダの部分には、「ブラウザの画面に表示するわけではないが、このファイルに関する重要な情報」が書き込まれます。例えば、そのファイルを読み込むブラウザに対して通知したい重要な事柄なんか、ここに書き込みます。
本文部分は、文字通り「ブラウザ画面に表示する本文」です。
さて、「ここからここまでがヘッダ」「ここからここまでが本文」というのを伝えるには、それぞれ<head>タグ、<body>タグを使います。先ほどの入力に、以下のようにつけ足して下さい。
|
<html> <head> </head> <body> </body> </html> |
|
<html> <head> <title>テストのページ</title> </head> <body> </body> </html> |
|
<html> <head> <title>テストのページ</title> </head> <body> こんちは！ まだ何もないので、とりあえず <a href="http://www.google.com/intl/ja/">Google</a> にでも行って、他のホームページを探して下さい。 </body> </html> |
|
1.タグには閉じタグのあるものとないものがある。 2.タグは半角で打つ必要がある。 3.HTML 文書は html、head、body の３つのタグを基本とする。 4.<head>タグ内には <title>タグによるタイトルの指定が必須である。 5.ブラウザには <body>タグ内に書かれたものが表示される。 |
上記以外に（たとえ今後 WYGIWYG 型エディタで作業するとしても）是非覚えて頂きたいタグに、<a>と<img>というのがあります。<a>は上にも少し出てきましたが、リンクに関するタグ、<img>は画像に関するタグです。
ただし、これらを説明する時に絶対リンクと相対リンクという概念が必須となりまして、それを理解するためにはホームページの全体構成の観念を把握する必要があるのです。ですから、その点について先にお話ししましょう。
あなたがどこかのサーバーにホームページ用ファイルを置かせてくれるよう手続きをした場合、多くの場合サーバー内にあなた専用のディレクトリが貸し出されます。このディレクトリってのはフォルダと同義語と考えて下さって構いません。
例えばあなたが www.xx.com というサーバーに hoge というユーザー名で申請して受け入れられた場合、そのディレクトリの URL は
http://www.xx.com/hoge/
となる場合が多いのです。www.xx.com サーバー内に置かれた hoge さんのお部屋というような意味ですね。hoge が ~hoge になったりする場合もありますが、そういうサーバーごとの細かな仕様の違いは、略ってことで。
そこであなたは自分の部屋であるディレクトリ内にホームページを構成しようとされるわけですが、この場合、いくつかのサブディレクトリ（ディレクトリ内のディレクトリ）を作るのが普通です（余談ですが筆者がホームページを最初に作った時の無料サーバーはサブディレクトリが作れない仕様で、かなりややこしい思いをしました）。
例えばあなたのホームページに「自己紹介」「映画」「お料理」「リンク集」というコーナーがあったとします。その場合は、
| ひとくちメモ | ||
|
文字コード 基礎タグの話をしてるとき、ちょっと「文字化け」について触れましたね？ 人のホームページを見ていても、たまにこいつに悩まされた経験はあるんじゃないでしょうか？ この「文字化け」について理解するためには、文字コードの概念を把握せねばなりません。 先に、テキストファイルについて語る時、「文字データでのみ構成されたファイル」と言いましたが。文字データといっても、パソコンのハードディスクやメモリの中に「あいうえお」なんて文字が直接刻まれるわけではありませんよね。なんだかんだ言ってもコンピュータが内部的に読み書きできるのは数値だけなんですから、「特定の文字に対して特定の数値の並びを当てはめる（またはその逆）」ということをやっているに過ぎません。 このように文字を表す数値の並びを文字コードと言います。 これが日本語のように全角文字列を扱う場合、規格が統一されてないんです。だから、ブラウザがあるページを読み込む時に、間違って別の規格で読み込むと、文字化けが起きるわけです。例えば "あ" は Shift-JIS という規格では16進数で 82a0（10進数で33440）ですが、EUC という規格では a4a2（10進数で42146）になります。 こうした文字コードの規格にはさまざまなものがありますが、ホームページ作成に使われる日本語の漢字コードは、以下の３つが代表的なものといえます。
もちろん、ホームページを作る上で「今使ってる文字コードはこれだから、この数値がこの文字を表して……」なんて意識する必要はありません。（世の中広いから断言はできませんが）特定の文字コードを暗記してる人なんて皆無に等しいと思えます。言語を扱うソフトウェアならば絶対何らかの文字コードを使ってるわけですから、大切なのは、必要とあらばいま使ってる文字コードは何かが分かって、文字化け対策ができる機能なのです。 HTML ファイルの場合は、<head>タグ内に以下のようなタグを挿入して、そのファイルで使われている文字コードをブラウザに教えることで、文字化けを防ぐことができます（順に、JIS、Shift-JIS、EUC です）。
|
| ひとくちメモ |
|
index.html 上記のようにホームページにおいて、あるディレクトリのデフォルト（初期設定）ファイルは index.html か index.htm と決まってるのが一般的です。ですからディレクトリ名のみを指定した場合はどちらかのファイル（多くの場合は html の方）を探し出して開くのですが……もし、どちらも無かった場合はどうなるのでしょう？ InternetExplorer や Netscape では、下図のようにディレクトリ構造そのものが示されます（つまり、ディレクトリが開きます）。  これはいかにも格好悪いし、セキュリティの面でもあまりよろしくありません。ですから、ホームページを置くディレクトリ内には サブディレクトリであっても 内容は空でもいいから、index.html という名のファイルを置くようにしましょう。 親切なサーバーでは、index.html が無い場合、エラー画面になってディレクトリを開かないでくれるところもあります。その場合でも今後サーバーを引っ越さねばならない場合などを考えて、index.html を作っておくに越したことはありません。 なお、サーバーによっては .htaccess ファイルというのをユーザーが好きに扱うことで、ディレクトリ表示を禁止したり、index.html 以外をデフォルトファイルにすることもできます。ただしこれは、ホームページ運営の上では、中級以上のテクニック。「そういうことも出来る」ぐらいに受け止めておきましょう。 |
