Web サーバの負担を軽減するため、キャンパス内では iplht コマンドを使ってください。

慶應義塾大学の授業以外での無断利用、複製はご遠慮下さい。
Copyright (c) 1999 慶應義塾大学

第10週: WWWホームページを作ろう

以前WWWに関しては，ページを見る(ブラウズする)ことについて勉強しましたが，今回は，ページを自分で作成することについて勉強します．

10. 1 World Wide Web による情報の公開
10. 2 情報を公開するための下準備
10. 3 HTML
10. 4 とりあえず試してみよう
10. 5 HTML の書き方
10. 6 タイトル
10. 7 練習問題
10. 8 改行と改段落
10. 9 見出しをつける
10.10 箇条書きをしてみよう
10.11 表組み
10.12 フォーマット済みテキストの指定
10.13 連絡先を書く
10.14 特殊文字と書体の設定について
10.15 他の情報へリンクを張る
10.16 他の人が書いたページを参考にする
10.17 宿題

10.1 World Wide Web による情報の公開

Webを用いて公開する情報は，世界中のさまざまな人々によって読まれる可能性があります．

他人への中傷や迷惑になる内容，違法行為につながる内容の公開は，当然ですがしてはいけません．
著作権者の許可なく，書籍からスキャンした画像や，CD から録音した音楽を公開するのは，著作権法違反になりますので，してはいけません．
WWWによって公開されている情報も，書籍などと同様に著作権法によって保護される著作物ですから，これらの情報を作者に無許可で自分のページに転載してはいけません．参照が必要なら，そのページへのリンクを作ります．

また，自分の個人情報を公開するときには，十分注意しましょう．住所や電話番号は，何に使われるか分かりません．顔写真が悪戯の材料になる可能性もあります．あまり神経質になる必要はありませんが，そのような危険性があるということは認識してください．

10.2 情報を公開するための下準備

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

% cd % mkdir public_html

注意: ~/public_html のアクセス権は，「その他」に対して読み出しと実行を許可するように設定します．通常は，ディレクトリを作った時点でこの設定になるので，自分で設定する必要はありません．
6.1 ファイルの保護

SFC では，~/public_html というディレクトリを作ると，「個人のホームページ一覧」に，自動的に登録されます．このページに登録されたくない場合は，~/public_html/.hideme というファイルを作ります．

% cd public_html % touch .hideme

touch コマンドで存在しないファイル名を指定すると，内容のないファイルができます．

10.3 HTML

Web で情報を公開するには， HTML(Hyper Text Markup Language)というマークアップ言語を使います．

HTML で作成した文章を表示する場合，そのレイアウトやフォントは web ブラウザによって決まります．ある人は iMac の Netscape から見るかもしれませんし，ある人は Linux の HotJava から見るかもしれません．ブラウザの種類や設定によって，同じ文書でも見た目は違ってきます．HTML で文章を書く際には，今自分が使っているブラウザで見える通りに，全ての人が見えているとは限らないことに注意しましょう．

LaTeX と HTML の特徴を比較すると，次のようになります．

LaTeX HTML

主な用途出版インターネットによる情報配信

出力イメージ常に同じ状況によって変わる

出力品質よいあまりよくない

文章の構造表題，目次，章／節，図表，数式，参考文献リスト，索引などリンク，フレーム，表題，見出し，表など

外部データ EPS 形式で静止画を取り込むことができる動画など，いろいろなデータを取り込むことができる

複数ファイル \input で一つにまとめるリンクする

	LaTeX	HTML
主な用途	出版	インターネットによる情報配信
出力イメージ	常に同じ	状況によって変わる
出力品質	よい	あまりよくない
文章の構造	表題，目次，章／節，図表，数式，参考文献リスト，索引など	リンク，フレーム，表題，見出し，表など
外部データ	EPS 形式で静止画を取り込むことができる	動画など，いろいろなデータを取り込むことができる
複数ファイル	\input で一つにまとめる	リンクする

10.4 とりあえず試してみよう

まず始めに，~/public_html の下に index.html という名前のファイルを作ります．ファイルの内容は，以下の例に従って書いてください．

<HTML> <HEAD> <TITLE>My Test Home Page</TITLE> </HEAD> <BODY> 私は藤沢太郎です． </BODY> </HTML>

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

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

パス名の部分は ~/public_html からの相対パス名ですので，注意してください．

「ファイル」メニューの「Navigator ウィンドウ」をクリックして，新しいウィンドウを作ってください．
ツールバーの「場所：」の右側に，現在表示されているページの URI があります．ここをマウスでクリックすると，文字が入力できるようになります．現在の URI を消去して，次の URI に書き換えてください．ただし， t99000xx のところは自分のログイン名に置き換えます．
http://www.sfc.keio.ac.jp/~t99000xx/index.html
文字を入力すると，「場所：」が「ジャンプ：」に変化します．
Return を押すと，さっき書いたファイルの内容が表示されます．

パス名がディレクトリの場合は，そのディレクトリの中の index.html というファイルを指定したことになります．ですから，上の URI は次のようにも書けます．

http://www.sfc.keio.ac.jp/~t99000xx/

HTML ファイルを mule で編集し，ファイルに保存した後，netscape の「再読込」をクリックすると，新しいファイルの内容が表示されますので，結果を確かめながら編集することができます．

10.5 HTML の書き方

HTML では，文書構造や別の文書へのリンクなどを要素 (element)によって表します．要素は，開始タグ (start tag)，内容，終了タグ(end tag)から出来ています．例えば，本文を表す BODY 要素の開始タグは<BODY>，終了タグは </BODY> です．LaTeX のbegin{...}，end{...}のようなものだと考えて下さい．

要素の中には，終了タグが省略できるものや，内容も終了タグも無いものがあります．詳しくは個別の要素のところで説明します．

開始タグ，終了タグでは，大文字と小文字の区別はされません．つまり，

<title>
<TITLE>
<Title>

の三つは全て同じ意味になります．

開始タグの中に，属性(attribute)の値を書くことができます．どのような属性があるかは，要素によって違います．

HTML の文書は，全体が HTML 要素になっていて，その内容はヘッダ部分を表す HEAD 要素と本文を表す BODY 要素から構成されています．

<HTML> <HEAD> ヘッダ部分 </HEAD> <BODY> 本文 </BODY> </HTML>

10.6 タイトル

HTML 文書には，必ずタイトルを付けます．これは，ブラウザのウィンドウのタイトルや，ブックマークなどに使われます．文書の一部として，他の文章と一緒に表示されるわけではありません．

タイトルは TITLE 要素として，ヘッダ部分に書きます．

<HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY> 本文 </BODY> </HTML>

タイトルには，日本語で15文字程度，英語で4, 5ワード程度の長さで文書の内容を簡潔に表すものをつけるようにしましょう．

10.7 練習問題

先ほど作った文書のタイトルは「My Test Home Page」でした．このタイトルを別のものに変え，netscape の「再読込」ボタンを押すと，ウィンドウの上に表示されている文字が変わるのを確認しなさい．

10.8 改行と改段落

HTML では，改行は空白と同じものとして扱われます．また，空白も単語を区切る意味しか持ちません．ブラウザが表示するときには，元のファイルの改行とは無関係に，そのときのウィンドウの幅に合わせて適当な箇所で改行をします．LaTeXでは，空行(改行を2回続ける)によって新しい段落になりましたが， HTML では改行を何回続けても新しい段落にはなりませんので，注意しましょう．

新しい段落を始めるには，<P>を使います．段落の終了は</P>ですが，省略してもかまいません．

<P>最初の段落です． <P>2番目の段落です．ここは，まだ2番目の段落です． <P>3番目の段落です．

段落にすると，1行空白の行が入りますが，単に改行したい場合には，<BR>を使用します．BR 要素には，終了タグの </BR>はありません．また，<HR>で，区切りの横線を入れることができます． HR 要素にも </HR> はありません．

例えば，以下のような HTML ファイルは，

これは，HTMLの改行のテストです．<BR> もし改行マークをいれないと， HTMLファイルで，改行をしていても無視されます．<BR> また，このように区切り線と改段落を指定すると， <HR> <P>横方向の線と空白の行ができます．

次のように表示されます．

これは，HTMLの改行のテストです．
もし改行マークをいれないと， HTMLファイルで，改行をしていても無視されます．
また，このように区切り線と改段落を指定すると，

横方向の線と空白の行ができます．

10.9 見出しをつける

Webページを見るときに，ただ単に同じ大きさの文字が並んでいるだけでは，どの様な構成になっているか分かりにくいことに加えて，見栄えも良くありません．

大きな文字で見出しがついていれば見る方も見やすい．
書く方も伝えたい情報を効率よく相手に伝えることができる．

では，見出しをつけるにはどの様にしたらよいでしょうか．見出しを付けるには以下のように指定します．

<H1>見出し</H1>

上のように指定すると，

見出し

と，H1 要素の内容の部分が大きく表示され，見出しになります．

レベルの違う見出しを作りたいときは，H1 から H6 の要素を使用します．H の次の数字で見出しの段階を指定することができます．最大の見出しが，H1で，数が増えるに従って小さくなります．

例えば，以下のようなHTMLファイルは，

<H1>これは一番大きな見出しです． </H1> <H2>これは次に大きな見出しです． </H2> <H3>これはその次に大きな見出しです． </H3> <H4>これは小さな見出しです． </H4> <H5>これはもっと小さな見出しです． </H5> <H6>これは一番小さな見出しです． </H6>

次のように表示されます．

これは一番大きな見出しです．

これは次に大きな見出しです．

これはその次に大きな見出しです．

これは小さな見出しです．

これはもっと小さな見出しです．

これは一番小さな見出しです．

注意: フォントの設定によっては，違うレベルの見出しが同じ大きさで表示されることがあります．

この様に何種類かの見出しを使いわけると，文書の構成を分かりやすく，また見やすくすることができます．LaTeX の \chapter や \section を使うのに似ていますが，章番号は自動的に付けてくれません．

10.10 箇条書きをしてみよう

例えば「自分の趣味」について書きたいと思ったとします．その場合，見出しを使って，以下のように書くこともできるでしょう．

<H2>私の趣味</H2> 読書，映画鑑賞，野球観戦

実際は次の様になります．

私の趣味
読書，映画鑑賞，野球観戦
これでも良いのですが，以下のように，それぞれの項目を箇条書きにして列挙したい場合もあります．

私の趣味

読書
映画鑑賞
野球観戦

このようにを箇条書きにしたい場合は，どうすればよいのでしょうか? HTMLでは，「番号無し」，「番号付き」，「説明付き」の3つのスタイルで箇条書きを指定することができます．それぞれ，LaTeX の itemize 環境，enumerate 環境，description 環境に対応します．

番号無し
これは，先ほどの「自分の趣味」を箇条書きにするときに使った方法です．次のように指定します．
<UL> <LI> 項目 <LI> 項目 <LI> 項目 </UL>
UL 要素の中に各項目を LI 要素で書いていきます．LI 要素の終了タグは省略できます．
番号付き
UL 要素の代わりに OL 要素を使うと，各項目の前に番号が付きます．
<OL> <LI>読書 <LI>映画観賞 <LI>野球観戦 </OL>
と指定すると，
読書
映画鑑賞
野球観戦
と，それぞれの項目の前に番号がつきます．
説明付き
説明付きの箇条書きとは，辞書のように，各項目が用語とその説明からなるようなリストのことです．例えば，
<DL> <DT> WWW <DD> World Wide Webの略 <DT> URI <DD> Uniform Resource Identifier の略 </DL>
と入力すると，
WWW
World Wide Webの略
URI
Uniform Resource Identifier の略
と，なります．DL 要素の中に DT 要素と DD 要素を交互に書いていきます．

また，箇条書きは入れ子にして階層構造を持たせることもできます．

<UL> <LI>総合政策学部 <DL> <DT>学部長 <DD>鵜野公郎 <DT>コース <DD> <OL> <LI>政策管理 <LI>社会経営 <LI>国際政策 </OL> </DL> </UL>

10.11 表組み

表を作るときは，TABLE 要素を使います．その中の各行は TR 要素で，行の中の各項目は TD 要素で表します．TD 要素の代わりに TH 要素を使うと，見出しとして中央揃えされます．

<TABLE>
<TR>
<TH></TH>
<TH>学部長</TH>
<TH>コース</TH>
</TR>
<TR>
<TD>総合政策学部</TD>
<TD>鵜野公郎</TD>
<TD>政策管理，社会経営，国際政策</TD>
</TR>
<TR>
<TD>環境情報学部</TD>
<TD>斎藤信男</TD>
<TD>知識情報，人間環境，メディア環境</TD>
</TR>
</TABLE>

	学部長	コース
総合政策学部	鵜野公郎	政策管理，社会経営，国際政策
環境情報学部	斎藤信男	知識情報，人間環境，メディア環境

枠線を付けるためには，TABLE 要素の開始タグに BORDER 属性を書きます．

<TABLE BORDER> <TR> <TH></TH> <TH>学部長</TH> <TH>コース</TH> </TR> <TR> <TD>総合政策学部</TD> <TD>鵜野公郎</TD> <TD>政策管理，社会経営，国際政策</TD> </TR> <TR> <TD>環境情報学部</TD> <TD>斎藤信男</TD> <TD>知識情報，人間環境，メディア環境</TD> </TR> </TABLE>

10.12 フォーマット済みテキストの指定

空白や改行を入力した通りに表示してほしいことがあります．例えば，以下のような HTML ファイルは，

明日，７時から飲み会やります．　　　　│　　↑ 　　　　│　　北　　　　駅　　　　│◎ここ　　　　│

以下のように表示されます．

明日，７時から飲み会やります．　　　　│　　↑ 　　　　│　　北　　　　駅　　　　│◎ここ　　　　│
これではどこに行けばいいのか分かりません．

PRE 要素の内容は，空白，改行もその通りに表示されます．

<PRE> 明日，７時から飲み会やります．　　　　│　　↑ 　　　　│　　北　　　　駅　　　　│◎ここ　　　　│ </PRE>

注意: ASCII 文字と JIS 文字は文字幅が違うので，混在しているとうまく縦方向に揃わないことがあります．

10.13 連絡先を書く

自分が書いた web ページの内容には責任を持たなくてはなりません．ですから，このページを誰が書いたのか分かるように，また，見た人が連絡が取れるようにしておきましょう．一般的には，ページの最後に名前とメールアドレスを書きます．

単に

Taro Keio / t99000xx@sfc.keio.ac.jp

と書いても，アドレスを示すことができますが，ADDRESS 要素を使えば，連絡先であることがはっきり分かります．

<ADDRESS>Taro Keio / t96000tk@sfc.keio.ac.jp</ADDRESS>

Taro Keio / t96000tk@sfc.keio.ac.jp

10.14 特殊文字と書体の設定について

HTMLでは，<と>と&の3つの文字は，特別な意味を持ちます．従って，文書中にそのままでは使用することはできません．この文字を利用したい場合は，以下のように記述します．

<  ⇒ &lt;
>  ⇒ &gt;
&  ⇒ &amp;

HTMLではイタリック(斜体)，ボールド(太字)，等幅フォントの書体の指定が利用できます．

イタリック(斜体)
- <I>text</I>は，textをイタリックにします．
- <EM>text</EM>は，強調するときに使用します．
- <CITE>text</CITE>は，引用の文に対して使用します．
- <DFN>text</DFN>は，定義を示すときなどに使用します．
ボールド(太字)
- <B>text</B>は，textをボールドにします．
- <STRONG>text</STRONG>は，EM よりもっと強調するときに使用します．

10.15 他の情報へリンクを張る

HTMLの特徴の1つとして，「文書中に他の情報へのリンクを持たせることができる」ことがあげられます．他の情報へのリンクは，A 要素で表し，HREF 属性でリンク先の URI を指定します．例えば，SFCのホームページへのリンクを自分のページの中に作る場合は，以下のようにします．

<A HREF="http://www.sfc.keio.ac.jp/">SFCのホームページ</A>

HREF=の後に，リンク先の情報の位置を示す URI をダブルクオーテーションで囲んで指定します．また，A 要素の内容はソースアンカー (source anchor)になり，そこをクリックすると指定された情報に飛ぶようになります．

現在のページと同じ web サーバ上にあるページの URI は，現在のページから相対的に指定することもできます．

<A HREF="ローカルのファイル名">link text</A>

「ローカルのファイル名」には二種類の指定方法があります．

web サーバが起点とするディレクトリからの絶対パス名を指定する方法
<A HREF="/aaa/bbb/ccc.html">link text</A>
CNS では，SFC のホームページのあるディレクトリが起点です．
現在のページのあるディレクトリからの相対パス名を指定する方法
<A HREF="aaa/bbb/ccc.html">link text</A>
自分のホームページは ~/public_html の下に作るので，この方法でリンクすると便利です．

<HTML>
<HEAD>
  <TITLE>title</TITLE>
</HEAD>
<BODY>
これはページの例です．
<UL>
  <LI><A HREF="next.html">同じディレクトリの別のファイル</A>
  <LI><A HREF="/index.html">このサーバのトップへ</A>
  <LI><A HREF="http://www.keio.ac.jp/index.html">
      慶應義塾のホームページ</A>
</UL>
</BODY>
</HTML>

10.16 他の人が書いたページを参考にする

Web ブラウザには表示しているページの HTML のソース(ファイルの中身)自体を見る機能があります． HTML ファイルを書くときの参考にすると良いでしょう．以下の手順で，ソースを見ることができます．

ソースを見たいページを表示します．
「表示」メニューの「ページのソース」をクリックします．
新しいウィンドウが開き，HTML のソースが表示されます．
このウィンドウを閉じるには，ウィンドウの左上をクリックしてメニューを出し，Delete をクリックしてください．

10.17 宿題

自分のホームページを作りなさい．内容は自己紹介，趣味に関することなど何でもかまいません．今日習った機能をできるだけたくさん使ってみましょう．

目次のページへ行く