ウェブ・ページでは、ブラウザ・ウィンドウのタイトルバーに文字列が追加できます。 この文字列を、ウェブ・ページの タイトル と呼びます。
タイトルは、ウェブ・ページの内容を表します。 また、ブックマークなどでも使われます。 したがって、簡素で内容のよく分かるタイトルが望ましいです。 なお、規格の上ではタイトルは必ず書かなければなりません。
ブラウザは、
<TITLE>
〜
</TITLE>
に囲まれた部分をタイトルと見なします。
<TITLE>Greeting</TITLE> <P>Good afternoon!</P>
<TITLE>
〜
</TITLE>
の中は単純な文字列に限ります。
タグは入れないでください。
これまでは、テキスト・エディタ(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>
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>
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>
ウェブ・ページを作っていると、書きかけの文章やちょっとしたメモなど、表示してほしくはないけれどファイルには残しておきたい部分ができたりします。
ブラウザは、
<!--
からそれ以降の最初の
-->
までを
コメント
(注釈)と見なします。
コメントは表示されません。
したがって、表示してほしくない部分は、
<!--
〜
-->
で囲めばよいのです。
<H2>はじめに</H2> <!-- ここは最後に書く。 --> <H2>JavaScriptの基本</H2> <!-- この節では、 まず、 -->
広い範囲をコメントにするには注意が必要です。
<H2>はじめに</H2> <!-- ここは最後に書く。 --> <H2>JavaScriptの基本</H2> <!-- この節では、 まず、 -->
この全体をコメントにするつもりで、
<!-- <H2>はじめに</H2> <!-- ここは最後に書く。 --> <H2>JavaScriptの基本</H2> <!-- この節では、 まず、 --> -->
と書きましても、「JavaScriptの基本」が表示されてしまいます。
これは、1行目から始まったコメントが、9行目の
-->
ではなく、3行目の
-->
で終わりと見なされたからです。
タグをたくさん使うようになりますと、開始タグと終了タグの対応が分かりにくくなってきます。 終了タグを忘れて思わぬ表示になったりしないためにも、タグで囲まれている範囲が一目で分かるようにしたいものです。
多くのプログラミング言語では、 インデント (字下げ)を用いてプログラムの構造を見やすくしています。 この方法はHTMLにも通用します。 プログラムのようにインデントをすると、開始タグと終了タグの対応が分かりやすくなります。
インデントの規則は、ホームページの作者が自分で分かりやすいように決めることです。 この授業での例を参考にして、自分なりの規則を作ってください。
今後の予定は以下の通りです。
この授業の成績は、レポートの提出と試験の得点で決まります。
成績に関して次のような事情のある人はメールで連絡してください。 できる限り対処します。
以下の問1から問12までに回答してください。 問13から問20までは、試験勉強の参考にしてください。
問1. コマンドの引数に関する説明として、最も適切なものを一つ選んでください。
問2. sortコマンドに関する説明として、最も適切なものを一つ選んでください。
問3. diffコマンドに関する説明として、最も適切なものを一つ選んでください。
問4. grepコマンドに関する説明として、最も適切なものを一つ選んでください。
問5. パイプに関する説明として、最も適切なものを一つ選んでください。
問6. uniqコマンドに関する説明として、最も適切なものを一つ選んでください。
問7. HTMLファイルで段落開始を表す方法として、最も適切なものを一つ選んでください。
問8. タグに関する説明として、最も適切なものを一つ選んでください。
問9. ULタグとOLタグに関する説明として、最も適切なものを一つ選んでください。
問10. ファイルfrom.htmlからto.htmlへリンクを張る方法として、最も適切なものを一つ選んでください。
<A href="to.html">続きを読む</A>
と書く。
<A href="from.html">続きを読む</A>
と書く。
<A href="to.html">続きを読む</A>
と書く。
<A href="from.html">続きを読む</A>
と書く。
問11. BタグとSTRONGタグに関する説明として、最も適切なものを一つ選んでください。
問12. FONTタグで青くて大きなフォントにする方法として、最も適切なものを一つ選んでください。
<FONT color="blue" size="5">ギターの歴史</FONT>
<FONT color="blue" size="5">ギターの歴史</FONT></FONT>
<FONT color="blue" FONT size="5">ギターの歴史</FONT>
<FONT color="blue" FONT size="5">ギターの歴史</FONT></FONT>
問13. テキスト・ファイルに関する説明として、最も適切なものを一つ選んでください。
問14. Unicodeテキストを保存するときに使う文字コードとして、最も適切なものを一つ選んでください。
問15. ファイルの絶対パス名に関する説明として、最も適切なものを一つ選んでください。
問16. ディレクトリ名".."の意味として、最も適切なものを一つ選んでください。
問17. コマンド ls -l file.txt で -rw-r--r-- ... と表示された場合、このファイルの説明として、最も適切なものを一つ選んでください。
問18. lsコマンドに関する説明として、最も適切なものを一つ選んでください。
問19. PNG形式の画像ファイルを列挙するコマンドとして、最も適切なものを一つ選んでください。
問20. cpコマンドに関する説明として、最も適切なものを一つ選んでください。
今日の演習12の答案をメールでkonishi@twcu.ac.jp宛に提出してください。 メールを送るときは、大学のパソコンを使うか、大学のメール・サーバに接続するかして、差出人が大学のメール・アドレスになるようにしてください。 メールの本文には、学生番号、氏名、科目名、授業日(12月20日)を明記してください。