ページのリンクを設定する
演習1.12 ページのリンクを設定する
☑リンクの設定
<a href =”(リンク先のファイル名)”>○○○</a>
ここまで、トップページ（index.html）と、2つのサブページ(koneko.html、koinu.html)の準備をしました。続いて、それぞれのページのメニューをクリックするだけで、お互いのページを自由に行き来できるようにリンクの設定をします。
1. index.htmlのメニューにリンクを設定する
まず、「トップページ（index.html）」のメニューにリンクを設定します。
メニューにある、「トップページ」、「子猫写真」、「子犬写真」のセルに、<a
href=”○○○”>と</a>を書くことで、リンクが設定できます。
[index.html]をメモ帳で開いて、メニュー部分のテーブルのソースコードの記述を、以下のように変更してください。
➢ index.html (※必要部分のみ記載)
～前略～
<table border="3" cellpadding="4" cellspacing="4 " width="660">
<tr>
<td width="220" align="center" bgcolor="#333333" ><a href="index.html"><strong><font color="#FFFFFF">トップページ</font></strong></a></td>
<td width="220" align="center" bgcolor="#333333" ><a href="koneko.html"><strong><font color="#FFFFFF">子猫写真</font></strong></a></td>
<td width="220" align="center" bgcolor="#333333"><a href="koinu.html"><strong><font color="#FFFFFF">子犬写真</font></strong></a></td>
</tr>
</table>
～後略～
上記の記述が終わったら、上書き保存をしてください。
ブラウザで表示すると、メニューの「トップページ」、「子猫写真」、「子犬写真」の文字の下にアンダーラインが引かれ、リンクの設定がされたことがわかります。
図 1.12.1
2. koneko.html、koinu.htmlのメニューにリンクを設定する
続いて、サブページの[koneko.html]と[koinu.html]のメニューにも、同様にリンクを設定します。先ほど[index.html]で記述した内容を、そのまま流用できます。
[koneko.html]と[koinu.html]をメモ帳で開き、メニュー部分のソースコードの記述を、先ほどの[index.html]と同様にしてください。
➢ koneko.html、koinu.html (※必要部分のみ記載)
～前略～
<table border="3" cellpadding="4" cellspacing="4 " width="660">
<tr>
<td width="220" align="center" bgcolor="#333333" ><a href="index.html"><strong><font color="#FFFFFF">
トップページ</font></strong></a></td>
<td width="220" align="center" bgcolor="#333333" ><a href="koneko.html"><strong><font color="#FFFFFF">
子猫写真</font></strong></a></td>
<td width="220" align="center" bgcolor="#333333"><a href="koinu.html"><strong><font color="#FFFFFF">
子犬写真</font></strong></a></td>
</tr>
</table>
～後略～
2つのサブページへの記述が終わったら、上書き保存をしてください。
3. リンクを確認する
[index.html]をブラウザで開いて、2つのサブページへ、メニューのリンクで行ったり来たりできるようになったか、確認してみましょう。
図 1.12.2
以上で、3つのページから構成される、「子猫と子犬の部屋」の完成です。
