演習1.2 ページ作成のスタート

  • HTMLファイルを作成
  • タイトルをつける <title>タイトル</title>

ここからは、実際にWebページを作成しながら、これまで学んだことの復習と応用をしていきます。

まずは、下の図のような、トップページの作成から始めます。

図 1.2.1

1. HTMLファイルを作成してタグを記述

では、新しくメモ帳を開いて、先ほど作成した[ch06]フォルダに[index.html]という名前で保存してください。文字コードは、これまでと同様に、UTF-8としましょう。

【注意点】

これからの作業では、htmlファイルの名前は変えず、同じhtmlファイルに少しずつ要素を加えながら、完成に近づけていきます。
上書き保存をしながら進めてください。

[index.html]を保存したら、以下の内容をメモ帳に記述してください。

①ソース・フォルダー :html/ch06
②ファイル名     :index.html

➢ index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>子猫と子犬の部屋</title>
    </head>
    <body>
    </body>
</html>

2. HTMLファイルを保存

上の記述が終わったら、上書き保存をしてください。

3. ブラウザで表示

上書き保存をしたら、ブラウザでの表示を確認します。[ch06]フォルダの中の[index.html]をダブルクリックしてください。

図 1.2.2

表示された画面のタイトルバーに、タイトル(子猫と子犬の部屋)が入っていることを確認しましょう。
次節からは、Webページの中身を作成していきます。

◉トップページにつけるファイル名

トップページのファイル名は、本節でそうしたように、[index.html]とします。index.htmlという名前には特別な意味があり、これは、多くのプロバイダーが[index.html]もしくは[index.htm]をトップページに指定しているための、決まりごとのようなものです。

[index.html]というファイルが存在しないと、表示されないなどの不具合が発生する場合がありますので、トップページのファイル名はindex.htmlとしておきましょう。