World Wide Web の仕組み(2)

共通科目情報処理(上級)、インターネットの仕組み、2006年01月10日

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

このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/ipe/inet-2005/2006-01-10
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/
http://www.ipe.tsukuba.ac.jp/~yshinjo/

■復習

■今日の重要な話

「文書の構造」と「表示の方法」の違い。

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

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

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

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

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

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

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

  1. 差されるデータに印(mark,label)を付ける。
  2. 差すデータに、参照を埋め込む。
文書(テキスト)に、「ここは表題」、「ここは箇条書」といった、文書の構 造を示す目印(マーク)を付けることをを付けることを、マークアップすると いう。 ハイパーメディアを記述するためには、上の2つのことを支援した、人工の言 語を使う。このような言語を、マークアップ言語(markup language)という。

言語の分類

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

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

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

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

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

XML (eXtensible Markup Language) は、HTML に似ているが、独自にタグの定 義ができる。ただし、終了タグが省略不可など、コンピュータで処理するには、 都合がよいが人手で書くには厳しい。HTML を XML の規格に合うように厳しく 定義したものは、XHTML と呼ばれる。

◆HTMLでの表示

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

◆URL

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

[再掲]

http://www.tsukuba.ac.jp/education/college.html

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

◆いろいろな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
ドメイン形式のホスト名か、IPアドレス(「.」で区切 られた4つの10進数)。
port
ポート番号。schemeで標準のものと違うときに指定 できる。
pathname
パス名。UNIXのパス名と同じく、ディレクトリの区切り文字は、 /
userpassword を 指定する時には、@が必要である。

いくつか、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>
	ネットワーク・ニュースの1つの記事。コロン「:」以降は、
	記事のメッセージ識別子。
nntp://host1.is.tsukuba.ac.jp/fj.comp.lang.c/100
	ネットワーク・ニュースの1つの記事。//以下は、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

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

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

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

表示の方法:

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

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

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

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

◆HTMLの文法とタグ

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

テキストエディタの例:

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

HTMLのタグの形式:

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

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

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

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

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

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

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

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

◆HTML文書の構造

HTMLの文書の大まかな構造

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

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

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

◆見出し(heading)

HTMLで記述された文書の本体の構造

<H1>第1章</H1>
        1章の冒頭
        <H2>第1節</H2>
        1章1節の冒頭
                <H3>第1項</H3>
                1章1節1項のパラグラフの並び
                <H3>第2項</H3>
                1章1節2項のパラグラフの並び
        <H2>第2節</H2>
        1章2節の冒頭
                <H3>第1項</H3>
                1章2節1項のパラグラフの並び
        <H2>第3節</H2>
        1章3節の冒頭
                <H3>第1項</H3>
                1章3節1項のパラグラフの並び
<H1>第2章</H1>

HTML の文書は、 見出し(heading)パラグラフ(paragraph) ( 段落 ) の並びから構成されている。 HTML では、見出しとして <H1> から <H6> までが 定義されいる。見出しを使うことで、章の構成を表現することができる。

段付け(indentation) ( 字下げ ) は、説明のために付けたものである。HTMLでは、空白やタブは、単語の区切り として扱われるため、空白やタブによる段付けは無視される。つまり、書き手 が自由に読みやすいように段付けをしてよい。

<H1> から <H3> までの見出しは、 Netscape などのブラウザでは、標準で普通の文字よ り大きな文字で表示さる。しかし、大きな文字で表示させたるために、見 出しの機能を使うのは、本来は、誤りである。 見出しがどのように表示されるかは、ブラウザの種類や設定に依存している。 見出しは、あくまでも章の構成を表わす目的で使う。

◆パラグラフ

見出しと見出しの間には、いくつかのパラグラフを記述する。パラグラフは、 <P>で始まり、</P>で終わる。 ただし、終りの </P>は、HTML ではオプション(付け ても付けなくてもよい)なので、書かない人も多い。

◆リスト(箇条書)

HTML で リスト(list,並び) とは、 箇条書(item) を作るための機能である。

HTML で扱える箇条書の種類:

例:

HTML記述:

<UL>
<LI>日本料理
<LI>中華料理
<LI>韓国料理
<LI>フランス料理
<LI>イタリア料理
</UL>

表示例:

HTML記述:

<OL>
<LI>メールリーダを実行する
<LI>新着メールを取り込む
<LI>新しいメールを書く
<LI>新しいメールを送る
<LI>メールリーダを終了する
</OL>
表示例:

  1. メールリーダを実行する
  2. 新着メールを取り込む
  3. 新しいメールを書く
  4. 新しいメールを送る
  5. メールリーダを終了する

HTML記述:

コマンド
<DL>
<DT> mnews
<DD> ネットワーク・ニュースと電子メールを読み書きするプログラム。
<DT> mule
<DD> テキスト・エディタの1つ。
<DT> netscape
<DD> WWWブラウザ。
<DT> irc
<DD> 文字による会議システム。
</DL>

表示例:

コマンド
mnews
ネットワーク・ニュースと電子メールを読み書きするプログラム。
mule
テキスト・エディタの1つ。
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 でイメージを扱う方法

記述例:

<IMG SRC="images/client-server-service.gif" ALT="図? サービスの授受によるクライアントとサーバの定義">

図? サービスの授受によるクライアントとサーバの定義

タグ <IMG> がインライン・イメージを張り付 けるという意味である。<IMG> には、終了のタグ </IMG> はない。

SRC属性では、テキストの途中で展開して表示するイメー ジの URL を指定する。

ALT属性は、イメージの代わりに表示されるテキストを 指定する。これは、Netscape などのブラウザのオプションとして、 「画像の自動読み込み(Auto Load Images)」がオフに なっている時にイメージに代わって表示れる。

Auto Load Images がオフの時の IMG

lynx などのように、イメージが表示できないブラウザにより使われたり、目 の不自由な人がイメージの内容を知る時に使われる。

IMGタグのSRC属性では、絶対形 式のURL使うこともでる。

<IMG SRC="http://www.tsukuba.ac.jp/icons/penguin.gif" ALT="[ペンギンのアイコン]">

インライン・イメージとしてよく使われる画像の形式

PNG (Portable Network Graphics)
普通の圧縮方法(可逆圧縮方法)を使っている。 普通の圧縮方法(可逆圧縮方法)を使っている。コンピュータで作成したアイコ ンや図形、いわいる「アニメのセルのようなベタぬり」に適している。1ピク セルは、赤、緑、青でそれぞれ16ビット、全体で48ビット(248 == 281474976710656色)まで。
GIF (CompuServe Graphic Image Format)形式(ジフ)(.gif)
256色まで。圧縮アルゴリズムとして、LZ77 という 方法が使われており、一部の国で特許が有効なためライセンス料が必要になる。 アメリカや日本では特許は特許は切れている。
JPEG (Joint Photographic Experts Group) 形式(ジェイペグ)(.jpeg,.jpg)
劣化式圧縮方法を使っている。イメージ・スキャナやディジタル・カメ ラで取り込んだ写真に適している。約1670万色(224)まで。

◆アドレス

HTML文書の最後には、普通、 <ADDRESS>,</ADDRESS>タグを使っ て、その文書の著者の電子メール・アドレスや著者のホーム・ページへのリン クを書く。これは、このページの内容にきちんと責任を持つことを示している。

HTML記述:

<ADDRESS>
who@tsukuba.ac.jp
who at tsukuba.ac.jp
</ADDRESS>
表示例:

who@tsukuba.ac.jp who at tsukuba.ac.jp

◆文字飾り

文書内の単語を太字にしたり斜体にしたりする機能を文字飾りとう。

文字飾り使う2種類のタグ

論理スタイルタグ
「強調」、「引用」、「キーボード」など、文書の論理的な構造を表わ す。表示されるかは、ブラウザに任される
物理スタイルタグ
「太字」、「イタリック」、「タイプライタ・フォント」とった具体的な 表示方法を表わす。

◆引用

他の文書からの引用(段落単位)を表現するために、HTMLには、 <BLOCKQUOTE>,</BLOCKQUOTE> というタグが用意されている。

引用部分が短い時(テキスト単位)には、<CITE></CITE> で囲む。 多くのブラウザでは、斜体で表示される。

◆整形済みテキスト

整形済みテキストとは、文字端末(telnet や kterm)に表示されたコンピュー タの出力である。たとえば、 「コマンドプロンプト」やシェルとの対話の画面の様子をHTMLの文書に張り付 る時に使う。 <PRE></PRE> で該当部分を囲ん だ中では、空白やタブや改行がそのまま有効になる。

HTML記述:

<PRE>
    January 2006
Su Mo Tu We Th Fr Sa 
 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 2006
Su Mo Tu We Th Fr Sa 
 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 2006
Su Mo Tu We Th Fr Sa 
 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 2006 Su Mo Tu We Th Fr Sa 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で使えない文字

次の3つの文字は、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 バックスペース

複数の枠をつなげることもできる。

HTML記述:

<TABLE SUMMARY="複数の枠を1つの内容で埋める例" 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

◆音

イメージと同じように、ハイパーリンクの先に音デー タ(サウンド、音声、音楽を含む)を置くこともできる。 <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>がたくさん入っていると、見づらくなる。

アンカで、 「<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 ページを作る時には、0 から~/www/index.html を作ることもで きるが、気に入ったページを真似して書くことからはじめることもできる。た だし、著作権には注意する。

◆ページの内容

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

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

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

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

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

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

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

参考:

◆形式

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

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

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

漢字コード については、選択可能なら、電子メールと同じく JIS にするとよい。 EUC と Shift-JIS では、自動判定に失敗することがある。

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

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

■スタイルシート

HTML は、「本来は」、文書の構造を記述する。

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

HTML では、文書の構造を記述することができるが、「表示の方法」 を記述することは、本来はでない。 ワープロは、紙に印刷した時の、このような表示の方法を設定す るためのプログラムである。

表示の方法:

表示の方法を記述するには、スタイルシートを用いる。

■カスケーディング・スタイルシート

◆例

見出しを青くする。
H1 { color: blue; }

◆カスケーディング・スタイルシートで記述できること

段落書式 文字書式 箇条書き イメージ その他:

◆スタイルシートを書く場所

HTML のヘッダに書く。
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>
別ファイルに書いて読み込む。 スタイルシートのURLは、filename.css のようなファイル名が多い。
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<LINK rel="stylesheet" type="text/css" href="スタイルシートのURL">
</HEAD>
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
@import url(スタイルシートのURL);
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>

複数 @import することもできる。 複数のスタイルは、混ぜられる(カスケード)。 対立する定義は、後から出てきた方が有効になる。

HTML のタグの属性として書く。宣言部分だけ。

<P STYLE="color:#444444">文。文。文。</P>

コメントは、/**/ で括る。 C言語やJava言語と似ている。 コメントは、デバッグ時など一時的に無効にしたい時にも使える。

◆基本的な文法

次のような規則の並び
セレクタ  { 宣言;  }
セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言;  }
1つひとつの宣言は、次の形式。
プロパティ:式
「式」には、数、文字列、%、単位つきの長さ、URL などが書ける。

◆書式の有効範囲(セレクタ)

クラス(class)ごと、IDごとの場合は、次のタグで範囲を指定する。 クラスとは、似たような要素の集まり。 同じクラスの要素は、似たような書式になる。 ID(identifier) は、全体の中で1つだけ。

H1	{ color:blue; } /* <H1></H1> だけ */
UL LI   { color:blue; } /* <UL></UL>の中の <LI> だけ*/
OL > LI { color:blue; } /* <OL></OL>の直接の子供の <LI> だけ*/
H1 + P  { color:blue; } /* <H1></H1>に隣接する <P> だけ*/
 *      { color:blue; } /* 全ての要素 */

.important    { color:blue; }  /* class="important" と指定したものだけ */
P.important   { color:blue; }  /* <P class="important"></P> と指定したものだけ */
#n10          { color:blue; }  /* id="n10" と指定したものだけ */

P:first-line   { color:blue; } /* <P></P> の中の最初の行だけ */
P:first-letter { color:blue; } /* <P></P> の中の最初の1文字だけ */
A:link    { color:blue; } /* 未訪問のリンク */
A:visited { color:blue; } /* 訪問済みのリンク */
A:active  { color:blue; } /* アクセス中 */
A:hover   { color:blue; } /* カーソルを重ねた時 */

◆書式設定の考え方

余白、境界、パディング(詰め物)がある四角い箱。
  ┌──────────────────────┐
  │       余白             │
  │ ┌──────────────────┐ │
  │ │     境界           │ │
  │ │ ┌──────────────┐ │ │
  │ │ │   パディング      │ │ │
  │ │ │ ┌──────────┐ │ │ │
  │ │ │ │ 内容       │ │ │ │
  │ │ │ └──────────┘ │ │ │
  │ │ └──────────────┘ │ │
  │ └──────────────────┘ │
  └──────────────────────┘

        │ エレメントの幅  │
  │      ボックスの幅          │

◆WWWページデザインの手順

  1. HTML で全部の表示したい内容を記述する。
  2. スタイルシートを埋め込み、見栄えを調整する。
スタイルシートをうまく活用すると、見た目を一度に調整できる。 いちいち <font> で指定すると、変更したくなった時には、 全部変えなければならない。 <span class="classname">のように、クラスを使ってマークして おけば、1個所クラスの設定を変更するだけで全部統一的に変る。 (同様に、ワード・プロセッサでも、スタイルをうまく活用したい。)

注意点

複数のブラウザ(違うバージョンも含む)で表示を確認したい。

◆CSSの利用例

その他、次のページが参考になる。 とほほのスタイルシート入門

■実習

◆HTMLの観察

次のページについて、ブラウザを操作して、元の HTML (ソース)を表示させなさい。

◆HTMLの観察(生成されたもの)

MS-Word 等のワードプロセッサを用いて、HTML ファイルを生成しなさい。 そして、それを テキスト・エディタ で開いて、どのような形式になっているかを観察しなさい。

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

HTML と CSS で次のような条件を満たす WWW ページを作成しなさい。
  1. 自分の名前(漢字がある人は漢字、読み方(平仮名かローマ字))がある。
  2. 電子メール・アドレスがある。 <ADDRESS></ADDRESS>タグを使って記述すること。
  3. インライン・イメージ(たとえば自分の写真、MS-Paintで作った絵、 MS-Word で作った絵)がある。
  4. インターネット上の他人が作ったページへのハイパーリンクを2つ以上含む。
  5. 自分が作ったHTML文書へのハイパーリンク(たとえば、英語のページなど)を含む。
  6. 物理スタイルタグ属性(TYPE="square" BACKGROUND=など)含まない。 表示の形式は、必ずスタイルシートで表現する。
  7. 3つ以上のタグのスタイルを変更する。そのうち1つ以上は、class を使う。
  8. 同じ class のスタイルを、HTML 文書の中の2個所以上で利用する。
上の条件を満たす WWW ページを作成したら、その URL を 講義の掲示板 に張り付けなさい。 締め切りは、2006年1月17日火曜日とする。

◆課題6 目標に関する中間報告

個々の目標に関して Wiki による講義の掲示板に、中間報告を行いなさい。 タイトル1行(40文字以内)と、具体的に調べた事柄を5行程度で既述しなさい。 締め切りは、2006年1月24日15:00 とする。


↑[もどる] ←[12月13日] ・[1月10日] →[1月17日]
Last updated: 2006/01/10 01:14:27
Yasushi Shinjo / <yas@is.tsukuba.ac.jp>