岩瀬順一の「正しい(いわゆる)ホームページ作成法」

タイトルの「正しい」とは、XHTML 1.0 の規格に合っている、 より具体的に言うと Markup Validation Service で合格とされるような(いわゆる)ホームページの書き方、 という意味です。

私はいままでも(いわゆる)ホームページを作成してきましたが、 “一応、Internet Explorer で思ったように表示されればよい” との基準で作っていました。 それを、改めよう、その練習のため、 このページを正しい書き方で書いてみよう、 というのが目的です。

ファイルの冒頭と最後によくわからない行を書くことになりますが、 それは 奥村晴彦 (Haruhiko Okumura) から写しました。 奥村晴彦氏に感謝します。

なお、「ホームページ」の前に「(いわゆる)」をつけているのは、 本来の「ホームページ」とは異なる、 日本での慣用となっている意味で「ホームページ」 ということばを使っているからです。

(いわゆる)ホームページは .html で終わる名前のテキストファイル

(いわゆる)ホームページとは、 .html で終わる名前を持ったテキストファイルにすぎません。 ですから、Windows で言えば「メモ帳」で作成できます。

.html ファイルの作り方

初歩のうちは、一つのフォルダにすべての .html ファイルを置くのがよいでしょう。Windows での、そのやり方を説明します。 (Windows における基本的なフォルダ・ファイル操作は既知と仮定します。)

適当なフォルダを新規に作り、 それを Explorer で開きます。 「Alt+F」→「新規作成」→「テキスト ドキュメント」 で新規のテキストファイルを作成します。 それを、「index.html」という名前に変更します。 拡張子を変更するので確認のためのメッセージが出ますが、 「はい」を押します。 最初のファイル、 すなわち、見る人が最初に見ることになるページは、 この名前にするのが普通です。

そのアイコンをクリック(あるいはダブルクリック)してファイルを開くと、 Internet Explorer の中にそのファイルが表示されますが、いまは空(から)です。

ここで、Internet Explorer の設定を一箇所変えます。 Internet Explorer で、「Alt+T」→「インターネット オプション」 とし、出てきたウィンドウの中から「プログラム」をクリックします。 「HTLM の編集」のところの「HTML エディター」 を「メモ帳」に変え、そのウィンドウの下のほうにある「OK」 を押してそのウィンドウを閉じます。 この操作は一度だけ行なえば OK です。

次に「Alt+F」→「メモ帳 で編集」とすると、 いま Explorer で見ているファイル --- いまの場合は index.html --- がメモ帳で開きます。そこに、いまからいろいろと書き込んでゆきます。

まず、ファイルに次をコピーして貼り付けます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>誰それのページ</title>
</head>
<body>


</body>
</html>

これのほとんどは必ず書くことに決まっているもの、と理解してください。 それぞれの意味は私にはわかりません。 ただし、「誰それのページ」は変えてください。 ここに書いた文字列は(Internet Explorer ならば) タブのところに表示されます。

ここでこのファイルを保存しましょう。 その際、文字コードを、いま最も普通と思われる UTF-8 に変えたいので、メモ帳で 「ファイル」→「上書き保存」ではなく、 「ファイル」→「名前を付けて保存」とし、 「文字コード」を UTF-8 に変更し、「保存」を押します。 さっきまで空だった、同名のファイルがありますので、 「上書きしますか?」と出ますが、「はい」を押します。

(いわゆる)ホームページの中身は、 <body> と </body> の間に書きこんでゆきます。

.html ファイルの本文の書き方(その1)

私は、初めの <body> の次の行に、次を書きます。

<h1>誰それのページ</h1>

すなわち、 <title> と </title> の間に書いたものと同じものを書きます。

空行、 すなわち何も文字が書かれていない行は、 ブラウザには無視されますから、 上で「次の行」と書きましたが、 実際には空行を一つ入れるほうが見やすいと思います。 書いたのち、メモ帳で上書き保存し、Internet Explorer で再読み込み (Ctrl+R または F5)すると、 大きな文字でいま書いたものが表示されます。

<h1> や </h1> はタグと呼ばれるもので、 (いわゆる)ホームページには表示されません。 この<h1> と </h1> は、 この間に書かれた文字列を最も大きな見出しとして表示せよ、 という意味です。 <h2> と </h2>, <h3> と </h3>, ... と数が大きくなるにつれて、より小さな見出しとして表示されます。 (「<h1> と </h1>」の次に「<h2> と </h2>」 をとばして「<h3> と </h3>」を書いてはいけない、 ということはありません。)

本文は、次のように書きます。これを、 <h1> ... </h1> の次にコピー &ペーストし、 上書き保存し、Internet Explorer で再読み込みをしてみてください。 <p></p> で囲まれた部分が一つの段落です。 以下のサンプル自身が、書き方の説明になっていますので、 それも読んでください。

<p>
段落の中で改行しても、
Internet Explorer で見るときには改行はされません。
ですから、適宜、改行を入れましょう。
ブラウザによっては改行が欧文一文字分の空白として表示されることがありますので、
改行するのは句読点のあと、開きカッコの前、閉じカッコの後ろ、
としておくのが無難です。
</p>


<h2>初めに</h2>

<p>
一つ小さな見出しをつけてみました。
本文の書き方は上と同じです。
</p>
<p>
空行は無視されるので、
.html ファイルを書くときに見やすいよう、適宜入れるとよいでしょう。
</p>
<p>
本文中に「岩瀬 順一」のように空白をおくと、
ブラウザ上でも空白になります。
「岩瀬  順一」のように複数の空白を置いても、
表示されるスペースは一つ分だけです。
</p>

これは必須ではありませんが、 次を、最後の </body>, </html> の直前に書くことにしています。 私は、ページの終わりであることと、著者がだれであるかを示すためです。 このページ自身は少し違う書き方をしていますが、 それについてはあとで述べます。 <hr></hr> は仕切りのような横線を表示させるものです。

<hr></hr>
<address>
岩瀬順一 (IWASE Zjuñici)
</address>

ここまでの作業でできあがった index.html は次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>誰それのページ</title>
</head>
<body>

<h1>誰それのページ</h1>

<p>
段落の中で改行しても、
Internet Explorer で見るときには改行はされません。
ですから、適宜、改行を入れましょう。
ブラウザによっては改行が欧文一文字分の空白として表示されることがありますので、
改行するのは句読点のあと、開きカッコの前、閉じカッコの後ろ、
としておくのが無難です。
</p>


<h2>初めに</h2>

<p>
一つ小さな見出しをつけてみました。
本文の書き方は上と同じです。
</p>
<p>
空行は無視されるので、
.html ファイルを書くときに見やすいよう、適宜入れるとよいでしょう。
</p>
<p>
本文中に「岩瀬 順一」のように空白をおくと、
ブラウザ上でも空白になります。
「岩瀬  順一」のように複数の空白を置いても、
表示されるスペースは一つ分だけです。
</p>

<hr></hr>
<address>
岩瀬順一 (IWASE Zjuñici)
</address>
</body>
</html>

見出しと本文だけからなる(いわゆる)ホームページなら、 ここまでの知識で書けます。

この先工事中、迂回路なし


岩瀬順一 (IWASE Zjuñici)