今回からしばらくは、 Windows の「メモ帳」を使って（いわゆる）ホームページの作成をします。
| 作成方法 | 内容 | データサイズ | 作成時の特徴 | ブラウザを | |
|---|---|---|---|---|---|
| A | ホームページ作成ソフト | 画像中心 | 大きい | 見た通りに仕上がる | 選ぶことあり |
| B | 素手（テキストエディタ） | 文章中心 | 小さい | そうでない | 選ばない |
みなさんの作るホームページの URL は http://wwwedu.ipc.kanazawa-u.ac.jp/%7Ej17ar??/ （j17ar?? は各自のユーザ id）です。 この実習のページからリンクをはってあります。
(7.1.1) 各自のホームディレクトリ（cf. 3.2.1）にあるフォルダ web の中にあるファイルはホームページとして金沢大学内に公開される。 （これはこのセンターのローカルな決まりである。）
(7.1.2) そのフォルダ内に新規にテキスト文書を作り（cf. 3.2.5）、 index.html という名前に改名する（cf. 3.2.5）。 （拡張子を変えることになるので確認を求められるが「はい」。）
(7.1.3) ここで .html ファイルのアイコンの形を （だいたい）覚えること。 そのアイコンをダブルクリックすれば Internet Explorer で見ることができる（が最初は空）。
(7.1.4) ここで「表示」「ソース」とすると、 index.html を「メモ帳」で開くことができる。 （あるいは、§5.3 で説明したようにして開いてもよい。）
(7.1.5) そこへ、 この実習のホームページの、 このプリントの元となったページから下のサンプルをコピー（cf. §3.8） し、上書き保存（cf. 3.3.3）する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title>誰それのホームページ</title> </head> <body> <h1>誰それのホームページ</h1> <h2>私のなんたら</h2> <p> なんたらかんたら。（実際はここが一つの段落なのでもっと長い。） </p> <p> それから……。（ここも一つの段落である。） </p> <h2>私のうんとか</h2> <p> うんとかすんとか。（同上。） </p> <p> あとは<a href="http://www.kanazawa-u.ac.jp/">金沢大学のページ</a>を見てください。 </p> </body> </html>
(7.1.6) それから index.html を表示している Internet Explorer の 「更新」ボタンを押せばこの内容が表示されるはずである。
(7.1.7) 次に、自分用に書き換える。 少しずつ書き換えては上書き保存し、 Internet Explorer の「更新」ボタンを押して確認する。 最初は「誰それの」を自分の名前（など）に書き換えてみるとよい。
(7.1.8) さらに、 この実習のホームページからリンクをたどっても見られることを確かめよう。
(7.2.1) .html ファイル上で改行してもブラウザ上では（ほとんど）変わらないので、 適当に改行をいれると .html ファイルが読みやすくなる。 （句読点の直後で改行するとよい。）
(7.2.2) <title> と </title> の間に書いたものはタイトルバーに表示される（ことが多い）。
(7.2.3) <h1> と </h1> とではさまれた部分は見出しになる。 <h2> と </h2> だとそれより小さな見出し。 以下、数が大きくなるにつれて小さな見出しとなる。
(7.2.4) <p> と </p> とではさまれた部分がひとつの段落となる。
(7.2.5) 箇条書きは
<ul> <li>一番目の項目 <li>二番目の項目 <li>三番目の項目 </ul>のようにする。 <ul>...</ul> を <ol>...</ol> に変えれば番号つき箇条書きになる。
(7.2.6) リンクをはるには <a href="http://www.kanazawa-u.ac.jp/">金沢大学</a> のようにする。 自分のページなら <a href="family.html">家族の紹介</a> のようにファイル名だけでよい。 （二つめ以降のファイルの名前は拡張子が .html ならなんでもよい。 ただし、全角文字は使わないこと。）
(7.2.7) もっと知りたい人は、 この実習のホームページのきょうのあたりを参照のこと。
(7.3.1) 「広い意味での自己紹介」のホームページを作りなさい。