第 4 回(2004.05.10) -- web page の作成と発信 II

最終更新日 … $Date: 2004-04-19 09:48:41+09 $

この授業では，前回体験した web page の作成をきちんと学習する.
また，マークアップ言語の一つとして xhtml を学ぶことにより，「情報を構造化して把握・整理する」, 「情報の本質的関係と見栄えを分離する」という学問の基礎能力を身につけることができる.
阪大生はこうした「論理的な訓練」ができてない傾向があるので，ここできちんと学んでおこう.

XHTML について

HTML, XHTML とは

web page を記述する主流言語である HTML および XHTML について簡単な解説を行なう.
これを機に Markup 言語について親しんでおくのが良い. なぜなら，大学のこれからの学生生活では TeX を始めとする Markup 言語の使用が必要不可欠であるからである.
これからは，理系の大学を出たのに Markup 言語の一つも使いこなせないようでは恥ずかしい，と認識しておくべきである.

HTML (HyperText Markup Language)

HyperText を記述するための言語の一つ. Markup 言語の一つで，技術的には SGML (Standard Generalized Markup Language) というメタ言語によって定義されている. この定義は固定である.
WWW が誕生したときより存在し，これまで web page を記述する主流言語として活躍してきた. 年とともに改訂されて発展して来たが, HTML 4.0(1997), 4.01(1999) が最後のバージョンとなった.
web page を記述する言語は下の XHTML に移行することが web 技術標準化団体の w3c によって言明されているため，これからは使われなくなる運命にあるといえる.
よって，どうせこれから覚えるならば XHTML から入るのがよいだろう. 今ならばほとんど見た目は変わらないし.

注意下位互換性のために存在しているが，「HTML は既に終わった言語である」というぐらいの認識を持っていた方がよい.

XHTML (eXtensible HyperText Markup Language)

HyperText を記述するための言語の一つ. Markup 言語の一つで，技術的には XML (eXtensible Markup Language) というメタ言語によって定義されている. この定義はユーザが便利なように自分である程度書き換えることができる(自己拡張可能性).
これからの web page 記述言語の主流となると見なされている.
幸いなことに現在主流であるバージョン XHTML 1.0 および 1.1 は HTML 4.01 とほとんど同じなので，HTML を覚えている者も今移行するのが最も楽である.
XHTML 2.0 もすぐそこに見えている.

注意今やこの XHTML でさえ古典となりつつあるぐらい，この業界の進歩は早い. 多分, 数年もすると普通に XML で直にデータを処理するようになるだろうから，今のうちにその入口として XHTML に慣れておこう.

Markup Language

情報を文書化したものには各々「構造」がある. 例えば「これは名前だ」「これは金額だ」「これは章だ」「ここは大文字で」等々.
こうした構造をテキストで明示的に範囲づけすること(マークアップ)によって文書を記述するマークアップの方法(言語)をマークアップ言語とよぶ.
例えば，住所録は


      <person>
        <name>ほげほげ 太郎</name>
        <address>あちこち</address>
        <telephone>06-6850-xxxx</telephone>
        </person>

      <person>
        <name>なになに 花子</name>
        <address>おうち</address>
        <telephone>06-6852-xxxx</telephone>
        </person>

などと記述すれば，厳密にどの部分がどういうデータなのか，どのデータとどのデータがどういう関係なのかがわかる.
この時，マークアップするための記号をタグなどと呼ぶが(上の <person> など), どういうタグを使うか，どのタグがどういう意味なのかを規定したものがマークアップ言語だ，と思えばよい.
これから分かるように，マークアップ言語は「情報を合理的に記述するための決まり」であって，これによって作成されたファイルは単なるテキストファイルである. このファイルを何か処理するにはまた別のプログラムが必要となる. (X)HTML で書かれたファイルは Netscape や Mozilla 等の Web Browser で人間に「見やすい形に整形して」閲覧することができる.

■ HTML, XHTML, SGML, XML の関係 ■
	上で述べた HTML 等の関係図は左のようになる. XML は SGML のサブセットであり，強力だが複雑すぎる SGML に比べて web 用の言語を定義するのに適していると言われる.

論理構造と表現の分離 -- 本体と CSS

HTML 4.01 および XHTML 1.0 および 1.1 では文章を書くときに論理構造と表現設定を分離して記述することが推奨されている. より詳しく言うと，
「web page 本体には論理構造だけを記述しろ」
「文字の大きさとか色とか，諸々の表現については CSS というルールを従って別のファイルで設定しろ」
ということが推奨されているのである.
これはなぜかというと，

論理構造だけの文書なら，機械的な様々な処理が可能.
「見た目」は見るための機械によって変える必要があるが，論理構造は不変でよい.
# 例えば，PC で見るのと携帯電話で見るのとを同じ見掛けにしようとするのは無理があるだろう.
論理構造と表現設定を別にしないと，文書を修正するのが大変.
論理構造と表現が一緒になっていると，大きな文書で統一した表現が難しい.
書いている本人が論理と表現の区別がつかないとろくな文書にならない(^-^).

などの理由があるからである.
XHTML 1.1 以上を見るとこれらの推奨の度合いはより強くなり，だんだん「強制」に近くなっている.

さて，より詳しく解説しよう.
例えば，本の目次をみると

  
    第一章 はじめに
      第 1節 hogehoge とは
      第 2節 hogehoge の歴史
      第 3節 hogehoge の現状
      第 4節 hogehoge を利用するには

    第二章 hogehoge の利用
      第 1節 オプション
      第 2節 初期設定
      第 3節 通常の使用方法
      第 4節 より高度な利用
      第 5節 プラグインについて

などとなっている. これは本の論理的構造を非常に粗くみたもの，と見ることができる.
このような文章の論理構造「だけ」を本文に書け，表現は別ファイルにしろ，というのが上の主張である. 具体的には，例えば上の本の例を (X)HTML で書くと


    <h1>はじめに</h1>
    <p>
      この本は…
      </p>
    <h2>hogehoge とは</h2>
    <p>
      hogehoge とは○○を行なうために
      開発されたシステムであり…
      </p>
    <h2>hogehoge の歴史</h2>
    <p>
      そもそも hogehoge は 1980年に
      誰々が××をするために開発したものであり…
      </p>

等となるだろう.
後述するが，ここで念の為に解説しておくと <h1> は一番大きな論理構造たる「見出し」であり(章に相当する)， <h2> は次に大きな論理構造たる「見出し」であり(節に相当する)， <p> は「段落」を意味する (X)HTML のタグである.

そして， <h1> (見出し)はこれぐらい大きな文字で書こうとか，ブロック体にしようとか，色はこういう色にしよう，等というのは CSS(Cascading Style Sheet)というルール(文法)を用いて別ファイルに次のように書くのである (皆が見ているこの web page 自体の設定例).


    h1 {      ←タグ<h1>の「表現」の設定
      color: #eeeeee;
      border-color: #eeeeee;
      background-color: #666666;
      font-size: medium;   
      font-weight: bold;
      text-align: center;
      width: 95%; 
      padding: 0.5em;
      border-width: 0em 0em 0em 0em; 
      border-style: none none none none;
      }

なお，本授業では xhtml を説明する時間しかないので， CSS については各自学習されたい.

XHTML 1.1 文法の簡単な説明

最初からあまり多くを学んでも大変なので，ある程度簡単なものだけに限定して学習しよう.
まず，XHTML で書く文書は次のような大きな構造を持たねばならない.
# 前回の授業で用いた html ファイルの内容を思い出しながら理解するとよい.

■ XHTML 文書の構造 ■
文書規格の宣言	その文書がどのような(Markup)言語のどのバージョンで書かれているのかを宣言する. Web Browser 等のソフトは，ここを見て「ああ，この言語で書かれているのだな」と判断して，それに応じて動作や表示を変える… はずである(^-^). とりあえず細かいことは置いておくと， (1行目) `<?xml version="1.0" encoding="EUC-JP"?>` (2行目) `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">` (3行目) `<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">` の3行を文書の最初に書いておけ，ということである(漢字コードが euc の場合). ちなみに，違う漢字コードの場合は上の該当部分を次のように書く. euc … EUC-JP jis … ISO-2022-JP shift-jis … Shift_JIS (注) 漢字コードについては漢字コードについてをよく読むこと. # 実は3行目は文書型の宣言ではなくて，HTML 開始，という意味だがまあいいか.
ヘッダ	その文書固有の情報が書かれる. 具体的には，文書の形式(HTTP用)，タイトルや著者，CSS ファイルの読込み，追加 CSS などである. とりあえずは `<head> <title xml:lang="ja">タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> </head>` の 4行を上の「文書規格の宣言」に続けて書いておけばよいだろう. もちろん，タイトルと漢字コードは適切に書き換えること.
本文	肝心の文書の中身を書く部分である. `<body>` と `</body>` とで囲まれた部分が「本文」として扱われるので，この二つのタグを書いておいて，この間に本文を書いていくことになる.
(終了宣言)	HTML を使っているのはここまで，とわかるようにする. `</html>` と書く.

上のルールに従えば，XHTML 文書そのものは作れる. ただ，まだ中身を書く方法が分からないので(^-^)，それについても記述しておこう.

分類エレメント目的，概要使い方

テキストブロック構造 p 文章の一段落を書くのに使う. <p> 中身 </p> とする.

ブロックフレーズ h1, h2, h3, h4, h5, h6 見出し行. 数字が小さいほど抽象度が高い. <h1> 中身 </h1> 等とする.

インライン構造 br 強制改行. 段落内で用いる. <br /> と書く.
最後の / を忘れないように.

インラインフレーズ em 強調. <em> 中身 </em> と書く.

strong より強調. <strong> 中身 </strong> と書く.

code (コンピュータ)コード.
たいてい見た目は何も変化しないが(^-^). <code> 中身 </code> と書く.

HyperText a HyperText としての参照先を URI を用いて書く. <a href="参照先のURI">参照先の説明</a> と書く.

web browser 等では，上の「参照先の説明」部分がクリックできるようになっていて，それをクリックすると参照先の HyperText に飛ぶようになっていることが多い.

下記の fragment を利用する場合は，
<a href="参照先のURI#fragment名称">参照先の説明</a>
とすればよい.

HyperText としての宛先を宣言 (fragment) <a id="fragment名称">説明</a> と書く.

fragment を宣言すると，宣言した場所へ「ピンポイント」で他の web からリンクを張れる. それをクリックすると参照先の HyperText に飛ぶようになっていることが多い.
fragment は URI の一部ではないが，まあ一緒に使われることが多い.
fragment について詳しくは，[RFC2396] の Section 4 を参照すること.

画像 img 画像を表示する. <img src="画像のURI" alt="画像が見えない場合の記述テキスト" /> と書く.

グラフィカルでない環境では画像は見えない. そうした環境でも支障がないように，alt= できちんとしたテキストを記述しないといけない.

画像処理に関しては次の授業で解説する.

リスト

リスト宣言

定義リスト. 見出しとその説明が交互に並ぶリストを作る.

<dl>
   <dt>見出し1</dt>
     <dd>見出し1 の説明</dd>
   <dt>見出し2</dt>
     <dd>見出し2 の説明</dd>
   </dl>

等と書く(項目数は好きなだけ増やせる). これを Web Browser で実際に見ると，

見出し1: 見出し1の説明
見出し2: 見出し2の説明

と見える.

番号付きリスト

<ol>
   <li>要素1</li>
   <li>要素2</li>
   <li>要素3</li>
   </ol>
等と書く(項目数は好きなだけ増やせる). これを Web Browser で実際に見ると，

要素1
要素2
要素3

と見える. 番号は Web Browser が自動的に付けてくれる.

単なるリスト

<ul>
   <li>要素1</li>
   <li>要素2</li>
   <li>要素3</li>
   </ul>
等と書く(項目数は好きなだけ増やせる). これを Web Browser で実際に見ると，

要素1
要素2
要素3

と見える.

要素 dt 定義リストの見出し要素. dl の項を見よ.

dd 定義リストの説明要素. dl の項を見よ.

li 番号つきリストと単なるリストの要素. ol, ul の項を見よ.

表

表宣言

table

表を作る.

<table>
   <caption>表のタイトル</caption>
   <tr>
     <th> 見出し要素1 </th>
     <td> 要素1 </td>
     <td> 要素2 </td>
     <td> 要素3 </td>
     </tr>
   <tr>
     <th> 見出し要素2 </th>
     <td> 要素4 </td>
     <td> 要素5 </td>
     <td> 要素6 </td>
     </tr>
   </table>
等と書く(項目数は好きなだけ増やせる). これを Web Browser で実際に見ると，

表のタイトル
見出し要素1	要素1	要素2	要素3
見出し要素2	要素4	要素5	要素6

と見える.

名称 caption 表のタイトルをつける. table の項を見よ.

行 tr 表の一行(横一行ということ)を表す. table の項を見よ.

要素 th 表中の要素で，見出しに相当するもの. tr の中で使う. table の項を見よ.

td 表中の普通の要素. tr の中で使う. table の項を見よ.

コメント  コメントを書く. コメントは Web Browser では「表示されない」.  と書く.
-- の部分は見えにくいが，ハイフン(-)が二つつながっている. XML ではコメントの定義はこの形だけである.

実体参照 & & を表示する. & と書く.
& は XHTML 中で特別な役割を持つため， & をそのまま書いても正しく表示できないことがある. よって，& を表示したい場合は & と書く必要がある.

' ' を表示する. ' と書く.
理由は & と同じ.

" " を表示する. " と書く.
理由は & と同じ.

< < を表示する. < と書く.
理由は & と同じ.

> > を表示する. > と書く.
理由は & と同じ.

XHTML ファイルを作る手順

既にあるファイルをコピーする等して，新しくファイルを作るこの時，ファイルの拡張子は .html にしておくのが現状ではよいと思われる.
# XHTML ファイルという意味では，拡張子は .xhtml か .xml にするべきであるが，現状では Netscape 4.7 や他のちょっと古めの Web Browser がそれらの拡張子の web page にきちんと対応できない.
# そこで，苦肉の策とも言えるが，上記のようにするのがよい. こうすると XHTML ではなくて単なる HTML ファイルとして解釈されてしまうのだが仕方ない.
エディタで内容を書く or 修正する.
この時，タイトルなどのヘッダ部分を修正し忘れることが多いので注意する. ヘッダ部分のタイトルは，bookmark や web 検索で用いられる大事な情報であるので，扱いには注意しておく.
複雑な web page を作るには web page ファイルを作成する専用のツールを使うのが便利であるが，最初からそうするのは良くない. 文書を論理構造に分解して記述する，という能力を身につけるためにも，最初のうちだけでもテキストエディタで直接 XHTML ファイルを編集するべきである.
文法ミスがないか「形式的に」チェック.
これにはいくつか方法がある. その中で初心者にもすぐできる方法を紹介しておこう.
1. XHTML を理解する Mozilla などの web browser を利用して:
  例えば，拡張子を .xhtml か .xml に変えれば Mozilla 等では文法を「形式的に」チェックしてから表示する. 文法的に間違いがあればその旨が表示され，内容は表示されない.
  よって，一時的に拡張子を上記のように変更して Mozilla で見れば，形式的な文法チェックならできる，というわけだ.
2. web などで提供されている文法チェッカを利用して:
  例えば，web の規格に関する本家本元である w3c によっても W3C MarkUp Validation Service という Validation Check サービスが提供されている. こうしたところが web 上に多数あり，これらを用いると，作成したファイルが文法的に正しいかチェックできる.
  
  文法的正しさのお墨付き
  ちなみに，上の w3c のチェックで「合格」と判定されると， W3C の用意した「合格証明書」(画像)をその web page に張ることが許される. この web page の一番右上にも張られているので見てみよ.

XHTML を書く時の注意点

タグは全て小文字で書く

<p> を <P> などと書いてはならない，ということである. Web Browser が気を利かせてほぼ狙い通りに表示してくれる可能性は高いが，これにより表示が崩れる可能性もあるので注意する.

本文中で，タグで囲んでないところに文章を書かないこと

本文中では，どのような文書も文字も数字も，表示されるものは全て何かのタグで囲まれていないといけない. よく分からない，という人は仕方ないので，せめて <p> と </p> で文書を囲んで書くようにしよう.

タグは必ず終了させる

例えば，
<li>要素1
でリストの要素を書いた後， </li> を書くのを忘れて
<li>要素2
と続けてしまった場合などがそれにあたる.
HTML 4 ではそうした省略が認められていたが， XHTML 1.0 以上ではそうした省略は禁止されているので注意する. Web Browser を厳密に動作させると，そうした web page は文法エラーで見えないことになるので，注意が必要だ.
あと， <br /> と <img /> の最後の / を忘れやすいので注意が必要だ.

表現設定をしないこと

XHTML 1.1 以降では文字の色や大きさ，配置場所等は直接指定できない. 後で泣かないように，今からこうしたことをしないよう注意する.
# そうした機能は CSS(Cascading Style Sheet) を用いて実現できる.
# やってみたいものは，適宜自力で調べて試みてみよ.

論理的構造を崩さない

見た目に凝りたいあまり，HTML の論理的構造を無視した使い方をしたくなることがあるが，そういうことのないように注意する.

「ここ」というリンクは駄目

a タグを使うときに，つい，

ホゲホゲを見るならば<a href="hogehoge">ここ</a> を参照のこと.

などと書いてしまう人がいるが，これは良くない. 理由はいくつかある.
まず，その文書が HyperText だというのを忘れて普通に文書として読んでみると，「ここ」というのが如何に不自然な文章かがわかる. つまり，「ここ」を使った web page は既に文書としておかしいのである.
また，例えば，Web Browser がリンク先だけを抽出して別表示するようなものだったとしよう.
# 視覚障害者が Web Browsing するときの状況は「読み上げに時間がかかるため」これに近いものがある.
すると，このような表示は例えば次のように見えるのである.

      ホゲホゲを見るならば (1) を参照のこと.
      それが嫌なら，例えば図書館に幾とか云々…
      …
      …
      あれを見るならば (2) を参照のこと.
      …
      …
      …
      …
      これを見るならば (3) を参照のこと.
      …
      …
    ----------------------------------------
    (1)ここ    (2)ここ    (3)ここ

で，クリックできるのは最下行だけ，としよう. すると，どれがどの「ここ」だ? 分かることは分かるが，分かりにくいことこの上ない.

これは web の世界では「here症候群」と呼ばれる知られた話なので, 他人に笑われないように気をつけるべし.

漢字コードを間違えないように気をつける

漢字コードを間違えて宣言すれば，閲覧できないということになる. EUC か JIS を使う，と自分で決めてしまうのが良い. shift-JIS はあまりお勧めできないが，きちんと把握して使うならばまあそれでも良い.
なお，漢字コードの変換等については以下の漢字コードについてをよく読むこと.

漢字コードについて

日本語のテキストをファイルとして保存する形式には実は数種類の方法がある. 以下にそのうち有名なものを挙げておく.
ちなみに，阪大教育用計算機システムのデフォルト漢字コードは EUC のようである.

■ 漢字コードの種類 ■
名称(俗称)	説明	変換方法 (kterm 上で)
JIS	7 bit コード. 7 bit コード(欧米アルファベット等)しか想定していないプログラムでも問題なく扱えるため， e-mail 等のネットワーク上通信では JIS をデフォルトもしくは必須とすることが多い. (注) ちなみに， e-mail は JIS で送られるもの，と決められている. unix を日本語化するときに JIS をデフォルトとすることも多い.	file1 を JIS コードに変換して file2 とするには， `nkf -j < file1 > file2` とする. file1 をそのまま変換したい，という場合は少しややこしいが， dummy という名前のファイルが存在しない前提で `mv file1 dummy nkf -j < dummy > file1 rm dummy` とすればよい.
EUC	8 bit コード. unix を日本語化するときに EUC をデフォルトとすることも多い. その歴史の長さから unix の多くのプログラムが EUC 対応になっていることもあり，よく用いられる.	file1 を EUC コードに変換して file2 とするには， `nkf -e < file1 > file2` とする. file1 をそのまま変換したい，という場合等は JIS コードの該当項を参照すること.
shift-JIS	8 bit コード. 主に PC 系でよく用いられる. 逆に unix ではあまり用いられないことから， (サーバに unix を用いることが多いこともあり) web 発信にはあまり用いられない傾向がある.	file1 を shift-JIS コードに変換して file2 とするには， `nkf -s < file1 > file2` とする. file1 をそのまま変換したい，という場合等は JIS コードの該当項を参照すること.
Unicode	世界統一文字コードを目指した規格. ただし中国文字，台湾文字，日本文字(漢字)等を無理やり一つにまとめようとするなど，現時点ではまだ問題点も多い. 将来的には徐々にこの Unicode (のバージョンアップ版)に統一されると思われる.

上にあるように，unix 上で JIS, EUC, shift-JIS 形式のテキストファイルは御互いに容易に変換することができる.
もしどれか一つの漢字コードを主に使うというのであれば，歴史的経緯等を配慮して EUC か JIS を用いるのがよいだろう.

実習

前回の授業の実習の続きとして行う. 良く分からない部分は前回の授業内容を参照すること.

まず，両隣りなどの 2名以上に自分の web page を見てもらうとともに，自分も彼らの web を自分の PC で見て，参考とする.
両隣りなどの 2名以上の web page を HyperText としてリンクするように， index.html を修正する.
これは，詳しくは a タグを使う練習である. 阪大教育用計算機システムでは, 友人A のログイン名が smXXXX だとすると， index.html の中に
<a href="http://webserver/~smXXXX/index.html"> 友人 A </a>
と書込めばよい.

注意省略して <a href="http://webserver/~smXXXX/"> 友人 A </a> と書いてもよいが， smXXXX の後にスラッシュ「/」を書き忘れるときちんと表示されないことがあるので注意すること.
前回の授業の web を参照して，阪大 OPAC と Google を HyperText としてリンクするように， index.html を修正する.
新たに index.html 以外の xhtml ファイルを作成し，やはり index.html から HyperText としてリンクするように， index.html を修正する.

具体的には，例えば hogehoge.html というファイルを作ったとしたら， index.html の中に

<a href="hogehoge.html"> ほげほげとは </a>

などと書込めばよい.
table タグを使って，表を作ってみよ.
(上級者向け) 適切な資料を web 検索でみつけるなどして参照して， W3C MarkUp Validation Service のテストをパスするように文法的に正しい web page を作るようにせよ. もしパスするようになったら，証明書(画像)を張り付けておけ.

レポート課題(単位認定要件)

以下に示す課題について能う限り賢明な調査と考察を行い，

InformationLiteracy-01

という題名をつけて e-mail にて教官宛にレポートとして提出せよ(教官のメールアドレスは授業中に口頭で伝える).
なお，レポートを e-mail の代わりに TeX で作成した書面にて提出してもよい.

なお，本レポートは単位認定のための必須要件の一つであるので，きちんと提出すること.
注意こちらの要求に沿っていないレポート，出来の悪いレポート，は未提出扱いにするので，ろくなレポートができなかった場合は単位が得られないものと提出時に覚悟しておくこと.

XHTML 1.1 文法の簡単な説明にのっている img 以外の全てのエレメントを ~/public_html/index.html 内部で用いよ.
~/public_html/index.html を自己紹介のための web として充実させよ.
以上ができたら，教官宛のメールにて ~/public_html/index.html の中身を送付せよ.
ただし，「添付ファイル形式」で送ることは認めない. 必ずメール本文中に入れること.
また，メールが文字化けしている場合は未提出と見なすので注意すること.
また，メール本文内に「自分の名前，所属，学籍番号, ログイン名」の全ての項目が並記してきちんと明記されていないものは提出者不明扱いであるので注意すること.