図1 インターネットの資源とハイパーメディア
共通科目情報処理（上級）、インターネットの仕組み、2003年01月10日
電子・情報工学系
新城 靖
<yas@is.tsukuba.ac.jp>
このページは、次の URL にあります。
http://www.hlla.is.tsukuba.ac.jp/~yas/ipe/taiiku-kougi-2002/2003-01-10
あるいは、次のページから手繰っていくこともできます。
http://www.hlla.is.tsukuba.ac.jp/~yas/ipe/
http://www.hlla.is.tsukuba.ac.jp/~yas/index-j.html
http://www.ipe.tsukuba.ac.jp/~yshinjo/
WWW (World Wide Web) は、ハイパーメディア（ハイパーテキスト） という概念に基づい作られている。
ハイパーテキスト(hypertext)とは、内部に他のテキストへの「参照 (reference)」が埋め込まれているテキスト（文書、文字だけから構成される データ）である。ハイパーテキストという仕組みを使えば、テキストのある部 分から、関連している情報を含んでいるテキストのある部分を引き出すことが 簡単になる。ハイパーテキストを拡張し、テキスト・データだけでなく、音声や画像などの データを扱えるようにしたものを、ハイパーメディア(hypermedia)という。 World Wide Web は、ハイパーメディアに基づいて 作られている情報提示のための仕組みである。
ハイパーメディアやハイパーテキストのデータを作成するためには、次の２つ の事が必要になる。
言語の分類
WWW では、マークアップ言語として HTML (HyperText Markup Language)と呼 ばれている言語が使われている。
マークアップ言語でマークを付ける時の方法としては、テキストに タグ(tag),たぐ)(名札の意味) を埋め込む。
たとえば日本語の普通の文書では、括弧「」で括れば誰かの発言を意味する。 これは括弧"「" と "」" の間のテキストに誰かの発言という意味のマークが 付けられていることを意味する。
HTML や SGML では、「<」 と 「>」で括られた範囲がタ グになる。タグには、「<name>」という形式と 「</name>」という形式の２つの種類があり、前者を 開始タグ 後者を 終了タグ とう。開始タグと終了タグに囲まれた部分が、マークが付けされたテキ ストになる。
ハイパーリンクを実現するためのマークアップ言語には、次の２つの機能が必 要になる。
http://www.ntt.co.jp/SQUARE/index-j.html
http
www.ntt.co.jp
/SQUARE/index-j.html
.html は、その資源がHTML で書かれている事を表わしている。
エラーが出た時には、木構造で親を探してみる。
URL は、一般に、次のような形式をしている。
scheme:scheme-specific-part
scheme とは、「データを取ってくるための仕組」である。
普通は、インターネットの通信プロトコル(
http,ftp,telnet,gopher,wais
など)が来ることが多いが、そうではない( file,
mailto )こともある。
scheme-specific-partは、各schemeごとに
形式が違う。インターネットで使われるものは、次のような//
から始まるものである。
//host/pathname
これは、次の一般形の一部が省略されたものである。
//user:password@host:port/pathname
各々は、次のような意味になる。
user
password
host
port
schemeで標準のものと違うときに指定
できる。
pathname
/。
userやpassword を
指定する時には、@が必要である。
いくつか、URL の例を示す。
---------------------------------------------------------------------- ftp://host1.is.tsukuba.ac.jp/dir1/file1 「host1.is.tsukuba.ac.jp」で指定されたホストに ftp で接続する。 ユーザ名は anonymous 。「dir1/file1」のファイルを get する。 http://host1.is.tsukuba.ac.jp/dir1/dir2/file1 host1 へ HTTP で接続し、/dir1/dir2/file1 を GET する。 http://host1.is.tsukuba.ac.jp:8080/dir1/dir2/file1 上とほぼ同じ。ポート番号として標準の 80 ではなく、指定された 8080 が使われる。 http://host1.is.tsukuba.ac.jp/path1?pattern 「?」に続けて、「pattern」を書く形式もある。多くの場合 「/path1」に対応したプログラムが実行され、「pattern」がその引数となる。 gopher://host1.is.tsukuba.ac.jp/selector gopher://host1.is.tsukuba.ac.jp/selector%09search gopher で接続する。「selector」と「search」は、gopher で使われるパラメタ。 「%09」は、タブ。 mailto:who@is.tsukuba.ac.jp 電子メール・アドレス news:fj.comp.lang.c ネットワーク・ニュースのニュース・グループ news:<19990401.1111@is.tsukuba.ac.jp> ネットワーク・ニュースの１つの記事。コロン「:」以降は、 記事のメッセージ識別子。 nntp://host1.is.tsukuba.ac.jp/fj.comp.lang.c/100 ネットワーク・ニュースの１つの記事。//以下は、NNTPサーバのホスト名。 fj.comp.lang.c は、ニュース・グループの名前の例。最後の数字は、記事番号。 telnet://who:password@host1.is.tsukuba.ac.jp/ telnet で接続する。「who」は、ログイン名、「password」は、パスワード、 「@」以降は、ホスト名。 wais://host1.is.tsukuba.ac.jp/database wais で接続する。「database」は、wais で使われる オプション。 wais://host1.is.tsukuba.ac.jp/datagase?keyword 上と同じ。検索のための「keyword」まで渡す。 wais://host1.is.tsukuba.ac.jp/datagase/wtype/wpath WAIS で、検索結果のドキュメントを指定するために使われる。 file:/dir1/file1 同一ホスト上の「/dir1/file1」という名前のファイル。 file://host1.is.tsukuba.ac.jp/dir1/file1 ドメイン名 host1.is.tsukuba.ac.jp を持つリモート・ホスト上の 「/dir1/file1」という名前のファイル。 ----------------------------------------------------------------------
URL には、絶対形式と相対形式がある。 絶対形式(absolute form) とは、に
http:,host,dir/filename がそろっているものである。
相対形式(relative form)
とは、このうち http: や host が省略されたものである。
絶対形式と相対形式は、それぞれ、完全形と短縮形と呼ばれることもある。
例
ある HTML で記述されたデータの URL:
http://host1:port1/dir1/file1.html
データの中の相対形式の URL:
file2.html
絶対形式での意味:
http://host1:port1/dir1/file2.html
WWWで ホーム・ページ(home page) とは、本来は、ある一連の情報にアクセスするために、最初にアクセスされる ことが想定されて作られているページを意味する。
「本来は」、ホーム・ページではない WWW ページも存在する。 現実には、「ホーム・ページ==WWW」という使い方をする人が多い。
「ホームページ」さまざまな用例集 ver. 2002.6.6 by Kuno。 fj.net.words に時々投稿される。
HTML(the HyperText Markup Language) は、WWW で ハイパーメディア データを定義するための マークアップ言語。 HTML は、「本来は」、文書の構造を記述する。
HTML で記述できる文書の構造:
表示の方法:
しかし、現実には、もともと例外だった物理スタイルタグを、ブラウザ・メー カが勝手に拡張・追加するという状況に陥った。この状況を打破するために、 新しい HTML (HTML 4.0) では、「スタイルシート」という考え方の導入した。
スタイルシートとは、 表示の方法（スタイル）に名前を付けて、ドキュメント単位やパラグラフ単位で どのスタイルを使うかを指定できるようにしたもの。 新しいタグを追加することなく、表示の方法を記述することができる。 HTML 4.0 では、物理スタイルタグが、「もう古い(deprecated)」、あるいは、 「使わないことを勧める(discouraged)」とされた。
WWWページを作る目的は、多くの人にメッセージを伝えることである。そうい う意味では、特定のブラウザでしか使えないような機能は、使わないようにす るべきである。表示の方法よりも内容が大事。
HTML による文書は、「<>」で括られたキーワード
(
タグ(tag)
)
が埋め込まれたテキスト・ファイルである。テキスト・ファイルとは、文字デー
タだけが並んでいるファイルで、
テキスト・エディタ
で修正できるものである。
テキストエディタの例:
HTMLのタグの形式:
<TAGNAME>タグの対象テキスト</TAGNAME>
タグには
開始タグ
(/がついていない)と
終了タグ
(/がついている)がる。
開始タグと終了タグの間にタグ付けの対象となるテキストが書かれる。
基本的に開始タグは、見出し、箇条書などの機能を「オン」にし、終了タグは
機能を「オフ」にする働きがある。ただし、<IMG> の
ように組になっていないタグもある。
TAGNAMEには、アルファベット（大文字でも小文字でも
よい）と数字が使われる。
タグには、オプションを設定できるものがある。
<TAGNAME ATTR1=VALUE1 ATTR2=VALUE2>タグの対象テキスト</TAGNAME>
オプションは、開始タグの括弧「<>」の中に、
「属性名=属性値」の形式で記述される。
HTMLの文書の大まかな構造
-------------------------------------------------------------------- <HTML> <HEAD> <TITLE> タイトル </TITLE> </HEAD> <BODY> 本体 </BODY> </HTML> --------------------------------------------------------------------
<HTML>で始まり
</HTML>で終る。
おおきく２つの部分、
<HEAD>,</HEAD> で囲まれた
ヘッダ(header)
と、<BODY>,</BODY> で囲ま
れた
本体(body)
から構成される。
ヘッダの
<TITLE>,</TITLE>で囲まれた部
分は、
タイトル
で、タイトルバーなどに表示される。
ヘッダでは、見出し、文字飾り、ハイパーリンクを使うことができない。
HTMLで記述された文書の本体の構造
--------------------------------------------------------------------
<H1>第１章</H1>
１章の冒頭
<H2>第１節</H2>
１章１節の冒頭
<H3>第１項</H3>
１章１節１項のパラグラフの並び
<H3>第２項</H3>
１章１節２項のパラグラフの並び
<H2>第２節</H2>
１章２節の冒頭
<H3>第１項</H3>
１章２節１項のパラグラフの並び
<H2>第３節</H2>
１章３節の冒頭
<H3>第１項</H3>
１章３節１項のパラグラフの並び
<H1>第２章</H1>
--------------------------------------------------------------------
HTML の文書は、 見出し(heading) と パラグラフ(paragraph) ( 段落 ) の並びから構成されている。 HTML では、見出しとして <H1> から <H6> までが 定義されいる。見出しを使うことで、章の構成を表現することができる。
段付け(indentation) ( 字下げ ) は、説明のために付けたものである。HTMLでは、空白やタブは、単語の区切り として扱われるため、空白やタブによる段付けは無視される。つまり、書き手 が自由に読みやすいように段付けをしてよい。
<H1> から <H3> までの見出しは、 Netscape などのブラウザでは、標準で普通の文字よ り大きな文字で表示さる。しかし、大きな文字で表示させたるために、見 出しの機能を使うのは、本来は、誤りである。 見出しがどのように表示されるかは、ブラウザの種類や設定に依存している。 見出しは、あくまでも章の構成を表わす目的で使う。
見出しと見出しの間には、いくつかのパラグラフを記述する。パラグラフは、
<P>で始まり、</P>で終わる。
ただし、終りの </P>は、HTML ではオプション（付け
ても付けなくてもよい）なので、書かない人も多い。
HTML で リスト(list,並び) とは、 箇条書(item) を作るための機能である。
HTML で扱える箇条書の種類:
UL (Unordered List) 番号無しリスト
OL (Orderd List) 番号付きリスト
DL (Definition List) 定義リスト
例:
HTML記述：
<UL> <LI>日本料理 <LI>中華料理 <LI>韓国料理 <LI>フランス料理 <LI>イタリア料理 </UL>
表示例：
HTML記述：
<OL> <LI>メールリーダを実行する <LI>新着メールを取り込む <LI>新しいメールを書く <LI>新しいメールを送る <LI>メールリーダを終了する </OL>表示例：
HTML記述：
コマンド <DL> <DT> mnews <DD> ネットワーク・ニュースと電子メールを読み書きするプログラム。 <DT> mule <DD> テキスト・エディタの１つ。 <DT> netscape <DD> WWWブラウザ。 <DT> irc <DD> 文字による会議システム。 </DL>
表示例：
コマンド
リストは、 入れ子構造(nest) にすることがでる。リストの中でまたリストを使うことができる。
HTML記述：
料理
<UL>
<LI>日本料理
<UL>
<LI> すし
<LI> さしみ
<LI> そば
<LI> 天ぷら
</UL>
<LI>韓国料理
<UL>
<LI> 海鮮ナベ
<LI> 焼肉
<LI> ジャプチェ
</UL>
</UL>
表示例：
料理
HTML で、<A>と</A> で囲まれ
ている部分を、
アンカ(anchor)
とう。
船の錨（いかり）の矢印を連想
アンカは、ハイパーリンクの始点と終点を表現している。ハイパーリンクの始 点は、リンクの頭(head)、終点は、リンクの尾(tail)ともいうこともある。 HTMLの解説書の中には、始点をリンク、終点をアンカと呼んでいるものもある。
例:
「<A HREF="http://www.tsukuba.ac.jp/index.html">Univ. of Tsukuba </A>
Univ. of Tsukuba」というテキストが、ハイパー
リンクの始点で、
http://www.tsukuba.ac.jp/index.htmlで表わされた資源(ファイル)
が終点。
終点、<A>タグ中のHREF (Hyper
REFerence) という属性によって指定される。
リンクの URL は、相対形式でもよい。
<A HREF="english.html">[English]</A>
「[English]」というテキストが、ハイパーリ
ンクの始点。この記述が URL
http://www.tsukuba.ac.jp/dir/index.htmlの中で使わ
れたとすると、"english.html" という相対形
式の URL は、絶対形式では
http://www.tsukuba.ac.jp/dir/english.htmlとなる。
ハイパーリンクの終点は、同じファイル内、あるいは、別のファイルにあるテ キストのある一部分を差し示すこともできる。そのためには、NAME属性付のア ンカと 破片識別子(fragment identifier) を使う。
<H2><A NAME="boston">Boston</A><H2>
ハイパーリンクの終点は、普通、見出しが使われるが、見出しでなくてもよい。
<A>タグのNAME属性の値
"boston" は、ファイルの中で重複しないように決める。
このハイパーリンクの終点を差し示すためには、同じ文書内の場合、次のよう
に HREF属性として、「#」で
始まる文字列を指定する。
This is New York. That is <A HREF="#boston">Boston </A>.
別のファイルの例:
This is Tsukuba. That is <A HREF="usa.html#boston">Boston</A>.
"usa.html" というファイルの中にある
<A NAME="boston"></A>で作られたアンカへのハイパー
リンク。
WWW でイメージを扱う方法
<A HREF="file.gif"> のよ
うに、HREF 属性としてイメージ・データの URL を指
定する。
<IMG SRC="images/client-server-service.gif" ALT="図? サービスの授受によるクライアントとサーバの定義">
タグ <IMG> がインライン・イメージを張り付
けるという意味である。<IMG> には、終了のタグ
</IMG> はない。
SRC属性では、テキストの途中で展開して表示するイメー
ジの URL を指定する。
ALT属性は、イメージの代わりに表示されるテキストを
指定する。これは、Netscape などのブラウザのオプションとして、
「画像の自動読み込み(Auto Load Images)」がオフに
なっている時にイメージに代わって表示れる。
lynx などのように、イメージが表示できないブラウザにより使われたり、目 の不自由な人がイメージの内容を知る時に使われる。
IMGタグのSRC属性では、絶対形
式のURL使うこともでる。
<IMG SRC="http://www.tsukuba.ac.jp/icons/penguin.gif" ALT="[ペンギンのアイコン]">
インライン・イメージとしてよく使われる画像の形式
.gif)
.jpeg,.jpg)
HTML文書の最後には、普通、
<ADDRESS>,</ADDRESS>タグを使っ
て、その文書の著者の電子メール・アドレスや著者のホーム・ページへのリン
クを書く。これは、このページの内容にきちんと責任を持つことを示している。
HTML記述：
<ADDRESS> who@tsukuba.ac.jp </ADDRESS>表示例：
who@tsukuba.ac.jp
文書内の単語を太字にしたり斜体にしたりする機能を文字飾りとう。
文字飾り使う２種類のタグ
他の文書からの引用(段落単位)を表現するために、HTMLには、
<BLOCKQUOTE>,</BLOCKQUOTE>
というタグが用意されている。これは、よく段付け（字下げ）されて表示される。
引用部分が短い時(テキスト単位)には、<CITE>と
</CITE> で囲む。
多くのブラウザでは、斜体で表示される。
整形済みテキストとは、文字端末(telnet や kterm)に表示されたコンピュー
タの出力である。たとえば、
「コマンドプロンプト」やシェルとの対話の画面の様子をHTMLの文書に張り付
る時に使う。
<PRE></PRE> で該当部分を囲ん
だ中では、空白やタブや改行がそのまま有効になる。
HTML記述：
<PRE>
January 2003
S M Tu W Th F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
</PRE>
January 2003
S M Tu W Th F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
表示例：
January 2003
S M Tu W Th F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
January 2003
S M Tu W Th F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
表(table)を作るために、<PRE></PRE>タグを使う方法
もある。
<
>
&
-------------------------------------------------------------------- 表示 HTML中の記述 元の英単語 -------------------------------------------------------------------- < < less-than > > greater-than & & ampersand --------------------------------------------------------------------
注意: <PRE></PRE>の中でも、
「<」,「>」,
「&」という文字は、解釈される。
HTML で
表(table)
を作るには、
<TABLE><TR><TH><TD>タグを使う。
HTML記述：
<TABLE SUMMARY="制御コード" BORDER> <CAPTION>制御コード</CAPTION> <TR><TH>16進</TH><TH>記号</TH><TH>キー</TH><TH> 説明 </TH> <TR><TD> 0D </TD><TD> \r </TD><TD> ^M </TD><TD> リターン </TD> <TR><TD> 0A </TD><TD> \n </TD><TD> ^J </TD><TD> 改行 </TD> <TR><TD> 09 </TD><TD> \t </TD><TD> ^I </TD><TD> 水平タブ </TD> <TR><TD> 08 </TD><TD> \b </TD><TD> ^H </TD><TD> バックスペース </TD> </TABLE>表示例：
| 16進 | 記号 | キー | 説明 |
|---|---|---|---|
| 0D | \r | ^M | リターン |
| 0A | \n | ^J | 改行 |
| 09 | \t | ^I | 水平タブ |
| 08 | \b | ^H | バックスペース |
複数の枠をつなげることもできる。
HTML記述：
<TABLE SUMMARY="複数の枠を１つの内容で埋める例" BORDER> <CAPTION>10キー</CAPTION> <TR><TD> NL </TD><TD> / </TD><TD> * </TD><TD> - </TD> <TR><TD> 7 </TD><TD> 8 </TD><TD> 9 </TD><TD ROWSPAN="2"> + </TD> <TR><TD> 4 </TD><TD> 5 </TD><TD> 6 </TD> <TR><TD> 1 </TD><TD> 2 </TD><TD> 3 </TD><TD ROWSPAN="2"> Er </TD> <TR><TD COLSPAN="2"> 0 </TD><TD> Del </TD> </TABLE>表示例：
| NL | / | * | - |
| 7 | 8 | 9 | + |
| 4 | 5 | 6 | |
| 1 | 2 | 3 | Er |
| 0 | Del | ||
イメージと同じように、ハイパーリンクの先に音デー
タ（サウンド、音声、音楽を含む）を置くこともできる。
<A HREF="file.au"> のように、
HREF 属性として音データの URL を指定する。
よく使われる音の形式:
.aiff,.aif)
.wav)
<HR>タグを使えば、横線を引くことができる。
字を大きくすることは、HTML の思想では、本来はできない。しかし、字を大
きくするためのタグ<FONT>が使われることがある。
<FONT SIZE=+1>ちょっと大きめ</FONT>この機能は、HTML 4.0 では、「もう古い(deprecated)」とされている。その 代わりに、
<DIV>や<SPAN>で範
囲を区切り、その中のclass属性でスタイルシートを指定する。
HTML で書かれたドキュメントは、ブラウザが自動的に行を折り返して表示し
する。強制的に改行したい時には、<BR> (break)とい
うタグを使う。ただし、見る人によってブラウザのページの大きさが違う
ことを考えて使う必要がある。小さな画面で見ている人にとっては、
<BR>がたくさん入っていると、見づらくなる。
字下げをするには、漢字の空白を打つ方法がある。
<BLOCKQUOTE>,</BLOCKQUOTE>
を使う方法もある。
アンカで、
「<A HREF="mailto:mail-address">」
と指定された場合、
ブラウザは、電子メールを書くためのウィンドウを開く。
ブラウ
ザによっては、このタグは解釈できないので、電子メール・アドレスを書く時
には、普通の目に見える形でも書く。
mailto:を入れ忘れると効かない。
コンピュータのプログラムに含まれている誤りをバグ(bug、虫)という。バグ を取ることをデバッグという。
デバッグ中のものは、サーバに置く必要はない。
HTML で何か書いたページは、サーバに置かなくてもWWW ブラウザで直接開い
て見ることができる。
ファイル(File)メニューで
ブラウザでファイルを開く(Open file)
を選ぶ。
ファイルを書き換えたら、エディタで保存して、再読込(Reload)
ボタンを押す。
書いた文書が画面に現われない時には、<タグ>の
>を書き忘れていないかをチェックする。
漢字の「＞」ではなく、
ASCII
(
直接入力
)
の > である。
終了タグをよく書き忘れる。
</H1>
</H2> </H3> を下記忘れると、
ブラウザに画面に大きな字が並ぶ。
</UL>
</OL>
</DL>
を書き下記忘れると、その場所で段づけがおかしくなる。
インライン・イメージがうまく表示できない時には、
<IMG>の
SRC属性で指定している
ファイル名をチェックする。
同様にリンクがうまく開かない時には、<A>の
HREF属性を調べる。既存のページを差す時には、
まず WWW ブラウザで表示して、そこに現われたものを
コピー＆ペースト(Copy and Paste)
でエディタにもってくる。
~/www/index.html を作ることもで
きるが、気に入ったページを真似して書くことからはじめることもできる。た
だし、著作権には注意する。
WWWページに期待される内容
個人のWWWページの場合には、次のような内容のものが期待される。
ページの末尾に付ける電子メール・アドレスは、重要である。
WWWページに含めないほうがよい情報
参考: 情報化推進委員会情報
１ページの長さには、注意する。WWWのページとしては、適切な長さがある。 長すぎると、遅い回線からアクセスしている人には、応答が悪くる。細かいペー ジに分割しすぎた場合、ページを手繰る操作がわずらわしくなる。
インライン・イメージの大きさや１つのページに張り付ける数にも注意する。
lynx() などのように、イメージが表示できないブラウザを使う人や目の不自
由な人のためにも、インライン・イメージがなくても分かるようなページを作
るとよい。少なくとも、インライン・イメージをクリックしなくても先に進め
るようにし、<IMG>タグには、必ずALT 属性を付ける。
さらに、テキストだけのページを用意すると完璧である。
どんな画面の大きさのブラウザで表示しても大丈夫なページを作るようにする。 文字の大きさを変えている人もいれば、小さな画面で見ている人もいる。
漢字コード ( 教科書186(文字コード)ページ。 ) については、選択可能なら、電子メールと同じく JIS にするとよい。 EUC と Shift-JIS では、自動判定に失敗することがある。
Windows PC のテキスト・エディタでは、多くの場合、Shift-JIS になってし まう。
To: yas@is.tsukuba.ac.jp Subject: [ipe-inet] Report3: WWW Page
注意：自分の ホーム・ページ である必要はない。課題を満たすために、どこからもリンクが張られていない ページを作ってもよい。
締め切りは、2002年1月31日金曜日とする。