Previous page Top page Next page
8.0 情報の発信 8.1 HTML 8.2 自分のウェブページを作る 8.3 ページの整形 8.4 スタイルシート

8.2 自分のウェブページを作る

準備

CNS では，~/public_html というディレクトリの下に置かれたファイルだけがウェブに公開されます．まず，このディレクトリを作ります．

% 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>

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

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

パス名の部分は ~/public_html からの相対パス名(→3.3 ディレクトリ構造)です．例えば~/public_html/index.htmlをウェブで見たいならば，そのURIはhttp://www.sfc.keio.ac.jp/~ログイン名/index.htmlです．

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

http://www.sfc.keio.ac.jp/~t01000tf/index.html

CNS情報公開の準備 P.244参照

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">
CNSさまざまなHTMLタグ:フレーム機能 P.256参照

宣言の後に文書本体を書きますが，これは全体が 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ワード程度までの長さで文書の内容を簡潔に表すものをつけるようにしましょう．

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

W3Cには，自分の書いたHTML文書が宣言した通りの規格にあっているかどうかを validate (評価)してくれるHTML Validation Serviceというものがあります．余裕のある人は試してみましょう．

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