高知大学 共通教育 平成12年度 情報処理 II
y
(理学部 数理情報科学科い組 対象、塩田教官)
y
6月7日の教材
今日はホームページ( HTML 文書 )の作成法を覚えましょう。
- 私達がホームページとして見ているものは、
ブラウザソフト ( Netscape, Internet Explorer など ) が
「HTML 文書」に書かれている命令に従って表示をした結果です。
- HTML 文書の拡張子は .html または .htm です。
- Netscape で [表示] → [ページのソース] を選ぶと、
現在表示されているページのソース ( HTML 文書 ) を見ることが出来ます。
- < > で囲まれた部分は「タグ」と呼ばれ、
ブラウザへの命令が記述されています。
- 気に入ったページのソースを眺めるのが、タグを覚える早道です。
- まずはここ
をクリックしてサンプルページを開いてください。
- [ファイル] → [名前を付けて保存]で、
サンプルページのソース ( sample.html ) を保存してください。
保存先はマイドキュメントへ。
- 保存ができたら、一度サンプルページは終了してください。
- .html の付いたファイルのアイコンをクリックすると自動的にブラウザが起動します。
試しに、マイドキュメントの sample.html のアイコンをクリックしてみてください。
- ソースを編集するときは、さっき言ったとおり、アイコンをクリックしてはいけません。
- [スタート] → [プログラム] → [アクセサリ] → [ワードパッド]を起動し、
- [ファイル] → [開く]
- ファイルの種類を「すべてのファイル (*.*)」にして
- sample.html のアイコンをクリック
- 指示に従って名前・時間割りなどを書き換えて自分のホームページを作ってみましょう。
- 編集経過を見るには
- ワードパッドで [ファイル] → [上書き保存]
- マイドキュメントの sample.html のアイコンをクリックして Netscape に呼び出します。
(2回目以降は Netscape で「再読み込み」を掛けます。)
- Netscape の[ファイル]メニューから sample.html を呼び出してもいいです。
- sample.html の画像の上で右クリックをしてダウンロードすれば、
同じ画像が使えますし、
好きな画像があれば img タグで画像張り付けができます。
- ホームページを公開する手順については、2学期の「専門コア情報処理演習」でやるつもりです。(私がい組の担当になれば、の話ですが。)
- ホームページを公開するときは、
個人情報を悪用されぬよう、
住所や電話番号、生年月日等は載せないように気を付けましょう。
- 以下、代表的なタグを幾つか挙げておきます。
-
- 中央揃え(センタリング):
- <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 '00 のページへ