私のホームページへ - 前の授業へ - 次の授業へ

情報処理IIA（HTML入門）第11回

目次
  1. HTTP
  2. 解析木
  3. SGMLとDTD
  4. 演習11
  5. レポート課題

HTTP

ブラウザの「場所：」入力欄に、例えば http://www.leeds.ac.uk/ と入力しますと、少し待たされた後、イギリスのリーズ大学のホームページが表示されます。 この間に以下のようなことが起こっていることは、前回の授業で説明しました。

  1. ブラウザは、自分の組織のネームサーバに、ドメイン名 www.leeds.ac.uk の名前解決を求める。
  2. 自分の組織のネームサーバは、いくつかのネームサーバを利用して www.leeds.ac.uk のIPアドレスが 129.11.16.23 だと割り出し、それをブラウザに知らせる。
  3. ブラウザは、インターネットの中からIPアドレスが 129.11.16.23 であるコンピュータ（WWWサーバ）を見つける。
  4. いくつかのルータを経由して、ブラウザとこのWWWサーバとの間で必要なデータ通信を行う。
  5. ブラウザは、必要なデータが集まりしだい、段階的にホームページを表示する。

今日の授業では、後半の「ブラウザとWWWサーバの間の通信」と「ホームページの表示」の仕組みに触れます。

HTTP

通信規約をプロトコルとよぶことは前回の授業でも話しました。 HTTP（HyperText Transfer Protocol）とは、ブラウザとWWWサーバの間のプロトコルです。 ここでハイパーテキスト（hypertext）とは、リンク構造を持つテキストのことです。 現在のWWWを考えますと、テキストだけではなく、画像や音声、動画にもリンクが張られていますので、ハイパーメディア（hypermedia）とよんだほうが適切かもしれません。 HTTPとは、ホームページを転送する規約だと考えてください。

HTTPの仕組みは単純です。

  1. ブラウザからWWWサーバへ、URIを表す文字列を転送する。
  2. WWWサーバからブラウザへ、ファイル情報を表す文字列と、（空行と、）指定されたファイルの内容を転送する。

これだけです。 このやり取りを何度か繰り返して、ブラウザはホームページの表示に必要なデータを集めます。

なお、ブラウザへ送られるファイル情報の中では、ファイルの内容型が重要です。 HTML形式のファイルを転送すときには、ファイル情報の中で Content-Type: text/html という文字列が送られますし、JPEG形式の画像のときには、Content-Type: image/jpeg という文字列が送られます。 ブラウザは、受け取ったファイル情報をもとに、テキストファイルの場合、画像ファイルの場合と、適切な処理を行います。

前述の例（http://www.leeds.ac.uk/）ですと、ブラウザとWWWサーバは、おおよそ次のようなやり取りを行います。

  1. ブラウザは、WWWサーバ www.leeds.ac.uk を見つける。
  2. ブラウザはそのWWWサーバに、文字列 GET / を送る。
  3. WWWサーバはブラウザに、Content-Type: text/html などの文字列と、（WWW用に公開するディレクトリの中の）ファイル index.html の内容を転送する。
  4. ブラウザは、届いたファイルをHTML形式と見なし、画像の部分を空けて表示する。
  5. そのHTMLファイルの中には、<img src="s-logo.gif" ...> という画像ファイルの指定があるので、この相対URIを解決し、絶対URI http://www.leeds.ac.uk/s-logo.gif を得る。
  6. ブラウザは、WWWサーバ www.leeds.ac.uk を見つける。
  7. ブラウザはそのWWWサーバに、文字列 GET /s-logo.gif を送る。
  8. WWWサーバはブラウザに、Content-Type: image/gif などの文字列と、（WWW用に公開するディレクトリの中の）ファイル s-logo.gif の内容を転送する。
  9. ブラウザは、届いたファイルをGIF形式の画像と見なし、空けておいた部分にその画像を表示する。
  10. もとのHTMLファイルの中には、<img src="/icons/welc-b.gif" ...> という画像ファイルの指定があるので、この相対URIを解決し、絶対URI http://www.leeds.ac.uk/icons/welc-b.gif を得る。
  11. ...
  12. もとのHTMLファイルに指定されている画像がすべて届いたので、転送を終了する。

CGI

ロボット系検索エンジンでは、検索語を入力しますと、しばらくして検索語に関するホームページが表示されます。 実は、検索語ごとにHTMLファイルがあらかじめ用意されているわけではありません。 検索エンジンのプログラムは、検索語などのデータを受け取りますと、データベースに基づいて検索語に関する情報を集め、その場でHTML形式のテキストを合成し、それをブラウザに転送しているのです。 このようなプログラムは、一般に CGI（Common Gateway Interface）スクリプトとよばれます。

解析木

これまでの説明で、HTMLファイルがネットワークを経由してブラウザに届くまでの仕組みが分かりました。 ブラウザはどのようにして、届いたHTMLファイルを表示しているのでしょうか。

例えば、次のようなHTMLファイルが届いたとします。 

<html>
<head>
<title>File Formats</title>
</head>
<body>
<h1>For Documents</h1>
<ul>
  <li>PostScript</li>
  <li>PDF</li>
</ul>
</body>
</html>

このときブラウザは、おおよそ以下の図で表されるようなデータを発生させます。 

                         HTML
                          |
         +--------+-------+--------+--------+
         |        |                |        |
       <html>    HEAD            BODY    </html>
                  |                | 
    +------+------+                +----+----+----+
    |      |      |                |    |    |    |
  <head> TITLE </head>           <body> H1  UL </body>
           |                            |    |
   +-------+-------+      +------+------+    +---+---+---+
   |       |       |      |      |      |    |   |   |   |
<title> #PCDATA </title> <h1> #PCDATA </h1> <ul> LI LI </ul>
           |                    |                |   |
           |             +------+  +------+------+   +------+------+
           |             |         |      |      |   |      |      |
"File Formats"  "For Documents"  <li> #PCDATA </li> <li> #PCDATA </li>
                                          |                 |
                                          |                 |
                                          |                 |
                                     "PostScript"         "PDF"

そして、このデータに基づいて、文字列などの表示位置を順次計算し、計算が終わったらその位置に文字列などを表示するわけです。

なお、このような図（データ）は解析木（parse tree）とよばれます。 根から反時計回りに葉をたどると、もとのHTMLファイルの内容が得られることに注意してください。

解析木を理解するために、用語を二つ定義します。 まず、<tag>〜</tag> に囲まれた部分は、tag 要素（element）とよばれます。 tag 要素から開始タグと終了タグを取り除いた部分を、その tag 要素の内容（content）とよびます。 例えば、 

<ul>
  <li>PostScript</li>
  <li>PDF</li>
</ul>

は ul 要素で、その内容は二つの li 要素です。 また、はじめの li 要素の内容は、単純な文字列 PostScript です。

tag 要素を表す解析木は、親が名前 tag（見やすいように大文字にしました）、子が開始タグ、内容、終了タグである木です。 上記の例ですと、まず ul 要素の内容が二つの li 要素なので、 

       UL
       |
 +---+-+-+---+
 |   |   |   |
<ul> LI LI </ul>

となり、li 要素の内容がそれぞれ単純な文字列 PostScript, PDF なので、「単純な文字列」を名前 #PCDATA で表すことにしまして、 

                 UL
                 |
 +------+--------+---------+------+
 |      |                  |      |
<ul>    LI                 LI   </ul>
        |                  |
 +------+------+    +------+------+
 |      |      |    |      |      |
<li> #PCDATA </li> <li> #PCDATA </li>
        |                  |
        |                  |
        |                  |
   "PostScript"          "PDF"

となるわけです。

ここで、はじめの巨大な解析木に戻ってみてください。 解析木が、HTML文書の構造をよく反映していることが分かると思います。 テキストにタグを入れることは、解析木で表されるような構造を文書に与えることなのです。

SGMLとDTD

これまでに色々なホームページを作成してきました。 試行錯誤しながらHTMLファイルを編集し、大体思い通りに表示できれば完成といったところでしょうか。 しかし、ちゃんと表示されることと、それがHTMLの規格に合致していることとは別の問題です。 ブラウザは、規格に合っていないHTMLファイルでも、適当に表示してくれるからです。 ここでは、HTMLの規格について知り、より完全なHTMLファイルの作成を目指すことにします。

HTMLの定義は、まずSGML（Standard Generalized Markup Language）から始まります。 これは、マークアップ言語の枠組みを定める仕組みです。 ただし、これは枠組みにすぎませんので、実際のファイルがSGMLに合致するかどうかはなんとも言えません。 枠組みを埋めるのが、DTD（Document Type Definition）です。 これがあってはじめて、実際のファイルが規格に合っているかどうかが判断できます。 HTMLは、SGML、およびHTML用のDTDによって規定される言語なのです。 HTMLファイルが規格に合致することを、正当（valid）であるということにします。

HTML DTDは、主に次のようなことを定めています。

このうち、「どんな要素をそのタグで囲めるか」の部分が分かりにくいと思います。 例えば、<ul> タグに関しては、HTML DTDで 

<!ELEMENT UL - - (LI)+>

と定められています。 これは、「<ul> タグは開始タグも終了タグも省略できない。 囲めるのは、li 要素のひとつ以上の並び。」いう意味です。 したがって、 

...
<ul>
  <li>PostScript</li>
  <li>PDF</li>
  <p>and so on.</p>
</ul>
...

は正当でないということが分かります。

上の例で見たように、DTDは人間にとってあまり読みやすいものではありません。 今日の演習で分かるとおり、ファイルの検証の際にコンピュータが読み込むデータだと思ったほうがよいでしょう。 もちろん、少しずつでも解読していけば、HTMLに対する理解が非常に深まります。

演習11

W3C（World Wide Web Consortium）とは、WWWに関する規格を取りまとめている組織です。 ここのWWWサーバでは、DTDに基づいたHTML文書の検証サービスが行われています。 このサービスを利用して、正当でないHTML文書を修正する演習を行います。

はじめに、端末エミュレータで 

b00a001@Ampere:~% cp ~konishi/WWW/ex11.html WWW/ex11.html

などと入力して、問題となるHTMLファイルをコピーしてください。 このファイルの内容は以下の通りです。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exercise 11</title>
</head>
<body>
<h1>演習11</h2>
<p>
このHTMLファイルは文法的に間違っています。
文法に違反すると、次のようなことが起こります。
</p>
  <li>思ったように表示されない。</li>
  <li>表示するのに時間がかかる。</li>
<p><big>
はやくこのファイルを直してください。
</p></big>
<hr>
</hr>
<p>
連絡は、<a href="mailto:konishi@twcu.ac.jp>小西<a>まで。
</p>
</body>
</html>

次に、ホームページ

http://validator.w3.org/

を開き、入力欄に

http://www.twcu.ac.jp/~b00a001/ex11.html

などと記入して、Validate this pageボタンを押してください。 少し待ちますと、間違いを指摘する大量のメッセージが表示されます。 （間違いが多すぎて、指摘も的外れになっています。）

端末エミュレータで 

b00a001@Ampere:~% xemacs WWW/ex11.html &

などと入力してエディタを起動し、このHTML文書の間違いを直してください。 ブラウザでは、「戻る」ボタンを押しますと検証サービスのページに戻りますので、再びValidate this pageボタンを押して検証してください。 「間違いなし」（No errors found!）というメッセージが出れば、修正完了です。

レポート課題

演習11にしたがって、問題のHTMLファイルを正当なものに修正し、できあがったHTMLファイルのURL/URIを konishi@twcu.ac.jp あてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。

私のホームページへ - 前の授業へ - 次の授業へ
このページの複製は、東京女子大学学内に限り許可します。 このページへのリンクを許可します。
2000年7月6日更新
製作・著作：小西善二郎<konishi@twcu.ac.jp>