| 目次 | 索引 |
|---|---|
ホームページでは、ブラウザ・ウィンドウのタイトルバーに文字列が追加できます。 この文字列を、ホームページの タイトル （ 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>
ホームページを作っていると、書きかけの文章やちょっとしたメモなど、表示してほしくはないけれどファイルには残しておきたい部分ができたりします。
ブラウザは、
<!--
からそれ以降の最初の
-->
までを
コメント
（
comment
）（注釈）と見なします。
コメントは表示されません。
したがって、表示してほしくない部分は、
<!--
〜
-->
で囲めばよいのです。
<h2>はじめに</h2> <!-- ここは最後に書く。 --> <h2>JavaScriptの基本</h2> <!-- この節では、 まず、 -->
広い範囲をコメントにするには注意が必要です。
<h2>はじめに</h2> <!-- ここは最後に書く。 --> <h2>JavaScriptの基本</h2> <!-- この節では、 まず、 -->
この全体をコメントにするつもりで、
<!-- <h2>はじめに</h2> <!-- ここは最後に書く。 --> <h2>JavaScriptの基本</h2> <!-- この節では、 まず、 --> -->
と書きましても、「JavaScriptの基本」が表示されてしまいます。
これは、1行目から始まったコメントが、9行目の
-->
ではなく、3行目の
-->
で終わりと見なされたからです。
タグをたくさん使うようになりますと、開始タグと終了タグの対応が分かりにくくなってきます。 終了タグを忘れて思わぬ表示になったりしないためにも、タグで囲まれている範囲が一目で分かるようにしたいものです。
多くのプログラミング言語では、 インデント （ indent ）（字下げ）を用いてプログラムの構造を見やすくしています。 この方法は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>
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>
文章を書いていると、一部の語句を
強調
したくなることがあります。
英語などの場合、強調する語句はイタリック体を用いるのが習わしです。
しかし、強調だから
<i>
〜
</i>
で囲むなどと考えていたのでは、作者は文章の内容に集中できません。
このため、HTMLには、ここからここまでを強調するというタグ
<em>
〜
</em>
が用意されています。
作者は、慣習を意識せず、このタグを使って強調する語句を指定します。
ブラウザは、慣習に基いて、その語句をイタリック体で表示します。
ブラウザは、強調以外にもいくつかの慣習を知っています。 主なものを表に示します。
| テキスト | タグ | 表示 |
|---|---|---|
| 強調 | <em>〜</em> |
イタリック体 |
| より強い強調 | <strong>〜</strong> |
ボールド体 |
| 文献参照 | <cite>〜</cite> |
イタリック体 |
| 定義語句 | <dfn>〜</dfn> |
ボールド体 |
| プログラムコード | <code>〜</code> |
タイプタイタ体 |
| 出力例 | <samp>〜</samp> |
タイプライタ体 |
| キー入力 | <kbd>〜</kbd> |
タイプライタ体 |
| 変数 | <var>〜</var> |
イタリック体 |
なお、
<b>
,
<i>
,
<tt>
タグと同様に、タグが無視されたように表示されることがあります。
<p> <strong>Don't write</strong> <code>if (x = y)</code> .... A single equal sign (<code>=</code>) is used in an <em>assignment statement</em>. </p>
フォントの大きさを切り換えるには、単純な方法とやや複雑な方法があります。
前者は、
<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>
規格の上では、
<font>
タグは使わないようにと指示されています。
後でスタイルシートと比較します。
<h1>
タグを使っても、フォントを大きくできます。
しかし、フォントを大きくする目的で、
<h1>
タグを使うことは勧められません。
単にフォントを大きくするときには
<font>
タグを使い、見出しのフォントの大きさを意識せず、文章の内容に集中するときには
<h1>
タグを使う、としてください。
もう一度、
<i>
タグと
<em>
タグとの関係を思い出してください。
テキストの色を切り換えるにも、
<font>
タグを用います。
color属性
によって色を指定します。
この値は
カラー・ネーム
（
color name
）とよばれるキーワードを使います。
以下の表に従ってください。
| カラー・ネーム | 色 | 例 |
|---|---|---|
aqua |
水色 | ■ |
black |
黒 | ■ |
blue |
青 | ■ |
fuchsia |
桃色 | ■ |
gray |
灰色 | ■ |
green |
緑 | ■ |
lime |
黄緑 | ■ |
maroon |
茶色 | ■ |
navy |
紺 | ■ |
olive |
黄土色 | ■ |
purple |
紫 | ■ |
red |
赤 | ■ |
silver |
銀色 | ■ |
teal |
深緑 | ■ |
white |
白 | ■ |
yellow |
黄色 | ■ |
テキストブラウザでは、通常色は変わりません。
<font color="white">Good morning!</font><br> <font color="black">Good morning!</font><br> <font color="red">Good morning!</font><br> <font color="blue">Good morning!</font><br> <font color="yellow">Good morning!</font>
赤のやや大きなフォントに切り替えるときには、
<font color="red"><font size="4">Good morning!</font></font>
または
<font color="red" size="4">Good morning!</font>
と書きます。
<font color="red"><font size="4">Good morning!</font>
と書きますと、思ったように表示されません。
テスト用の語句（以下の例では"I love chocolate."）を考え、その語句が5行並ぶホームページを作成してください。 語句はすべて中央に揃え、一行一行フォントの大きさと色を変えてください。 HTMLファイルは、名前を（例えば）ex3.htmlとして、授業用ディレクトリ（WWW-local/ip2a）に保存してください。
今日の演習3に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け（5/2）を明記してください。