Webページの作成手順とHTML構文の概要

mizutani@rsch.tuis.ac.jp
参考書『インターネット時代のコンピュータリテラシー』（水谷正大、共立出版）

準備：作業ディレクトリの移動
準備：ファイル.htaccessで文字コードパラメタを指定
Webページの作成手順
HTML文書の構文
ドキュメントタイプについて
Webページの例
Webページでの署名

準備：作業ディレクトリの移動

ディレクトリについて十分な知識がある場合には、わざわざこのようなことを行う必要はないが、その場合にはWebページに関するすべてのファイルがディレクトリpublic_html内になければならないことだけは知っている必要がある。

UNIX環境でWebページを作成するときには、ディレクトリ ~/public_html 内に作業ディレクトリを次のようにして移動しておく方が便利である。

% pwd
% cd public_html
% pwd
% ls

Webページを書くときには、まずindex.htmlという特別な名前のHTMLファイルが必要である。このファイル~/public_html/index.htmlをWebブラウザで見たとき表示されるページを狭義のホームページまたはトップページと呼ぶ。以下では、作成するHTMLファイル名をindex.htmlであるとして作業の仕方を説明する。

準備：ファイル`.htaccess`で文字コードパラメタを指定

HTTPの規定では、WebサーバからWebブラウザへと要求のあったURLページを送信するに当たって、HTMLファイル本体に先立って（それをHTTP ヘッダという）、そのHTML文書の文字コード情報を指定しなければならない決まりになっている。

本学ではWebサーバは Apache をつかっており、Apacheを使ってWebページを公開しようとするユーザは、HTTPヘッダに付与される文字コードパラメータを次のように .htaccessに指定しなければならない。

このファイル.htaccessは、~/public_html内にある文字コードを指定したいHTMLファイルと同じディレクトリになければならない

AddType "text/html; charset=文字コード" html

文字コードの種類としては

日本語EUCのときにはEUC-JP
日本語シフトJISのときにはSHIFT_JIS
日本語JISのときにはISO-2022-JP

を書く。 SHIFT_JISではアンダーバー _ であり、ハイフン-ではないことに注意。

たとえば、本学のLinuxで書いた日本文字コードはデフォルトで日本語EUCである。このとき、~/public_html/.htaccessには次のように書く：
AddType "text/html; charset=EUC-JP" html
ただし、この.htaccessで指定される文字コードパラメタが及ぶ範囲は同じディレクトリにあるすべてのHTMLファイルである。したがって、たとえば、Windowsで書いたHTMLファイル（SHIFT_JIS）が混在しているような場合には、Webブラウザの表示が乱れてしまう（ことがある）。 .htaccessが置かれているディレクトリにあるHTMLファイルの文字コードは指定されたコードで統一するように細心の注意をすること。

Webページの作成手順

トップページとなるファイル~/public_html/index.htmlを作成する場合の手順をまとめておく。

なにはともあれWebブラウザを起動する
作業ディレクトリを~/public_htmlに移動する（必須ではないが、初心者には混乱が少ない）。
ディレクトリpublic_html内でエディタMuleを起動する（必須ではないが、初心者には混乱が少ない）。
% mule index.html & % netscape &
エディタは & をつけて起動していることに注意する。こうすることで複数のプログラムを同時に実行、つまりエディタ Muleを起動しながらWebブラウザを使って作業したり、他の処理を行うことが可能となる。
HTMLファイルindex.htmlを作成・保存してから、先に説明したようにそのファイルの読み取り許可の設定を行う。
UNIX管理者の初期設定やWebサーバーなどの設定によっては何もしなくてもよい場合もあるが、こうしたファイル・ディレクトリ属性の設定はユーザの責任で行うべきである。
% ls % chmod o+r index.html
ここで、o+rはアルファベット小文字のoとプラス記号+と小文字のrである。先に、ディレクトリ~/public_htmlについても同様な措置を行っている。これ以降も、public_html内に作成するすべてのディレクトリとファイルの読みだし許可を設定するものしよう。ディレクトリについては、さらにx（実行許可）も必要である。
Netscape Navigatorに表示されるWebページとして、あらかじめ用意されている東京情報大学にある個人・団体のホームページからリンク先をたどって自分の名前が載っているページの該当文字列をクリックする。そこから、各人が作成しているHTMLファイル~/public_html/index.html（つまり今作成しているファイル）にリンクが張られている。

こして眺めているWebページの内容は、Webサーバを通じてネットワーク経由で送られてきたものであり、ホームディレクトリにあるファイルを指定して読み込んだものではないことに注意しよう。この意味を理解するためには、WebサーバーとWebクライアント（Webブラウザ）との働きを理解していなければならない。
あるいは、WebブラウザにユーザのトップページのURL、たとえば
http://www.edu.tuis.ac.jp/~b98765tj/index.html
を入力する。 ~/public_html/index.htmlが作成されていない段階では、学生リストからリンク文字列を選択したとしても、リンクされるべき目的のファイルindex.htmlが存在しないためにWebブラウザはエラー（Error Not found）を表示する。エディタでindex.html作成して保存すれば、Netscape Navigatorの[Reload]ボタンを押すと、その内容がページとして現われる。

以上のようにして、エディタで書いたHTMLファイル~/public_html/index.htmlをブラウザで眺めるのであるが、思ったようなページ構成になっていないこともある。したがって、思うような案配になるまでエディタでHTMLファイルの内容を修正・保存を繰り返しながら、その結果をWebブラウザで確認する以下のような作業が必要である。

エディタ画面でHTML文書が修正されていても、『それを保存して、ブラウザでもう一度そのファイル内容をreloadするまでは』、ページ内容は更新されないことに注意しよう。

Webページの作成サイクル

HTML文書（ここではindex.html）をエディタで作成・修正し、これを保存する。
Webブラウザで表示されているページ内容を再読み込み（reload:読み込み直し）して、修正結果を確かめる。

HTML文書の構文

HTML文書の一般的書式は次のようである。 index.htmlを始めとするすべてのHTML文書ファイルはこの形式に従っていなければならない。

以下では、 contentの部分に、このファイルが書かれている文字コード

日本語EUCのときには EUC-JP
日本語シフトJISのときには SHIFT_JIS
日本語JISのときには ISO-2022-JP

を書く。SHIFT_JISではアンダーバー _ であり、ハイフン-ではないことに注意。

ただし、<meta>タグ内で文字コードを指定するのはユーザーが要求のあったWebブラウザにHTMLの文字コードを伝えるための補助的な手段であり、Webサーバ側が正しい文字コードをWebブラウザに送り込むのが本来。このためには HTMLファイルが置かれているディレクトリに.htaccessファイルに文字コードを記述するのが正しい方法である。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head> 
<title>ページのタイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta name="author" content="Joho Taro">
</head> 
<body>

    ........
    ここに、ページ内容を書く
    ........

</body>
</head>

1つのHTML文書は、<!DOCTYPE に続く先頭2行でドキュメントタイプを宣言し（半角英数字）、次の <html lang="ja">で始まり</html>で終わっていることや、<head>、<title>や<body>はペアになって使われていることに注意する。このような<....>をタグという。タグはすべて半角英数字で書かねばならない。

HTML文書を書くというは、　　　　　で示された部分、つまり<head>タグ内でタグ<title>と</title>の間にページのタイトルを記入し、<meta>タグに作者名を指定し、<body>と</body>で囲まれた部分に実際のページ本文を書くということである。

ドキュメントタイプについて

HTMLファイルは、まず最初に、使用するHTMLのバージョンを宣言する必要がある。これがHTML文書の構文で示された一般書式の先頭2行目にあるドキュメント宣言で<!DOCTYPE>タグを使って行う。 HTMLの書式はWorld Wide WEb Consortiumによって規格化作業が行われており、詳しくはHyperText Markup Language Home Pageを参照のこと。 HTMLの各バーyジョンで使用されるタグやその属性などはDTD(Document Type Definition)で定義されており、DTDはHTMLのバージョンや、同じバージョンでも使用するタグや属性によっても異なる。

W3Cでは1999年12月24日に HTML 4.01を勧告し、現在これが最新版となっている。 HTML4.01の毒メンとタイプ宣言では次の3つのどれかをHTMLファイルのい先頭で使わねば成らない。これらを変更してはいけないし、宣言したDTDに従ってHTMLファイルを書かねばならない。

HTML4.01のドキュメントタイプ宣言
厳　密(Strict)なドキュメントの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	前の版にあったが非推奨になった機能は削除した版
移　行（Transitional）なドキュメントの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	前の版（HTML3.2）との互換性を持った版
フレームセット(frameset)を使うドキュメントの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	フレームセット機能を使うための版

事情があって厳密では済まされない場合（loose.dtd）を除いて、できる限り厳密（strict）な宣言を使ってHTMLファイルを作成するようにする。

Webページの例

たとえば、~/public_html/index.htmlを次のように書いて保存する：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head> 
<title>情報太郎のページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta name="author" content="Joho Taro">
</head> 
<body>
<h1>浦島田太郎のホームページにようこそ</h1>
<img src="mypaint.gif" alt="My Picture">
このページには楽しい内容が盛りだくさんです。
<ul> 
<li>><a href="profile.html">自己紹介</A></li>
<li>><a href="restraurant.html"> このレストラン</a></li>
<li>><a href="saru-kani.html">サルかに合戦研究</a></li>
</ul> 
今度の休みには、サルかに大学の
<a href="http://www.saru-kani.ac.jp/circle/tanken-bu/">探検部</a>
と一緒に鬼が島に遠征に行きます。
<hr> 
<address>
情報太郎　s01987jt@edu.tuis.ac.jp<br>
東京情報大学 情報システム学科2年
</address>
</body>
</html>

Webページでの署名

東京情報大学のネットワーク利用がWebページを書く場合には、 AUPで既定されているように、例外なく自分で作成するすべてのWebページには署名が必要である。公開するページに対して著作権を宣言すると同時に、その内容に関して責任を持つべきだからである。上の例でもアドレスタグ<address>を使って署名を書いている。

作成するすべてのWebページに最低限必要な事項は次の通りである。

作者の実名と所属
電子メールアドレス

そして、さらに必要なら

ページの作成年月日
リンクに関する取り扱い指示

なども記載しておくとよい。これらの情報はアドレスタグ<address>を使って、たとえば次のように書く：

<address>
情報太郎　s01987jt@edu.tuis.ac.jp<br>
東京情報大学 情報システム学科2年<br>
&copy; All Rights reserved<br>
<br>
このページへのリンクは自由です。
</address>

Webページの作成目次
 オンラインテキスト目次

mizutani@rsch.tuis.ac.jp