HTML による WWW ページの作成

					2007年05月15日
情報科学類 コンピュータリテラシ

                                       筑波大学 システム情報工学研究科 
                                       コンピュータサイエンス専攻, 電子・情報工学系
                                       新城 靖
                                       <yas@is.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2007/2007-05-15
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/

■連絡事項

Unix Super Text 上巻「第27章 World Wide Web」参考。
次回5月18日金曜日は、講義室 3A309 に集合。
Unix Super Text の次の場所を読んでくる。 24章。

■ハイパーテキスト・ハイパーメディアと World Wide Web

[再掲]

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

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

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

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

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

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

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

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

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

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

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

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

◆URL

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

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

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

◆httpとhttps

URL には、http: で始まるものの他に、https: で始まるものがある。 https で始まる場合、SSL という仕組みを使って通信路を暗号化されている（The Unix Super Text 下巻86.2章参照, The Unix Super Text 29章参照）。

http で始まるものは、通信路は暗号化されていないので、通信内容（URLの一部、キーボードで打ち込んだユーザ名やパスワード、クレジットカード番号など）が盗まれることがある。

https を使っていても、通信相手が偽物の場合には、意味がない。通信相手が本物かどうかを確かめる機能は、Web ブラウザに備わっている。Web ブラウザは、通信相手が確認できない場合には、警告を発する。

◆HTMLでの表示

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

◆いろいろな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 の例を示す。

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」がその引数となる。
ftp://host1.is.tsukuba.ac.jp/dir1/file1
	「host1.is.tsukuba.ac.jp」で指定されたホストに ftp で接続する。
	ユーザ名は anonymous 。「dir1/file1」のファイルを get する。
mailto:who@is.tsukuba.ac.jp
	電子メール・アドレス
news:fj.comp.lang.c
	ネットワーク・ニュースのニュース・グループ
news:<20070401.1111@is.tsukuba.ac.jp>
	ネットワーク・ニュースの１つの記事。コロン「:」以降は、
	記事のメッセージ識別子。
nntp://host1.is.tsukuba.ac.jp/fj.comp.lang.c/100
	ネットワーク・ニュースの１つの記事。//以下は、NNTPサーバのホスト名。
	fj.comp.lang.c は、ニュース・グループの名前の例。最後の数字は、記事番号。
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 では、文書の構造を記述することができるが、「表示の方法」を記述することは、本来はでない。

表示の方法:

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

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

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

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

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

◆HTMLの文法とタグ

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

テキストエディタの例:

emacs (mule)
vi
MacOSX テキストエディット.app (/Applications/TextEdit.app)
Windows メモ帳

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

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

◆パラグラフ

見出しと見出しの間には、いくつかのパラグラフを記述する。パラグラフは、 <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> Firefox
<DD> WWWブラウザ。
<DT> irc
<DD> 文字による会議システム。
</DL>

表示例：

コマンド

mnews: ネットワーク・ニュースと電子メールを読み書きするプログラム。
mule: テキスト・エディタの１つ。
Firefox: 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の解説書の中には、始点をリンク、終点をアンカと呼んでいるものもある。

例: 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.png"
     ALT="サーバがサービスをクライアントに提供している。">

表示例

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

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

ALT属性は、イメージの代わりに表示されるテキストを指定する。これは、Firefox などのブラウザのオプションとして、「画像のみ込み(Load Images)」がオフになっている時にイメージに代わって表示れる。 ALT属性は、 lynx などのように、イメージが表示できないブラウザにより使われたり、目の不自由な人がイメージの内容を知る時に使われる。

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

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

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

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

◆アドレス

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

HTML記述：

<ADDRESS>
who at tsukuba.ac.jp
</ADDRESS>

表示例：

who at tsukuba.ac.jp

◆文字飾り

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

文字飾りで使う２種類のタグ

論理スタイルタグ: 「強調 <EM> <STRONG>」、「定義 DFN」、「引用 CITE」、「コード(コンピュータ) <CODE>」、「変数 <VAR>」、「キーボード (KBD」など、文書の論理的な構造を表わす。表示されるかは、ブラウザに任される。
物理スタイルタグ: 「太字 <B>」、「イタリック <I>」、「タイプライタ・フォント <TT>」、「フォント指定 <FONT> <BIG> <SMALL> <BASEFONT>」とった具体的な表示方法を表わす。

「肩付き <SUP>」と「下付 <SUB>」は、論理的に使うならば、論理スタイルタグに入れてもよい。

◆引用

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

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

◆整形済みテキスト

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

HTML記述：

<PRE>
      May 2007
 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>
      May 2007
 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

表示例：

      May 2007
 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

May 2007 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	バックスペース

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

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	Er

◆音

イメージと同じように、ハイパーリンクの先に音データ（サウンド、音声、音楽を含む）を置くこともできる。 <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 から HTML によりファイルを作成することもできるが、気に入ったページを真似して書くことからはじめることもできる。ただし、著作権には注意する。

◆ページの内容

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

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

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

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

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

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

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

参考:

Webアクセシビリティに配慮したWebページ。
視覚表現システム (VI: Visual Identification System) 。大学のロゴなど。

◆形式

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

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

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

◆漢字コード

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

Web ブラウザの自動判定に頼らず、 HTML の <HEAD></HEAD> の中に、 <META>タグを使って漢字コードを明示的に示す方法もある。

JIS

<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp">
</HEAD>

EUC (日本語)

<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=EUC-JP">
</HEAD>

Shift JIS

<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=Shift_JIS">
</HEAD>

ワードプロセッサによるテキストでの出力、MacOSX やWindows のテキスト・エディタの多くは、Shift JIS を出力することが多い。

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

■実習

実習時間中には、以下の課題をできるだけ多く行いなさい。全部を行う必要はない。

★練習問題(124) HTMLの観察

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

「表示」メニューから「ページのソース」を選ぶ。

★練習問題(125) 画像の読み込み

Firefox, Safari などのブラウザで、画像の読み込み機能をオンにしたりオフにしたりして、Web ページを表示しなさい。

Firefox

「Firefox」メニューから「環境設定」を選ぶ
「コンテンツ」タブを選ぶ
「画像を読み込む」のチェックを入れる／外す

Safari

「Safari」メニューから「環境設定」を選ぶ
「表示」タブを選ぶ
「ページを開く時に画像を表示」のチェックを入れる／外す

★練習問題(126) 標準Webブラウザの設定

MacOSX では、http:// で始まる URL を開く時には、標準のWeb ブラウザが使われる。これは、Safari を使って変更することができる。

「アプリケーション」ディレクトリにある Safari.app を実行する。(open /Applications/Safari.app/)
「Safari」メニューから「環境設定」を選ぶ
「一般」タブを選ぶ
「デフォルトWebブラウザ：」のメニューに表示されるものから好きなものを選ぶ。表示されなければ、一番下の「選択」で開いて選択する。

★練習問題(127) WWWページ用のディレクトリ作成

筑波大学情報学類コンピューティング環境では、個人の WWW ページは、次のような URL で参照される。

http://www.coins.tsukuba.ac.jp/~ユーザ名/

ユーザ名を、ログインの時に打つ自分のユーザ名で置き換えなさい。この URL は、次のディレクトリに対応する。

~/public_html

このディレクトリを、mkdir コマンドで作成しなさい。

% mkdir ~/public_html

作成したディレクトリのその他(others)に対するアクセス許可で x ビットが立っていることを確認しなさい。

% ls -ld ~/public_html 
drwxr-xr-x   55 yas  prof  1870 May  1 22:43 /home1/prof/yas/public_html
% 
         ^ここ

さらに、ホーム・ディレクトリにもその他(others)に対するアクセス許可で x ビットが立っていることを確認しなさい。

% ls -ld ~ 
drwxr-xr-x   82 yas  prof  2788 May 22 17:35 /home1/prof/yas
% 
         ^ここ

ディレクトリを作成した直後、ディレクトリが空の時、 Web ブラウザで http://www.coins.tsukuba.ac.jp/~ユーザ名/ を開くと次のようなエラーが表示される。

Forbidden

You don't have permission to access /~ユーザ名/ on this server.

Apache/2.0.55 (Unix) PHP/4.4.2 Server at www.coins.tsukuba.ac.jp Port 80

これは、意図された動作である。

★練習問題(128) 単純なテキスト・ファイルの公開

注意：この練習問題は、練習問題 (127)WWW ページ用のディレクトリ作成の後に行いなさい。

ディレクトリ ~/public_html/ の下に、単純なテキスト・ファイル (HTMLではない)を置きなさい。ファイル名の拡張子は、「.text」または「.txt」としなさい。

作成したファイルのモードを調べなさい。file1.textという名前のテキスト・ファイルを作成した場合、次のようにその他(others)に対するアクセス許可で r ビットが立っていることを確認しなさい。

% cd ~/public_html 
% ls -l file1.text 
-rw-r--r--   1 yas  prof  2 May 22 22:09 file1.txt
% 
       ^ここ

作成したファイルを Web ブラウザで表示しなさい。たとえば、 file1.textという名前のテキスト・ファイルを作成した場合、次のような URL で参照する。

http://www.coins.tsukuba.ac.jp/~ユーザ名/file1.text

ユーザ名を、ログインの時に打つ自分のユーザ名で置き換えなさい。HTTP で始まる URL には、public_html は含まれないことに注意しなさい。

★練習問題(129) サンプルのコピー

注意：この練習問題は、練習問題 (127)WWW ページ用のディレクトリ作成の後に行いなさい。

次の HTML ファイルを、ディレクトリ ~/public_html/ の下にコピーし、それを Web ブラウザ表示しなさい。

~yas/public_html/coins/literacy-2007/samples/sample1.html

% cd ~/public_html 
% cp ~yas/public_html/coins/literacy-2007/samples/sample1.html .

コピーした後、Web ブラウザで次の URL を開きなさい。

http://www.coins.tsukuba.ac.jp/~ユーザ名/sample1.html

ユーザ名を、ログインの時に打つ自分のユーザ名で置き換えなさい。HTTP で始まる URL には、public_html は含まれないことに注意しなさい。

★練習問題(130) 個人のホーム・ページの作成

個人のホーム・ページを作成しなさい)。各自のホーム・ページは、次の HTML ファイルに対応する。

~/public_html/index.html

作成したホーム・ページを、Web ブラウザで開きなさい。 Web ブラウザで次の URL を開きなさい。

http://www.coins.tsukuba.ac.jp/~ユーザ名/index.html

★練習問題(131) ディレクトリを指定した時のWebページの内容

URL でディレクトリを指定すると、自動的にそのディレクトリにある「index.html」という名前のファイルが使われる。この機能を使うと、各自のホーム・ページは、次のように短く表示できる。

http://www.coins.tsukuba.ac.jp/~ユーザ名/

この事を確認しなさい。また、ホーム・ページ以外のページについても、この機能が有効なことを確認しなさい。

★練習問題(132) Emacs HTMLモード

Emacs で拡張子が .html のファイルを開くと、「HTML モード」と呼ばれるモードになり、HTML の編集に有用な機能が働くようになる。次のようにして、どのような機能が利用可能か調べなさい。

M-x describe-mode

★練習問題(133) ファイルのモード

WWW ページとして公開するファイルのモードはその他(others)に対するアクセス許可で r ビットが立っている必要がある。もし、このビットを chmod o-r で落した場合、Web ブラウザでアクセスできなくなる。このことを確かめなさい。

同様に、ディレクトリを作成し、その他(others)に対する x ビットを立てたり落したりしながら、その効果を確認しなさい。

★練習問題(134) FirefoxによるWebページの保存

Firefox で保存したい Web ページを表示しなさい。そして、その内容をファイル保存しなさい。

「ファイル」メニューから「別名でページを保存」を選ぶ

保存の方法には、次のような方法がある。

Web ページ,完全: HTML と中に含まれている画像を保存する
Web ページ,HTMLのみ: HTML だけを保存する。
テキストファイル: HTML の中からテキストだけを抜き出して保存する。空白で字下げなどを行う。

これらの違いを調べなさい。

★練習問題(135) Wiki表記と HTML の比較

講義の掲示板で使っている Wiki で、次の機能を利用してみなさい。

見出し
パラグラフ
箇条書き
ハイパーリンク (URL の記述)
その他

これらがどのように HTML と対応してるか、観察しなさい。

★練習問題(136) wgetコマンド

wget は、引数として与えられたURLで指定された資源を取得し、ファイルに保存するコマンドである。コマンドラインから実行できる。次の例は、資源 http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2007/samples/sample1.html を取得し、ディレクトリ ~/dir 以下の sample1.html という名前のファイルに保存している。

% cd ~/dir 
% wget http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2007/samples/sample1.html

簡単な使い方は、次のようにすれば表示できる。

% wget --help

または

% wget --help | lv

wget コマンドは、標準出力に使い方を出力するこれを lv で表示するには、パイプ機能 | を用いる。

詳しくは、man wget を見なさい。

★練習問題(137) Web ブラウザ w3m

iTerm などの文字端末で動作する Web ブラウザ w3m を使ってみなさい。

% w3m -e http://www.coins.tsukuba.ac.jp/ 
% w3m -e ~/public_html/index.html

-e オプションを使うと、端末の文字コードが EUC になる。次のように打つと、詳しい説明が表示される。

% w3m --help |&lv

w3mコマンドは、標準エラー出力に使い方を表示する。これを lv で表示するには、|& を用いる。

詳しくは、man w3m や次の Web ページを見なさい。 http://w3m.sourceforge.net/。

★練習問題(138) Web ブラウザ lynx

iTerm などの文字端末で動作する Web ブラウザ lynx を使ってみなさい。

% lynx 
% lynx ~/public_html/index.html

The Unix Super Text 28.3節参照。

★練習問題(139) HTMLの検査

Another HTML-lint gateway (ミラーサイト) を使って、作成したページの検査を行いなさい。また、その解説を読みなさい。どの HTML の文法に従うのがよいかを考えなさい。厳密な HTML の文法に従うことの意義について考えなさい。

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

締め切りは、2007年5月22日火曜日とする。本日の課題は、講義の掲示板に含まれている各自のページに記述することで提出しなさい。テキスト形式のファイルを投稿するのではない。また、作成した WWW ページに記述するものでもない。

(1) HTML で次のような条件を満たす WWW ページを作成しなさい(注意: ホーム・ページでなくともよい)。

<HTML>、<HEAD>、<TITLE> <BODY>タグを含む。
自分の名前を含む。漢字の名前ががある人は漢字と読み方（平仮名かローマ字）)を含む。
電子メールのアドレスを含む。 (対策を行ってもよい。)
見出しタグ(<H1>、<H2>、<H3>) による見出しを含む。
<P>タグによるパラグラフがある。
<A href="..."></A>によるハイパーリンクを含む。
<IMG>タグによる画像を含む。画像の形式は、PNG、または、JPEG。 IMG タグには、ALT属性を付ける。
物理スタイルタグを含まない。
他のタグで代替可能な <BR>タグを含まない。
画像が表示されないブラウザで表示しても、すべてのハイパーリンクをたどることができる。

(2) Web ページには、ある条件の本で他人の著作物を含めることができる。 (1) で作成した WWW ページに、他人の著作物がある場合には、その出典を記述しなさい。また、その著作物を WWW ページに利用してもよいことを示す根拠を説明しなさい。他人の著作物を含めてはない場合には、「他人の著作物は含まれていない」と記述しなさい。

なお著作権に関して詳しくは、金曜日の講義で述べる。

(3) (1) で作成した WWW ページがホーム・ページかどうか記述しなさい。ホーム・ページの場合、「ホーム・ページである」と記述しなさい。そうでない場合、「ホーム・ページではない」と記述しなさい。

(4) [加点] (1) のページが英語以外の言語の場合、英語、英語の場合、日本語で同一内容のページを作成しなさい。それらのページの間で相互にリンクを貼りなさい。Apache のコンテントネゴシエーション機能を用いて、Web ブラウザに応じて自動的に言語が選択されるようにしなさい。また、Firefox やその他のブラウザの機能を用いて、そのことを確認しなさい。

Last updated: 2007/05/15 16:08:50

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