様々なリンクの機能と種類について学習します。
ページの特定の場所へリンクするページ内リンクは、仕組みも含めて理解することが目標です。
ファイルとフォルダの構造を把握する
相対パスを使ったリンクや画像の表示は、フォルダやファイルの構造を理解し、把握しておかないと間違った設定になり、正しく表示されません。
「chap06」フォルダの中の「2-1」フォルダの構造を図に書いておくと、理解しやすくなるでしょう。
2-1
link.html（作成中のファイル）
neko/4.jpg
A
2-1.html
neko_2.jpg
B
neko_3.jpg
link.htmlと2-1.htmlの相互リンク
「2-1.html」へは1つ下の階層のフォルダ、「link.html」へは1つ上の階層のフォルダへ移動するようにパスを記述します。
link.htmlから2-1.htmlへリンク
<h3>リンクの設定例</h3>
<p><a href="https://internet.ac.jp">東京通信大学のサイト</a>へ</p>
<p><a href="A/2-1.html">2-1ページ</a></p>2-1.htmlからlink.htmlへリンク
<p>一つ上のフォルダにある画像を表示</p>
<p><img src="../neko_4.jpg" alt="1つ上のフォルダの猫" width="300px" height="450px"></p>
<p><a href="../link.html">linkページ</a></p>
</body>
フォルダを開いた時のウィンドウで、戻るボタンを押した操作が「../」と同じです