演習1.10 ページのリンクを設定する

  • リンクの設定
    <a href =”(リンク先のファイル名)”>○○○</a>

ここまで、トップページ(index.html)と、2つのサブページ(koneko.html、koinu.html)の準備をしました。続いて、それぞれのページのメニューをクリックするだけで、お互いのページを自由に行き来できるようにリンクの設定をします。

1. index.htmlのメニューにリンクを設定する

まず、「トップページ(index.html)」のメニューにリンクを設定します。
メニューにある、「トップページ」、「子猫写真」、「子犬写真」のセルに、<a href=”○○○”>と</a>を書くことで、リンクが設定できます。

[index.html]をメモ帳で開いて、メニュー部分のテーブルのソースコードの記述を、以下のように変更してください。

➢ index.html (※必要部分のみ記載)

<body>
    <h1>子猫と子犬の部屋</h1>
    <h3>かわいい動物たちの写真館</h3>
    <table>
        <tr>
            <td><a href="index.html"></a><strong>トップページ</strong></a></td>
            <td><a href="koneko.html"></a><strong>子猫写真</strong></a></td>
            <td><a href="koinu.html"></a><strong>子犬写真</strong></a></td>
        </tr>
    </table>
    <p>
        <img src="img/img01.jpg"><br>

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

ブラウザで表示すると、メニューの「トップページ」、「子猫写真」、「子犬写真」の文字の下にアンダーラインが引かれ、リンクの設定がされたことがわかります。

図 1.10.1

2. リンクを確認する

[index.html]をブラウザで開いて、2つのサブページへ、メニューのリンクで行ったり来たりできるようになったか、確認してみましょう。

図 1.10.2

以上で、3つのページから構成される、「子猫と子犬の部屋」の完成です。