私のホームページへ - 前の授業へ - 次の授業へ

情報処理IIA（HTML入門）第2回

目次
  1. 文字と文字参照
  2. 演習1
  3. タグ
  4. タグの例
  5. 演習2
  6. レポート課題
注意

文字と文字参照

東京女子大学のシステムでは、xemacsを用いてHTMLファイルを作成しようとすると、自動的に雛形が用意されます。 情報処理Iでは、この雛形に文字を追加してホームページを作成したと思います。 この授業では、この雛形に頼らず、一からホームページを書くことにします。

一般の文字

WWWブラウザ（以下、単にブラウザ）は、基本的に、HTMLファイルの中の文字の列をそのまま並べて表示します。 ただし、HTMLファイルで、スペースや改行をいくら続けて書いても、ブラウザはひとつのスペースと見なして表示します。 また、ブラウザは、表示が右端に達すると、自動的に改行します。 （一部に例外があります。）

例1
          ABCDE FGHIJ


KLMNO     PQRST     UVWXYZ. abcde
fghij klmno:

   pqrst,
   uvwxyz.

01234 56789.
ABCDE FGHIJ KLMNO PQRST UVWXYZ. abcde fghij klmno: pqrst, uvwxyz. 01234 56789.

特殊文字

HTMLファイルで、特殊文字<と&から始まる一定の範囲は特別な意味があり、そのまま表示されるわけではありません。 文字<をそのまま表示したければ、HTMLファイルで<の代りに&lt;と書きます。 また、文字&をそのまま表示したければ、&の代りに&amp;と書きます。 この他にも書き換えるべき文字があります。 次の表に従ってください。 &lt;のような文字列を、文字参照（character reference）と言います。

表1. HTMLファイルで書き換えるべき文字とその文字参照
文字文字参照
"&quot;
&&amp;
<&lt;
>&gt;
例2
&lt;&lt;ABCDE &amp; FGHIJ&gt;&gt;
KLMNO PQRST
&quot;UVWXYZ!&quot;
<<ABCDE & FGHIJ>> KLMNO PQRST "UVWXYZ!"

ヨーロッパ文字

フランス語のaアクサングラーブやドイツ語のaウムラウトなどは、通常キー入力できません。 このようなヨーロッパ文字のいくつかには、文字参照が用意されています。 例えば、aアクサングラーブは&agrave;, aウムラウトは&auml;です。 HTMLファイルに&agrave;と書くとaアクサングラーブが表示されます。 &auml;と書くとaウムラウトが表示されます。 他の文字参照については、文字参照の規格書を参考にしてください。 （これらの文字と日本語の文字が混在すると、ブラウザはうまく表示してくれません。 また、ブラウザの設定を、表示→文字コードセット→欧米、とする必要があるかもしれません。）

文字&を表示するのに&amp;と書かなくてはいけないのを面倒に思うかもしれませんが、&から始まる文字参照を用いることにより、より多くの文字が表示できるようになったことに注意してください。

演習1

雛形を使わずにホームページを作成する演習を行います。

新規にファイルを用意し（例えばex1.html）、雛形をすべて消した後で、次のようなHTMLファイルを作成し、ブラウザでどのように表示されるかを確認してください。 ブラウザのウィンドウの大きさ（横幅）を変えてみて、表示がどう変わるかを確認してください。 

           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

タグ

ホームページでは、文字の幅を一定にしたり、文字を太くしたり、文字を傾かせたり、文字の大きさを変えたり、文字の位置を上下にしたりできます。 また、強制的に改行したり、水平に線を引くこともできます。 これらの機能を働かせるには、タグ（tag）を用います。

タグとは、<tag>という形をした文字列です。 正確に言えば、これは開始タグ（start tag）です。 この他に、終了タグ（end tag）があり、これは</tag>という形をした文字列です。

HTMLファイルで、開始タグ<tag>と終了タグ</tag>に囲まれた部分には、タグ名tagに割り当てられている機能が働きます。 例えば、タグ名bには文字を太くするという機能が割り当てられています。 従って、HTMLファイルで<b>と</b>に囲まれた部分は、ブラウザで文字が太く表示されます。

タグ名に割り当てられている機能の中には、もともと何かを囲む必要のない物もあります。 例えば、強制的に改行するという機能が割り当てられているタグ名brを考えます。 この機能は、範囲に対して働くものではなく、その位置に対して働くものです。 このようなタグ名については、終了タグを書きません。 従って、強制的に改行したいところには、HTMLファイルでタグ<br>のみを書き、</br>は書きません。

タグの例

強制改行と水平線

HTMLファイルで<br>タグがあると、ブラウザでは強制的に改行されます。 <hr>タグがあると水平に線が引かれます。

例3
ABCDE<br>FGHIJ<hr>KLMNO<br><br>PQRST<hr><hr>UVWXYZ
ABCDE
FGHIJ
KLMNO

PQRST
UVWXYZ

フォントの切り替え

HTMLファイルで、文字列が<tt>〜</tt>に囲まれると、ブラウザではタイプライタ体のフォントが使われます。 <i>〜</i>に囲まれるとイタリック体のフォントが使われます。 <b>〜</b>に囲まれるとボールド体のフォントが使われます。

注意： ブラウザは、フォントを切り替えることによって、文字を太く表示したり大きく表示したりしています。 適切なフォントが見つからない場合には、タグが無視されたような表示になります。

例4
ABCDE<tt>FGHIJ</tt><i>KLMNO</i><b>PQRST</b>UVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ

<big>〜</big>に囲まれると大きなフォントが使われます。 <small>〜</small>に囲まれると小さなフォントが使われます。

例5
ABCDE<big>FGHIJ</big>KLMNO<small>PQRST</small>UVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ

添字

HTMLファイルで、文字列が<sub>〜</sub>に囲まれると、ブラウザでは下付き添字になります。 <sup>〜</sup>に囲まれると上付き添字になります。

例6
ABCDE<sub>FGHIJ</sub>KLMNO<sup>PQRST</sup>UVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ

演習2

フォントをテストするホームページを作ります。

新規にファイルを用意し（例えばex2.html）、雛形をすべて消した後で、テスト文を考え（例えば"The quick brown fox jumps over the lazy dog."）、例にならってタイプライタ体、イタリック体、ボールド体、大きなフォント、小さなフォントが見比べられるようなホームページを作成してください。 見やすいように、強制改行や水平線を入れてもよいです。

例7
フォントのテスト
タイプライタ体 The quick brown fox jumps over the lazy dog.
イタリック体 The quick brown fox jumps over the lazy dog.
ボールド体 The quick brown fox jumps over the lazy dog.
大きな字 The quick brown fox jumps over the lazy dog.
小さな字 The quick brown fox jumps over the lazy dog.

レポート課題

今日の演習2にしたがってホームページを作成し、学生番号、氏名、科目名、授業の日付けを明記の上、konishi@twcu.ac.jpあてにメールでそのURIを報告してください。

私のホームページへ - 前の授業へ - 次の授業へ
このページの複製は、東京女子大学学内に限り許可します。 このページへのリンクを許可します。
2000年5月8日更新
製作・著作：小西善二郎<konishi@twcu.ac.jp>