超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Mozilla Color AccessUp Links SiteMap

■ リンク講座

ここでは、リンクの方法について説明しています。
「え゛〜、リンクなんてホームページ作成講座でもうやったじゃーん!」とお思いの方もいらっしゃるでしょうが、再度整理する意味で読んでみて下さい。


◆絶対パスと相対パス

「あわわ・・・、そんな言葉知らないよ〜。」
でしょー。だからちゃんと整理しなくちゃ。
HTML でリンク先のファイルの位置を記述する方法としては、絶対パス相対パスの2種類あります。
ちなみにパスというのは進路とか道順という意味です。リンク元ファイルから、リンク先ファイルまでの道順というわけですね。
わかりやすいように2時間かけて図をつくりました。苦労してるでしょ(^^;

リンクの絵

絶対パスは、ファイルの URL をサーバの名前から全部記述する方法です。
例えば、このページにリンクするときのURLは、
http://park16.wakwak.com/~html-css/link_koza/linkkoza.html
となります。
http は「 hypertext transfer protocol 」の略で、ハイパーテキスト文書を変換する規則という意味です。ハイパーテキスト文書っていうのはHTML文書のことですね(HTML=Hyper Text Markup Language )。その次の www 以降でサーバを指定して、/~daobian がサーバ内でこのホームページが借りてるサイト(フォルダまたはディレクトリ)、/link_koza がサイト内に作ったフォルダ、/linkkoza.html がファイル名だね。
絶対パスは、通常他の人のホームページにリンクを張るときに使います。自分のホームページ内であっても他のサーバにリンクを張る場合にも使います。ここのホームページでもアクセスカウンタや掲示板は他の人から借りているので、絶対パスでリンクしています。
他のサーバにリンクを張ることをグローバルリンクと言うそうです。
上の図で f.html にリンクを張るときは、絶対パスで記述します。

相対パスは、リンク元となるファイルの位置を基準として、リンク先ファイルの位置を指定する方法です。
記述の方法は、フォルダが変わる毎にスラッシュ( / )を入れる。上のフォルダを指定するときはピリオド2つ&スラッシュ( ../ )です。
リンク元ファイルと同じフォルダにある場合は”ファイル名”、リンク元ファイルのあるフォルダの中(下)のフォルダにあるファイルを指定する場合は”フォルダ名/ファイル名”、リンク元ファイルのあるフォルダとは違うフォルダにある場合は”../フォルダ名/ファイル名”となります。
全然わかりませんね(^^;
上の図に基づいて整理しましょう。せっかく作ったし(^^)/

リンク元
ファイル
リンク先
ファイル
タグ
index.htmla.html<a href="a.html">〜</a>
index.htmlb.html<a href="A/b.html">〜</a>
index.htmlc.html<a href="A/Asub/c.html">〜</a>
index.htmlgazo.gif<img src="B/gazo.gif">
b.htmlindex.html<a href="../index.html">〜</a>
b.htmlc.html<a href="Asub/c.html">〜</a>
b.htmld.html<a href="../B/d.html">〜</a>
b.htmle.html<a href="../B/Bsub/e.html">〜</a>
c.htmlindex.html<a href="../../index.html">〜</a>
c.htmlb.html<a href="../b.html">〜</a>
c.htmld.html<a href="../../B/d.html">〜</a>
c.htmle.html<a href="../../B/Bsub/e.html">〜</a>

どぉ?じっくり見ればわかりますね。
相対パスは自分で作ったファイル同士をリンクするときに使います。絶対パスで指定することもできますが、ホームページを更新するときなど、いちいちサーバに接続する必要があり、めんどいです。相対パスだと自分のPC内でリンクしてるので、そんな心配はありませんね。
同じサーバ内でリンクすることをローカルリンクと言うそうです。