Let's begin XHTML―さあ始めよう XHTML

図版について

Section 1

図 1.1:ページソースを Windows の“メモ帳”で表示。
XHTML は基本的にテキストファイルで,内容としてのテキストに処理符号が書き込まれたものである。表示されているテキストに混じって,処理符号が書き込まれているのがわかる。
図 1.2:文書は,さまざまな部分からなっている。
文書は,さまざまな部分からなっており,XHTML はその各部分を“要素”と呼ぶ。図は Let's begin XHTML Section 1 の出力イメージであるが,大見出し・小見出し・段落・図などからなっていることがわかる。もう少し小さい部分としては,語句定義・強調語句などもある。

Section 2

図 2.1:要素は,開始タグから終了タグまで。
要素は,一般に,開始タグ,要素の内容,終了タグからなる。タグは,要素がそこにあることを示す符号である。空要素タグは,それ自身が 1 つの要素であり,要素の内容はない。

Section 4

図 4.1:マークアップを色分けするエディタで XHTML を編集。
XHTML をテキストエディタで編集する際には,マークアップ部分を色分けできるものが便利である。画面は,アンカーシステムズより公開されているテキストエディタ“Peggy Pad”(フリーソフトウェア,上位版は有料)。

Section 8

図 8.1:画像が表示できないとき,代替テキストが表示される。
alt 属性は,たとえば画像が読み込めなかった場合などに,その代替テキストとして使用される。図は Windows 版 Intrenet Explorer 6 のもの。

Section 11

図 11.1:作成する 4 列 3 行の表。
ここで作成しようとする表は,4 列,3 行で 12 個のセルからなっている。1 行めは以降の行に対する見出しのセルが並んでいる。
図 11.2:作成した表の,要素との対応。
表中のセルは,td または th 要素で示され,セルを横方向に並べた 1 行が tr 要素である。行を縦に並べて 1 つの表,つまり table 要素になる。

Section 13

図 13.1:Netscape 6 における,表の要約の表示。
Netscape 6 以降では,表のプロパティを表示させることで,table 要素の summary に指定された要約を知ることができる。図は,Winodws 版 Netscape 6.2.3 のもの。

Section 14

図 14.1:Opera 7 では,link 要素に対応してショートカットが生成。
Opera 7 では,link 要素で関連するページなどを指定しておくと,それらへのショートカットが生成される。図は,Winodws 版 Opera 7.2 のもの。

Section 15

図 15.1:メディアに応じた出力を,スタイルシートによって可能に。
ひとつの文書に対して,出力メディアに最適化されたスタイルシート適用させ,出力メディアに応じた出力を得ることができる。たとえば,PC の画面表示用,印刷用,音声出力用,携帯端末用,など。さまざまなメディアに対応させやすくするために,XHTML は出力メディアに依存しない文書の構造をマークアップによって示す方法を採っている,と考えることもできるだろう。
図 15.2:共通のスタイルシートで統一感のあるデザインを実現。
ひとつのスタイルシートを複数の文書(XHTML)ファイルに適用させることによって,サイトに統一感を出すことが容易になる。また,デザインがスタイルシートに集中的に記述されているので,その管理がしやすくなるだろう。

Section 17

図 17.1:ルビが振られる部分は,ベーステキストとルビテキストからなると考える。
XHTML において,ルビを伴う部分は,ベーステキストとルビテキストからなると考える。ルビの一般的な表現では,(横書き時)ベーステキストの上に,その半分程度のサイズでルビテキストが書かれる。

Section 19

図 19.1:Windows の機種依存文字
機種依存文字は,異なるプラットフォームでまったくことなる文字として出力されてしまう危険性がある。Windows の機種依存文字には,(全角 1 文字の)丸数字,ローマ数字,単位記号,一部の数学記号がある。

Appendix C

図 C.1:想定するディレクトリ構成。
相対 URI を説明するのに,サイトのディレクトリ構成を表した図が入っている。文字で書くと,次のようになる。
http://www.tg.rim.or.jp/
  |- ~hexane --- ach --- lbxh --- index.html
  |..         |..     |        |- lbxha1.htm
  :           :       |        |- lbxha2.htm
                      |        |- lbxha3.htm
                      |        |..
                      |        :
                      |
                      |- ptxh --- index.html
                      |..      |- ptxh01.htm
                      :        |..
                               :