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 は自分のホームページへの入り口
です。自分がどこの誰であるか、メールアドレスなどを書いておく
ようにしましょう。