今回は、 Windows の「メモ帳」(§2.4) を使って(いわゆる)ホームページの作成をします。 みなさんの作るホームページの URL は http://wwwedu.ipe.kanazawa-u.ac.jp/%7Ez07ja0??/ (z07ja0?? は各自のユーザ id)です。 この授業のページからリンクをはってあります。
(6.1.1) 各自のホームディレクトリにあるフォルダ web の中にあるファイルはホームページとして金沢大学内に公開される。 これは、このセンターのパソコンでの、ローカルな仕様である。 きょうの作業はすべてフォルダ web の中で行なう。 (ほかの場所に作ったファイルをこのフォルダへ移動しただけでは公開されないので注意。)
(6.1.2) そのフォルダ web 内に新規にテキストファイルを作り、 index.html という名前に改名しようとすると拡張子を変えることになるので確認を求められるが 「はい」をクリック。 するとアイコンの形が変わる。 ここで .html ファイルのアイコンの形を (だいたい)覚えること。 そのアイコンをダブルクリックすれば Internet Explorer で見ることができる(が最初は空)。
(6.1.3) そのアイコンを右クリックし、「プログラムから開く」「Notepad」とすると、 index.html がメモ帳で編集できるようになる。 (「Notepad」は「メモ帳」の“原語”である。)
<!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> <a href="http://www.kanazawa-u.ac.jp/">金沢大学</a>に通っている誰それです。 理学部*学科の1年生です。将来はなんたらかんたらを目指しています。 なんたらかんたら。(実際はこれで一つの段落なのでもっと長いかも。) </p> <p> それから……。(ここも一つの段落。) </p> <h2>私のよく見るページ</h2> <p> ふだんよく見るのはこんなページです。 <ul> <li><a href="http://www.google.co.jp/">Google</a> 検索エンジン。便利。 <li><a href="http://www.yahoo.co.jp/">Yahoo!</a> ニュースをときどき見ます。 </ul> </p> <p> ほかにはなんたら系のページが好きで、ときどき見ます。 </p> </body> </html>
(6.1.4) そこへ、 この授業のホームページの、 このプリントの元となったページから上のサンプルをコピーし、上書き保存する。
(6.1.5) それから index.html を表示している Internet Explorer の 「更新」ボタンを押せば、この内容が表示されるはずである。
(6.1.6) 次に、メモ帳の側で index.html を修正・加筆する。 少しずつ書き換えては上書き保存し、 Internet Explorer の「更新」ボタンを押して確認する。 最初は「誰それの」を書き換えてみるとよい。
(6.1.7) さらに、 この授業のホームページからリンクをたどっても見られることを確かめよう。
(6.2.1) .html ファイル上で改行してもブラウザ上では(ほとんど)変わらないので、 適当に改行をいれると .html ファイルが読みやすくなる。 (句読点の直後で改行するとよい。)
(6.2.2) <title> と </title> の間に書いたものはタイトルバーに表示される(ことが多い)。
(6.2.3) <h1> と </h1> とではさまれた部分は見出しになる。 <h2> と </h2> だとそれより小さな見出し。 以下、数が大きくなるにつれて小さな見出しとなる。
(6.2.4) <p> と </p> とではさまれた部分がひとつの段落となる。
(6.2.5) 箇条書きは
<ul> <li>一番目の項目 <li>二番目の項目 <li>三番目の項目 </ul>のようにする。 <ul>...</ul> を <ol>...</ol> に変えれば番号つき箇条書きになる。
(6.2.6) リンクをはるには <a href="http://www.kanazawa-u.ac.jp/">金沢大学</a> のようにする。 自分のページなら <a href="family.html">家族の紹介</a> のようにファイル名だけでよい。 (二つめ以降のファイルの名前は拡張子が .html ならなんでもよい。 ただし、全角文字は使わないこと。)
(6.2.7) もっと知りたい人は、 この授業のホームページのきょうのあたりを参照のこと。
(6.3.1) 自己紹介のホームページを作りなさい。 ファイルは index.html 一つだけでよろしい。