Ｗｅｂページの作成 つぎの一歩 （ index.html ）
表紙（目次）となる index.html を作ります
左のように最初に表題を表示し、つぎに見出しが続くようにします。
リンク の部分をクリックすると、先に作った「link.htm」を開くようにします
保存場所は、先に作った link.html と同じフォルダにします。
この index.html が、これから作成するＷｅｂサイトのトップページとなります。
「まずやってみる」の【 HTML文書の説明 0-4 】 で説明しましたが、ブラウザーで表示させる文章は body部に、その他の情報は head部に、と分けて書きます。
とりあえず メモ帳を開いて次のように打ち込み、 index.html という名前を付けて保存します。
<html>
<head>
<title>最初の一歩</title>
</head>
<body>
標題（タイトル）
見出し１
;
見出し２
リンク
</body>
</html>
|
《作業》
- メモ帳を開く
「スタート」 → 「プログラム」 → 「アクセサリ」 → 「メモ帳」をクリック
- 上の文字を打ち込む
キーボードから一文字ずつ打ち込んで行くのですが、つぎのような便法があります
《便法》 画面上の <html> にマウスカーソルを移動させ、左のボタンを押しながら最下行の </html> までドラッグ → （文字が反転する） → 「Ctrlキー」を押しながら「ｃ」キーを押す（選択した範囲がクリップボードにコピーされる） → メモ帳をアクティブにする（メモ帳にマウスを移動させる） → 「Ctrlキー」を押しながら「ｖ」キーを押す（クリップボードの内容を貼り付ける）
- 名前を付けて保存する
メモ帳の「ファイル」 → 「名前を付けて保存」をクリック → ダイアログが表示される → 保存する場所（フォルダー）を指定 → ファイル名を「 index.html 」とする → 「保存」ボタンをクリック
- ブラウザーで表示させてみる
「マイコンピュータ」を開く → 先ほど保存したフォルダーを開く
→ index.html をダブルクリック → ブラウザーに表示される（下図）
- エディター（メモ帳）では行が空いていても、ブラウザーでは行は変わりません。スペースや改行がいくつあっても 1 と見なします
ここで改行するということを指示するには <br> タグを使います。行をあけるにはもう一つ改行を指示すればよろしい。
<html>
<head>
<title>最初の一歩</title>
</head>
<body>
標題（タイトル）<br><br>
見出し１<br><br>
見出し２<br><br>
リンク<br><br>
</body>
</html>
|
- 全体を中央に表示させるには <div> タグを使います。divだけでは何もしませんが、 align="center" で中央揃えを指定します。（右に寄せたいときは right を指定すればよろしい。）
<html>
<head>
<title>最初の一歩</title>
</head>
<body>
<div align="center">
標題（タイトル）<br><br>
見出し１<br><br>
見出し２<br><br>
リンク<br><br>
</div>
</body>
</html>
|
- 上書き保存をして、ブラウザーに意図通り表示されることを確かめなさい。
もしうまく表示されないときは、文字を打ち間違えていないか、カッコは正しく閉じているかを点検し、修正 → 上書き保存 → ブラウザーを再読込 → 点検 をしなさい。
- （「リンク」の部分をクリックすると、先に作った「link.htm」を開くようにする）
「最初の一歩」ではWeb上のサイトにリンクを張りましたが、代わりに link.html を指定すればよろしい。
リンク の文字を <a> タグ で囲みます。
<html>
<head>
<title>最初の一歩</title>
</head>
<body>
<div align="center">
標題（タイトル）<br><br>
見出し１<br><br>
見出し２<br><br>
<a href="link.html">リンク</a><br><br>
</div>
</body>
</html>
|
- （空白について）
メモ帳（エディター）上で行が空いていたりスペースを使って文字の先頭を後に下げておいても、ブラウザーでは改行・スペース・タブ（これらを空白文字と呼びます）がいくつあっても一つと見なすということは先に説明しました。
したがって、上の body部は次のように書いてもブラウザーでは同じように表示されます。
適当に改行したほうが見やすくなりますから、自分で分かりやすいように工夫して下さい。
<html>
<head>
<title>最初の一歩</title>
</head>
<body>
<div align="center">
標題（タイトル）<br><br>見出し１<br><br>見出し２<br><br><a href="link.html">リンク</a><br><br>
</div>
</body>
</html>
|
---- 作業（コーディング）終わり ----
戻る