サブページ(koneko.html)の作成
演習1.10 サブページ(koneko.html)の作成
☑これまでに学んだ内容
トップページに続いて、そこからリンクする2つのサブページを作っていきましょう。作成するテクニックは、すでに学んだ内容ですので、ここではサンプルソースの内容をコピーして、そのまま使用してください。
まずは、1つ目のサブページ(koneko.html)を作成していきましょう。
図 1.10.1 サブページ(koneko.html)
1. サブページ「koneko.html」を作成してHTMLファイルを保存
1つ目のサブページは、「子猫の部屋」という、かわいい子猫たちを紹介するページです。新しくメモ帳を開いて、[koneko.html]という名前で、[ch06]フォルダ(これまで作成してきた[index.html]と同じ場所)に保存してください。文字コードは、前回同様に、UTF-8としましょう。
2. HTMLファイルにソースコードを記述
では、今作成したHTMLファイルに、以下のURLにあるサンプルソースをコピーして、メモ帳に貼り付けしてください。
http://www.stepbystep-approach.com/element/software/html/index.php
「子猫の部屋のサンプルソース」
①ソース・フォルダー :html/ch06
②ファイル名 :koneko.html
➢ koneko.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>子猫と子犬の部屋</title> </head> <body bgcolor="#FFFFCC"> <center> <h1><font color="#2A7e55">子猫の部屋</font></h1> <h3><font color="red">かわいい子猫たちの写真</font></h3> <table border="3" cellpadding="4" cellspacing="4 " width="660"> <tr> <td width="220" align="center" bgcolor="#333333"><strong><font color="#FFFFFF">トップページ</font></strong> </td> <td width="220" align="center" bgcolor="#333333"><strong><font color="#FFFFFF">子猫写真</font></strong></td> <td width="220" align="center" bgcolor="#333333"><strong><font color="#FFFFFF">子犬写真</font></strong></td> </tr> </table> ~中略~ <hr width="540"> </center> </body> </html>
3. HTMLファイルを上書き保存してブラウザで表示
サンプルソースをメモ帳へ貼り付けたら、ブラウザで確認してみましょう。図1.10.1の画像のようなページが表示されればOKです。