Previous page Top page Next page
5.1 今週の目標 5.2 インターネット 5.3 HTML
5.4 HTMLファイルの作成 5.5 WEBの仕組み 5.6 補）メールの仕組み

5.4 HTMLファイルの作成

準備

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

% cd
% mkdir public_html

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

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

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

ウェブページ作成開始

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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/~t01000tf/index.html

HTML文書の構造

W3C推奨の正式な 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">

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

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

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

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

● 練習問題

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

emacs の yahtml モード

emacs で，ファイル名が .html で終わるファイルを編集する時は，yahtml モードという状態に切り替わります．このモードではタグに色がついたりいろいろとユーザを補完する機能があります．

    yahtmlモードの機能例：
  • C-c l：開始タグと終了タグの挿入．
  • C-c L：リージョンを開始タグと終了タグで囲む．
  • C-c c：タグの変更．
  • C-c k：タグの削除．
  • C-c ;：リージョン内の「<」，「>」 などを「&lt;」，「&gt;」などに変換．
  • C-c :：リージョン内の「&lt;」，「&gt;」などを「<」，「>」 などに変換．
  • M-RET：箇条書き要素内で自動的にを挿入．
Previous page   Next page