ここでは、HTMLドキュメントに色々な情報を設定することについて説明します。
HTMLは、HTML 2.0→HTML 3.2→HTML 4.0と進化してきました。 それぞれのバージョンでは、タグの書き方に関する文法が定義されています。 HTMLドキュメントが文法的に正しいとされるためには、ドキュメントの直前で、どのバージョンの文法に従うかを宣言する必要があります。
HTML4.0については、3種類の宣言があります。 一つ目は、HTML4.0の文法に従い、しかも非推奨の書き方はしないというものです。 これは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
と書きます。 二つ目は、HTML4.0の文法に従うが、非推奨の書き方がありえるというものです。 これは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
と書きます。 三つ目は、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ドキュメントの場合、ブラウザはドキュメントの文字コードを知る必要があります。 特に設定しなければ、ブラウザはドキュメントの文字コードを適当に予測します。 メタ・データを使いますと、ブラウザにドキュメントの文字コードを正確に伝えることができます。
ドキュメントの文字コードがJISの場合、ヘッダに
<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>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>...</title>
</head>
<body>
...
</body>
</html>
今後の予定は以下の通りです。
この授業の成績は、レポートの提出と試験の得点で決まります。
成績に関して次のような事情のある人はメールで連絡してください。 できる限り対処します。
問1. 以下の説明の中から、ブラウザで段落を表示することに関して最も適切なものを一つ選んでください。
問2. 以下のHTMLドキュメントの中から、「<p>タグは段落を表します。」と表示するために最も適切なものをひとつ選んでください。
<p>タグは段落を表します。
<p>タグは段落を表します。
"<p>"タグは段落を表します。
\<p\>タグは段落を表します。
問3. 以下の説明の中から、イメージをホームページに埋め込むために最も適切なものを一つ選んでください。
問4. 以下のHTMLドキュメントの中から、「スペイン」をクリックしてspain.htmlへジャンプするために最も適切なものを一つ選んでください。
<a href="spain.html">スペイン</a>
<a href="spain.html">スペイン
<a href="スペイン">spain.html</a>
<a href="スペイン">spain.html
問5.
以下の説明の中から、
<b>
タグと
<strong>
タグに関して最も適切なものを一つ選んでください。
<strong>
タグを使うと字が太くなりますが、強い強調のつもりなら
<b>
タグを使うべきです。
<strong>
タグを使うと字が大きくなりますが、強い強調のつもりなら
<b>
タグを使うべきです。
<b>
タグを使うと字が太くなりますが、強い強調のつもりなら
<strong>
タグを使うべきです。
<b>
タグを使うと字が大きくなりますが、強い強調のつもりなら
<strong>
タグを使うべきです。
問6. 以下のHTMLドキュメントの中から、やや大きくて赤い字にするために最も適切なものを一つ選んでください。
<font size="4"><font color="red">注意</font></font>
<font size="4"><font color="red">注意</font>
<font size="large"><font color="red">注意</font></font>
<font size="large"><font color="red">注意</font>
問7. 以下の説明の中から、表の構成として最も適切なものを一つ選んでください。
問8. 以下のHTMLドキュメントの中から、表のセルを縦に2個連続させるために最も適切なものを一つ選んでください。
<td rowspan="1, 1">駅</td>
<td rowspan="50%, 50%">駅</td>
<td rowspan="2">駅</td>
<td rowspan="200%">駅</td>
問9.
<noframes>
〜
</noframes>
で囲まれた部分は、ブラウザがフレームに対応していれば表示されなく、フレームに対応していなければ表示されます。
以下の説明の中から、その理由として最も適切なものを一つ選んでください。
<noframes>
を
<frameset>
と見なすから。
<noframes>
を無視するから。
<noframes>
を
<frameset>
と見なすから。
<noframes>
を無視するから。
問10. 以下のHTMLドキュメントの中から、「歴史」をクリックするとhistory.htmlがフレームmainに表示されるために最も適切なものを一つ選んでください。
<a href="history.html" target="main">歴史</a>
<a href="history.html" name="main">歴史</a>
<frame src="history.html" target="main">歴史</frame>
<frame src="history.html" name="main">歴史</frame>
問11.
スタイルシートの考え方では、
<font color="red">
〜
</font>
で囲んで強調することは勧められません。
以下の説明の中から、その理由として最も適切なものを一つ選んでください。
<font>
タグは、フォントという物理構造を表さないから。
<font>
タグは、強調という論理構造を表さないから。
<font>
タグは、属性を使うべきではないから。
<font>
タグは、終了タグを使うべきではないから。
問12. 以下のスタイルシートの中から、レベル1の見出しを普通の太さで中央に揃えるために最も適切なものを一つ選んでください。
h1 {font-weight: normal; text-align: center}
h1 {font-weight: normal}{text-algin: center}
h1 {font-weight; text-align: normal; center}
h1 {font-weight; text-align}{normal; center}
問13. 以下の説明の中から、スタイルシートの使い方に関して最も適切なものを一つ選んでください。
<style>
タグを使います。
style
属性を使います。
<style>
タグを使います。
style
属性を使います。
問14. 以下のスタイルシートの中から、注釈（noteクラス）の段落を赤で表示するために最も適切なものを一つ選んでください。
p {note.color: red}
p.note {color: red}
p {color.note: red}
p.color {note: red}
問15. 以下の説明の中から、ウェブ・ブラウザとウェブ・サーバに関して最も適切なものを一つ選んでください。
問16. 以下の説明の中から、CGIプログラムに関して最も適切なものを一つ選んでください。
問17. 以下の説明の中から、フォームのコントロールに関して最も適切なものを一つ選んでください。
問18. 以下のHTMLドキュメントの中から、テキスト入力とパスワード入力として最も適切なものを一つ選んでください。
<input type="text">ユーザ名</input><br> <input type="password">パスワード</input><br>
<text type="input">ユーザ名</text><br> <password type="input">パスワード</password><br>
ユーザ名<input type="text"><br> パスワード<input type="password"><br>
ユーザ名<text type="input"><br> パスワード<password type="input"><br>
問19. 以下の説明の中から、JavaScriptプログラムに関して最も適切なものを一つ選んでください。
問20. 以下のHTMLドキュメントの中から、クリックされたらエラーのダイアログ・ボックスが開くボタンとして最も適切なものを一つ選んでください。
<button type="button"><onclick alert="エラー">押す</onclick></button>
<button type="button"><alert onclick="エラー">押す</alert></button>
<button type="button" onclick="window.alert('エラー');">押す</button>
<button type="button" alert="window.onclick('エラー');">押す</button>
今日の演習12の解答をメールで提出してください。 メールの差出人は学内のアドレス（b04a001@twcu.ac.jpなど）とし、メールの宛先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日（12月21日）を明記してください。