リンク先のファイルがリンク元のファイルがある階層よりも下の階層にある場合のリンクを設定する方法を確認します。
今回例としてリンク元のファイル「odekake.html」と、同じディレクトリに「diary」と言うディレクトリを新規作成し、その中に既存の「zoo.html」を上のディレクトリから移動するのと、新規に作成する「park.html」という2つのファイルを使います。
但し、「zoo.html」ファイルを既に参照するなどしていることなどから、これを移動するのを止めて、これの複製「zoo2.html」ファイルを作り「diary」に保存することとする。
それでもファイル内で使われている画像の表示がエラーとなります。画像の入っているフォルダとの関係が崩れたためです。まずこれを修正しましょう。
次に「park.html」を新規に作成する。
「odekake.html」から「zoo2.html」や「park.html」へのリンクを設定する方法を確認します。
下の階層のファイルへのリンクは次のように記述します。
今回の例で言えば、「zoo2.html」ファイルへリンクを設定する場合は次のようになります。
同じように「park.html」ファイルへリンクを設定する場合は次のようになります。
1つ下の階層ではなく2つ以上下の階層にあるファイルへリンクを張る場合も同様です。深い階層にあるファイルへリンクを張る場合は次の通りです。
では実際に試してみます。今回は「odekake.html」から「diary」フォルダにある「zoo2.html」及び「park.html」へリンクを設定します。
では「odekake.html」ファイルをブラウザで表示してみます。
今回もリンクが設定されているテキストには下線が引かれています。「2017年10月 公園」と書かれた部分をクリックして下さい。
リンク先として設定されているWebページが同じブラウザのウィンドウ上に表示されます。
ブラウザの「戻る」ボタンで「odekake.html」ファイルを表示します。
「2018年12月 動物園」と書かれた部分をクリックして下さい。
リンク先として設定されているWebページが同じブラウザのウィンドウ上に表示されます。