2007 Information Literacy Seminar.
今回と次回とで HTML と CSS を使った Web ページの作成方法を学びます。 最近では Web サイトの制作にオーサリングツールを利用することも多いですが、ツールを使いこなすためにも HTML や CSS の知識は必要です。 演習ではすべてを取り上げることはできませんので、各自で資料にあたって理解を深めてください。
普段われわれが目にする Web ページは、そのページで使用されている画像ファイルや Flash コンテンツなどを除けば、基本的にはすべてテキストで記述されている。 現在あなたが見ているこのページも例外ではない。 Internet Explorer で閲覧しているならばメニューの［表示］→［ソース］から、他の Web ブラウザでもそれと同様の方法でこのページの正体（ソース）を見ることができる。
ソースを表示させてみると、Web ブラウザの画面に表示されているテキストとは異なる記号が多く目につく。 この記号たちこそが、ただのテキストを Web ページに仕立て上げている影の功労者であり、これらの記号たちのことやその記述ルールのことを HTML（HyperText Markup Language）と呼ぶ。
われわれ人間が文書を目にすれば、書いてある内容からはもちろん、レイアウトや文字の書式などによって、どれがタイトルでどこからどこまでが 1 セクションなのか、作成者の署名はどれかといったことを判断することができる。 しかし、コンピュータにとっては文書といえどもデータの塊にすぎず、内容を理解することもできなければ、どの部分が何をあらわしていると解釈するべきなのかも判断できない。
そこで、コンピュータにも処理しやすいように、文書に一定のルールにもとづいた目印をつけようという発想が出てきた。 これがマークアップという考え方であり、HTML はマークアップのための言語のひとつである。 Web ブラウザは HTML のルールにもとづいてページの内容を解釈し、その意味に応じたレンダリングを施してわれわれに表示してくれる。
あらゆるコンピュータ環境で利用できるように、HTML はファイル形式としてテキスト形式を採用している。 つまり、テキストを読み書きできるプログラム（テキストエディタと呼ぶ）を持っていれば、HTML を作成したり編集したりすることができる。 Windows では「メモ帳」、Mac OS X では「TextEdit」、その他の UNIX 系 OS では「vi」といったエディタが標準で添付されているので、これらを使えばよい。
HTML では、見出しや段落、署名といった文書を構成する部品のことを「要素」と呼ぶ。 また、これらの要素をコンピュータが理解できるように埋め込む記号のことを「タグ」と呼ぶ。 つまり、HTML で文書をマークアップするということは、文書の論理構造にしたがってタグを埋め込んでいき、文書を要素に分割する（構造としてとらえる）ということである。
タグは不等号記号（'<'，'>'）で要素名をはさんだもので、通常、以下のように開始タグと終了タグ（要素名の前に半角スラッシュをつける）をペアで使用する。 見出しや段落のテキストといった「内容」を挟むことで、どの範囲が何の要素なのかを明示することができる。
<要素名>内容</要素名>ただし、要素によっては内容をともなわず開始タグのみを単独で使用するものもあり、こういった要素は「空要素」と呼ばれる。
文書中で表示する画像ファイルのアドレスやリンク先のアドレスなど、要素に何らかの付加情報を与えたい場合がある。 このような付加情報は「属性」として開始タグに記述する。 属性は要素名の後に半角スペースで区切って複数指定することができる。 ただし、どの要素にどのような属性が指定できるかは仕様で定められているので注意すること。
<要素名 属性名="値">内容</要素名>テキストエディタを起動し、以下の内容を入力する。 日本語で書かれている部分以外はすべて半角で入力すること。
<html>
<head>
<title>最小限のサンプル</title>
</head>
<body>
<p>これは最小限のサンプルです。</p>
</body>
</html>メニューの［ファイル］→［名前をつけて保存］でファイルを保存する。 ファイル名は半角英数字のみでつけ、拡張子を .html とすること。
Web ブラウザを起動し、先ほど保存した HTML ファイルを表示してみる。
文書全体が html タグで囲まれ、この文書が HTML でマークアップされた文書であることが示されている。 このように、HTML では文書全体も "html 要素" というひとつの要素としてあらわされる。
html 要素の子要素として head 要素と body 要素が並んでいる。 すべての HTML 文書はこの 2 つの要素から構成される。 head 要素は文書自身の情報（このような情報を「メタ情報」と呼ぶ）を記述するヘッダー部分であり、後述するタイトルのほか、関連するページや作成者の情報などを記述する。 body 要素は文書の内容を記述する本文部分であり、ここに記述した内容が Web ブラウザ内に表示されることになる。 head 要素と body 要素は、必ずこの順番で、それぞれひとつだけ記述しなくてはならない。
ヘッダー部分には、この文書のタイトルが記載されている。 文書のタイトルは title 要素であらわされる。 多くの Web ブラウザでは、ウインドウのタイトルバーなどにこの情報を表示するようになっているほか、ブックマークのデフォルト名としても利用されている。 すべての HTML 文書には title 要素が必要である。
本文部分には、この文書の唯一の内容として段落がひとつ記述されている。 段落は p 要素（paragraph の頭文字）であらわされる。
実際に簡単な Web ページを作成しながら、HTML でよく使われる要素を学んでいく。 以下では、有名なファンタジー小説「ハリー・ポッター」を紹介する Web ページ（参考：この Web ページの構造）を作成するという想定で作業を行っている。 この Web ページは提出する必要はないが、本日の課題として受講者自身が興味ある題材で Web ページを作成することを求めるので、HTML で論理構造を表現する要点を把握するよう努めること。
ある程度の内容が含まれる文書では、通常、本文のまとまりごとに見出しがつけられる。 さらにその場合、文章の構造に応じて、大見出し、中見出し、小見出しのように階層的な見出しをつけていくことが多い。 HTML にはこのような階層的な見出しを表現するための hn 要素（heading の頭文字）が用意されており、n の部分に 1 〜 6 までの数字をあてて 6 段階の見出しをつけることができるようになっている。 h1 がもっとも上位の見出しで、数字の昇順に見出しが細分化されていく。
<h1>ハリー・ポッターの世界</h1>
<h2>はじめに</h2>
•••
<h2>作品紹介</h2>
<h3>ストーリー</h3>
•••
<h3>登場人物</h3>
•••下位の見出しは上位の見出しの子要素ではないことに注意すること。 意味的には階層構造となっているが、W3C 勧告では h1 〜 h6 はすべて同じ階層であると定義されている。 なお、次期バージョンの XHTML 2.0 では、新たに section 要素と h 要素が定義され、文章の構造と見出しを階層的に表現することができるようになる予定である。
名簿や品物リストなど、複数の対象について、同じ複数の項目に関する情報を記述する場合に表が用いられる。 コンピュータで利用される表は、通常、行方向に対象（人や品物など）をとり、列方向に項目（名前や説明など）をとる。 HTML では、このような表を表現するための要素として table 要素とそのほかの関連するいくつかの要素が定義されている。
<table>
<caption>作品に登場する主な人物</caption>
<tr>
<th>名前</th>
<th>人物紹介</th>
</tr>
<tr>
<td>ハリー・ポッター</td>
<td>この物語の主人公。•••</td>
</tr>
•••
</table>表全体は table 要素としてあらわされる。表はひとつの表題（キャプション）とひとつ以上の行から構成され、それぞれ caption 要素、tr 要素であらわされる。
表題を表現するのが caption 要素である。table 要素の開始タグの直後にひとつだけ記述する。
行を表現するのが tr 要素（table row の頭文字）である。ひとつの行には th 要素または td 要素がひとつ以上含まれる。
セルを表現するのが th 要素と td 要素である。 項目名を記述するセルは th 要素（table header の頭文字）を、項目の内容を記述するセルは td 要素（table data の頭文字）を使って表現する。 同じセルを表現する要素であっても、両者は意味（論理構造上の位置づけ）が異なるので注意すること。
上記の記述例のままでは、罫線のない状態で表がレンダリングされる（Web ブラウザで表示させて確認してみよ）。 表に罫線をつけるには、table 要素の border 属性に罫線の太さを pixel 単位で指定すればよい。 ただし、本来ならば、このような見栄えに関する指定はスタイルシートを用いて行うべきであることに注意すること。スタイルシートについては次回演習で取り上げる。
<table border="1">順序立てて物事を説明する場合や項目を列挙する場合などにリスト（箇条書き）が用いられる。 HTML では、番号つきのリストを表現するための ol 要素（ordered list の頭文字）、番号なしのリストを表現するための ul 要素（unordered list の頭文字）が用意されている。 これらの要素はリスト全体をあらわし、それぞれ子要素として、項目をあらわす li 要素（list item の頭文字）のみをひとつ以上含む。
<ol>
<li>ハリー・ポッターと賢者の石</li>
<li>ハリー・ポッターと秘密の部屋</li>
•••
</ol><ul>
<li>Harry Potter（原作出版社のサイト）</li>
<li>ハリー・ポッター公式ウエブサイト（映画版）</li>
•••
</ul>なお、li 要素の内容には、テキストだけでなく段落やリストといったブロックレベル要素を含めることも可能である。 これを利用すれば、段落に番号をつけたり、階層的なリストを作成したりすることができる。
<ol>
<li>
ハリー・ポッターと賢者の石
<ul>
<li>ハリー・ポッターシリーズ第 1 作目！</li>
<li>闇の魔法使いヴォルデモートから賢者の石を守れるのか？</li>
</ul>
</li>
<li>
ハリー・ポッターと秘密の部屋
•••
</li>
•••
</ol>レポートに学籍番号と氏名を明記するように、Web ページにも作成者（または Web サイトの管理者）の情報を記述するのが一般的である。 閲覧者が作成者にコンタクトを取れるようにするという意味もあるが、文責とともにそのページが作成者の著作物であることを明示するという意味あいもある。 そのため HTML では、連絡先をあらわす address 要素が定義されている。
<address>
SENSHU Taro（ne17XXXX＠isc.senshu-u.ac.jp）
</address>実際に Web ページを作成し公開する際には、自分の情報をどこまで公開するかに注意すること。 Web に公開した情報は、決して友人や知人だけが目にしているものではない。 最近では、個人情報だけでなく、メールアドレスを公開することさえもトラブルにつながる可能性がある。 上記の例では、メールアドレスを自動収集されて迷惑メールが送られてくるのを防ぐために @ の部分を全角で表記している。
WWW のもっとも大きな特徴は、文書のある部分にそれと関連した別のリソースの位置情報が埋め込まれており、閲覧者が別のリソースに簡単にアクセスできるようになっていることである。 この位置情報のことをハイパーリンクと呼び、ハイパーリンクによって複数のリソースを関連づけたシステムをハイパーテキストと呼ぶ。 HTML では、ハイパーリンクの始点を a 要素（anchor の頭文字）と a 要素の href 属性（hyper reference の略）で表現する。 ハイパーリンクを設定したい部分を a タグで囲い、href 属性にリンク先のリソースの URI を指定すればよい。
<a href="http://www.bloomsbury.com/harrypotter/">Harry Potter（原作出版社のサイト）</a>なお、リンク先のリソースは HTML 文書でなくても、静止画でも動画でも音楽でも任意のものを指定することができる。
HTML では、ハイパーリンクによって文書に画像を関連づけるほかに、本文中に画像をインライン表示する方法が定められている。 画像をインライン表示するには、img 要素（image の略）と img 要素の src 属性（source の略）を利用する。 画像を表示したい場所に img タグを記述し、src 属性にリソースの URI を指定すればよい。img 要素は内容を持たない空要素のため、タグは省略形で記述する。
<img src="./sample/owl.jpg" alt="ヘドウィグは雪のように白くて美しいフクロウです。"/>
img 要素には src 属性のほかに、必ず指定しなくてはならない属性として alt 属性（alternative の略）がある。
alt 属性は、その名前が示すとおり代替テキストを指定する属性であり、何らかの理由で画像が表示できない場合に代わりに表示するテキストを指定するものである。
alt 属性に記述する内容はよく考える必要がある。 たとえば、第 05 回で作成した合成画像の代替テキストとして「植物と動物の合成画像」のように記述した場合、閲覧者にとって意味のある情報とは言いがたい。 代替テキストは、画像と等価な情報を伝えるテキストにするべきである。 なお、このサンプルで用いている白フクロウの画像のように、画像それ自体にそれほど重要な意味がない場合には、alt 属性の内容はむしろ空にしておいたほうがよいという議論もある。
先述のように、HTML では物理的な改行は無視される。 そこで、何らかの理由でテキストの途中で強制的に改行したい場合には、br 要素（break の略）を利用する。 サンプルでは、画像を独立した行に表示させるために強制改行を行っている。 br 要素は内容を持たない空要素のため、タグは省略形で記述する。
<p>
•••<br/>
••••••
</p>物理的な構造＝見栄えを指定する要素であることから、XHTML 2.0 では廃止される予定である。 論理構造として行を表現した場合には代わりに提供される l 要素を使用し、デザインの都合で改行した場合にはスタイルシートで表現するのが望ましい。
意味的に大きな区切りがある場合など、文書中に水平線を引く必要がある場合には、hr 要素（horizontal rule の頭文字）を利用する。 サンプルでは、本文の内容と作成者の連絡先を区別するために水平線を利用している。 なお、hr 要素も内容を持たない空要素のため、タグは省略形で記述する。
<hr/>br 要素と同様、物理的なマークアップを行う要素であることから、XHTML 2.0 では廃止される予定である。 論理構造を明示的にマークアップした上でスタイルシートを使用するのが望ましい。
HTML を XML に準拠した仕様になるよう定義しなおしたものである。 W3C の仕様策定の主軸もすでに XHTML に移行しており、現在新しく作成される Web ページも、そのほとんどが XHTML で記述されていると考えられる。 HTML との互換性を考慮した定義となっているので、もとの HTML が適切に記述されていれば少しの修正で XHTML として書き直すことができる。
本演習ではとくに触れなかった内容を含むが、参考までに HTML との主な変更点を挙げておく。
なお、空要素については以下のような省略表記が推奨されている。終了タグがない代わりに、開始タグの要素名の後に半角スラッシュをつけていることに注意すること。
<要素名/>XHTML はあくまでも XML で HTML を再定義したものである。 したがって、文書の記述方法も XML の流儀に従わなくてはならない。 XML 文書には XML 宣言が記述されていなくてはならないため、XHTML 文書においてもファイルの先頭に以下のような XML 宣言を記述する。
<?xml version="1.0" encoding="Shift_JIS"?>XML 宣言には version 属性が必須であり（現時点では 1.0 を指定しておけばよい）、UTF-8 または UTF-16 以外の文字コードを使用する場合は encoding 属性で指定しなくてはならない。 以下に代表的な文字コードを挙げる（文字コードは大文字・小文字を区別しない）。
| 文字コード | 説明 |
|---|---|
| UTF-16 | 16 ビットユニコード |
| UTF-8 | 8 ビットユニコード |
| Shift_JIS | Windows や Mac OS で標準的に使われている |
| euc-jp | Mac OS X 以外の UNIX 系 OS で使われている |
| iso-2022-jp | 電子メールの送受信で使われている |
XML では誰もが自由にタグを定義して利用することができる。 そのため、自分の利用しようとしているタグの名前が他の目的で定義されたものと重複してしまい混乱が生じる可能性がある。 そこで XML には、その文書で使用されているタグがどこで定義されたものなのかを識別するために名前空間という仕組みが用意されている。 XTHML の名前空間は http://www.w3.org/1999/xhtml であり、html 要素の xmlns 属性で指定するように定められている。
<html xmlns="http://www.w3.org/1999/xhtml">XML ではタグは DTD（Document Type Definition：文書型定義）と呼ばれる仕様にもとづいて定義される。 その XML 文書がどんなタグの定義に基づいて記述されているのかを示すために、ルート要素（最上位の親要素）の直前に文書型宣言を記述する。 XHTML の場合、ルート要素は html 要素なので、その直前に以下の内容を記述すればよい。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">なお、タグを定義するということは、それを使用して記述される XML 文書がどのような構造をしているのかを定義するということである。 そのため、文書型宣言は XML 文書の厳密な検証のために特に重要となる。
XML では言語コードの指定に xml:lang 属性を使用する。 ルート要素の xml:lang 属性を記述することで、その文書で使用される基本言語を指定することができる。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">本日の授業内容を参考に正しく答えなさい。正しく"マークアップ"することは、何故必要なのでしょうか？