World Wide Web の仕組み(1)

共通科目情報処理(講義)、体育専門学群対象、2002年01月11日

                                       電子・情報工学系
                                       新城 靖
                                       <yas@is.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.hlla.is.tsukuba.ac.jp/~yas/ipe/taiiku-kougi-2001/2002-01-11
あるいは、次のページから手繰っていくこともできます。
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/

■今日の重要な話

共通科目「情報処理（実習）」手引き 192ページ。、共通科目「情報処理（実習）」手引き 186(文字コード)ページ。、 IPE_Tebiki_Ref(178)

■ハイパーテキストとハイパーメディア

WWW (World Wide Web) は、ハイパーメディア（ハイパーテキスト）という概念に基づい作られている。

ハイパーテキスト(hypertext)とは、内部に他のテキストへの「参照 (reference)」が埋め込まれているテキスト（文書、文字だけから構成されるデータ）である。ハイパーテキストという仕組みを使えば、テキストのある部分から、関連している情報を含んでいるテキストのある部分を引き出すことが簡単になる。

ハイパーテキストを拡張し、テキスト・データだけでなく、音声や画像などのデータを扱えるようにしたものを、ハイパーメディア(hypermedia)という。 World Wide Web は、ハイパーメディアに基づいて作られている情報提示のための仕組みである。

図1 インターネットの資源とハイパーメディア

ハイパーメディアやハイパーテキストのデータを作成するためには、次の２つの事が必要になる。

差されるデータに印(mark,label)を付ける。
差すデータに、参照を埋め込む。

文書（テキスト）に、「ここは表題」、「ここは箇条書」といった、文書の構造を示す目印（マーク）を付けることをを付けることを、マークアップするという。ハイパーメディアを記述するためには、上の２つのことを支援した、人工の言語を使う。このような言語を、マークアップ言語(markup language)という。

言語の分類

自然言語
- 日本語
- 英語
- 中国語
人工言語
- 数学で使う表現
- 化学式
- コンピュータ言語
  - プログラミング言語（コンピュータのプログラムを作る時に使う言語）
  - スクリプト言語
  - マークアップ言語
    - HTML
    - SGML
    - XML
    - TeX, LaTeX
    - roff

WWW では、マークアップ言語として HTML (HyperText Markup Language)と呼ばれている言語が使われている。

マークアップ言語でマークを付ける時の方法としては、テキストにタグ(tag),たぐ)(名札の意味) を埋め込む。

たとえば日本語の普通の文書では、括弧「」で括れば誰かの発言を意味する。これは括弧"「" と "」" の間のテキストに誰かの発言という意味のマークが付けられていることを意味する。

HTML や SGML では、「<」と「>」で括られた範囲がタグになる。タグには、「<name>」という形式と「</name>」という形式の２つの種類があり、前者を開始タグ後者を終了タグといいます。開始タグと終了タグに囲まれた部分が、マークが付けされたテキストになる。

ハイパーリンクを実現するためのマークアップ言語には、次の２つの機能が必要になる。

データにラベルを付ける（参照の目標となるマークを付ける）。
データにラベルへの参照を埋め込む。

◆HTMLでの表示

WWW ブラウザは、整形された HTML ではなく、整形前の元の HTML (source) を表示する機能がある。

◆URL

HTML では、他のデータへの参照を実現するためにURL (Uniform Resource Locator) という形式を使う。次に、URL の例を示す。

http://www.ntt.co.jp/SQUARE/index-j.html

http: HyperText Transfer Protocol。WWWのデータを保持しているプログラムと、WWWを表示するプログラムの間でデータをやり取りするときの形式を定めた約束。
www.ntt.co.jp: そのデータを持っているコンピュータの名前。
/SQUARE/index-j.html: そのコンピュータの中での資源の名前（ファイルの名前）。最後の .html は、その資源がHTML で書かれている事を表わしている。

◆URL中の２つの木

URL には、２つの木構造の表記方法が混じっている。

木の根が左(ファイル名)
木の根が右(コンピュータの名前)

◆URLを間違えた時

２種類のエラー

Not Found. The requested URL XXX was not found on this server.
Unable to locate the server URL XXX. Please check the server name and try again.

長い URL のどの部分が怪しいかを区別できるようにする。

◆いろいろなURL

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: ユーザ名。ftp や telnet で指定できる。
password: パスワード。ftp や telnet で指定できる。
host: ドメイン形式のホスト名か、ＩＰアドレス（「.」で区切られた４つの１０進数）。
port: ポート番号。schemeで標準のものと違うときに指定できる。
pathname: パス名。UNIXのパス名と同じく、ディレクトリの区切り文字は、 /。

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」という使い方をする人が多い。

■HTML

HTML(the HyperText Markup Language) は、WWW でハイパーメディアデータを定義するためのマークアップ言語。 HTML は、「本来は」、文書の構造を記述する。

HTML で記述できる文書の構造:

ヘッダ（文書の題目）
見出し、章立ての木構造
段落
箇条書
表

HTML では、文書の構造を記述することができるが、「表示の方法」を記述することは、本来はでない。

表示の方法:

文字フォントの種類、大きさ、色
行間
左詰め、中央寄せ、右詰め
肩付き、下付き

ワープロは、紙に印刷した時の、このような表示の方法を設定するためのプログラムである。これに対して、HTML では、もともとの思想では、少数の物理スタイルタグという例外を除いて、表示の方法は、それを表示するプログラム（ブラウザ）が決める。

しかし、現実には、もともと例外だった物理スタイルタグを、ブラウザ・メーカが勝手に拡張・追加するという状況に陥った。この状況を打破するために、新しい HTML (HTML 4.0) では、「スタイルシート」という考え方の導入した。

スタイルシートとは、表示の方法（スタイル）に名前を付けて、ドキュメント単位やパラグラフ単位でどのスタイルを使うかを指定できるようにしたもの。新しいタグを追加することなく、表示の方法を記述することができる。 HTML 4.0 では、物理スタイルタグが、「もう古い(deprecated)」、あるいは、「使わないことを勧める(discouraged)」とされた。

WWWページを作る目的は、多くの人にメッセージを伝えることである。そういう意味では、特定のブラウザでしか使えないような機能は、使わないようにするべきである。表示の方法よりも内容が大事。

◆HTMLの文法とタグ

HTML による文書は、「<>」で括られたキーワード ( タグ(tag) ) が埋め込まれたテキスト・ファイルである。テキスト・ファイルとは、文字データだけが並んでいるファイルで、テキスト・エディタで修正できるものである。

テキストエディタの例:

メモ帳
秀丸エディタ
emacs (mule)
vi

ワープロでも、注意深くテキスト形式で保存すれば、テキスト・エディタの代りになる。

HTMLのタグの形式:

<TAGNAME>タグの対象テキスト</TAGNAME>

タグには開始タグ (/がついていない)と終了タグ (/がついている)がる。

開始タグと終了タグの間にタグ付けの対象となるテキストが書かれる。

基本的に開始タグは、見出し、箇条書などの機能を「オン」にし、終了タグは機能を「オフ」にする働きがある。ただし、<IMG> のように組になっていないタグもある。

TAGNAMEには、アルファベット（大文字でも小文字でもよい）と数字が使われる。

タグには、オプションを設定できるものがある。

<TAGNAME ATTR1=VALUE1 ATTR2=VALUE2>タグの対象テキスト</TAGNAME>

オプションは、開始タグの括弧「<>」の中に、「属性名=属性値」の形式で記述される。

◆HTML文書の構造

HTMLの文書の大まかな構造


--------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>
タイトル
</TITLE>
</HEAD>

<BODY>
本体
</BODY>
</HTML>
--------------------------------------------------------------------

<HTML>で始まり </HTML>で終る。おおきく２つの部分、 <HEAD>,</HEAD> で囲まれたヘッダ(header) と、<BODY>,</BODY> で囲まれた本体(body) から構成される。ヘッダの <TITLE>,</TITLE>で囲まれた部分は、タイトルで、タイトルバーなどに表示される。ヘッダでは、見出し、文字飾り、ハイパーリンクを使うことができない。

◆見出し（heading）

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>

表示例：

コマンド

mnews: ネットワーク・ニュースと電子メールを読み書きするプログラム。
mule: テキスト・エディタの１つ。
netscape: WWWブラウザ。
irc: 文字による会議システム。

リストは、入れ子構造(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

「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 (CompuServe Graphic Image Format)形式(ジフ)(.gif): 普通の圧縮方法(可逆圧縮方法)を使っている。コンピュータで作成したアイコンや図形、いわいる「アニメのセルのようなベタぬり」に適している。256色まで。
JPEG (Joint Photographic Experts Group) 形式(ジェイペグ)(.jpeg,.jpg): 劣化式圧縮方法を使っている。イメージ・スキャナやディジタル・カメラで取り込んだ写真に適している。約1670万色(2^24)まで。

将来は、GIF に変わり PNG (Portable Network Graphics)形式が普及すると期待される。約1670万色(2^24)まで。

◆アドレス

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 2002
 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 2002
 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 2002
 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 2002 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で使えない文字

次の３つの文字は、HTML の中では特別の意味を持つ。

これらの文字を画面に表示させたい時には、次のように記述する。

--------------------------------------------------------------------
表示    HTML中の記述    元の英単語
--------------------------------------------------------------------
<       &lt;            less-than
>       &gt;            greater-than
&       &amp;           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 バックスペース

制御コード
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>

表示例：

10キー
NL / * -
7 8 9 +
4 5 6
1 2 3 Er
0 Del

10キー
NL	/	*	-
7	8	9	+
4	5	6
1	2	3	Er
0	Del

◆音

イメージと同じように、ハイパーリンクの先に音データ（サウンド、音声、音楽を含む）を置くこともできる。 <A HREF="file.au"> のように、 HREF 属性として音データの URL を指定する。

よく使われる音の形式:

μ-law形式(ミューロー)(.au): Sun や NeXT で使われてる形式。モノラル。サンプリング・サイズは、8 ビット。サンプリング・レートは、8KHz。
AIFF(Audio Interchange File Format)(.aiff,.aif): Macintosh や SGI でよく使われている。サンプリング・サイズは、 8ビット/16ビット。サンプリング・レートは、可変。モノラルまたはステレオ。圧縮された形式(AIFF-CまたはAIFC)もある。
Macintosh SND: もともと Macintosh の簡単な警告音用の形式。
Microsoft Windows RIFF WAVE (.wav): もともとWindows用。WAVE では、PCM形式のデータをRIFF (Resource Interchange File Format)で保存したもの。サンプリング・サイズもサンプリング・レートも可変。圧縮方式も可変。
MPEGオーディオ: MPEG (Moving Picture Experts Group)は、ビデオの形式だが、そのうちの音声部分だけを使ったもの。MP3 は、 MPEG Audio Layer-3 の略で、CD 品質なら 1/12 から 1/14 の圧縮が可能。
MIDI (Musical Instrument Digital Interface): MIDI は、楽器をコンピュータに接続する規格。MIDI データは、楽器に送るための音符の情報を含んだもの。実際の楽器に送る変わりにソフトウェア的に演奏させる方法もある。

◆その他

<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) でエディタにもってくる。

インターネットに公開

IPE_Tebiki_Ref(178) 参照。

z:\www\

個人のホーム・ページの URL は、WWWサーバの設定によって違う。筑波大学教育用計算機システムでは、次のようになっている。

http://www.ipe.tsukuba.ac.jp/~user/index.html

userは、自分のユーザ名(ログイン名)を指定する。

最後の index.html は、ホーム・ページを表わすファイル名としてよく利用されるものの１つ。正確には、これは、ディレクトリ名だけが指定された時に使われるファイルの名前である。よって、上の URL は、次のような短い URL でもアクセスできる。

http://www.ipe.tsukuba.ac.jp/~user/

WWW でインターネットに公開するには、WWW 公開用のディレクトリを作る必要がある。伝統的に次のような名前がよく使われる。

~/public_html

筑波大学教育用計算機システムでは、次の通り。

Windows 2000: z:\www\
Unix: ~/www

◆公開用ディレクトリ以下のファイル名とURLの関係

公開用ディレクトリ ~/public_html 以下のファイルの名前とURLの対応関係をまとめておきます。

----------------------------------------------------------------------
Windows ファイル	Unix ファイル名		URL
----------------------------------------------------------------------
z:\www\file1.html	~/www/file1.html	http://hostname/~user/file1.html
z:\www\index.html	~/www/index.html	http://hostname/~user/index.html
z:\www\index.html	~/www/index.html	http://hostname/~user/  (省略形)
z:\www\dir1\file1.html	~/www/dir1/file1.html	http://hostname/~user/dir1/file1.html
z:\www\dir1\index.html	~/www/dir1/index.html	http://hostname/~user/dir1/index.html
z:\www\dir1\index.html	~/www/dir1/index.html	http://hostname/~user/dir1/  (省略形)
----------------------------------------------------------------------
hostname は、www.ipe.tsukuba.ac.jpにする。

◆公開用ディレクトリのモード(Unixでの注意事項)

公開用ディレクトリ ~/www や、それ以下のディレクトリのモードは、 755(rwxr-xr-x) (少なくとも711 (rwx--x--x)) にして、誰からでもアクセスできるようにする。このディレクトリ以下に作るファイルのモードは、644 (rw-r--r--)にする。また、このディレクトリの親ディレクトリ、つまり、ホーム・ディレクトリのモードも、755(少なくとも 711 (rwx--x--x)) にする。これは、WWWサーバが、これらのファイルを読み出すことができるようにするためである。

◆サンプルの利用

WWW ページを作る時には、0 から~/www/index.html を作ることもできるが、気に入ったページを真似して書くことからはじめることもできる。ただし、著作権には注意する。

◆ページの内容

WWWページに期待される内容

独自性(originality)の高い内容、世界中に他に類似のものがないようなもの。
有益な使えるもの。自分自信でも、他の人のページにあるといいなあと思うようなもの。

個人のWWWページの場合には、次のような内容のものが期待される。

自分の名前(漢字がある人は漢字、読み方（平仮名かローマ字）)
電子メール・アドレス
写真
関連情報へのリンク

ページの末尾に付ける電子メール・アドレスは、重要である。

WWWページに含めないほうがよい情報

自宅の住所、生年月日、電話番号。
法律(特に著作権法)を犯しているもの。
他人のプライバシを侵害しているもの。

参考: 情報化推進委員会情報

筑波大学におけるネットワーク利用に関するガイドラインについて
波大学におけるＷｅｂページ取扱い要領について

◆形式

１ページの長さには、注意する。WWWのページとしては、適切な長さがある。長すぎると、遅い回線からアクセスしている人には、応答が悪くる。細かいページに分割しすぎた場合、ページを手繰る操作がわずらわしくなる。

インライン・イメージの大きさや１つのページに張り付ける数にも注意する。 lynx() などのように、イメージが表示できないブラウザを使う人や目の不自由な人のためにも、インライン・イメージがなくても分かるようなページを作るとよい。少なくとも、インライン・イメージをクリックしなくても先に進めるようにし、<IMG>タグには、必ずALT 属性を付ける。さらに、テキストだけのページを用意すると完璧である。

どんな画面の大きさのブラウザで表示しても大丈夫なページを作るようにする。文字の大きさを変えている人もいれば、小さな画面で見ている人もいます。

漢字コード ( 共通科目「情報処理（実習）」手引き 186(文字コード)ページ。 ) については、選択可能なら、電子メールと同じく JIS にするとよい。 EUC と Shift-JIS では、自動判定に失敗することがある。

Windows PC のテキスト・エディタでは、多くの場合、Shift-JIS になってしまう。

■実習

◆課題 HTML による WWW ページの作成

HTML で WWW ページを作成しなさい。次のような情報を含めなさい。

自分の名前(漢字がある人は漢字、読み方（平仮名かローマ字）)
電子メール・アドレス。各ページの末尾に、 <ADDRESS></ADDRESS>タグを使って記述すること。
インライン・イメージ（たとえば自分の写真、MS-Paintで作った絵、 MS-Word で作った絵）。
インターネット上の他人が作ったページへのハイパーリンク（２つ以上）。
自分が作ったHTML文書へのハイパーリンク。たとえば、英語のページなど。

以上の条件を満たす WWW ページを作成したら、その URL を新城に送りなさい。電子メールの宛先と題名は、次のようにすること。


To: yas@is.tsukuba.ac.jp
Subject: [ipe-inet] Report4: WWW Page

締め切りは、2002年2月7日木曜日とする。

■HTML簡易リファレンス・マニュアル

よく使われるHTMLタグ

◆文書の構造

<HTML></HTML>                   HTMLであることの宣言（オプション）
<HEAD></HEAD>                   ヘッダ（本文では表示されない）
<TITLE></TITLE>                 タイトル（タイトルバーに表示される）
<BODY></BODY>                   本体
<ADDRESS></ADDRESS>             ページの作者の電子メール・アドレス。
<H1></H1>                       見出し（heading）。H1からH6まである。
<P></P>                         パラグラフの始まり。終りの</P>はオプション。
<DIV></DIV>			グループ化。複数のパラグラフも可能。alignや
				color属性を設定する時に使われることが多い。
<SPAN></SPAN>			１パラグラフ内のグループ化。
<!-- xxx -->                    コメント、１行以内。

◆ハイパーリンク

<A HREF="file">text</A>      		リンク始点
<A HREF="file#name">text</A>		リンク始点（ファイルの途中）
<A HREF="#name">text</A>	      	リンク始点（同ファイル内の別の箇所）
<A NAME="name">text</A> 		リンク終点

◆インライン・イメージ

<IMG SRC="file.gif" ALT="[text]">         インライン・イメージ

◆リスト（箇条書）

<UL><LI><LI></UL>                       番号無しリスト(黒丸)
<UL TYPE="square"><LI><LI></UL>		番号無しリスト(黒四角)
<UL TYPE="circle"><LI><LI></UL>		番号無しリスト(白丸)
<OL><LI><LI></OL>                       番号付きリスト
<OL TYPE="i"><LI><LI></OL>		番号付きリスト(ローマ数字小文字)
<OL TYPE="a"><LI><LI></OL>		番号付きリスト(アルファベット小文字)
<OL START=数><LI><LI></OL>               番号付きリスト(開始番号付)
<DL><DT>word<DD>desc</DL>               単語wordの説明desc



◆文字飾り（論理スタイル）


<EM></EM>               強調（斜体）
<STRONG></STRONG>       もっと強調（ボールド）
<DFN></DFN>		定義
<CODE></CODE>           コンピュータの出力（クーリエなどの等幅フォント）
<KBD></KBD>             ユーザの打ち込み（クーリエなどの等幅フォント）
<CODE></CODE>		コンピュータの出力（クーリエなどの等幅フォント）
<VAR></VAR>             変数名、実際に打つ時には変える部分（斜体）
<CITE></CITE>           引用（斜体）。




◆文字飾り（物理スタイル）


<B></B>                 ボールド（強調）
<I></I>                 イタリック（強調）
<TT></TT>               クーリエなどの等幅フォント（計算機の出力）
<BIG></BIG>		大きく
<SMALL></SMALL>		小さく
<SUP></SUP>		肩付(superscript)。
<SUB></SUB>		下付(subscript)。
<FONT 属性></FONT>	フォントの指定(後述)
<BASEFONT 属性>		フォントの指定(後述)




◆整形済みテキスト

<PRE></PRE>		整形済みテキスト



◆その他、横線、改行


<HR>					横線を引く。
<HR SIZE="5">				横線を引く(サイズ5)。
<HR WIDTH="50%">			横線を引く(幅半分)。
<HR WIDTH="50%" ALIGN="center">		横線を引く(幅半分、中央)。
<BR>					改行。




◆BODYの属性


BACKGROUND=URL	バックグランドのパタンの画像
BACKGROUND=色	バックグランドの色
BGCOLOR=色	バックグランドの色
TEXT=色		文字の色
LINK=色		まだ訪れていないリンクの色
VLINK=色	既に訪れたリンクの色
ALINK=色	ユーザが選んだリンクの色



◆FONT、BASEFONTタグの属性


SIZE=数		サイズの設定(数は1から7)
SIZE=+数	サイズを大きく(数は1から7)
SIZE=-数	サイズを小さく(数は1から7)
COLOR=色	フォントの色
FACE=フォント名	フォントの指定



◆align属性の値

align属性は、インラインイメージ<IMG>、見出し
<H1>、パラグラフ <P>、
<DIV></DIV>による
複数のパラグラフのグループ、
表の位置を決めます。左から右に書く言語では、
デフォルトは、左寄せ(ALIGN="left")です。


ALIGN="left"	左寄せ
ALIGN="center"	中央に
ALIGN="right"	右寄せ
ALIGN="justify"	テキストの左右を合わせる
		(英語などの言語用。漢字はあまり関係ない)



◆色

色を指定する所では、基本的には、RGB の値を、６桁の１６進で与えます。

#rrggbb


左から２桁ずつ、赤、緑、青の値(00からFF)の値です。たとえば、
赤なら、R=FF,G=00,B=00 にすればいいので、"#FF0000" となります。
白は、全部 FF で "#FFFFFF"、
黒は、全部 00 で "#000000" になります。
いくつかの色については、次のような名前で指定することもできます。

----------------------------------------------------------------------
色	名前	RGB
----------------------------------------------------------------------
水色	Aqua	"#00FFFF"
黒	Black	"#000000" 
青	Blue	"#0000FF"
ピンク	Fuchsia	"#FF00FF" 
灰色	Gray	"#808080" 
緑	Green	"#008000"
黄緑	Lime	"#00FF00"
くり色	Maroon	"#800000" 
濃紺色	Navy	"#000080"
薄緑色	Olive	"#808000"
紫	Purple	"#800080" 
赤	Red	"#FF0000" 
銀色	Silver	"#C0C0C0" 
白	White	"#FFFFFF"
黄色	Yellow	"#FFFF00"
----------------------------------------------------------------------



HTML中の特殊文字



HTML 中の特殊文字は、次のような形式をしている。




	&word;





このように、「&」で始まり、
「;」で終る。word
は、アルファベットでは、すべて小文字が使われる。



西ヨーロッパでは、ISO Latin 1 という文字コー
ドがよく使われている。これは、8ビットのコードであり、西ヨーロッパの英
語以外の言語で使われている文字を含む。ISO Latin 1 で定義
されている文字の場合、次の形式も使える。




	&#num;	(numは、１０進数)
        &#xhh;	(hhは、１６進数)









表? HTML中の特殊文字の表記方法





--------------------------------------------------------------------
文字    HTML中の表記            元の意味
--------------------------------------------------------------------
<       &le;    &#60;           less-than
>       &gt;    &#62;           greater-than
&       &amp;   &#38;           ampersand
"       &quot;  &#34;           quotation mark
空白		&#32;
--------------------------------------------------------------------










↑[もどる]
・[12月07日]
→[12月14日]



Last updated: 2002/01/31 22:56:03
 

 Yasushi Shinjo / <yas@is.tsukuba.ac.jp>