演習1.2 ページ作成のスタート
- HTMLファイルを作成
- タイトルをつける <title>タイトル</title>
ここからは、実際にWebページを作成しながら、これまで学んだことの復習と応用をしていきます。
まずは、下の図のような、トップページの作成から始めます。
図 1.2.1
1. HTMLファイルを作成してタグを記述
では、新しくメモ帳を開いて、先ほど作成した[ch06]フォルダに[index.html]という名前で保存してください。文字コードは、これまでと同様に、UTF-8としましょう。
【注意点】
これからの作業では、htmlファイルの名前は変えず、同じ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としておきましょう。