高知大学 共通教育 平成14年度 情報処理 II y
(理学部 数理情報科学科い組 対象、塩田教官) y
6月12日の教材


今日はホームページ( HTML 文書 )の作成法を覚えましょう。

□ HTML 文書

□ HTML 文書のサンプル

□ sample.html の編集

  1. [スタート] → [プログラム] → [アクセサリ] → [ワードパッド]を起動し、
  2. [ファイル] → [開く]
  3. ファイルの種類を「すべてのファイル (*.*)」にして
  4. sample.html のアイコンをクリック

□ 注意

□ 参考ページ

□ 色々なタグ

中央揃え(センタリング):
<center>中央揃えしたい文・画像等</center>

段落:
<p>段落</p>
(<p>ひとつなら、多くのブラウザで空白行入り改行になる。)

改行:
<br>

番号付きリスト:
<ol>
<li>項目1
<li>項目2 etc.
</ol>

番号なしリスト:
<ul>
<li>項目1
<li>項目2 etc.
</ul>

データリスト:
<dl>
<dt>データタイトル1
<dd>項目1-1
<dd>項目1-2
<dt>データタイトル2
<dd>項目2-1 etc.
</dl>

表:
<table border="外枠の幅">
<tr><th>見出し1</th><th>見出し2</th></tr>
<tr><td>項目1-1</td><td>項目1-2</td></tr>
<tr><td>項目2-1</td><td>項目2-2</td></tr>
</table>

(オプションにより、表の幅、高さ、罫線の太さ、セル内の文字と罫線の間隔、 セル内の文字の位置、背景色の指定、セルの結合などができる。 → 表のサンプル

リンク:
<a href="リンク先のURL">リンク先のタイトル</a>

同じページ内へのリンク:
リンク先に<a name="リンク先の愛称"> というタグを書き、
<a href="#リンク先の愛称">リンク先のタイトル</a>

画像の貼り付け:
<img src="画像ファイル名">

強調文字:
<b>強調したい文字</b>

見出し文字:
<h1>見出し文字</h1>~<h6>見出し文字</h6>
(前後を空白改行して太文字)

コメント(画面には表示されない):
<!-- コメント1--  --コメント2 -->

水平線:
<hr>

サイズ付き水平線:
<hr width="幅" size="太さ">
例)<hr width="70%" size="10">

背景画像:
<body background="画像ファイル名">

背景色:
<body bgcolor="背景色の16進表示"> または <body bgcolor="色の名前">
例) #000000, #f80000, #008000, #0000c0, #ffffff
black, red, green, blue, white, yellow, orange, purple, gray,

文字の大きさ・色:
<font size="大きさ" color="色">大きさ・色を変えたい文字</font>
(大きさはピクセル値、または現在の大きさからの±値で指定)
例)<font size="+2" color="red">2段階大きい赤文字</font>

下付き添え字:
下付き<sub>添え字</sub>

上付き添え字:
上付き<sup>添え字</sup>


情報処理 II '02 のページへ