ハイパーリンク
HTMLの最も優れた機能の一つがこのハイパーリンクです。
ハイパーリンクとは、分かりやすく言うと、HTMLとHTMLをつなぐ橋のようなもので、インターネットの広い世界は、全てリンクでつながっています。インターネット上に公開されているページであれば、URLを参照して、何処にでもリンクを張る事が出来ます。日本のサイトから海外のサイトへだって、たったのワンクリックで行ける！とても便利ですよね！このハイパーリンクを設置するには以下のタグを使います。
<a href="リンクURL">リンクする文字列</a>
絶対パス
では実際にリンクを設置する場合にどうやって記述すれば良いのでしょうか？
まず、『絶対パス』で指定するやり方があります。これは、HTTPからのアクセスに対して、絶対的な場所を表す書き方です。
<a href="http://link.url.jp/sample/index.html">リンクする文字列</a>
このように、アドレスバーに表示されるURLのように【http】からファイル名までを、全て記述します。これは主に、自分のサイトから、外部のサーバーに置いてあるファイルにアクセスする場合に使用します。
相対パス
次に、『相対パス』で指定するやり方です。相対パスは、リンク元のファイルの存在している位置から、リンク先のファイルの存在位置を相対的に見た記述の仕方を取ります。下の例を見て下さい。
public_html / index.html (トップページ)
|
+-- pagefile / p001.html
| p002.html
| p003.html
|
+-- log / log001.html
| log002.html
| log003.html
|
+-- img / top.gif
sub.gif
この場合、【public_html】というフォルダに【index.html】というファイルと【pagefile】というフォルダが入っています。これが一階層目です。
次に【pagefile】というフォルダの中には【p001〜003.html】ファイルと【log】【img】フォルダが入っていて、これがニ階層目になります。
そして【log】【img】フォルダに、更にファイルが入っています。これは三階層目にあたります。
参照元になるファイルと同じ階層にあるファイルへのリンクは【ファイル名】
参照元になるファイルの一階層下にあるファイルへのリンクは【フォルダ名/ファイル名】
参照元になるファイルの一階層上にあるファイルへのリンクは【../ファイル名】
このように記述します。
────────────────────────────────
(例)→【log001.html】から【log002.html】を相対パスで参照する場合。
(答)→<a href="log002.html">リンクする文字列</a>
(例)→【log001.html】から【p001.html】を相対パスで参照する場合。
(答)→<a href="../p001.html">リンクする文字列</a>
(例)→【log001.html】から【top.gif】を相対パスで参照する場合。
(答)→<a href="../img/top.gif">リンクする文字列</a>
────────────────────────────────
相対パスのメリットは、ローカルでファイルを作成している段階で、フォルダ分けをして整理が出来る事と、HTTPからのドメインを記述しないため、サイト移転などで、URLが変わっても、リンクに影響がないので、メンテナンスの必要が無いという事です。
ハイパーリンクのまとめ
自サイト内のファイルにリンクする場合には『相対パス』でリンクした方が楽です。画像ファイルなどは、一つのフォルダにまとめておくと、何処に何が置いてあるのか分かりやすくなるので、結果的に作業効率がアップします。
