web サイトをきれいに見せるためには，デザインの統一が重要です．サイトのデザインがページ毎に異なると，見苦しくなります．さらに，すべてのページで同じデザインとなっている方が，デザインを気にしないで内容に集中できます．また，サイトのデザインの変更も容易です．CSS を書き換えで，サイト全体のイメージを変えることができます．

ディレクトリーとファイルについて

パーミッション

WEBサイトのパーミッションは，次のようにします．

ファイルとディレクトリのパーミッション
	Owner			Group			Other
	Read	Write	execute	Read	Write	execute	Read	Write	execute
ディレクトリー	✓	✓	✓	✓		✓	✓		✓
ファイル	✓	✓		✓			✓

ディレクトリー毎，あるいはファイル毎にパーミッションを設定することは簡単です．

$ chmod  755  ディレクトリー
$ chmod  644  ファイル

ディレクトリーに含まれるサブディクとリーやファイルのパーミッションを，一度 (ひとつのコマンドライン) で変更したい場合には，以下のコマンドを使うと良いでしょう．

$ find ディレクトリー -type d -exec chmod 755 '{}' \;
$ find ディレクトリー -type f -exec chmod 644 '{}' \;

ディレクトリーの階層が深い場合に便利です．オプション -exec については，「man find」に詳しく書かれています．その中の「EXAMPLES」に再帰的にパーミッションを変更する方法が書かれています．

HTML文書の構造

基本構造

HTML文書の構造は下の図の通りで，最初に文書型の宣言(DTD:Document Type Definition)があり，タグの<html>と</html>で囲まれているブロックが続く．HTMLの文書の本体である<html>と</html>で囲まれたブロックは，headとbodyに分けられる．これらのブロックの中も，開始タグ(<タグ名>)～終了タグ(</タグ名>)で囲んで，ブロック構造にする．

文書型の宣言は，HTML文書で使われるタグの種類を表す．文書型の宣言が無くても，ブラウザに意図したとおりに表示されることも多いが，きちんと書くべきである．書き方については，後で説明している．

<head>～<\head>には，文書のタイトルや概要，キーワード，作者など文書全体に関する情報を記述する．

<body>～<\body>には，本文を記述する．

文書型の宣言
<html>

<head>

</head>

<body>
      
 文書の本文
      
</body>

</html>

文書型の宣言

HTML 4.01の文書型の宣言は，W3C (World Wide Web Consortium)によて決められた3つがある．strict DTD、Transitional DTD、Frameset DTDである．

strict DTD

Strict DTDは厳格な(strict)DTDと呼ばれるもので，今後，廃止予定のタグが含まれていない文書型の宣言である．ここの研究室の学生諸君がHTML文書を作成する場合には，この文書型を使わなくてはならない．

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional DTD

Transitional DTDは過渡的な(transitional)DTDと呼ばれるものである．今後廃止予定となっているW3C非推奨のタグなどを使う場合の文書型の宣言である．非推奨のタグは，以下の通りである．

非推奨タグ	機能
APPLET	javaアプレットをWebページに挿入する
BASEFONT	フォントの規準を設定する
CENTER	センタリング
DIR	リスト表示
FONT	フォントの詳細設定
ISINDEX	検索用の入力ボックスを表示する
MENU	1行を越えない文字列を表示する
S	打ち消し線を表示する
STRIKE	打ち消し線を表示する
U	文字にアンダーラインをつける．

これらのタグはできるだけ使わないようにして，スタイルシートなどで同様の効果を出せば良い．どうしても使う必要がある場合，以下のように宣言する．

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

<body>～</body>の代わりに<frameset>～<\frameset>を使い，表示領域をフレームに分割するHTML文書型を宣言する．フレームは便利なときもあるが閲覧しづらい時が多いので，ここの研究室の学生諸君はこれを使ってはならない．

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

ヘッド部

キャッシュ

キャッシュを無効にするためには，次のように書く．以下の3つのうちどれかが効果を発揮すれば，キャッシュは無効になるが，ブラウザの対応次第である．

<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Expires" content="0">

この場合でも，画像ファイルはキャッシュに残るので，次のようにする．PHPでは関数time()やmicrotime()をつかえばよい．

<img src="tmp/graph.png?1176525498">

キャッシュに有効期限を設けることもできます．

<meta http-equiv="Expires" content="The, 15 Feb 2018 21:43:54 GMT">
<meta http-equiv="Expires" content="86400">

前者は日時で，後者は期間 [秒数] で指定です．必要に応じて，いずれか一方をしてします．

開発環境

HTML ドキュメント作成

私は GUI を使った開発は嫌いで，Emacs を使っています．これに，web-mode.el を設定すると十分です．文字主体の WEB サイトだからです．プロだったら，これではやっていけないかも ?? 私はアマチュアですので．

デバッグ

実際に出来上がりを見てのデバッグです．google chrome を使うことが多いです．Firefox と Opera でも確認します．インターネットエクスプローラーは，クソなので無視します．

google chrome で HTML ドキュメントを開き，F12を押すと，ページの情報が現れ，デバックの参考になります．この状態で，再読み込みボタン「」を右クリックすると，キャッシュなどが全て消去されて読み込むことができるので，デバッグに便利です．

ページ作成情報

参考資料

水津弘幸, 石井歩, C&R研究所. HTHM+CSS Handbook 2nd Edition. ソフトバンクパブリッシング(株). ISBN 4-7973-2410-4
MITSUE-LINKSのHTML用語集．ちょっとタグを調べるときに，便利なページである．

更新履歴

2008年頃	ページの新規作成
2017年4月9日	「ディレクトリーとファイルについて」を追加
2017年5月21日	キャッシュ関係の情報の追加，開発環境の説明の追加．

WEBページ作成基本

目次

はじめに