その１２ 他のページを作成する
現在作っているindex.htmlはホームページのトップ画面となるファイル名です。このファイル名はどんなホームページでも共通で、ホームページのトップページのファイル名は必ずindex.htmlになると言う事を覚えておいてくださいね。そして今回のセクションでは他のページも作成して行きましょう。まずこの講座の最終ゴールであるホームページを再度確認しましょう。
サンプルサイト
このサンプルサイトのサイドメニューには
- はじめに
- ホームページの基礎
- ホームページ作成の応用
- お役立ちサイト
- リンク集
とありますのでトップページのindex.htmlの他に５つのページが必要になるわけです。ですのでまずはindex.htmlのファイルをまずコピーし、以下のファイル名のページを作ってください。
- hajime.html
- kiso.html
- ouyou.html
- oyakudachi.html
- linksyu.html
hajime.htmlを開く
順番にindex.htmlの文章を書き変えていきましょう。
ハイライトの部分が変えているところです。
そのまま以下のコードをコピーしていただいてもかまいません。
新しいページを作る際に注意する点はtittleタグのタイトルの変更を忘れないようにということです。
今回はtittleタグの編集と、一部文章を変えて編集していきます。
まずは「hajime.html」の編集からです。では修正します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>はじめに-ホームページの作り方</title>
<meta name="description" content="初心者のためのホームページ作成講座" />
<meta name="keywords" content="ホームページ,作成,初心者" />
</head>
<body>
<h1>ホームページの作り方</h1>
<img src="sample.jpg" alt="ホームページの作り方へようこそ" width="800px" heigt="100px" />
<h2>ホームページの作り方 へようこそ！</h2>
<p>このサイトはホームページ作成初心者の方でもホームページの作成ができるように作ったページです。</p>
<h3>サイドメニュー</h3>
<ul>
<li>はじめに</li>
<li>ホームページの基礎</li>
<li>ホームページ作成の応用</li>
<li>お役立ちサイト</li>
<li>リンク集</li>
</ul>
<h4>はじめに</h4>
<p>はじめての方にでもわかるホームページ作成サイトを立ち上げました</p>
<h4>infomaition</h4>
<p>○○年○月○日ホームページをリニューアルしました。</p>
Copy right 2011 ホームページの作り方.All Rights Reserved.
</body>
</html>
修正し終わったら上書き保存してください。
このファイルをまたクリックして確認してみてください。（確認画面はこちら）
「kiso.html」「 ouyou.html」「 oyakudachi.html」「 linksyu.html」も同様に修正します。
「kiso.html」を開きます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ホームページの基礎-ホームページの作り方</title>
<meta name="description" content="初心者のためのホームページ作成講座" />
<meta name="keywords" content="ホームページ,作成,初心者" />
</head>
<body>
<h1>ホームページの作り方</h1>
<img src="sample.jpg" alt="ホームページの作り方へようこそ" width="800px" heigt="100px" />
<h2>ホームページの作り方 へようこそ！</h2>
<p>このサイトはホームページ作成初心者の方でもホームページの作成ができるように作ったページです。</p>
<h3>サイドメニュー</h3>
<ul>
<li>はじめに</li>
<li>ホームページの基礎</li>
<li>ホームページ作成の応用</li>
<li>お役立ちサイト</li>
<li>リンク集</li>
</ul>
<h4>ホームページの基礎</h4>
<p>ホームページの基本をまず抑えましょう</p>
<h4>infomaition</h4>
<p>○○年○月○日ホームページをリニューアルしました。</p>
Copy right 2011 ホームページの作り方.All Rights Reserved.
</body>
</html>
次は「ouyou.html」
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ホームページ作成の応用-ホームページの作り方</title>
<meta name="description" content="初心者のためのホームページ作成講座" />
<meta name="keywords" content="ホームページ,作成,初心者" />
</head>
<body>
<h1>ホームページの作り方</h1>
<img src="sample.jpg" alt="ホームページの作り方へようこそ" width="800px" heigt="100px" />
<h2>ホームページの作り方 へようこそ！</h2>
<p>このサイトはホームページ作成初心者の方でもホームページの作成ができるように作ったページです。</p>
<h3>サイドメニュー</h3>
<ul>
<li>はじめに</li>
<li>ホームページの基礎</li>
<li>ホームページ作成の応用</li>
<li>お役立ちサイト</li>
<li>リンク集</li>
</ul>
<h4>ホームページ作成の応用</h4>
<p>ここではホームページ作成の応用を理解しましょう</p>
<h4>infomaition</h4>
<p>○○年○月○日ホームページをリニューアルしました。</p>
Copy right 2011 ホームページの作り方.All Rights Reserved.
</body>
</html>
そして「oyakudachi.html」
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>お役立ちサイト-ホームページの作り方</title>
<meta name="description" content="初心者のためのホームページ作成講座" />
<meta name="keywords" content="ホームページ,作成,初心者" />
</head>
<body>
<h1>ホームページの作り方</h1>
<img src="sample.jpg" alt="ホームページの作り方へようこそ" width="800px" heigt="100px" />
<h2>ホームページの作り方 へようこそ！</h2>
<p>このサイトはホームページ作成初心者の方でもホームページの作成ができるように作ったページです。</p>
<h3>サイドメニュー</h3>
<ul>
<li>はじめに</li>
<li>ホームページの基礎</li>
<li>ホームページ作成の応用</li>
<li>お役立ちサイト</li>
<li>リンク集</li>
</ul>
<h4>お役立ちサイト</h4>
<p>ホームページ作成に関するお役立ちサイトです。</p>
<h4>infomaition</h4>
<p>○○年○月○日ホームページをリニューアルしました。</p>
Copy right 2011 ホームページの作り方.All Rights Reserved.
</body>
</html>
最後に「linksyu.html」
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>リンク集-ホームページの作り方</title>
<meta name="description" content="初心者のためのホームページ作成講座" />
<meta name="keywords" content="ホームページ,作成,初心者" />
</head>
<body>
<h1>ホームページの作り方</h1>
<img src="sample.jpg" alt="ホームページの作り方へようこそ" width="800px" heigt="100px" />
<h2>ホームページの作り方 へようこそ！</h2>
<p>このサイトはホームページ作成初心者の方でもホームページの作成ができるように作ったページです。</p>
<h3>サイドメニュー</h3>
<ul>
<li>はじめに</li>
<li>ホームページの基礎</li>
<li>ホームページ作成の応用</li>
<li>お役立ちサイト</li>
<li>リンク集</li>
</ul>
<h4>リンク集</h4>
<p>お役立ちリンク集です。</p>
<h4>infomaition</h4>
<p>○○年○月○日ホームページをリニューアルしました。</p>
Copy right 2011 ホームページの作り方.All Rights Reserved.
</body>
</html>
お疲れさまでした。これでフォルダーの中に6個のhtmlファイルができました。
ではこれらをリンクで繋げてみましょう。
次は
その１３ リンクでページをつなげる です。