HTMLの作成
HTML と DTD
HTML は、マークアップ言語と呼ばれるもので、プログラミング言語とは異なります
この言語は、テキストに意味付けすることで、文章の意味をブラウザに提供します
ブラウザは、文章定義に合わせて意味付けされた文字などを表示します
HTML は SGML アプリケーション の一種です
SGML とは、先に説明したマークアップ言語であり、厳密な言語規定があります
しかし、この使用は複雑で難しく利用者にもソフト開発者にとっても負担になります
そのため、SGML は普及されずに SGML の一例として HTML が考えられました
HTML は タグ と呼ばれる単位で記述していきます
タグは < > で囲まれたものです、タグの中には 要素 と呼ばれる
要素は段落やリスト、表、リンク、画像など、ドキュメントのふるまいを表します
HTML は通常、開始タグ、内容、終了タグ という構成で表され
次の様に記述していきます
<要素名> 内容 </要素名>
開始タグは、タグで要素を囲むだけです
しかし、終了タグは 要素の前に / を指定しなければなりません
(ここまでは、正確には SGML の構成素と考えることができます)
では、実際に HTML を記述してみることにしましょう
まず、メモ帳などのテキストエディタでテキストファイルをドライブに保存してください
この時、ファイル拡張子は .htm、または .html にしてください
HTML は、文書型定義 - DTD によって表示されます
以下は HTML 要素の DTD の一例です
<!ENTITY % html.content "HEAD, BODY">
<!ELEMENT HTML O O (%html.content;) -- document root element -->
<!ATTLIST HTML
%i18n; -- lang, dir --
>
本質的に SGML 及び HTML を研究するならば知る必要がありますが
DTD については XML 入門の方で詳しく説明することにします
事実、HTML の記述には DTD の知識はとくに必要ありません
HTML 文章は、DTD に基いて表示されます
DTD が異なれば、当然 HTML 文章の意味も大きく異なってしまいます
HTML は、過去何度か仕様が改訂されていて、最新バージョンは 4.0 です
HTML は HTML4.0 で開発を終了し後継は XHTML に引き継がれました
XHTML についての詳細は XML で解説します
HTML4.0 では、3つの DTD が規定されていて、そのいずれかを使用しなければなりません
それぞれの DTD は、サポートする要素が異なっています
DTD を選択するには 文書型宣言 で指定します
3つの DTD とは、「厳密型」「移行型」「フレーム設定型」の3つです
厳密型は推奨されない要素やフレーム設定型の要素を含まない DTD です
移行型は、厳密型に対して推奨されたない要素なども含む DTD です
そして、フレーム設定型はフレーム用の内容を加えた DTD です（フレームについては後記）
それぞれの DTD は、次の様に指定します
| DTD | 文書型宣言
|
|---|
| 厳密型 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
|
| 移行型 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
|
| フレーム型 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
|
文書型宣言は、必ずファイルの先頭に記述してください
これで、HTML のドキュメントタイプが決定されました
この文書型宣言後の HTML は指定した DTD に基いて表示されます
ヘッダ
さて、ドキュメントタイプが決定されれば、いよいよ HTML を記述しましょう
（因みに、文書型宣言は省略しても大きな問題にはなりません）
HTMLファイルは、まず HTML 要素 から始まる
文書型宣言のあとの HTML 文章は全てが HTML 要素の内容と考えられます
<html> HTML の内容 </html>
要素の名前を指定する時、大文字と小文字どちらを使うべきでしょう？
実は、HTML の要素や属性は大文字と小文字を区別しません
つまり、<HTML> でも良いし <html> でも良いのです
HTML 要素には、必ずHEAD 要素と BODY 要素 があります
BODY 要素には、ドキュメントの表示内容そのものを記述します
BODY 要素については、この次の章で紹介することにしましょう
HEAD 要素は、ドキュメントの内容以外のデータなどの定義をする部分です
たとえば、スクリプト言語のメソッド（プロシージャ）の定義などもここで行えます
スクリプト言語については JavaScript 入門などを参照してください
| HTML 要素
|
|---|
| | | |
|
|---|
| HEAD 要素 | BODY 要素
|
|---|
このように HTML の要素は内部に他の要素を含めることができます
このとき、HEAD や BODY 要素は HTML 要素の子要素であるということができる
（実際には、BODY 以外にフレームを使う方法があるが、それは後記する）
HEAD は、一般に BODY 要素よりも前に記述する必要があります
HEAD 要素の中には、必ず TITLE 要素を含める必要があります
この要素は、ドキュメントのタイトルを設定するものです
たとえば、ユーザーがドキュメントの内容を抜きに文章を参照するのに使ったりします
<title>文章のタイトル</title>
TITLE 要素の内容には、どのような要素を含めることもできません
さて、これまでの HTML、HEAD、TITLE 要素を用いれば
内容 (BODY) は空ですが、最小の HTML ファイルを作ることができます
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Kitty on your lap</title>
</head>
<body>
</body>
</html>
サンプル
サンプルを見ると、よくわかると思います
ドキュメントの内容は何もないので、ブラウザは何も表示しません
しかしタイトルは指定され、これはブラウザのタイトルバーなどで生かされています
HTML はホワイトスペースを無視します
そのため、タグや改行は自由に記述することができます
正確には文章でのホワイトスペースは、連続すると一つの空白スペースにまとめられます
逆に、その気になれば1行のHTMLファイルで数1千行のドキュメントも書けます
ソースを読みやすくするため、子要素をインデントするとよいでしょう
属性
これまで、タグには要素名を指定する必要があると説明しました
しかし、タグには要素以外に要素に対する情報属性を指定できます
少し論理的な概念を説明しましょう
属性とは、<人間> という要素があるとした場合
名前や年齢、性別というような属性を持っていると考えることができます
HTML もこれと同様で、要素は専用の属性を指定しなければならない
または、属性を指定することができるというものがある
BODY 要素は、多くの属性を持っています
それらは省略することも可能ですし、明示的に指定することもできるのです
BODY 及び BODY 要素の子要素には、属性を指定できます
とくに、スタイルシートやスクリプトなど、他の技術との連帯に用います
その他に、多くのタグは title 属性を指定できます
TITLE 要素は HEAD に一度しか指定できませんでしたが title 属性は要素にタイトルをつけられます
title = 説明文字列
通常は、要素部分にカーソルなどが合わさるとツールチップを表示したり
視覚障害者用のブラウザであれば、その内容を音声で知らせるでしょう
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Kitty on your lap</title>
</head>
<body title="Kitty on your lap">
</body>
</html>
サンプル
ブラウザのクライアント領域にマウスカーソルを待機させると
title で指定した説明文のツールチップが表示されたりします
コメント
HTML の文章とは関係なしに、ドキュメントに何らかの説明文を残したい場合
コメントを用いることで、ファイルに説明文を記述することができます
コメントは、<!-- ではじまり --> で終わります
その間に、どのようなコメントを残しても自由ですし、改行を含めてもかまいません
ただし、コメント内に連続したハイフン --- などを含ませてはいけません
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Kitty on your lap</title>
</head>
<body>
<!-- この文章はコメントです
(c) 2001 赤坂玲音
-->
</body>
</html>
コメント部分は無視されるため、ブラウザは何も表示しません
コメントは マーク付け宣言開始区切り子 <! と
コメント開始区切り子 -- から始まり、その間に空白があってはいけません
しかし、コメント終了区切り子 -- と
マーク付け宣言終了区切り子 > の間には空白文字があってもよいとされます