WWW (World Wide Web) & HTML (Hyper Text Mark-up Language) 入門

これから、今後ウェブページ (Web page, 以下、ページ）をつくっていく上での 最低限知っておかなくてはいけないことをまとめておきます。
ちなみに「ホームページ」とは厳密にはブラウザのスタートアップ のページです。そこから派生して、あるウェブサイト（サーバーが動いてるホ ストマシン、と考えてください）の一番上（最初）のページを指し示す場合も あります。 しかし、それ以外のものも含んだ WWW で閲覧可能 なページのことは一般に「ウェブページ」と呼ぶのが本来の言葉の 使い方です補足資料も参照のこと）。（マスコ ミでも混乱して使っていることが多かったですが、最近徐々に誤用が減ってきてい るようにも見受けられます）
例えて言うなら、野球やってる人に向かって全く野球を知らない人が、ベース のことを不思議に思って、「これ、なんて言うの？」とホームベースを指して 尋ねたところ、バッターが「ホームベース」と答えたので、その人は（本塁で はなく一般的な）ベースという意味の言葉だと思ってしまって、一塁でも二塁 でもなんでもベースのことを「ホームベース」と呼んでしまうようになって、 そして、そういう人がどんどん増えてきて今はそっちが多数派になってしまっ て、「ホームベース」という言葉がベースを意味するようになってしまった、 というような違和感を感じています。
さらに、この誤用を省略形にして HP とかいわれると、本来の使い方しか知ら ない人にとっては意味不明になる、ということは是非覚えておいてください。

WWW の基本的仕組み

WWW は（デフォルトで） 80/tcp のポートを使ったサーバー・ クライアント型のデータのやりとりです。
TCP の通信は着本的にサーバー・クライアントの通信になることを再確認して おいてください（後述）。

ちなみにポート番号（銀行の窓口の番号のようなもの、というのは既出。SMTP は25 でした）は設定次第で変更できます。ただ、変更した場合は、他のコン ピュータからはアクセスすることは難しい（世間一般的には80番であって、そ うじゃないことを知る手段がない）です。しかし逆に、実験的にサーバを動か したい時は、80 じゃない番号 (8000 とか 8080 が多いです）をふることで、 関係者以外のアクセスをされにくくするわけです。

(Internet Explorer や Firefox と いった）ブラウザソフトがクライアントとなり、そこから URI (Uniform Resource Indicator) で指定されたサーバー へページを要求すると、それに応じてHTML という言語仕様に のっとったページ送出し、それをブラウザが解釈して表示する、と いうことの繰り返しなわけです。

ちなみに、歴史的なことを言うと… 実は、アプリケーションとしては歴史 が浅く、1991年 に、 CERN (European Organization for Nuclear Research のフランス語の頭文字 = Conseil Europeen pour la Recherche Nucleaire) の ティム・バーナーズ・リー (Tim Bernerds-Lee) によって発明されました。

バーナーズ・リーは、1990年11月に具体化した提案書 "WorldWideWeb: Proposal for a HyperText Project" を提出し、12月に NEXTSTEP上で世界初のWebサーバであるhttpdと世界初のウェブブラウザ・HTML エディタであるWorldWideWebを開発しました。その後、 1991年8月6 日 には「World Wide Web プロジェクトに関する簡単な要約」を ネットニュース（世界規模の掲示板 みたいなもの）に投稿したことで、この日が WWW がインターネット上で利用可 能なサービスとしてデビューした日とされています。同じ日に世界最初のウェ ブサイトhttp://info.cern.ch/ が設立されています。

URI とは、URL (Uniform Resource Locator) と URN (Uniform Resource Name) でなりたっています。つまり、URI とは URL を含む概念であるわけです。これらのうち URN で規定される名前空間はあまり 使うことがないと思いますので、ここでは特に URL について説明します。

URL とは、Locator ということからもわかるように、インター ネットでの場所を表すものです。例えば

http://puffin.hannan-u.ac.jp/lect/index.html

のような形で、この場合 http: がプロトコル名（WWWアクセスの場合はほとんどこれ）、 puffin.hannan-u.ac.jp がドメイン（ホスト）名、 lect/ がディレクトリ名（ Windows でいうフォルダとほぼ同じ）、 index.html が（ページが記述されている）ファイル名です。 サーバーが動いているホスト（計算機）は「Webサイト」と呼ばれ ることもあります。

サーバー・クライアント型とは？

サーバーとはもともと「奉仕する者（？）」ということで、お店にたとえ ましょう。そうすると、クライアントはお客さんということになります。 要するに、まずなんらかの要求をお客さんがして、それに対応したサービ スをお店が提供する、ということの繰り返しによって処理をすすめていく ということです。

具体的に WWW の場合どうなるか、というと、

  1. ブラウザ (Internet Explorer etc.) を立ち上げて、 URL （アドレス） を入力すると、そのブラウザがクライアント（お客）に なって、(http: の場合）その URL に示されてるサーバー（お店）にまず 接続します。
    出前をとるのに電話かけるイメージです。
  2. 接続できたら、ブラウザは URL に示されてるページを送出せよ、という 要求をサーバーに対して出します。例えばトップページを得たい場合には 
    　GET /index.html HTTP/1.0
    のようなメソッドを送出することで実現されています（詳細は略）。
    出前の注文を言う感じです。ちなみに、 HTTP/1.0 は、この通信が HTTP のバージョン 1.0 に従う、という宣言を意味しています。HTTP にはバージョンが1.0, 1.1, 1.2, さらに最新のHTTP/2 もあって、時代によって改良されている、すなわち 微妙に差がある（例えば、 1.1 はバーチャルホストのサポートのため Host: フィールドが必須 、等）のですが、この資料では一番単純な 1.0 をベースにし ます。
  3. そーすると、サーバーは返事 (レスポンス) をします。 その場合、 その 状況（ステータスコード） とともに返します。
    お店で扱ってるものなら出前をもってくし、扱ってないもの（定食屋にイタリ アンを注文したり、みたいなの）なら「すんません、うちおいてません」って 断わる感じです。
  4. ブラウザは、サーバーから返ってきたページ（メッセージ）を HTML の文 法に従って解釈し、画面に表示します。
    出前してもらったのを食べる、ということでしょう。ここで、サーバはHTML 以 外のファイルも返せるので、その場合はもちろん HTML の解釈（レンダリング） はしないことも留意しておいてください。

    WWW

    リンクをはってある場合、そのリンクをクリックされたら、その URI に対して 上の動作を繰り返します。また、画像が含まれている場合も、上と同様のやり とりによって画像ファイルを取り込みます

☆メールの時と同様、ブラウザを使わずに自分自身がブラウザになったつもりで HTTP を語ると理解が深まると思います。具体的にはサーバに 

telnet ＜メールサーバ＞ http (あるいは80)
と接続することで試せます。詳細は略しますが、例えば liweb.hannan-u.ac.jp にログインしていて、やりとりするとしたら、以下のようになります。 赤字が人（私）の入力した ところで、 青はコメントです。 

%  telnet puffin.hannan-u.ac.jp http
Trying 150.9.160.10...
Connected to puffin.hannan-u.ac.jp.
Escape character is '^]'.
GET /lect/netp/index.html HTTP/1.0

 …改行を２ついれる＝空行でメソッドの終了
HTTP/1.1 200 OK
Date: Fri, 27 May 2011 01:16:13 GMT
Server: Apache/2.2.14 (Ubuntu)
Last-Modified: Thu, 26 May 2011 23:57:10 GMT
ETag: "542378-146f-4a4369457a2bc"
Accept-Ranges: bytes
Content-Length: 5231
Vary: Accept-Encoding
Connection: close
Content-Type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-2022-jp">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<LINK REL="stylesheet" TYPE="text/css" HREF="/lect/lect.css">
<title>Network</title>
</head>
<style>
 ...(以下略)

HTML ってどんなの？

（例外もありますが）一般に、WWW で送出されるページは HTML で記 述された テキストファイルの形で保持されています。よって、「ウェ ブページを作る」とは、
  1. 自分の表現したい内容を HTML で記述し
  2. それをサーバーの然るべき場所においておく
という作業が必要となります。

では、HTML とは何かということで、とりあえず、一番簡単なページを 書いてみます。 

<html>
<head>
<title> This is a very simple HTML page.</title>
</head>
<body>
これは、非常に簡単なページです。前田としゆき
</body>
</html>
上のように、<> でかこまれたもの（タグと呼びます）で文章 のそれぞれに、意味をもたせています。このような形式の一般的なものには SGML というものがあります。ここでは詳細は省略しますが、文章の 構造を明示的に表現したもの、ということだけ覚えておいてくださ い。

上をみても分かるように、タグは 対 (pair) になっていることが 多い（というより、原則は対）です。上の場合では、<html> と </html> とで対になっていて、この文書が HTML 文書であることを表し ています。

ちなみに "/" (slash) のついているほうのタグを 閉じタグ と呼ぶことがあります。
その中には<head> </head> と<body> </body> があり、これらはそれぞれヘッダーと文書の本体がこの中には いっていることを示します。そして、ヘッダーの中にはタイトルが、本体の中 に文書がはいっているわけです。

あと（実際に書く上で）重要なことは、タグは全て （いわゆる）半角文 字 (7bit ASCII) で書かなければいけないということです。 いわゆる全角文字で書くと、それは 文字コードとして別物なの で、タグではなくタグのような記述になっている 単なる文字列とし て扱われます。

ファイルを保存するときには、ファイル名の最後を ".html" にして ください。ほとんどのサーバは .html という拡張子を持つファイル は HTML で書かれているとして扱う、というように初期設定されています。

HTML を書くには？

このように、HTML は文字だけで構成される普通の文字の並び（テキスト）な のです。テキストとはわかりにくいかもしれませんが、例えば MS-Word で作 成される doc ファイルには、フォントの種類の属性とかページ設定情報など が人間の目に直接見えない形でうめこまれていますが、そのような目に見えな いものは無く、フォント属性などもタグを用いて人間に見える形で書かれる、 という意味です。 元にもどって、HTML テキストを書く方法にはいくつかあります。 前者の場合にはHTMLの知識が必要ですし、エディタの操作も面倒な場合が多い のですが、HTML を非常に素直に表現することが可能です。
後者の場合に は HTML の知識がなくても簡単にページを作成できることができますが、一般 にその出力ファイルは冗長なことが多いですし、ある場合には HTML として誤っ た記述を出力することもあります。

この授業では HTML 自体の学習という意味もこめてエディタで作成することと します。

前田としゆき maechan@hannan-u.ac.jp

講義用スタイル
印刷用スタイル （開いてから、ページを再度更新してください）