HTMLでカッコつける

HTMLで決められているタグを使いこなすと箇条書きや表などで文書に飾りをつけることができます。

箇条書き

箇条書きには

黒丸などを頭に打つ「番号無しリスト」
頭に番号を打つ「番号付きリスト」
辞書のように単語とその説明をならべる「説明リスト」

の3種類があります。

番号無しリスト

番号無しリスト (Unordered List) は次のような形式です。

バナナ
リンゴ
オレンジ

これは、

<ul>
<li>バナナ
<li>リンゴ
<li>オレンジ
</ul>

のように書いてあります。タグの UL は Unordered List の略 LIは List Item の略です。次の <LI> あるいは </UL>が出てくるとリスト項目の終了であることは明らかですので、</LI>を省略することができます。

番号付きリスト

番号付きリスト (Ordered List) は次のような形式です。

バナナ
リンゴ
オレンジ

これは、

<ol>
<li>バナナ
<li>リンゴ
<li>オレンジ
</ol>

のように書いてあります。OL は Ordered List の略です。

説明リスト

説明リスト (Descriptive List) は次のような形式です。

バナナ
皮が黄色くておいしい
リンゴ
皮が赤くておいしい
オレンジ
皮がオレンジ色でおいしい

これは、

<dl>
<dt>バナナ
<dd>皮が黄色くておいしい
<dt>リンゴ
<dd>皮が赤くておいしい
<dt>オレンジ
<dd>皮がオレンジ色でおいしい
</dl>

のように書いてあります。DLは Descriptive List, DT は Descriptive list Title, DDは Descriptive list Description を表わします。

表を作る

TABLEタグを使うと表を作ることができます。

バナナ皮が黄色くておいしい
リンゴ皮が赤くておいしい
オレンジ皮がオレンジ色でおいしい

これは、以下のように書いた例です。

<table>
<tr>
<td>バナナ
<td>皮が黄色くておいしい
<tr>
<td>リンゴ
<td>皮が赤くておいしい
<tr>
<td>オレンジ
<td>皮がオレンジ色でおいしい
</table>

表に罫線を入れたい場合には border パラメータを使います。 <table border="1"> のように書き換えてみましょう。以下のようになります。

バナナ皮が黄色くておいしい
リンゴ皮が赤くておいしい
オレンジ皮がオレンジ色でおいしい

border の引数値を大きくしたらどうなるでしょう。試してみてください。

位置をずらす

文章の位置をCENTERタグを使って中央へもってきたり BLOCKQUOTEタグで

頭下げ

をすることもできます。

段落(Paragraph)を表わすP、改行BR、横線HRなどのタグも文章にメリハリをつけるために使うことができます。

練習

public_htmlのディレクトリに index.html というファイルを作ると http://www.s.kochi-u.ac.jp/~98ssXXX/を開いたときにそのファイルが表示されます。 (これはそのサーバの設定に依存しますが、とりあえず、sドメインの WWW サーバの場合はこうなっています。) index.html を作成して first.html と second.html へのリンクを作りましょう。このとき、箇条書きまたは表を使ってみましょう。index.html は自分のホームページへの入り口です。自分がどこの誰であるか、メールアドレスなどを書いておくようにしましょう。

バナナ	皮が黄色くておいしい
リンゴ	皮が赤くておいしい
オレンジ	皮がオレンジ色でおいしい