Ｗｅｂページの作成　つぎの一歩（ 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列に並んでいます。
　エディター（メモ帳）では行が空いていても、ブラウザーでは行は変わりません。スペースや改行がいくつあっても 1箇と見なします
　ここで改行するということを指示するには タグを使います。

（body部のみを表示します）
<body>
標題（タイトル） 
見出し１ 
見出し２ 
リンク 
</body>

ブラウザの「更新」ボタンをクリックすれば下のように表示されるはずです

標題（タイトル）
見出し１
見出し２
リンク
表示スタイル（見栄え）の調整
このページの先頭に示したように、
（1）全体を真ん中に並べる　＜文字を中央に配置する＞
（2）行の間隔を広くする　　＜行の高さを指定する＞　ことを試みます。

　表示の見栄を整えるには、タグにスタイルを指定します。スタイルは、ひとまとまりの文・ことば（段落と言います）に対して指定をします。
　目次全体がひとまとまりの言葉の集まりですから全体がひとまとまりの「段落」である事をｐタグで囲みます。

（body部のみを表示します）　の挿入
<body>

標題（タイトル） 
見出し１ 
見出し２ 
リンク 

</body>
style の記述
　いろいろな書き方がありますが、ここではタグに直接書き込む方法を説明します。
（1）ｐタグ内に style="・・・・" と書き加えて、スタイルを使用する事を示します。ダブルクォーテーションで挟んでいろいろな指定を書き込みます。
（2）文字の中央配置は、text-align に center を指定します
（3）行間の調整は、line-height に 2em を指定します。　その結果、pタグは下のようになります。

（pタグのみ）　スタイルの指定


【注】上記で、text-align、line-height をプロパティ、center、2em を値と呼んでいます。プロパティの後に：（コロン）、値の後に；（セミコロン）を付けて記述します。
リンクを張る
「リンク」の文字をクリックすると、step1で作った link.htm を開くようにします。「最初の一歩」ではWeb上のサイトにリンクを張りましたが、代わりに link.html を指定すればよろしい。
リンク の文字を <a> タグで囲み, hlef="・・・" の中に link.html と書き込みます。
（aタグのみ）　リンクの指定
<a href="link.html" >リンク</a>
作業の確認
　上書き保存をしてブラウザーの「更新」ボタンをクリックすれば、中央寄せ、行間隔の大きいメニューのページが表示されるはずです。

標題（タイトル）
見出し１
見出し２
リンク

うまく表示されない場合は、入力に誤りがあります。
コンマ、ピリオド、コロン、セミコロン、記号（ =　<　> ）などが全角になっていないかなど、下のコーディングと比較して点検し直して下さい。
（下のコーディング例はコピー＆ペーストでうまく表示されます）

<html>
<head>
<title>最初の一歩</title>
</head>
<body>

標題（タイトル） 
見出し１ 
見出し２ 
<a href="link.html" >リンク</a> 

</body>

----　作業（コーディング）終わり　----　　
直前のページに戻る

作成　：　小田桐一良

Ｗｅｂページの作成 つぎの一歩 （ index.html ）

Ｗｅｂページの作成　つぎの一歩（ index.html ）