HTML の概要

目次

HTML の全体構成

HTML 文書は、ヘッダ部と本文（ボディ）の２つの部分からなります。 最初の１行は DOCTYPE Declaration といい、 使用している HTML のバージョンを示しています。 ここでは HTML 3.2 を指定しています。 なお、このタグは HTML のものではなく、 HTML のベースとなっている SGML（Standard Generalized Markup Language ～コンピュータによる文書交換のための標準規格）のものです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <title>タイトル</title>
    ：　　（ヘッダ部）
  </head>
  <body>
    ：　　（本文）
  </body>
</html>
ヘッダ部
ここにヘッダ情報を書きます。 ヘッダ情報は文書の本文に現れない、 その文書に関する情報で、 タイトルやキーワードなどがあります。 タイトルは省略できません。
本文
ここに本文を書きます。 この部分に書いたものが Web ブラウザに表示されます。

<html>、 </html>、 <head>、 </head>、 <body>、 </body> は省略できますが、 <title> ～ </title> は省略できません。

この文書は（古い） HTML 3.2 の（非常に片寄った）抜粋です。現在 W3C (World Wide Web Consortium) は HTML 4.01 を XML で定義し直した XHTML 1.0 を推奨しています。 また、この文書では Web ページのレイアウトに align= や color= といった HTML 属性を使用していますが、 文書の論理的（意味的）構造とレイアウトを分離するという視点からは、 今後はこれに代えて CSS (Cascading Style Sheets) を使用するべきでしょう。

XHTML 1.0 の仕様書の邦訳は XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語に、HTML 4.01 の仕様書の邦訳は HTML 4 仕様書邦訳計画にあります。


タイトルをつける

Web ページのタイトルは、 <title> ～ </title> にはさんでヘッダ部に置きます。

<head>
　<title>ここにタイトルを書きます</title>
</head>

このタイトルは本文ではなく、Web ブラウザのウィンドウの枠などに現れます。 日本語は、Web ブラウザ（あるいはコンピュータ）の種類によっては、 正常に表示できないことがあります。 タイトルは必ず付けなければなりません。


見出しをつける

見出しは <h(数字)> ～ </h(数字)> にはさんで書きます。 (数字) は１～６で、１が一番“重要度”の高い見出しになります。 ブラウザは通常この重要度を文字の大きさとして表現します。 また見出しが目立つように字体を太字にし、 前後の行間をあけます。

<h1>これはh1の見出しです</h1>
<h2>これはh2の見出しです</h2>
<h3>これはh3の見出しです</h3>
<h4>これはh4の見出しです</h4>
<h5>これはh5の見出しです</h5>
<h6>これはh6の見出しです</h6>

これは、こんな具合いになります。

これはh1の見出しです

これはh2の見出しです

これはh3の見出しです

これはh4の見出しです

これはh5の見出しです
これはh6の見出しです

見出しの水平位置も指定できます。

<h2 align="left">これは align="left" の見出しです</h2>
<h2 align="center">これは align="center" の見出しです</h2>
<h2 align="right" >これは align="right" の見出しです</h2>

これは、下のように表示されます。

これは align="left" の見出しです

これは align="center" の見出しです

これは align="right" の見出しです


段落を設ける

段落を設ける場合には、文章を <p> ～ </p> で挟みます。 </p> は省略可能なので、 各段落の先頭に <p> を置くだけでもかまいません。

<p>一つ目の段落です。一つ目の段落です。一つ目の段落です。
一つ目の段落です。一つ目の段落です。一つ目の段落です。</p>
<p>二つ目の段落です。二つ目の段落です。二つ目の段落です。
二つ目の段落です。二つ目の段落です。二つ目の段落です。</p>

段落は次のように、改行した上で行間をあけて表示されます。

一つ目の段落です。一つ目の段落です。一つ目の段落です。 一つ目の段落です。一つ目の段落です。一つ目の段落です。

二つ目の段落です。二つ目の段落です。二つ目の段落です。 二つ目の段落です。二つ目の段落です。二つ目の段落です。

段落単位で行揃え位置を指定できます。

<p align="left">
左揃えの段落です。<br>
左揃えの段落です。左揃えの段落です。<br>
左揃えの段落です。左揃えの段落です。左揃えの段落です。<br>
</p>
<p align="center">
中央揃えの段落です。<br>
中央揃えの段落です。中央揃えの段落です。<br>
中央揃えの段落です。中央揃えの段落です。中央揃えの段落です。<br>
</p>
<p align="right">
右揃えの段落です。<br>
右揃えの段落です。右揃えの段落です。<br>
右揃えの段落です。右揃えの段落です。右揃えの段落です。<br>
</p>

これは、下のように表示されます。

左揃えの段落です。
左揃えの段落です。左揃えの段落です。
左揃えの段落です。左揃えの段落です。左揃えの段落です。

中央揃えの段落です。
中央揃えの段落です。中央揃えの段落です。
中央揃えの段落です。中央揃えの段落です。中央揃えの段落です。

右揃えの段落です。
右揃えの段落です。右揃えの段落です。
右揃えの段落です。右揃えの段落です。右揃えの段落です。


文章を区分する

一連の要素（文章など）をひとつのまとまりとして区分するためには、文章を <div> ～ </div> で挟みます。 段落とは異なり、 </div> は省略できません。

<div>一つ目の区分です。一つ目の区分です。一つ目の区分です。
一つ目の区分です。一つ目の区分です。一つ目の区分です。</div>
<div>二つ目の区分です。二つ目の区分です。二つ目の区分です。
二つ目の区分です。二つ目の区分です。二つ目の区分です。</div>

区分は次のように、改行して表示されます。行間は開きません。

一つ目の区分です。一つ目の区分です。一つ目の区分です。 一つ目の区分です。一つ目の区分です。一つ目の区分です。
二つ目の区分です。二つ目の区分です。二つ目の区分です。 二つ目の区分です。二つ目の区分です。二つ目の区分です。

区分単位で行揃え位置を指定できます。

<div align="left">
左揃えの区分です。<br>
左揃えの区分です。左揃えの区分です。<br>
左揃えの区分です。左揃えの区分です。左揃えの区分です。<br>
</div>
<div align="center">
中央揃えの区分です。<br>
中央揃えの区分です。中央揃えの区分です。<br>
中央揃えの区分です。中央揃えの区分です。中央揃えの区分です。<br>
</div>
<div align="right">
右揃えの区分です。<br>
右揃えの区分です。右揃えの区分です。<br>
右揃えの区分です。右揃えの区分です。右揃えの区分です。<br>
</div>

これは、下のように表示されます。

左揃えの区分です。
左揃えの区分です。左揃えの区分です。
左揃えの区分です。左揃えの区分です。左揃えの区分です。
中央揃えの区分です。
中央揃えの区分です。中央揃えの区分です。
中央揃えの区分です。中央揃えの区分です。中央揃えの区分です。
右揃えの区分です。
右揃えの区分です。右揃えの区分です。
右揃えの区分です。右揃えの区分です。右揃えの区分です。


強制改行

HTML ではテキスト中の改行や空白は無視されてしまいます。本文に

本当はここ→
←に改行が入っています。

と書いても、Web ブラウザ上では

本当はここ→ ←に改行が入っています。

と表示されてしまいます。積極的に改行するには文章を 段落や区分に分けるか、 <br> を入れます。

本当はここ→<br>
←に改行が入っています。

とすれば、

本当はここ→
←に改行が入っています。

となります。


箇条書き（リスト表示）

箇条書きを行う部分は <ul> ～ </ul> ではさんで、 各項目を <li> ～ </li> ではさみます。 </li> は省略可能なので、 項目の先頭に <li> を置くだけでもかまいません。

<ul> ～ </ul> の中に <ul> ～ </ul> を置いて、 リストを入れ子構造にすることもできます。 HTML の記述のインデント（字下げ、行頭の空白）は HTML ソースを見やすくするためのもので、 Web ページ上のレイアウトには影響を与えません。 

<ul>
  <li>項目１</li>
  <li>項目２</li>
  <ul>
    <li>項目２－１</li>
    <li>項目２－２</li>
  </ul>
  <li>項目３</li>
</ul>

これは、次のように表示されます。

  • 項目１
  • 項目２
    • 項目２－１
    • 項目２－２
  • 項目３


番号つきリスト

各項目に番号をつけたリストも作成するには、 その部分を <ol> ～ </ol> ではさんで、 各項目を <li> ～ </li> ではさみます。 </li> は省略可能なので、 項目の先頭に <li> を置くだけでもかまいません。 これもリストを入れ子構造にできます。

<ol>
  <li>項目１</li>
  <li>項目２</li>
  <ul>
    <li>項目２－１</li>
    <li>項目２－２</li>
  </ul>
  <li>項目３</li>
</ol>

これは、次のように表示されます。

  1. 項目１
  2. 項目２
    1. 項目２－１
    2. 項目２－２
  3. 項目３


記述（定義）形式のリスト

単語リストのように、 あるキーワードに対して説明を加えるようなリストです。 これはリスト表記する部分を <dl> ～ </dl> ではさんで、 各項目のキーワード部分を <dt> ～ </dt> ではさみ、 記述部分を <dd> ～ </dd> ではさみます。 </dt> や </dd> は省略できます。 これもリストを入れ子構造にできます。

<dl>
  <dt>札幌ラーメン</dt>
    <dd>麺は太めのちじれ麺であり、
    醤油、塩、味噌などのバリエーションがあるが、
    特に味噌ラーメンが重視されている。
    具は一般的なものに加えてコーンを加えることが多い。
    バターをのせることもある。</dd>
  <dt>博多ラーメン</dt>
    <dd>細いストレート麺が主流で、
    中でも長浜ラーメンの麺はかなり細い。
    スープはトンコツが主体で、
    色の白いスープが多い。
    かなり脂っこいものもある。
    付け合わせに紅しょうが・からし高菜を用いるようだ。</dd>
  <dt>和歌山ラーメン</dt>
    <dd>細目の麺だが、
    博多ラーメンほどではない。
    わりと伸び気味にゆでるせいか、
    スープで麺が太っていることもある。
    スープはトンコツベースの醤油味。
    いっしょに早すし（早熟れ鮨、あせ巻き寿司）を食べる。
    和歌山市内では次の２つの流派に別れるようだ。</dd>
    <dl>
      <dt>井手派</dt>
        <dd>スープはかなりこってりしており、
        味も濃い。</dd>
      <dt>車庫前派</dt>
        <dd>スープはあっさりしていて、
        東京ラーメンにかなり近い。</dd>
    </dl>
  <dt>京風ラーメン</dt>
    <dd>「京風」ラーメンをうたう店は、
    全国にあるようだが、
    京都（市内）でそういうラーメンにお目にかかったことはない。
    天下一品が「京風ラーメン」だと思う人はいないだろう。
    現実の京都は“全国のラーメンの博覧会”状態である。</dd>
</dl>

これは、次のように表示されます。

札幌ラーメン
麺は太めのちじれ麺であり、 醤油、塩、味噌などのバリエーションがあるが、 特に味噌ラーメンが重視されている。 具は一般的なものに加えてコーンを加えることが多い。 バターをのせることもある。
博多ラーメン
細いストレート麺が主流で、 中でも長浜ラーメンの麺はかなり細い。 スープはトンコツが主体で、 色の白いスープが多い。 かなり脂っこいものもある。 付け合わせに紅しょうが・からし高菜を用いるようだ。
和歌山ラーメン
細目の麺だが、博多ラーメンほどではない。 わりと伸び気味にゆでるせいか、 スープで麺が太っていることもある。 スープはトンコツベースの醤油味。 いっしょに早すし（早熟れ鮨、あせ巻き寿司）を食べる。 和歌山市内では次の２つの流派に別れるようだ。
井手派
スープはかなりこってりしており、 味も濃い。
車庫前派
スープはあっさりしていて、 東京ラーメンにかなり近い。
京風ラーメン
「京風」ラーメンをうたう店は、 全国にあるようだが、 京都（市内）でそういうラーメンにお目にかかったことはない。 天下一品が「京風ラーメン」だと思う人はいないだろう。 現実の京都は“全国のラーメンの博覧会”状態である。

なお、 <dl compact> を使うと、 キーワードが短かければ、 キーワードと記述部分の間に改行を入れないようにしてくれます。

<dl compact>
<dt>☆</dt>
<dd>白い星</dd>
<dt>★</dt>
<dd>黒い星</dd>
<dt>○</dt>
<dd>白丸</dd>
<dt>●</dt>
<dd>黒丸</dd>
</dl>

これは、次のように表示されます。

☆
白い星
★
黒い星
○
白丸
●
黒丸


引用する

引用部分は <blockquote> ～ </blockquote> ではさみます。 この部分は行の長さを本文より短くします。

ここは本文。ここは本文。ここは本文。ここは本文。
ここは本文。ここは本文。ここは本文。ここは本文。
ここは本文。ここは本文。ここは本文。ここは本文。
ここは本文。ここは本文。ここは本文。ここは本文。
<blockquote>
ここは引用文。ここは引用文。ここは引用文。ここは引用文。
ここは引用文。ここは引用文。ここは引用文。ここは引用文。
ここは引用文。ここは引用文。ここは引用文。ここは引用文。
</blockquote>
ここは本文。ここは本文。ここは本文。ここは本文。
ここは本文。ここは本文。ここは本文。ここは本文。
ここは本文。ここは本文。ここは本文。ここは本文。

これは次のように表示されます。

ここは本文。ここは本文。ここは本文。ここは本文。 ここは本文。ここは本文。ここは本文。ここは本文。 ここは本文。ここは本文。ここは本文。ここは本文。 ここは本文。ここは本文。ここは本文。ここは本文。
ここは引用文。ここは引用文。ここは引用文。ここは引用文。 ここは引用文。ここは引用文。ここは引用文。ここは引用文。 ここは引用文。ここは引用文。ここは引用文。ここは引用文。
ここは本文。ここは本文。ここは本文。ここは本文。 ここは本文。ここは本文。ここは本文。ここは本文。 ここは本文。ここは本文。ここは本文。ここは本文。


中央に揃える

中央揃えを行う場合は、 見出しや 段落、 区分などに用意されている align="center" 属性が使用できます。 この他に中央に揃えたい部分を <center> ～ </center> ではさむ方法もあります。

いずれの場合も、中央揃えする部分に <br> や <p> が入っていないと詰め込みが行われて、 うまく中央に揃えられない場合があります。

<center>
1<br>
1 1<br>
1 2 1<br>
1 3 3 1<br>
1 4 6 4 11<br>
1 5 10 10 5 1<br>
1 6 15 20 15 6 1<br>
</center>

これは次のように表示されます。

1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
1 5 10 10 5 1
1 6 15 20 15 6 1


そのまま表示する

HTML 中では改行や空白は無視されてしまいますが、 それだと不便なことがあります。 改行や空白によるレイアウトを活かして表示するためには、 その部分を <pre> ～ </pre> ではさみます。

<pre>
    ○┃×┃×
    ━╋━╋━
    ×┃○┃○
    ━╋━╋━
    ○┃○┃×
</pre>

これは次のように表示されます。

    ○┃×┃×
    ━╋━╋━
    ×┃○┃○
    ━╋━╋━
    ○┃○┃×


リンクを張る

現在表示しているページに、 他のページを参照するための “ホットスポット” （マウスでクリックすると何かが起こる場所）を埋め込むことを、 そのページにリンクするとかリンクを張るなどと言います。 これは“ホットスポット”として使いたい文字列を、 <a href="リンク先のURL"> ～ </a> ではさみます。 和歌山大学のホームページにリンクするには、 次のように書きます。

<a href="http://www.wakayama-u.ac.jp/">和歌山大学</a>

リンク先がリンク元と同じ場所にあれば、 URL の一部を省略することができます。 例えば、

http://www.somewhere.ac.jp/X/a.html

というページから、そのページと同じディレクトリにある

http://www.somewhere.ac.jp/X/b.html

にリンクを張る場合、 http://www.somewhere.ac.jp/X/ を省略して、

<a href="b.html">b.html にリンク</a>

と書くことができます。 また a.html から、同じサーバの別のディレクトリにある

http://www.somewhere.ac.jp/Y/c.html

にリンクするには、

<a href="/Y/c.html">c.html にリンク</a>

と書くことができます。

他人のホームページへのリンクについて

公開されているホームページは、 多くの人に見てもらうために作られているわけですから、 個人的にはそういうページにリンクを張ることは原則的に自由だと考えられています （著作権情報センターのＱ＆Ａ）。

しかし、中にはリンクを禁止していたり、 事前にメールなどで了解を求めているところもあります。

他人のホームページにリンクを張るときは、 そのページだけではなく、 そのページの所有者の他のページも良く読んで、 そういう記述がないかどうか十分に確かめましょう。 また、そういう記述がなくても、 リンクを張る場合には事前の問い合わせがあって当然と考えている人もいるので、 できるだけメール等でそのページの所有者に確認を取った方がいいでしょう。

ただ、そういうメールにいちいち返事を書くのが面倒という人もいるので、

「××様のホームページ http://www.yourhost.xx.jp/yourpage.html に、
http://www.sys.wakayama-u.ac.jp/~USER/mypage.html から
リンクを張らせて頂きました。もしご都合が悪いようでしたら、
USER@sys.wakayama-u.ac.jp までお知らせ下さい。」

というような内容のメールを送ることを勧めます…が、 これも一概には言えないので世の中ややこしい…


画像を埋め込む

Web ページに画像を埋め込むには、 <img src="画像ファイルのURL" alt="その画像ファイルの説明"> を書きます。 http://www.sys.wakayama-u.ac.jp/icons/bomb.gif という画像ファイルを埋め込むには、 次のように書きます。

爆弾→
<img src="http://www.sys.wakayama-u.ac.jp/icons/bomb.gif" alt="爆弾">
←

これは、次のように表示されます。 alt="..." で指定した文字は、 この画像が表示されなかったとき （画像の転送に失敗した、画像が表示できない Web ブラウザ ～文字や音声でページを表示するものがあります～ を使っていた、など）、 かわりに表示されます。

爆弾→ ←

このように、画像は Web ページのレイアウトの上では、 文字と同様に扱われます。 画像の同一行内での文字に対する高さ（ベースライン）を調整するには、 align= 属性を使います。

top→<img src="bomb.gif" align="top">
middle→<img src="bomb.gif" align="middle">
bottom→<img src="bomb.gif" align="bottom">

これは下のように表示されます。

top→ middle→ bottom→

align= 属性で水平位置 ("left", "right") を指定したときは、 画像の周囲に文字が回り込みます （"center" は上の "middle" と同じです）。 文字の回り込みをやめるには <br clear="all">を使います。 画像と文章とのスペースは hspace=（水平）、vspace=（垂直）で指定します。

<img src="bomb.gif" align="left">
この左上に画像。この左上に画像。この左上に画像。この左上に画像。
この左上に画像。この左上に画像。この左上に画像。この左上に画像。
この左上に画像。この左上に画像。この左上に画像。この左上に画像。
この左上に画像。この左上に画像。この左上に画像。この左上に画像。
この左上に画像。この左上に画像。この左上に画像。この左上に画像。
この左上に画像。この左上に画像。この左上に画像。この左上に画像。
<br clear="all">
<p>
<img src="bomb.gif" align="right"
hspace="20" vspace="10">
この右上に画像。この右上に画像。この右上に画像。この右上に画像。
この右上に画像。この右上に画像。この右上に画像。この右上に画像。
この右上に画像。この右上に画像。この右上に画像。この右上に画像。
この右上に画像。この右上に画像。この右上に画像。この右上に画像。
この右上に画像。この右上に画像。この右上に画像。この右上に画像。
この右上に画像。この右上に画像。この右上に画像。この右上に画像。
<br clear="all">

これは下のようにレイアウトされます。

この左上に画像。この左上に画像。この左上に画像。この左上に画像。 この左上に画像。この左上に画像。この左上に画像。この左上に画像。 この左上に画像。この左上に画像。この左上に画像。この左上に画像。 この左上に画像。この左上に画像。この左上に画像。この左上に画像。 この左上に画像。この左上に画像。この左上に画像。この左上に画像。 この左上に画像。この左上に画像。この左上に画像。この左上に画像。

この右上に画像。この右上に画像。この右上に画像。この右上に画像。 この右上に画像。この右上に画像。この右上に画像。この右上に画像。 この右上に画像。この右上に画像。この右上に画像。この右上に画像。 この右上に画像。この右上に画像。この右上に画像。この右上に画像。 この右上に画像。この右上に画像。この右上に画像。この右上に画像。 この右上に画像。この右上に画像。この右上に画像。この右上に画像。

画像を“ホットスポット”に使うこともできます。 <img src="..."> を <a href="..."> ～ </a> ではさんでください。

ここをクリックすると目次に戻ります→
<a href="index.html"><img src="bomb.gif"></a>

これは、この授業の目次のページに戻るホットスポットになります。

ここをクリックすると目次に戻ります→


水平線を引く

<hr> で下のような水平線を引くことができます。

<hr noshade> とすると、立体感のない線になります。

横幅（長さ）は width=、太さは size=、水平位置は align= で指定します。 width= や size= はピクセル数で指定します。 width= を % で指定すると、ブラウザの表示幅に合わせます。 align= には "left", "center", "right" が指定できます。

<hr width="100" size="100" align="left">

<hr width="50%" size="100" align="right" noshade>


字体を変える

 文字に下線を付けたり、 太字や斜体にすることができます。 ただし、Web ブラウザによっては、 これはうまく反映されない場合があります。 O2 の Netscape では、 日本語の表示に用いる字体によっては、 日本語の太字や斜体は表示されません。 また Macintosh の Netscape では下線は表示されません。 

この文字は<b>Bold face（太字）</b>です。<br>
この文字は<i>Italic face（斜体）</i>です。<br>
この文字は<tt>Typewriter face（等幅）</tt>です。<br>
この文字は <sup>Superscript（上付き文字）</sup>です。<br>
この文字は <sub>Subscript（下付き文字）</sub>です。<br>
この文字には <u>Underline（下線）</u>が付けてあります。<br>
この文字には <s>Strike line（打ち消し線）</s>が付けてあります。

これは次のように表示されます。

この文字は Bold face（太字）です。
この文字は Italic face（斜体）です。
この文字は Typewriter face（等幅）です。
この文字は Superscript（上付き文字）です。
この文字は Subscript（下付き文字）です。
この文字には Underline（下線）が付けてあります。
この文字には Strike line（打ち消し線）が付けてあります。


文字の大きさを変える

 見出しではなく、文中の文字の大きさを変えたいときがあります。 そのときは、サイズを変更したい文字を <font size="(数字)"> ～ </font> ではさみます。 (数字) は１～７で、７が一番大きくなります。 

この文字は<font size="7">size=7</font>です。<br>
この文字は<font size="6">size=6</font>です。<br>
この文字は<font size="5">size=5</font>です。<br>
この文字は<font size="4">size=4</font>です。<br>
この文字は<font size="3">size=3</font>です。<br>
この文字は<font size="2">size=2</font>です。<br>
この文字は<font size="1">size=1</font>です。

これは次のように表示されます。

この文字はsize=7です。
この文字はsize=6です。
この文字はsize=5です。
この文字はsize=4です。
この文字はsize=3です。
この文字はsize=2です。
この文字はsize=1です。

また、標準の文字の大きさからの相対指定もできます。 

この文字は<font size="+2">size=+2</font>で、
この文字は<font size="-1">size=-1</font>です。

これは次のように表示されます。

この文字はsize=+2で、 この文字はsize=-1です。

なお、標準の文字の大きさは <basefont size="(数字)"> で指定します。これも (数字) は１～７で、７が一番大きくなります。


文字の色を変える

 文字の色を変えるには、 色を変えたい文字を <font color="#(色コード)"> ～ </font> ではさみます。 なお、 <font size="(数字)" color="#(色コード)"> ～ </font> という具合いに、 色とサイズの両方を同時に指定しても構いません。

色コードの説明はここにあります。 

この文字は<font color="#000000">黒色</font>です。<br>
この文字は<font color="#ff0000">赤色</font>です。<br>

この文字は<font color="#00ff00">緑色</font>です。<br>

この文字は<font color="#0000ff">青色</font>です。<br>

この文字は<font color="#ffff00">黄色</font>です。<br>

この文字は<font color="#ff00ff">マゼンタ</font>です。<br>

この文字は<font color="#00ffff">シアン</font>です。<br>

この文字は<font color="#ffffff">白色</font>です。

これは次のように表示されます。

この文字は黒色です。
この文字は赤色です。
この文字は緑色です。
この文字は青色です。
この文字は黄色です。
この文字はマゼンタです。
この文字はシアンです。
この文字は白色です。


文字や背景色の標準設定

 そのページ全体の文字や背景色の標準設定は、 <body> タグのオプションで行います。 

<body text="#ffffff" bgcolor="#0000ff">

上の例ではこんな風になります。

他に、リンクのホットスポットになっている文字の色もここで指定できます。 link= でまだクリックしていないホットスポットの色、 vlink= で一度クリックしたホットスポットの色、 alink= でホットスポットをクリックした瞬間の色を指定します。 

<body text="#ffffff" bgcolor="#0000ff"
link="#ff0000" vlink="#880000" alink="#00ff00">

これだとホットスポットは赤色になり、 クリックした瞬間緑色になったあと、 暗い赤になります。


背景に画像を貼り付ける

 <body> タグでは、背景に張り込む画像を指定することもできます。 これは background="画像ファイルのURL" というオプションで行います。 bomb.gif（右の画像）を背景画像として貼り付けるには、 下のように書きます。 

<body text="#ffffff" bgcolor="#902810" background="bomb.gif">

この例は、このページのようになります。 このページを見れば分かる通り、画像はタイリング （タイルを敷き詰めるような繰り返し表示）で表示されます。 従って、下のような画像を背景画像として用いると、 このページのようになります。


<, >, & を表示する

< > & などの幾つかの特殊記号は HTML の制御文字として扱われるため、 そのままでは表示されません。これらを表示するときは、以下の表記を用います。

<&lt;
>&gt;
&&amp;
"&quot;