-
ページとページを繋げよう！
-
'02/05/13
ページとページを繋ぐことをリンクと言い、通常、「こういう形」で表されます。
他と色が違い下線がある状態。
リンクは、
<a href="001.html">検索からはじめよう！</a> … 検索からはじめよう！
というように、<A>（アンカー）タグを使用します。
「href="〇〇〇"」は、リンク先のファイルの場所を指定します。どこにある、どのファイルであるか。
ここで、ファイルとフォルダ（ディレクトリ）について説明しておきます。
ホームページを作成する時は、ホームページのファイルだけ纏めておく方が便利です。例えば、次のように…
web
┠ ex001.html
┠ ex002.html
〜〜〜〜〜〜〜〜〜
┠ ex005.html
┗ ex006.html
これは、「web」というフォルダを作成し、その中に「htmlファイル」を纏めています。
同じディレクトリ上にある場合、リンクは、href="ex001.html"のようになります。
では、以下を「ex007.html」として保存し、ブラウザで実行してみましょう。
---- ex007.html ----
<html>
<head>
<title>リンクの練習</title>
</head>
<body>
<a href="ex003.html">リンク１</a><br>
<a href="ex006.html">リンク２</a><br>
</body>
</html>
では、DS9だけのページを作ろうとした時はどうなるでしょう。
まず、「ds9」というフォルダを作るとします。作らなくても良いのでが、作っていた方がページが増えた時に整理しやすいので、ここでは作成するものとします。
その時トップページの名前は、「index.html」とします。
「index.html」は「そのディレクトリのトップですよ」という意味があり、もしこのファイルが無いと、そのディレクトリの中身（ファイルの一覧）が表示されることになるので注意してください。
web
┠ ds9
┃ ┗ index.html
┠ ex001.html
┠ ex002.html
〜〜〜〜〜〜〜〜〜
┠ ex005.html
┗ ex006.html
以上のようなディレクトリ構成になると思います。
では、この時、「index.html」から「ex006.html」へリンクしようとすると、どうなるでしょうか。
階層は今のディレクトリの一つ上になります。この場合、
<a href="../ex006.html">ex006.html</a>
となります。
hrefの後の「../」は、現在の階層の一つ上を意味し、二つ上の場合は「.../」とはならずに、「../../」となります。
逆に、「ex006.html」から「ds9」の「index.html」にリンクしようとする場合は、
<a href="ds9/index.html">DS9のページ</a>
となります。この時、index.htmlが存在しているので、
<a href="ds9/">DS9のページ</a>
としても構いません。
では、以下をフォルダ「ds9」に、「index.html」として保存してください。
---- ds9/index.html ----
<html>
<head>
<title>DS9のページ</title>
</head>
<body>
<a href="../ex003.html">リンク１</a><br>
<a href="../ex006.html">ex006.htmlへのリンク</a><br>
</body>
</html>
これらは「相対パス」での、リンクと言います。相対パスでのリンクは、同じ階層または、その上下にあるときにのみ可能です。
もし、インターネットを使った先へのリンクの場合はどうなるでしょうか。
その際、リンクは「絶対パス」で指定することになります。
絶対パスは、http:// から始まるURI（URL）になります。
もし、このページへリンクを貼ろうとする場合は、
<a href="http://www.geocities.co.jp/Hollywood-Theater/4449/">リンク</a>
… リンク
と、なります。
このページの様に、縦に長いページの場合、ページの途中へリンクしたい場合があるかもしれません。その場合は、その途中となる場所に<a name="〜〜"></a>と、「name」を指定するとことで、そこへのリンクを貼ることができます。
例えば、
<a name="top">ここへジャンプしたいな〜〜〜〜</a>
と指定すると、リンクの際、
<a href="#top">ページのトップへ移動</a>
とすれば、ページの途中へジャンプすることができます。
以下の「-トップ-」がそれにあたります。
一番上の、「戻る」では、「href="./"」と「name="top"」を同時に指定しています。
|