ハイパーリンク!

5. ファイル間のリンクの実習

ファイル master.htmlslave.html を作って、相互にリンクで結んでみましょう。保存するときに文字コードが選べれば、シフトJIS (Shift_JIS) を選んでください。

master.html
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
      <title>Master ファイル</title>
    </head>
    <body>
      <h1>Master ファイル</h1>
      <p><a href="./slave.html">スレイブ</a></p>
    </body>
</html>
slave.html
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
      <title>Slave ファイル</title>
    </head>
    <body>
      <h1>Slave ファイル</h1>
      <p><a href="./master.html">マスター</a></p>
    </body>
</html>

この二つのファイルを同じディレクトリ内に置いてください。ハイパーリンクで相互に移動できるようになっていれば成功です。

基準 URL に対する相対 URL

相対 URL を、その基準 URL に基づいて絶対 URL に変換する事を RUL 解決と呼びます。ここでは、基準 URL "http://www.foo.com/public/" に対する相対 URL の解決を演習形式で行います。

1. ./contents.html

このディレクトリ http://www.foo.com/public/ を基準 URL とする index.html に、次の様に記述されていたとします。この相対 URL が指し示す位置はどこでしょうか?

./contents.html

答えは、同じディレクトリの contents.html と云うファイルです。絶対 URL に翻訳すると、 http://www.foo.com/public/contents.html になります。

問題解答
www.foo.com
      |
      +--/ (root)
         |
         +--public + ./contents.html
www.foo.com
      |
      +--/
         |
         +--public
            |
            +--contents.html  <<-- This File
<< http://www.foo.com/public/contents.html >>

2. ./links/bookmark.html

では次の相対 URL ではどうでしょうか?

./links/bookmark.html

答えは、index.html があるディレクトリの中にあるディレクトリ links の中にある bookmark.html と云うファイルです。絶対 URL では、 http://www.foo.com/public/links/bookmark.html と翻訳されます。

問題解答
www.foo.com
      |
      +--/ (root)
         |
         +--public
            + ./links/bookmark.html
www.foo.com
      |
      +--/
         |
         +--public
            |
            +--links
               |
               +--contents.html  <<-- This File
<< http://www.foo.com/public/links/bookmark.html >>

3. ../cover.html

では次;

../cover.html

答えは、 index.html があるディレクトリの一つ上のディレクトリにある cover.html と云うファイルです。絶対 URL に翻訳すると、 http://www.foo.com/cover.html です。

問題解答
www.foo.com
      |
      +--/ (root)
         |
         +--public + ../cover.html
www.foo.com
      |
      +--/
         |
         +--cover.html  <<-- This File
         |
         +--public
<< http://www.foo.com/cover.html >>

4. ../doc/private.html

では最後の問題です;

../doc/private.html

答えは、 index.html があるディレクトリの一つ上のディレクトリの中にある doc と云うディレクトリの中にある private.html と云うファイルです。絶対 URL に翻訳すると http://www.foo.com/doc/private.html となります。

問題解答
www.foo.com
      |
      +--/ (root)
         |
         +--public + ../doc/private.html
www.foo.com
      |
      +--/
         |
         +--doc
         |  |
         |  +--private.html  <<-- This File
         |
         +--public
<< http://www.foo.com/doc/private.html >>

因みに、このサイトのトップページは、相対 URL では、 ../../../index.html となります。トップページから見ると、御覧になっている本ファイルは三階層下のディレクトリになる訳です。

"." (カレントディレクトリ)や ".." (一つ上の階層のディレクトリ)は、 WWW を提供しているマシンで起動している UNIX という OS のファイルシステムの、シンボリックリンク (symbolic link, symlink, soft link) というモノです。 Windows でもこの仕組みを真似ています。

興味があれば、ファイルシステムやシンボリックリンクについて、調べてみてください。


Copyright © 2002 SUGAI, Manabu. All Rights Reserved.
SEO [PR] !uO z[y[WJ Cu