コンピュータIID（UNIXとHTML）第12回

12.1 HTMLドキュメント: 12.1.1 タイトル; 12.1.2 ドキュメントの構造; 12.1.3 HTMLのバージョン; 12.1.4 メタ・データ
12.2 コメントとインデント: 12.2.1 コメント; 12.2.2 インデント
12.3 今後の予定
12.4 成績評価について
12.5 演習12
12.6 レポート課題
12.7 参考文献

索引

12.1 HTMLドキュメント

12.1.1 タイトル

ウェブ・ページでは、ブラウザ・ウィンドウのタイトルバーに文字列が追加できます。この文字列を、ウェブ・ページの タイトル と呼びます。

タイトルは、ウェブ・ページの内容を表します。また、ブックマークなどでも使われます。したがって、簡素で内容のよく分かるタイトルが望ましいです。なお、規格の上ではタイトルは必ず書かなければなりません。

ブラウザは、 <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>

12.1.3 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>

12.1.4 メタ・データ

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>

12.2 コメントとインデント

12.2.1 コメント

ウェブ・ページを作っていると、書きかけの文章やちょっとしたメモなど、表示してほしくはないけれどファイルには残しておきたい部分ができたりします。ブラウザは、  までを コメント （注釈）と見なします。コメントは表示されません。したがって、表示してほしくない部分は、  で囲めばよいのです。

例

<H2>はじめに</H2>
<!-- ここは最後に書く。 -->
<H2>太陽系の誕生</H2>
<!--
この節では、
まず、
-->

はじめに

太陽系の誕生

注意

広い範囲をコメントにするには注意が必要です。

<H2>はじめに</H2>
<!-- ここは最後に書く。 -->
<H2>太陽系の誕生</H2>
<!--
この節では、
まず、
-->

この全体をコメントにするつもりで、

<!--
<H2>はじめに</H2>
<!-- ここは最後に書く。 -->
<H2>太陽系の誕生</H2>
<!--
この節では、
まず、
-->
-->

と書きましても、「太陽系の誕生」が表示されてしまいます。これは、1行目から始まったコメントが、9行目の --> ではなく、3行目の --> で終わりと見なされたからです。

12.2.2 インデント

タグをたくさん使うようになりますと、開始タグと終了タグの対応が分かりにくくなってきます。終了タグを忘れて思わぬ表示になったりしないためにも、タグで囲まれている範囲が一目で分かるようにしたいものです。

多くのプログラミング言語では、 インデント （字下げ）を用いてプログラムの構造を見やすくしています。この方法はHTMLにも通用します。プログラムのようにインデントをすると、開始タグと終了タグの対応が分かりやすくなります。

インデントの規則は、ホームページの作者が自分で分かりやすいように決めることです。この授業での例を参考にして、自分なりの規則を作ってください。

12.3 今後の予定

今後の予定は以下の通りです。

1月9日（水）、1月18日（金）: 授業中に試験を行います。今日の演習問題をよく見直しておいてください。
1月25日（金）: この日までに、全員にレポートの提出状況をメールで知らせます。
1月31日（木）: レポートの最終締め切り日です。これ以降提出されたレポートは採点しません。

12.4 成績評価について

この授業の成績は、レポートの提出と試験の得点で決まります。

S: レポートはすべて提出。「余力のある人」のための問題にも取り組んでいる。試験の得点は「優」相当。
A: レポートはすべて提出。試験の得点は「優」相当。
B: レポートはおおむね提出。試験の得点は「良」相当。
C: レポートは未提出が目立つ。試験は「可」相当。
F: レポートは未提出が多い。試験は「不可」相当。

成績に関して次のような事情のある人はメールで連絡してください。できる限り対処します。

春から留学するので、書類作成上、合否だけでも早めに知りたい。
奨学金をもらっているので、SでないならFにしてほしい。

12.5 演習12

以下の問題（全20問）に回答してください。

問1. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. コマンド sort -r file.txt で、 -r は引数で file.txt はオプションです。

B. コマンド sort -r file.txt で、 -r はオプションで file.txt は引数です。

C. コマンド sort -r file.txt で、 -r も file.txt も引数です。

D. コマンド sort -r file.txt で、 -r も file.txt もオプションです。

問2. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. コマンド tail file.txt はファイルの最初の10行を表示し、コマンド tail -10 file.txt はファイルの最後の10行を表示します。

B. コマンド tail file.txt はファイルの最後の10行を表示し、コマンド tail -10 file.txt はファイルの最初の10行を表示します。

C. コマンド tail file.txt もコマンド tail -10 file.txt も、ファイルの最初の10行を表示します。

D. コマンド tail file.txt もコマンド tail -10 file.txt も、ファイルの最後の10行を表示します。

問3. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. diffコマンドは、2つのファイルを比較して、長い方を表示します。

B. diffコマンドは、2つのファイルを比較して、短い方を表示します。

C. diffコマンドは、2つのファイルを比較して、違う部分を表示します。

D. diffコマンドは、2つのファイルを比較して、同じ部分を表示します。

問4. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. コマンド grep man file.txt で、 maman という行は表示されます。

B. コマンド grep man file.txt で、 men という行は表示されます。

C. コマンド grep man file.txt で、 m-a-n という行は表示されます。

D. コマンド grep man file.txt で、 ma という行は表示されます。

問5. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. コマンド tr a-z A-Z は、小文字を大文字に変換するフィルタです。

B. コマンド tr a-z A-Z は、大文字を小文字に変換するフィルタです。

C. コマンド tr a-z A-Z は、小文字を削除するフィルタです。

D. コマンド tr a-z A-Z は、大文字を削除するフィルタです。

問6. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. 重複する行を取り除くには、sortコマンドで整列してからuniqコマンドで連続する同じ行を一つにします。

B. 重複する行を取り除くには、uniqコマンドで連続する同じ行を一つにしてから、sortコマンドで整列します。

C. 重複する行を取り除くには、sortコマンドで整列します。

D. 重複する行を取り除くには、uniqコマンドで連続する同じ行を一つにします。

問7. 文字コードに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. ASCIIでは、1文字は3バイトで表現されます。

B. ASCIIでは、1文字は4バイトで表現されます。

C. ASCIIでは、1文字は1バイトで表現されます。

D. ASCIIでは、1文字は2バイトで表現されます。

問8. 文字コードに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. 日本語の文字コードでは、日本語の1文字は4バイトで表現されます。

B. 日本語の文字コードでは、日本語の1文字は1バイトで表現されます。

C. 日本語の文字コードでは、日本語の1文字は2バイトで表現されます。

D. 日本語の文字コードでは、日本語の1文字は3バイトで表現されます。

問9. UNIXファイル・システムに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. 階層的ファイル・システムを木の形で表すと、根本はテキスト・ファイルを表します。

B. 階層的ファイル・システムを木の形で表すと、根本はバイナリ・ファイルを表します。

C. 階層的ファイル・システムを木の形で表すと、根本はホーム・ディレクトリを表します。

D. 階層的ファイル・システムを木の形で表すと、根本はルート・ディレクトリを表します。

問10. UNIXファイル・システムに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. 絶対パス名は基準となるディレクトリから出発しますが、相対パス名はルート・ディレクトリから出発します。

B. 絶対パス名は基準となるディレクトリから出発しますが、相対パス名はホーム・ディレクトリから出発します。

C. 絶対パス名はルート・ディレクトリから出発しますが、相対パス名は基準となるディレクトリから出発します。

D. 絶対パス名はホーム・ディレクトリから出発しますが、相対パス名は基準となるディレクトリから出発します。

問11. UNIXファイル・システムに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. ファイルのアクセス権には、読み込む権利、書き込む権利、実行する権利があります。

B. ファイルのアクセス権には、読み込む権利、書き込む権利があります。

C. ファイルのアクセス権には、読み込む権利、実行する権利があります。

D. ファイルのアクセス権には、書き込む権利、実行する権利があります。

問12. UNIXファイル・システムに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. スーパーユーザは、一部のファイルだけ読み書きできます。

B. スーパーユーザは、すべてのファイルが読み込めますが、書き込めるのは一部のファイルだけです。

C. スーパーユーザは、すべてのファイルに書き込めますが、読み込めるのは一部のファイルだけです。

D. スーパーユーザは、すべてのファイルが読み書きできます。

問13. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. ファイルを移動するにはcpコマンドを使いますが、移動先にファイルがあるときは何も行われません。

B. ファイルを移動するにはcpコマンドを使いますが、移動先にファイルがあるときはそのファイルは上書きされます。

C. ファイルを移動するにはmvコマンドを使いますが、移動先にファイルがあるときは何も行われません。

D. ファイルを移動するにはmvコマンドを使いますが、移動先にファイルがあるときはそのファイルは上書きされます。

問14. UNIXコマンドに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. ディレクトリを削除するにはmkdirコマンドを使いますが、このコマンドはディレクトリが空のときだけ使えます。

B. ディレクトリを削除するにはmkdirコマンドを使いますが、このコマンドはディレクトリが空でも空でなくても使えます。

C. ディレクトリを削除するにはrmdirコマンドを使いますが、このコマンドはディレクトリが空のときだけ使えます。

D. ディレクトリを削除するにはrmdirコマンドを使いますが、このコマンドはディレクトリが空でも空でなくても使えます。

問15. HTMLに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. HTMLファイルで "&" と書くと、ウェブ・ページでは&と表示されます。

B. HTMLファイルで && と書くと、ウェブ・ページでは&と表示されます。

C. HTMLファイルで \& と書くと、ウェブ・ページでは&と表示されます。

D. HTMLファイルで & と書くと、ウェブ・ページでは&と表示されます。

問16. HTMLに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. ウェブ・ページで強制的に改行させるには、HTMLファイルで改行をします。

B. ウェブ・ページで強制的に改行させるには、HTMLファイルで空行を設けます。

C. ウェブ・ページで強制的に改行させるには、HTMLファイルで <BR> 〜 </BR> で囲みます。

D. ウェブ・ページで強制的に改行させるには、HTMLファイルで <BR> を書きます。

問17. HTMLに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. 定義リストでは、用語は <DT> 〜 </DT> で囲みますが、説明はタグで囲みません。

B. 定義リストでは、用語はタグで囲みませんが、説明は <DD> 〜 </DD> で囲みます。

C. 定義リストでは、用語は <DT> 〜 </DT> で囲み、説明は <DD> 〜 </DD> で囲みます。

D. 定義リストでは、用語も説明もタグで囲みません。

問18. HTMLに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. IMGタグのalt属性は、画像ファイルのファイル名やURLを表します。

B. IMGタグのalt属性は、画像の縦横の長さを表します。

C. IMGタグのalt属性は、画像をクリックするとジャンプするリンク先を表します。

D. IMGタグのalt属性は、画像が表示できない場合に代りに表示するテキストを表します。

問19. HTMLに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. テキストを <B><I> 〜 </I></B> で囲むと、BタグとIタグの両方が有効になり、ボールドイタリック体で表示されます。

B. テキストを <B><I> 〜 </I></B> で囲むと、外側のBタグだけが有効になり、ボールド体で表示されます。

C. テキストを <B><I> 〜 </I></B> で囲むと、内側のIタグだけが有効になり、イタリック体で表示されます。

D. テキストを <B><I> 〜 </I></B> で囲むと、BタグとIタグの両方が無効になり、フォントは変更されずに表示されます。

問20. HTMLに関する以下の説明の中から、最も適切なものを一つ選んでください。

A. <DIV align="left"> 〜 </DIV> は <LEFT> 〜 </LEFT> と略記できます。

B. <DIV align="right"> 〜 </DIV> は <RIGHT> 〜 </RIGHT> と略記できます。

C. <DIV align="center"> 〜 </DIV> は <CENTER> 〜 </CENTER> と略記できます。

D. <DIV align="justify"> 〜 </DIV> は <JUSTIFY> 〜 </JUSTIFY> と略記できます。

12.6 レポート課題

今日の演習12の答案をメールで提出してください。差出人は学内のメール・アドレス（b04a001@cis.twcu.ac.jpなど）とし、宛先はkonishi@cis.twcu.ac.jpとします。メールの本文には、学生番号、氏名、科目名、授業日（12月19日、1月11日）を明記してください。

12.7 参考文献

Daniel Gilly（著）長原宏治（監訳）『UNIXクイックリファレンス』オライリー・ジャパン, 1998.
HTML 4.01 Specification
http://www.w3.org/TR/html4/

[小西ホームページ] [目次・索引] [前の授業] [次の授業]