[目次] [前回] [次回] [重要語索引]

第10週: 自分のホームページを作ろう

10. 1 ウェブによる情報の公開
10. 2 情報を公開するための準備
10. 3 HTML
10. 4 HTML の書き方
10. 5 とりあえず試してみよう
10. 6 emacs の yahtml モード
10. 7 文書の構造
10. 8 タイトル
10. 9 改行と改段落
10.10 練習問題
10.11 見出しをつける
10.12 箇条書き
10.13 表組み
10.14 練習問題
10.15 フォーマット済みテキストの指定
10.16 他の情報へリンクを張る
10.17 他の人が書いたページを参考にする
10.18 宿題
10.19 おまけ

10.1 ウェブによる情報の公開

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

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

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

214ページ

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

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

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

10.3 HTML

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

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

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

10.4 HTML の書き方

217ページ

HTML では，文書構造や別の文書へのリンクなどを要素 (element)によって表します．

例えば，本文を表す body 要素の開始タグは<body>，終了タグは </body> です．LaTeX の\begin{...}，\end{...}のようなものだと考えて下さい．

「<」，「>」 などは，特別な意味を持っているので，そのまま表示することはできません．このような記号を表示させたい時は，次のように書きます．

< &lt;
> &gt;
& &amp;
" &quot;

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

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

<html>
<head>
  <title>My Test Home Page</title>
</head>
<body>
<p>
私は藤沢太郎です．
</p>
</body>
</html>

次にこのファイルを netscape で見てみます． CNS では，個人のページの URL は以下のように指定します． 9.12 ウェブの仕組み 

http://www.sfc.keio.ac.jp/~ログイン名/パス名
パス名の部分は ~/public_html からの相対パス名です． 3.7 ファイルのパス名
  1. netscape の[ファイル]→[Navigator ウィンドウ]を実行して，新しいウィンドウを作ってください．
  2. ツールバーの「場所：」の右側に，現在表示されているページの URL があります．ここをマウスでクリックすると，文字が入力できるようになります．現在の URL を消去して，次の URL に書き換えてください．ただし， t00999xx のところは自分のログイン名に置き換えます． 
    http://www.sfc.keio.ac.jp/~t00999xx/index.html
    文字を入力すると，「場所：」が「ジャンプ：」に変化します．
  3. RET を押すと，さっき書いたファイルの内容が表示されます．

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

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

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

10.6 emacs の yahtml モード

emacs で，ファイル名が .html で終わるファイルを編集する時は，やてふモードによく似た yahtml モードになります．8.2 やてふによる制御語の入力

[yahtml]でタグの挿入ができる他に次のような機能があります．

10.7 文書の構造

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

<html>
<head>
  ヘッダ部分
</head>
<body>
  本文
</body>
</html>

注意: 正式な HTML 文書では，文書の先頭（html 要素の前）に文書の種類を書くことになっています．普通は次の3種類のどれかを書きます．

ただし，多くのブラウザではこれを省略しても表示に差し支えがありませんので，練習の時はこれを書かないことにします．なお，これ以後説明する機能は，HTML 4.01 規格に従っています．

10.8 タイトル

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

タイトルは title 要素を使って，ヘッダ部分に書きます． 

<html>
<head>
  <title>タイトル</title>
</head>
<body>
  本文
</body>
</html>

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

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

10.9 改行と改段落

222ページ

HTML では，改行は空白と同じものとして扱われます．また，空白も単語を区切る意味しか持ちません．ブラウザが表示するときには，元のファイルの改行とは無関係に，そのときのウィンドウの幅に合わせて適当な箇所で改行をします．

LaTeXでは，空行(改行だけの行)によって新しい段落になりましたが， HTML では新しい段落にはなりません．HTML では，段落は p 要素で示します． 

<p>最初の段落です．</p>

<p>2番目の段落です．

ここは，まだ2番目の段落です．</p>
<p>3番目の段落です．</p>

段落の中で強制的に改行したい場合には，br 要素を使用します．br 要素は開始タグだけで，内容も終了タグもありません．また，hr 要素で，区切りの横線を入れることができます． hr 要素も開始タグだけです．

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

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

10.10 練習問題

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

10.11 見出しをつける

適切な見出しをつけると，情報を効率よく相手に伝えることができます．見出しには6段階あり，h1 から h6 の要素を使用します．最大の見出しが，h1で，数が増えるに従って小さくなります．LaTeX の \chapter や \section に似ていますが，章番号は自動的に付けてくれません．

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

<h1>これは一番大きな見出しです． </h1>
<h2>これは次に大きな見出しです． </h2>
<h3>これはその次に大きな見出しです． </h3>
<h4>これは小さな見出しです． </h4>
<h5>これはもっと小さな見出しです． </h5>
<h6>これは一番小さな見出しです． </h6>
次のように表示されます． 
これは一番大きな見出しです．


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


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


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


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


これは一番小さな見出しです．
注意: フォントの設定によっては，違うレベルの見出しが同じ大きさで表示されることがあります．あまりいろいろな見出しを多用すると，そのような設定で見ている人には文書の構成が分かりにくくなります．

10.12 箇条書き

HTMLでは，番号無し，番号付き，説明付きの3つのスタイルで箇条書きを指定することができます． それぞれ，LaTeX の itemize 環境，enumerate 環境，description 環境に対応します．

番号無し
ul 要素の中に各項目を li 要素で書いていきます． 
<ul>
<li>読書</li>
<li>映画観賞</li>
<li>野球観戦</li>
</ul>
と指定すると，
  • 読書
  • 映画鑑賞
  • 野球観戦
となります．
番号付き
ul 要素の代わりに ol 要素を使うと，各項目の前に番号が付きます． 
<ol>
<li>読書</li>
<li>映画観賞</li>
<li>野球観戦</li>
</ol>
と指定すると，
  1. 読書
  2. 映画鑑賞
  3. 野球観戦
と，それぞれの項目の前に番号がつきます．
説明付き
説明付きの箇条書きとは， 辞書のように， 各項目が用語とその説明からなるようなリストのことです． dl 要素の中に dt 要素と dd 要素を交互 に書いていきます．例えば， 
<dl>
<dt>WWW</dt>
<dd>World Wide Webの略</dd>
<dt>URI</dt>
<dd>Uniform Resource Identifier の略</dd>
</dl>
と指定すると，
WWW
World Wide Webの略
URI
Uniform Resource Identifier の略
となります．

また，箇条書きは入れ子にして階層構造を持たせることもできます．次のように書くと，どのような表示になるでしょうか． 

<ul>
<li>総合政策学部
  <dl>
  <dt>学部長</dt>
  <dd>鵜野公郎</dd>
  <dt>コース</dt>
  <dd>
    <ol>
    <li>政策管理</li>
    <li>社会経営</li>
    <li>国際政策</li>
    </ol>
  </dd>
  </dl>
</li>
</ul>

10.13 表組み

表を作るときは，table 要素を使います．その中の各行は tr 要素で，行の中の各項目は td 要素で表します．上端や左端に見出しを書きたい場合は，td 要 素の代わりに th 要素を使います． 
<table>
<tr>
<th></th>
<th>学部長</th>
<th>コース</th>
</tr>
<tr>
<th>総合政策学部</th>
<td>鵜野公郎</td>
<td>政策管理，社会経営，国際政策</td>
</tr>
<tr>
<th>環境情報学部</th>
<td>斎藤信男</td>
<td>知識情報，人間環境，メディア環境</td>
</tr>
</table>
学部長 コース
総合政策学部 鵜野公郎 政策管理，社会経営，国際政策
環境情報学部 斎藤信男 知識情報，人間環境，メディア環境

枠線を付けるためには，table 要素の開始タグに border 属性を書きます．値は枠線の太さです． 

<table border="1">
<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.14 練習問題

  1. 第8週の練習問題で LaTeX を使って書いた住所録と同じものを，HTML で書きなさい．

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

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

明日，７時から飲み会やります．

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

pre 要素の内容は，文字幅が一定のフォントを使い，空白・改行もその通りに表示されます． 

<pre>
明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│
</pre>
注意: JIS X0208 文字は，ASCII 文字の2倍の幅であると仮定することが多いのですが，必ずしもそうとは限らないので，混在しているとうまく縦方向に揃わないことがあります． 7.1 文字について

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

HTML ハイパーテキストの一種なので，文書中に他の情報へのリンクを持たせることができます．他の情報へのリンクは a 要素で表し，href 属性の値として，リンク先の情報の位置を示す URL を指定します．例えば，SFCのホームページへのリンクを自分のページの中に作る場合は，以下のようにします． 

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

a 要素の内容をソースアンカー (source anchor)と言い，そこをクリックすると指定された情報に飛ぶ ようになります．

現在のページと同じウェブサーバ上にあるページの URL は，ホスト名などを省略することができます． 

<html>
<head>
  <title>example</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.17 他の人が書いたページを参考にする

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

  1. ソースを見たいページを表示します．
  2. [表示]→[ページのソース]を実行します．
  3. 新しいウィンドウが開き，ソースが表示されます．
  4. このウィンドウを閉じるには，ウィンドウの左上隅をクリックしてメニューを出し，[Delete] を実行してください．

10.18 宿題

  1. ~/public_html/index.html に，自分のホームページを作りなさい．内容は自己紹介，趣味に関することなど何でもかまいません．

10.19 おまけ

通常，ウェブページはすべての人に公開されていますが，内容によっては特定の人だけに見せたいことがあります．そのため，ウェブサーバにはアクセスを制限する機能がついています．詳しくは CNS ガイドを参照して下さい．

[目次] [前回] [次回] [重要語索引]

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