Previous page Top page Next page
7.1 今週の目標 7.2 HTMLとは何か 7.3 HTMLファイルの作成 7.4 基本的なHTML要素 7.5 スタイルシート

7.3 HTMLファイルの作成

準備

CNSでは、ホームディレクトリの下のpublic_htmlというディレクトリの下に置かれたファイルだけがWEBに公開されます．まず，このディレクトリをつくります．

% cd
% mkdir public_html

以後はこのディレクトリの下で作業しますので，cdでこのディレクトリの下に移動しておきましょう．

注意
~/public_html のアクセス権は，「その他」に対して読み出しと実行を許可するように設定します．通常は，ディレクトリを作った時点でこの設定になるので，自分で設定する必要はありません．他人が読めないように設定すると，ウェブサーバも読めないので，表示できなくなります． →3.5 ファイルのアクセス権

SFC では，~/public_html というディレクトリを作ると，「個人のホームページ一覧」に，自動的に登録されます．ただし登録されるには少し時間がかかります．詳しくは個人のホームページ一覧への登録と削除の方法を見て下さい．

ウェブページ作成開始

それではとりあえずウェブページを作ってみましょう．
まず始めに，~/public_html の下に index.html という名前のファイルを作ります． ファイルの内容は，以下の例に従って書いてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>My Test Home Page</title>
</head>
<body>
<p>
Hello HTML World!
</p>
<p>
これはHTMLのテストです．
</p>
</body>
</html>

上の内容を保存したら，次にこのファイルを mozilla で見てみます．CNSでの個人のページの URLは以下のように指定します．

http://web.sfc.keio.ac.jp/~ログイン名/パス名

パス名の部分は ~/public_html からの相対パス名(→3.3 ファイルパス)です．例えば~/public_html/index.htmlをウェブで見たいならば，そのURLはhttp://web.sfc.keio.ac.jp/~ログイン名/index.htmlです．

  1. mozilla で[ファイル]→[Navigator ウィンドウ]を実行して，新しいウィンドウを作ってください．
  2. ツールバーの「場所：」の右側に，現在表示されているページの URL があります．ここをマウスでクリックすると，文字が入力できるようになります．現在の URI を消去して，自分のページの URI に書き換えてReturnキー を押します．

http://web.sfc.keio.ac.jp/~t02000tf/index.html

HTML文書の構造

HTML文書には要素の使用方法について細かく規定した規格が3種類あります．W3C推奨の正式な HTML 文書では，文書の一番最初の行に，これから書くHTML文書はその3種類の規格うちのどれに従ったものなのかを宣言することになっています．

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

厳密に従うのは難しいので，授業では2番目のloose.dtdに従った書き方を推奨します．

それぞれの規格による具体的な違いなどは，宣言文の中にあるURLを参照してください．

HTML Validator

自分が作成したHTML文書が，自分が選択した規格にあっているかどうかを自動的に判定してくれるHTML Validation Serviceというサービスが，前ページで紹介したW3CのWebサイトにあります．余力のある人は試しに自分のHTML文書をチェックしてみましょう．

宣言の後に文書本体を書きますが，これは全体が html 要素になっていて， その内容はヘッダ部分を表す head 要素と本文を表す body 要素から構成されています．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  ヘッダ部分
</head>
<body>
  本文
</body>
</html>

このHTML文書のタイトルはヘッダ部分に title 要素によって記入します．具体的には前例で作ったように <title>タグと</title>タグによって挟まれた部分がタイトルになります．HTML 文書には，必ずタイトルを付けます．このタイトルは，ブラウザのウィンドウ一番上に表示されたり，ブックマークの名前などに使われます．文書の一部として表示されるわけではありません．
タイトルには，日本語ならば15文字程度，英語なら4, 5ワード程度までの長さで文書の内容を簡潔に表すものをつけるようにしましょう．

注意注意
ブラウザやウィンドウシステムによっては，日本語のタイトルが表示できない場合があります．

● 練習問題

先ほど作ったHTMLファイルの<p>と</p>の間の部分を自分でいろいろ変えてみてどのように変化するか確認してみましょう．

Previous page   Next page