ウェブ・ページでは、ブラウザ・ウィンドウのタイトルバーに文字列が追加できます。 この文字列を、ウェブ・ページの タイトル と呼びます。
タイトルは、ウェブ・ページの内容を表します。 また、ブックマークなどでも使われます。 したがって、簡素で内容のよく分かるタイトルが望ましいです。 なお、規格の上ではタイトルは必ず書かなければなりません。
ブラウザは、
<TITLE>
〜
</TITLE>
で囲まれた部分をタイトルと見なします。
<TITLE>テストページ</TITLE> <P>これはテストページです。</P>
<TITLE>
〜
</TITLE>
の中は単純な文字列に限ります。
タグは入れないでください。
これまでは、テキスト・エディタ（Jedit）を使って文字やタグを書けば、ウェブ・ブラウザ（Safari）がそれに従ってウェブ・ページを表示すると理解していたと思います。 本当は、文字やタグを書くことは、コンピュータ用のデータを構成することなのです。 そして、ウェブ・ページが表示されるときには、コンピュータによるデータ処理が行われているのです。 ここからは、コンピュータ用のデータであることを意識するために、 HTMLドキュメント という言葉を使います。
HTMLドキュメントは、2つの要素から構成されます。 前半は ヘッダ とよばれる部分、後半は 本文 とよばれる部分です。 ヘッダにはブラウザに表示されないデータを書き、本文にはブラウザに表示されるデータを書きます。
ヘッダの主な内容はタイトルです。 タイトル以外にも、ドキュメントに関する色々な情報が追加されることがあります。
ブラウザは、
<HTML>
〜
</HTML>
で囲まれた部分をHTMLドキュメントと見なします。
<HEAD>
〜
</HEAD>
で囲まれた部分をヘッダと見なします。
<BODY>
〜
</BODY>
で囲まれた部分を本文と見なします。
以上の話をまとめますと、HTMLドキュメントは
<HTML> <HEAD> <TITLE>タイトル</TITLE> ドキュメントに関する情報 </HEAD> <BODY> 本文 </BODY> </HTML>
という雛形（パターン）を持つことになります。
規格の上では、HTMLタグ、HEADタグ、およびBODYタグは、開始タグも終了タグも省略できます。 しかし、きちんとしたHTMLドキュメントを構成したければ、タグは省略しないほうがよいでしょう。
<HTML> <HEAD> <TITLE>テストページ</TITLE> </HEAD> <BODY> <P>これはテストページです。</P> </BODY> </HTML>
HTMLは、HTML 2.0→HTML 3.2→HTML 4.0と進化してきました。 それぞれのバージョンでは、タグの書き方に関する文法が定義されています。 文法的に正しいHTMLドキュメントを構成するには、ドキュメントの直前で、どのバージョンの文法に従うかを宣言する必要があります。
HTML4.0については、3種類の宣言があります。 1つ目は、HTML4.0の文法に従い、しかも非推奨の書き方はしないというものです。 これは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
と宣言します。 2つ目は、HTML4.0の文法に従うが、非推奨の書き方がありえるというものです。 これは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
と宣言します。 3つ目は、HTML4.0のフレームセット・ドキュメントの文法に従うというものです。 これは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
と宣言します。
HTMLのバージョンを宣言したドキュメントは、以下のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
ドキュメントに関する情報
</HEAD>
<BODY>
本文
</BODY>
</HTML>
HTMLドキュメントの
メタ・データ
とは、ドキュメントの中のデータではなく、ドキュメント自身に関するデータのことです。
具体的には、ドキュメントの著者名やキーワードなどがメタ・データになります。
メタ・データを表すタグは
<META>
です。
このタグに終了タグはありません。
ここでは、HTMLドキュメントの文字コードというメタ・データを考えます。 日本語のHTMLドキュメントの場合、ブラウザはドキュメントの文字コードを知る必要があります。 特に設定しなければ、ブラウザはドキュメントの文字コードを適当に予測します。 メタ・データを指定しますと、ブラウザにドキュメントの文字コードを正確に伝えることができます。
HTMLドキュメントの文字コードがJIS（ISO 2022-JP）の場合、ヘッダに
<META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
と書きます。 シフトJISの場合は
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
です。 日本語EUCの場合は
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
です。 UTF-8の場合は
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
となります。
文字コードを指定したHTMLドキュメントは、以下のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<TITLE>タイトル</TITLE>
ドキュメントに関する情報
</HEAD>
<BODY>
本文
</BODY>
</HTML>
ウェブ・ページを作っていると、書きかけの文章やちょっとしたメモなど、表示してほしくはないけれどファイルには残しておきたい部分ができたりします。
ブラウザは、
<!--
からそれ以降の最初の
-->
までを
コメント
（注釈）と見なします。
コメントは表示されません。
したがって、表示してほしくない部分は、
<!--
〜
-->
で囲めばよいのです。
<H2>はじめに</H2> <!-- ここは最後に書く。 --> <H2>太陽系の誕生</H2> <!-- この節では、 まず、 -->
広い範囲をコメントにするには注意が必要です。
<H2>はじめに</H2> <!-- ここは最後に書く。 --> <H2>太陽系の誕生</H2> <!-- この節では、 まず、 -->
この全体をコメントにするつもりで、
<!-- <H2>はじめに</H2> <!-- ここは最後に書く。 --> <H2>太陽系の誕生</H2> <!-- この節では、 まず、 --> -->
と書きましても、「太陽系の誕生」が表示されてしまいます。
これは、1行目から始まったコメントが、9行目の
-->
ではなく、3行目の
-->
で終わりと見なされたからです。
タグをたくさん使うようになりますと、開始タグと終了タグの対応が分かりにくくなってきます。 終了タグを忘れて思わぬ表示になったりしないためにも、タグで囲まれている範囲が一目で分かるようにしたいものです。
多くのプログラミング言語では、 インデント （字下げ）を用いてプログラムの構造を見やすくしています。 この方法はHTMLにも通用します。 プログラムのようにインデントをすると、開始タグと終了タグの対応が分かりやすくなります。
インデントの規則は、ホームページの作者が自分で分かりやすいように決めることです。 この授業での例を参考にして、自分なりの規則を作ってください。
今後の予定は以下の通りです。
この授業の成績は、レポートの提出と試験の得点で決まります。
成績に関して次のような事情のある人はメールで連絡してください。 できる限り対処します。
以下の問題（全20問）に回答してください。
問1. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。
問2. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。
問3. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。
問4. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。
問5. UNIXファイル・システムに関する以下の説明の中から、最も適切なものを一つ選んでください。
問6. UNIXファイル・システムに関する以下の説明の中から、最も適切なものを一つ選んでください。
問7. UNIXファイル・システムに関する以下の説明の中から、最も適切なものを一つ選んでください。
問8. UNIXファイル・システムに関する以下の説明の中から、最も適切なものを一つ選んでください。
問9. viエディタに関する以下の説明の中から、最も適切なものを一つ選んでください。
問10. viエディタに関する以下の説明の中から、最も適切なものを一つ選んでください。
問11. ASCIIに関する以下の説明の中から、最も適切なものを一つ選んでください。
問12. UTF-8に関する以下の説明の中から、最も適切なものを一つ選んでください。
問13. ウェブページに<b08a001@cis.twcu.ac.jp>と表示するには、HTMLファイルに何を書けばよいか、以下の中から最も適切なものを一つ選んでください。
問14. H1タグに関する以下の説明の中から、最も適切なものを一つ選んでください。
問15. ある写真の画像ファイルpicture.jpgがあるとき、同じディレクトリのHTMLファイルには何を書けばこの画像が埋め込めるのか、以下の中から最も適切なものを一つ選んでください。
問16. 「トップページ」をクリックするとindex.htmlが表示されるようにしたいとき、同じディレクトリのHTMLファイルには何を書けばよいか、以下の中から最も適切なものを一つ選んでください。
問17. EMタグとSTRONGタグに関する以下の説明の中から、最も適切なものを一つ選んでください。
問18. 連絡先を緑色にする、というスタイルシートはどう書くか、以下の中から最も適切なものを一つ選んでください。
問19. DIVタグとSPANタグに関する以下の説明の中から、最も適切なものを一つ選んでください。
問20. スタイルシートをファイルstyle.cssに格納したとき、同じディレクトリのHTMLファイルには何を書けばこのスタイルシートが読み込めるのか、以下の中から最も適切なものを一つ選んでください。
今日の演習12の答案をメールで提出してください。 差出人は学内のメール・アドレス（b08a001@cis.twcu.ac.jpなど）とし、宛先はkonishi@cis.twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日（12月19日）を明記してください。