Jouhou-Shori II, 2001.6.6

高知大学共通教育平成１３年度情報処理 II _y
（理学部数理情報科学科い組対象、塩田教官） _y
６月６日の教材

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

□　HTML 文書

私達がホームページとして見ているものは、ブラウザソフト ( Netscape, Internet Explorer など ) が「HTML 文書」に書かれている命令に従って表示をした結果です。
HTML 文書の拡張子は .html または .htm です。
Netscape で [表示] → [ページのソース] を選ぶと、現在表示されているページのソース ( HTML 文書 ) を見ることが出来ます。
< > で囲まれた部分は「タグ」と呼ばれ、ブラウザへの命令が記述されています。
気に入ったページのソースを眺めるのが、タグを覚える早道です。

□　HTML 文書のサンプル

まずはここをクリックしてサンプルページを開いてください。
［ファイル］ → ［名前を付けて保存］で、サンプルページのソース ( sample.html ) を保存してください。保存先はマイドキュメントへ。
保存ができたら、一度サンプルページは終了してください。
.html の付いたファイルのアイコンをクリックすると自動的にブラウザが起動します。試しに、マイドキュメントの sample.html のアイコンをクリックしてみてください。

□　sample.html の編集

ソースを編集するときは、さっき言ったとおり、アイコンをクリックしてはいけません。

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

指示に従って名前・時間割りなどを書き換えて自分のホームページを作ってみましょう。
編集経過を見るには
1. ワードパッドで［ファイル］ → ［上書き保存］
2. マイドキュメントの sample.html のアイコンをクリックして Netscape に呼び出します。
  （２回目以降は Netscape で「再読み込み」を掛けます。）
3. Netscape の［ファイル］メニューから sample.html を呼び出してもいいです。

□　注意

sample.html の画像の上で右クリックをしてダウンロードすれば、同じ画像が使えますし、好きな画像があれば img タグで画像張り付けができます。
ホームページを公開する手順については、２学期の「専門コア情報処理演習」でやるつもりです。（私がい組の担当になれば、の話ですが。）
ホームページを公開するときは、個人情報を悪用されぬよう、住所や電話番号、生年月日等は載せないように気を付けましょう。

□　参考ページ

新保先生の Web ページ作成のための情報源

□　色々なタグ

以下、代表的なタグを幾つか挙げておきます。

中央揃え（センタリング）：
<center>中央揃えしたい文・画像等</center>

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

改行：
<br>

番号付きリスト：
<ol>
<li>項目１
<li>項目２ etc.
</ol>

番号なしリスト：
<ul>
<li>項目１
<li>項目２ etc.
</ul>

データリスト：
<dl>
<dt>データタイトル１
<dd>項目１-１
<dd>項目１-２
<dt>データタイトル２
<dd>項目２-１ etc.
</dl>

表：
<table border="外枠の幅">
<tr><th>見出し１</th><th>見出し２</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="リンク先のＵＲＬ">リンク先のタイトル</a>

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

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

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

見出し文字：
<h1>見出し文字</h1>～<h6>見出し文字</h6>
（前後を空白改行して太文字）

コメント（画面には表示されない）：


水平線：
<hr>

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

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

背景色：
<body bgcolor="背景色の１６進表示"> または <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">２段階大きい赤文字</font>

下付き添え字：
下付き<sub>_添え字</sub>

上付き添え字：
上付き<sup>^添え字</sup>

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

例）	#000000,	#f80000,	#008000,	#0000c0,	#ffffff
	black,	red,	green,	blue,	white,	yellow,	orange,	purple,	gray,