目次 | 索引 |
---|---|
前回の授業では、"Good afternoon!"と表示するホームページを作成しました。 絵を貼り込んだカラフルなホームページを作りたいかもしれませんが、ホームページの基本はテキスト(文章)です。 今日はホームページの見栄えに気を取られず、テキストの内容を伝えることに集中します。
前回の手続きで、"Good afternoon!"とタイプする代わりに、メールを書く要領でテキストをタイプしてください。 すると、ブラウザはそのテキストをウィンドウの幅に合わせて表示します。
ホームページを作るには、 HTMLを学習する必要があります。 HTMLとは、 HyperText Markup Language の略です。
ここで、文字化けした場合は、メニュー・バーで、「表示」→「テキストエンコーディング」→「Unicode(UTF-8)」とクリックするか、メニュー・バーで、「Safari」→「環境設定」→「表示」→「デフォルトエンコーディング」→「Unicode(UTF-8)」とクリックしてください。
テキスト中にスペースや改行を続けて入れても、ブラウザはそれをひとつのスペースと見なします。 (一部に例外があります。) どのくらいスペースをとるか、どこで改行するかなどは、基本的にブラウザが決めます。
長いテキストでは、内容のまとまりに応じて 段落 を作る必要があります。 しかし、字下げをしても、空行を入れても、ブラウザはそれをひとつのスペースと見なし、段落とは見なしません。 ブラウザに「ここからここまでが一つの段落です」のような指示を与えるには、 タグ ( tag )を使います。
段落の始めに
<p>
と書き、段落の終わりに
</p>
と書いてください。
するとブラウザは、
<p>
と
</p>
に囲まれた範囲を段落(Paragraph)と見なします。
そして、段落らしく、前後と独立させ、上下に余白を設けて表示します。
<p>HTMLだけでは物足りない人もいるでしょう。</p> <p> より高度なホームページを作るには、 JavaやJavaScriptを勉強してください。 Javaはプログラミング言語、 JavaScriptはスクリプト言語です。 </p> <p>なお、JavaとJavaScriptは別物です。</p>
この
<p>
や
</p>
がタグです。
詳しくは、
<p>
が
開始タグ
(
beginning tag
)、
</p>
が
終了タグ
(
ending tag
)です。
HTMLの古い規格では、
<p>
は段落の終わりを意味していました。
もちろん、現在の規格では段落の始めを意味します。
古い資料を読むときは注意してください。
規格の上では、終了タグ
</p>
は省略できます。
段落の終わりは文脈から予想しやすいので、こう定められたのでしょう。
この授業では、この予想を当てにせず、きちんと終了タグを書くことにします。
テキスト中に
<p>
と書くと段落の始めになることは分りました。
では、本当に<p>と表示したいときは、どう書けばよいでしょうか。
正解は、
<p>
と書く、です。
ブラウザは、文字
<
および
&
から始まる文字列を特別扱いします。
<
の場合は、タグの一部と見なします。
&
の場合は、文字を参照する目印と見なします。
特殊文字
は、次の表にしたがって書き換えてください。
そうすれば、ブラウザは書き換え前の文字を表示します。
<p> プログラムで、x < y < z と書いてはいけません。 正しくは、x < y && y < z です。 </p>
典型的な本は、表紙に書名が書いてあり、本文はいくつかの章に分かれ、章はいくつかの節に分かれます。 章の始めには章見出しがあり、節の始めには節見出しがあります。 この、書名、章見出し、節見出しなどをまとめて 見出し とよぶことにします。
ホームページにも見出しが付けられます。 レベル1の見出しからレベル6の見出しまで用意されています。 大規模なホームページでは、レベル1の見出しを書名、レベル2の見出しを章見出し、レベル3の見出しを節見出しのように使うとよいでしょう。 小規模のホームページでは、レベル1の見出しを表題、レベル2の見出しを節見出し、レベル3の見出しを小節の見出しのように使うとよいでしょう。
ブラウザは、
<h1>
〜
</h1>
に囲まれた部分をレベル1の見出し(Heading)と見なします。
<h2>
〜
</h2>
だと、レベル2の見出しです。
<h3>
〜
</h3>
でレベル3,
<h4>
〜
</h4>
でレベル4,
<h5>
〜
</h5>
でレベル5,
<h6>
〜
</h6>
でレベル6です。
ブラウザは、レベル1の見出しを、前後と独立させて大きなボールド体で表示します。 レベル2の見出しは、同様にやや大きな字で表示されます。 レベル3, レベル4, レベル5, レベル6と順に字が小さくなります。
<h1>JavaScript入門</h1> <h2>はじめに</h2> <h3>JavaScriptとは</h3>
テキストを書く際、他の参考資料などを 引用 する場合があります。 引用文は、自分の書いたテキストと区別する必要があります。
ブラウザは、
<blockquote>
〜
</blockquote>
に囲まれた部分を、(長い)引用文と見なします。
ブラウザは、引用文を、前後と独立させ、上下左右に余白を取って表示します。
<p>私の友人は次のように語ってくれた。</p> <blockquote> <p> JavaScriptは、GUIプログラミングの入門に最適だろう。 </p> <p> オブジェクト指向プログラミングもできるが、 単純すぎるところがある。 </p> </blockquote>
本に奥付けを設けるように、ホームページの最後にも、作者の氏名(組織名)、メールアドレス、ホームページの更新日、著作権情報などを書いておくのは良い習慣です。 このような、連絡先に類する情報を アドレス ( address )とよぶことにします。
ブラウザは、
<address>
〜
</address>
に囲まれた部分を、アドレスと見なします。
ブラウザはアドレスをイタリック体で表示します。
いくつかの項目を並べる場合、それらを リスト ( list )(箇条書き)にすると分かりやすくなります。 HTMLには、リストを表す方法が
の3種類用意されています。
番号付きリスト
(
ordered list
)は、項目の順序に意味のある場合のリストです。
ブラウザは、
<li>
〜
</li>
に囲まれた部分を、リストの項目(List Item)と見なします。
そして、項目の並びが
<ol>
〜
</ol>
に囲まれると、その部分を番号付きリスト(Ordered List)と見なします。
ブラウザは、番号付きリストを、前後と独立させ、上下に余白を設けて表示します。 各項目は字下げされ、先頭に1., 2., ... と番号が付きます。
<p>一般的に、プログラム開発は次の工程を経ます。</p> <ol> <li>アルゴリズムやデータ構造の設計</li> <li>コーディング</li> <li>テストとデバッグ</li> </ol>
規格の上では終了タグ
</li>
は省略できますが、なるべく省略しないでください。
番号なしリスト
(
unordered list
)は、項目の順序にあまり意味のない場合のリストです。
ブラウザは、
<li>
〜
</li>
に囲まれた部分を、リストの項目と見なします。
そして、項目の並びが
<ul>
〜
</ul>
に囲まれると、その部分を番号なしリスト(Unordered List)と見なします。
ブラウザは、番号なしリストを、前後と独立させ、上下に余白を設けて表示します。 各項目は字下げされ、先頭に・などの記号が付きます。
<p>JavaScriptのプログラムは、次の3か所に書けます。</p> <ul> <li>外部ファイル</li> <li><script>タグの中</li> <li>イベント属性の値</li> </ul>
定義リスト
(
definition list
)は、用語の定義などに使われるリストで、用語とその説明、用語とその説明、…と並べるものです。
ブラウザは、
<dt>
〜
</dt>
に囲まれた部分を、説明される用語(Definition Term)と見なします。
<dd>
〜
</dd>
に囲まれた部分を、その用語の説明(Definition Description)と見なします。
そして、用語とその説明の並びが
<dl>
〜
</dl>
に囲まれると、その部分を定義リスト(Definition List)と見なします。
ブラウザは、定義リストを、前後と独立させ、上下に余白を設けて表示します。 各用語の説明は字下げされます。
<dl> <dt>算術演算子</dt> <dd> 数値に対する演算を表す記号。 +, -, *, /など。 </dd> <dt>論理演算子</dt> <dd> 論理値に対する演算を表す記号。 &&, ||, !など。 </dd> <dt>文字列演算子</dt> <dd>文字列に対する演算を表す記号。+など。</dd> </dl>
規格の上では、終了タグ
</dt>
,
</dd>
は省略できますが、なるべく省略しないでください。
テキストの中で、スペースや改行をいくら続けて書いても、ブラウザはそれを一つのスペースと見なすことは前にも説明しました。 多くのテキストではそれで問題ないですが、プログラムコードなどでは、改行や字下げがプログラマにとって重要な情報になります。 また、電子メールなどで、文字を使って簡単な図や表を書くことはよくありますが、この場合も、勝手に改行されたり、並んでいるスペースを一つにされたくはありません。 このように、スペースや改行を用いて文字の位置合せがなされているテキストを、 整形済みテキスト ( preformatted text )とよびます。
ブラウザは、
<pre>
〜
</pre>
に囲まれた部分を、整形済みテキスト(PREformatted text)と見なします。
ブラウザは、整形済みテキストを、前後と独立させ、タイプライタ体のフォントで、勝手に改行したりせず、改行は改行のまま、スペースの並びはスペースの並びのまま表示します。
<pre> 1997 1998 1999 ------------------------------ Section 1 6,875 5,270 5,076 Section 2 943 1,155 1,004 Section 3 3,983 3,487 3,974 </pre>
1997 1998 1999 ------------------------------ Section 1 6,875 5,270 5,076 Section 2 943 1,155 1,004 Section 3 3,983 3,487 3,974
<pre>
〜
</pre>
に囲まれた部分がそのまま表示されるわけではありません。
特殊文字<, &などを表示したい場合は、今まで通り
<
,
&
などで置き換える必要があります。
前に説明した通り、表示に際して、どのくらいスペースをとるかや、どこで改行するかは、基本的にブラウザが決めます。 しかし、歌詞や詩のような内容では、適切な位置で 強制的に改行 したほうが自然に読めるようになります。
ブラウザは、タグ
<br>
のある所で強制的に改行(line BReak)して表示します。
これまで紹介したタグは、
<
tag
>
〜
</
tag
>
で囲むという使い方をしてきました。
しかし、強制改行
<br>
については、終了タグはありません。
そこで強制的に改行するということですので、特に何かを囲む必要がないのです。
<br>
タグで強制的に改行できることは分かりました。
では、強制的に改ページすることはできるでしょうか。
そもそも、ホームページには改ページするという概念はありません。
ウィンドウに収まらない部分は、スクロールすれば読めるからです。
ただし、内容が大きく変わる目印として、
水平線
を使うことはできます。
ブラウザは、タグ
<hr>
のある所で水平線(Horizontal Rule)を表示します。
<hr> <address> 2004年4月16日更新<br> konishi@twcu.ac.jp<br> Copyright (C) 2004 Zenjiro Konishi. All rights reserved. </address>
以下の例を参考にして、番号付きリスト、番号なしリスト、および定義リストを用いた(練習用の)ホームページを作成してください。 ファイル名は、例えばex2.htmlとして、先週用意した授業用ディレクトリに保存してください。
余力のある人は、リストの中にさらにリストを入れた例も考えてください。
今日の演習2に従ってホームページを作成し、そのURLをkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(4/16)を明記してください。
HTMLについて本格的に勉強したければ、以下のホームページを参考にするとよいでしょう。
このホームページは、W3Cの正規のドキュメントとその(個人的な)日本語訳です。 W3C とはWorld Wide Web Consortiumの略で、HTMLを始めとするWWW規格の標準化機関です。