| 目次 | 索引 |
|---|---|
いくつかの項目を並べる場合、それらを リスト （ list ）（箇条書き）にすると分かりやすくなります。 HTMLには、リストを表す方法が
の3種類用意されています。
番号付きリスト
（
ordered list
）は、項目の順序に意味のある場合のリストです。
ブラウザは、
<li>
〜
</li>
に囲まれた部分を、リストの項目（list item）と見なします。
そして、項目の並びが
<ol>
〜
</ol>
に囲まれると、その部分を番号付きリストと見なします。
ブラウザは、番号付きリストを、前後と独立させ、上下に余白を設けて表示します。
各項目は字下げされ、先頭に1., 2., ... と番号が付きます。
<p>一般的に、プログラム開発は次の工程を経ます。</p> <ol> <li>アルゴリズムやデータ構造の設計</li> <li>コーディング</li> <li>テストとデバッグ</li> </ol>
1. アルゴリズムやデータ構造の設計2. コーディング3. テストとデバッグ
規格の上では終了タグ
</li>
は省略できますが、なるべく省略しないでください。
「囲む」、「囲まれる」という表現が分かりにくくなってきましたので、文法用語を用意します。
まず、
<
name
>
〜
</
name
>
全体を、
name
要素
（
element
）とよびます。
そして、このタグに囲まれている部分を、その要素の
内容
（
content
）とよびます。
これで、「ol要素の内容はli要素の並びである」のようにすっきりと文法が説明できます。
番号なしリスト
（
unordered list
）は、項目の順序にあまり意味のない場合のリストです。
ブラウザは、
<li>
〜
</li>
に囲まれた部分を、リストの項目と見なします。
そして、項目の並びが
<ul>
〜
</ul>
に囲まれると、その部分を番号なしリストと見なします。
ブラウザは、番号なしリストを、前後と独立させ、上下に余白を設けて表示します。
各項目は字下げされ、先頭に・などの記号が付きます。
<p>JavaScriptのプログラムは、次の3か所に書けます。</p> <ul> <li>外部ファイル</li> <li><script>タグの中</li> <li>イベント属性の値</li> </ul>
・外部ファイル・<script>タグの中・イベント属性の値
定義リスト
（
definition list
）は、用語の定義などに使われるリストで、項目とその説明、項目とその説明、…と並べるものです。
ブラウザは、
<dt>
〜
</dt>
に囲まれた部分を、説明される項目（definition term）と見なします。
<dd>
〜
</dd>
に囲まれた部分を、その項目の説明（definition description）と見なします。
そして、項目とその説明の並びが
<dl>
〜
</dl>
に囲まれると、その部分を定義リストと見なします。
ブラウザは、定義リストを、前後と独立させ、上下に余白を設けて表示します。
各項目の説明は字下げされます。
<dl>
<dt>算術演算子</dt>
<dd>
数値に対する演算を表す記号。
+, -, *, /など。
</dd>
<dt>論理演算子</dt>
<dd>
論理値に対する演算を表す記号。
&&, ||, !など。
</dd>
<dt>文字列演算子</dt>
<dd>文字列に対する演算を表す記号。+など。</dd>
</dl>
規格の上では、終了タグ
</dt>
,
</dd>
は省略できますが、なるべく省略しないでください。
ホームページを作っていると、書きかけの文章やちょっとしたメモなど、表示してほしくはないけれどファイルには残しておきたい部分ができたりします。
ブラウザは、
<!--
からそれ以降の最初の
-->
までを
コメント
（
comment
）（注釈）と見なします。
コメントは表示されません。
したがって、表示してほしくない部分は、
<!--
〜
-->
で囲めばよいのです。
<h2>はじめに</h2> <!-- ここは最後に書く。 --> <h2>JavaScriptの基本</h2> <!-- この節では、 まず、 -->
JavaScriptの基本
広い範囲をコメントにするには注意が必要です。
<p>sentence1....</p> <p>sentence2....</p> <!-- ここは後で書く。 --> <p>sentence3....</p> <p>sentence4....</p>
この sentence2.... と sentence3.... をコメントにするつもりで、
<p>sentence1....</p> <!-- <p>sentence2....</p> <!-- ここは後で書く。 --> <p>sentence3....</p> --> <p>sentence4....</p>
と書きましても、
sentence3....
が表示されてしまいます。
これは、2行目から始まったコメントが、6行目の
-->
ではなく、4行目の
-->
で終わりと見なされたからです。
タグをたくさん使うようになりますと、開始タグと終了タグの対応が分かりにくくなってきます。 終了タグを忘れて思わぬ表示になったりしないためにも、タグで囲まれている範囲が一目で分かるようにしたいものです。
多くのプログラミング言語では、 インデント （ indent ）（字下げ）を用いてプログラムの構造を見やすくしています。 この方法はHTMLにも通用します。 プログラムのようにインデントをすると、開始タグと終了タグの対応が分かりやすくなります。
インデントの規則は、ホームページの作者が自分で分かりやすいように決めることです。 この授業での例を参考にして、自分なりの規則を作ってください。
ホームページでは、ブラウザ・ウィンドウのタイトルバーに文字列が追加できます。 この文字列を、ホームページの タイトル （ title ）とよびます。 タイトルは、ホームページの内容を表わすことに使います。 また、ブックマークなどでも使われます。 あまり長い文字列ですとタイトルバーに収まりませんので、簡潔なものにしてください。 なお、規格の上ではタイトルは必ず書かなくてはいけません。
ブラウザは、
<title>
〜
</title>
に囲まれた部分をタイトルと見なします。
<title>Greeting</title> <p>Good morning!</p>
<title>
〜
</title>
の中は単純な文字列に限ります。
タグは入れないでください。
これまでは、テキスト・エディタ（XEmacs）を使って文字やタグを並べて書けば、ブラウザ（Netscape）が規則に従ってホームページを表示するというように理解していたと思います。 本当は、文字やタグを並べて書くことは、データを作成することなのです。 ブラウザは、このデータを処理してホームページを表示しているのです。 これからは、データであることを強調するために、 HTMLドキュメント （ HTML document ）という言葉を使います。
HTMLドキュメントは2つの要素から構成されます。 前半は ヘッダ （ document head ）とよばれる部分、後半は 本文 （ document body ）とよばれる部分です。 ヘッダの主な内容はタイトルです。 タイトル以外にも、種々の設定情報が追加されることがあります。 それら以外の全ての要素は本文に含まれます。
ブラウザは、
<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 morning!</p> </body> </html>
ブラウザは、特に断らない限り、テキストを左に揃えて表示します。
テキストの一部を中央や右に揃えるには、
<div>
タグを用います。
ただし、単に
<div>
〜
</div>
で囲んでも、前後と独立して表示されるだけです。
タグの使い方は次の表に従ってください。
| タグ | 位置揃え |
|---|---|
<div align="left">
〜
</div>
|
左揃え |
<div align="center">
〜
</div>
|
中央揃え |
<div align="right">
〜
</div>
|
右揃え |
ここで、タグの書式がこれまでと異なることに注意してください。
開始タグが
<
tag att
="
value
">
という形になっています。
この
att
は
属性
（
attribute
）とよばれるもの（の名前）です。
HTMLでは、属性を用いてタグにより詳しい情報を与えます。
このタグの形は、
att
属性の値を
value
にするという意味です。
align属性
は、
<div>
タグにおいてテキストの揃える位置を示します。
この値を
center
や
right
に変えることによって、中央揃えや右揃えになるのです。
なお、
<div align="center">
〜
</div>
は、
<center>
〜
</center>
と略記できます。
<div align="left">Good morning!</div> <div align="center">Good morning!</div> <div align="right">Good morning!</div>
規格の上では、
<center>
タグも
align
属性も使わないようにと指示されています。
ここで紹介したのは、後でスタイルシートと比較するためです。
数式や化学式などでは、
上付き添字
や
下付き添字
が使われます。
HTMLでは、
<sup>
〜
</sup>
に囲まれると上付き添字になり、
<sub>
〜
</sub>
に囲まれると下付き添字になります。
f(x) = a<sub>1</sub> x<sup>2</sup> + a<sub>2</sub> x + a<sub>3</sub>
f(x) = a 1 x 2 + a 2 x + a 3
テキストの強調の所で触れましたが、HTMLではテキストを直接イタリック体などにすることができます。 フォントの切り換えは以下の表に従ってください。 タグを組み合わせることにより、ボールドイタリック体などにもできます。 ただし、システムに適切なフォントがなければ、タグが無視されたように表示されます。
オリジナル: Good morning! おはよう。<br> ボールド体: <b>Good morning! おはよう。</b><br> イタリック体: <i>Good morning! おはよう。</i><br> タイプライタ体: <tt>Good morning! おはよう。</tt><br> ボールドイタリック体: <b><i>Good morning! おはよう。</i></b>
オリジナル: Good morning! おはよう。
ボールド体: Good morning! おはよう。
イタリック体: Good morning! おはよう。
タイプライタ体: Good morning! おはよう。
ボールドイタリック体: Good morning! おはよう。
フォントの大きさを切り換えるには、単純な方法とやや複雑な方法があります。
前者は、
<big>
〜
</big>
で囲めばより大きなフォントが使われ、
<small>
〜
</small>
で囲めばより小さなフォントが使われるというものです。
後者は
<font>
タグを用いるものです。
size属性
によってフォントの大きさを指定します。
この値は1から7までで、値が大きいほど大きなフォントが使われます。
3が普通の大きさです。
size
属性の値は、
+1
,
-2
のような相対指定も可能です。
<font size="5">Good morning!</font><br> <font size="4">Good morning!</font><br> <font size="3">Good morning!</font><br> <font size="2">Good morning!</font>
Good morning!
Good morning!
Good morning!
Good morning!
規格の上では、
<font>
タグは使わないようにと指示されています。
後でスタイルシートと比較します。
テキストの色を切り換えるにも、
<font>
タグを用います。
color属性
によって色を指定します。
この値は
カラー・ネーム
（
color name
）とよばれるキーワードを使います。
以下の表に従ってください。
| カラー・ネーム | 色 | 例 |
|---|---|---|
aqua
|
水色 | ■ |
black
|
黒 | ■ |
blue
|
青 | ■ |
fuchsia
|
桃色 | ■ |
gray
|
灰色 | ■ |
green
|
緑 | ■ |
lime
|
黄緑 | ■ |
maroon
|
茶色 | ■ |
navy
|
紺 | ■ |
olive
|
黄土色 | ■ |
purple
|
紫 | ■ |
red
|
赤 | ■ |
silver
|
銀色 | ■ |
teal
|
深緑 | ■ |
white
|
白 | ■ |
yellow
|
黄色 | ■ |
<font color="aqua">Good morning!</font><br> <font color="blue">Good morning!</font>
Good morning!
Good morning!
今日習ったタグを確認するホームページを作成します。 例にならって短文を考え、
の3通りで表示してください。
今日の演習3にしたがってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。