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

コンピュータ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>Greeting</TITLE>
<P>Good afternoon!</P>
注意

<TITLE></TITLE> の中は単純な文字列に限ります。 タグは入れないでください。

12.1.2 ドキュメントの構造

これまでは、テキスト・エディタ(Jedit)を使って文字やタグを書けば、ウェブ・ブラウザ(Safari)がそれに沿ってウェブ・ページを表示すると理解していたと思います。 本当は、文字やタグを書くことは、データを構成することなのです。 そして、ブラウザは、データ処理を行ってウェブ・ページを表示しているのです。 これからは、データであることを強調するために、 HTMLドキュメント という言葉を使います。

HTMLドキュメントは、2つの要素から構成されます。 前半は ヘッダ とよばれる部分、後半は 本文 とよばれる部分です。 ヘッダの主な内容はタイトルです。 タイトル以外にも、色々な設定情報が追加されることがあります。 それら以外の全ての要素は、本文に含まれます。

ブラウザは、 <HTML></HTML> に囲まれた部分をHTMLドキュメントと見なします。 <HEAD></HEAD> に囲まれた部分をヘッダと見なします。 <BODY></BODY> に囲まれた部分を本文と見なします。

以上の話をまとめますと、HTMLドキュメントは

<HTML>
<HEAD>
<TITLE>title</TITLE>
other information...
</HEAD>
<BODY>
document body...
</BODY>
</HTML>

という雛形(パターン)を持つことになります。

規格の上では、HTMLタグ、HEADタグ、およびBODYタグは、開始タグも終了タグも省略できます。 しかし、きちんとしたHTMLドキュメントを構成したければ、タグは省略しないほうがよいでしょう。

<HTML>
<HEAD>
<TITLE>Greeting</TITLE>
</HEAD>
<BODY>
<P>Good afternoon!</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</TITLE>
other information...
</HEAD>
<BODY>
document body...
</BODY>
</HTML>

12.1.4 メタ・データ

HTMLドキュメントの メタ・データ とは、ドキュメント内のデータではなく、ドキュメント自身に関するデータのことです。 具体的には、ドキュメントの著者名などがメタ・データになります。 メタ・データを表すタグは <META> です。 このタグに終了タグはありません。

日本語の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">

となります。

文字コードを指定したドキュメントは、以下のようになります。

<!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</TITLE>
other information...
</HEAD>
<BODY>
document body...
</BODY>
</HTML>

12.2 コメントとインデント

12.2.1 コメント

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

<H2>はじめに</H2>
<!-- ここは最後に書く。 -->
<H2>JavaScriptの基本</H2>
<!--
この節では、
まず、
-->
はじめに

JavaScriptの基本
注意

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

<H2>はじめに</H2>
<!-- ここは最後に書く。 -->
<H2>JavaScriptの基本</H2>
<!--
この節では、
まず、
-->

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

<!--
<H2>はじめに</H2>
<!-- ここは最後に書く。 -->
<H2>JavaScriptの基本</H2>
<!--
この節では、
まず、
-->
-->

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

12.2.2 インデント

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

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

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


12.3 今後の予定

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

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

12.4 成績評価について

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

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

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


12.5 演習12

以下の問1から問12までに回答してください。 問13から問20までは、試験勉強の参考にしてください。

問1. コマンドの引数に関する説明として、最も適切なものを一つ選んでください。

A. コマンドには、必ず引数を書かなければならない。
B. コマンドの引数の個数は、コマンドによって常に同じである。
C. コマンドの引数の順序を変えると、コマンドの意味が変わることがある。
D. コマンドの引数が複数あるときは、引数をコンマで区切る。

問2. sortコマンドに関する説明として、最も適切なものを一つ選んでください。

A. 普段はアルファベット順に並べ替えるが、オプションを使うと、数値と見なして小さい順に並べ替える。
B. 普段は小さい順に並べ替えるが、オプションを使うと、文字列と見なしてアルファベット順に並べ替える。
C. 常にアルファベット順に並べ替える。
D. 常に小さい順に並べ替える。

問3. diffコマンドに関する説明として、最も適切なものを一つ選んでください。

A. 行の順序だけが異なる二つのファイルについても、それらの違いを報告する。
B. ファイル名だけが異なる二つのファイルについても、それらの違いを報告する。
C. 作成ソフトだけが異なる二つのファイルについても、それらの違いを報告する。
D. 作成日だけが異なる二つのファイルについても、それらの違いを報告する。

問4. grepコマンドに関する説明として、最も適切なものを一つ選んでください。

A. 引数の文字列が現れる最初の行を表示する。
B. 引数の文字列が現れる最後の行を表示する。
C. 引数の文字列が現れるすべての行を表示する。
D. 引数の文字列が現れる行の行数を表示する。

問5. パイプに関する説明として、最も適切なものを一つ選んでください。

A. パイプはデータをファイルに保存する仕組みである。
B. パイプは記号" - "で表される。
C. パイプでコマンドを結合すると、コマンドは右から左の順に実行される。
D. パイプは何段階も使える。

問6. uniqコマンドに関する説明として、最も適切なものを一つ選んでください。

A. 同じ行が連続しているとき、それらを一つにまとめ、連続していないとき、それを削除する。
B. 同じ行が連続しているとき、それらを一つにまとめ、連続していないとき、それをそのままにする。
C. 同じ行が複数あるとき、それらを一つにまとめ、一つしかないとき、それを削除する。
D. 同じ行が複数あるとき、それらを一つにまとめ、一つしかないとき、それをそのままにする。

問7. HTMLファイルで段落開始を表す方法として、最も適切なものを一つ選んでください。

A. 空行を入れる。
B. 字下げをする。
C. タグを書く。
D. 改行する。

問8. タグに関する説明として、最も適切なものを一つ選んでください。

A. 一般的なタグには開始タグと終了タグがあるが、終了タグを二度使うタグもある。
B. 一般的なタグには開始タグと終了タグがあるが、開始タグを二度使うタグもある。
C. 一般的なタグには開始タグと終了タグがあるが、終了タグがないタグもある。
D. 一般的なタグには開始タグと終了タグがあるが、開始タグがないタグもある。

問9. ULタグとOLタグに関する説明として、最も適切なものを一つ選んでください。

A. ULタグは項目に番号を付け、順序に意味があるリストを表し、OLタグは項目に記号を付け、順序に意味がないリストを表す。
B. ULタグは項目に番号を付け、順序に意味がないリストを表し、OLタグは項目に記号を付け、順序に意味があるリストを表す。
C. ULタグは項目に記号を付け、順序に意味があるリストを表し、OLタグは項目に番号を付け、順序に意味がないリストを表す。
D. ULタグは項目に記号を付け、順序に意味がないリストを表し、OLタグは項目に番号を付け、順序に意味があるリストを表す。

問10. ファイルfrom.htmlからto.htmlへリンクを張る方法として、最も適切なものを一つ選んでください。

A. ファイルto.htmlに <A href="to.html">続きを読む</A> と書く。
B. ファイルto.htmlに <A href="from.html">続きを読む</A> と書く。
C. ファイルfrom.htmlに <A href="to.html">続きを読む</A> と書く。
D. ファイルfrom.htmlに <A href="from.html">続きを読む</A> と書く。

問11. BタグとSTRONGタグに関する説明として、最も適切なものを一つ選んでください。

A. 強く強調して太字にするときはBタグを使い、単に太字にするときはSTRONGタグを使う。
B. 単に太字にするときはBタグを使い、強く強調して太字にするときはSTRONGタグを使う。
C. 属性を使って太字にするときはBタグを使い、属性を使わずに太字にするときはSTRONGタグを使う。
D. 属性を使わずに太字にするときはBタグを使い、属性を使って太字にするときはSTRONGタグを使う。

問12. FONTタグで青くて大きなフォントにする方法として、最も適切なものを一つ選んでください。

A. <FONT color="blue" size="5">ギターの歴史</FONT>
B. <FONT color="blue" size="5">ギターの歴史</FONT></FONT>
C. <FONT color="blue" FONT size="5">ギターの歴史</FONT>
D. <FONT color="blue" FONT size="5">ギターの歴史</FONT></FONT>

問13. テキスト・ファイルに関する説明として、最も適切なものを一つ選んでください。

A. Wordファイルは、常にテキスト・ファイルである。
B. HTMLファイルは、常にテキスト・ファイルである。
C. Wordファイルは、文字だけならテキスト・ファイルであり、図表を使うならバイナリ・ファイルである。
D. HTMLファイルは、文字だけならテキスト・ファイルであり、図表を使うならバイナリ・ファイルである。

問14. Unicodeテキストを保存するときに使う文字コードとして、最も適切なものを一つ選んでください。

A. 日本語EUC
B. JIS(ISO-2022-JP)
C. UTF-8
D. シフトJIS

問15. ファイルの絶対パス名に関する説明として、最も適切なものを一つ選んでください。

A. ルート・ディレクトリからそのファイルに至るまでのディレクトリ名を書き並べ、最後にファイル名を書いたものである。
B. カレント・ディレクトリからそのファイルに至るまでのディレクトリ名を書き並べ、最後にファイル名を書いたものである。
C. そのファイルからルート・ディレクトリに至るまでのディレクトリ名を書き並べ、最後にファイル名を書いたものである。
D. そのファイルからカレント・ディレクトリに至るまでのディレクトリ名を書き並べ、最後にファイル名を書いたものである。

問16. ディレクトリ名".."の意味として、最も適切なものを一つ選んでください。

A. 一つ上のディレクトリ
B. カレント・ディレクトリ
C. ルート・ディレクトリ
D. ホーム・ディレクトリ

問17. コマンド ls -l file.txt-rw-r--r-- ... と表示された場合、このファイルの説明として、最も適切なものを一つ選んでください。

A. 自分も他人も読むことだけできる。
B. 自分は読むことだけできるが、他人は読み書きできない。
C. 自分は読み書きできるが、他人は読むことしかできない。
D. 自分は読み書きできるが、他人は読み書きできない。

問18. lsコマンドに関する説明として、最も適切なものを一つ選んでください。

A. 常に新しい順に表示する。
B. 常に名前のアルファベット順に表示する。
C. 普段は新しい順に表示するが、オプションを使うと、名前のアルファベット順に表示する。
D. 普段は名前のアルファベット順に表示するが、オプションを使うと、新しい順に表示する。

問19. PNG形式の画像ファイルを列挙するコマンドとして、最も適切なものを一つ選んでください。

A. ls ?.png
B. ls *.png
C. ls -.png
D. ls +.png

問20. cpコマンドに関する説明として、最も適切なものを一つ選んでください。

A. コピー先のファイルがすでに存在すれば、そのファイルは上書きされる。
B. コピー先のファイルがすでに存在すれば、そのファイルは削除される。
C. コピー先のファイルがすでに存在すれば、別のファイルにコピーする。
D. コピー先のファイルがすでに存在すれば、何も実行しない。

12.6 レポート課題

今日の演習12の答案をメールでkonishi@twcu.ac.jp宛に提出してください。 メールを送るときは、大学のパソコンを使うか、大学のメール・サーバに接続するかして、差出人が大学のメール・アドレスになるようにしてください。 メールの本文には、学生番号、氏名、科目名、授業日(12月20日)を明記してください。


12.7 参考文献


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

2006年12月22日更新
小西 善二郎 <konishi@twcu.ac.jp>
Copyright (C) 2006 Zenjiro Konishi. All rights reserved.