オンラインテキスト目次
Webページの作成目次

mizutani@rsch.tuis.ac.jp
参考書『インターネット時代のコンピュータリテラシー』（水谷正大、共立出版）

Webページのリンク

HTMLで書いたWebページの最大の特徴（魅力）は、世界にある情報資源にリンクすることによって、ネットワーク経由で相互参照できることである。 このリンクには、ローカルリンクと一般のハイパーリンクとがあるが、その書式は同じである。 リンクの方法だけでなく、HTMLファイルの管理方法やWebページの構成についても理解すること。
目次
リンク書式
ローカルリンク
ハイパーリンクとURL
ユーザーページのURL
目次

リンク書式

あるWebページから別のWebページへとリンクを張るには、該当するHTMLファイル内で次のような書式に従って書く。 

<a href="リンク先のURL">アンカー文字列</A>

以下に、リンクの実際をローカルリンク（自分が作成したWebページへのリンク）とハイパーリンク（インターネット上のWebぺページへのリンク）とに分けて説明する。

目次

ローカルリンク

ローカルリンクとはディレクトリ~/public_html内にあるファイル同士とのリンクを意味する。 たとえば、ファイル~/public_html/index.htmlの他に、~/public_html/profile.htmlが作成されているとする。 このとき、ファイルindex.htmlからprofile.htmlへ（ローカルに）リンクするには、組になったアンカータグ <A ..>と</A>を使って、文中に次のように書く。 

<a href="profile.html">自己紹介</A>

上の例で、ローカルリンク先のURLとして、厳密に

<a href="http://www.edu.tuis.ac.jp/~s01986tj/profile.html">自己紹介</a>

のように指定しても構わない（ファイル~/public_html/index.htmlのURLを http://www.edu.tuis.ac.jp/~s01986tj/index.html としたとき）。

リンク先のファイル名を2重引用符 " で挟んでいることに注意。
参照オプション href="..." （Hyper Refernce）によって、リンク先のファイル名（正確にはそのURL）を指定している。 タグ<a ..>と< /a>で挟まれているアンカー文字列は、Webブラウザでみると普通は青色下線が付いて表示される。 これをマウスでクリックするとWebサーバにそのページのアクセス要求が伝わり、Webサーバはリンク先のファイル内容をWebブラウザに送り込むことによって、利用者はそのページを見ることができる。

下の図のように、ディレクトリ~/public_htmlの中にディレクトリ、たとえばmovieを作成しておき、その中にファイル~/public_html/movie/romance.htmlや~/public_html/movie/action.htmlがあるとする。 このとき、~/public_htmlの直下にあるファイル~/public_html/index.htmlからこのromance.htmlにリンクするには 

<a href="movie/ramance.html">ロマンス映画</A>

というように、リンクが記述されるファイルからリンク先のファイルまでの相対ディレクトリ名（つまり、目的のファイルへの相対ディレクトリパス）を指定する。

今の場合、左の図のように、~/public_html直下のファイル<~/public_html/index.htmlからディレクトリ~/public_html/movieにあるファイル~/public_html/movie/romance.htmlに到達するにはディレクトリmovieを経なければならない。

一方、ファイル~/public_html/movie/romance.htmlから同一ディレクトリ内にあるファイル~/public_html/movie/action.htmlにリンクするには、ディレクトリmovieを経由する必要がないので 

<a href="action.html">アクション映画</A>

とすればいい。 また、~/public_html/movie/romance.htmlからこれが格納されているディレクトリを出て~/public_html直下にあるファイル~/public_html/index.htmlにリンクする場合には、そのファイルindex.htmlはromance.htmlから見れば親ディレクトリ内にあるので、親ディレクトリを表す .. を使って、次のようにリンクする。 

<a href="../index.html">ホームページ</A>へ戻る


これらの例が示すように、ローカルリンクをするときにはリンクする側とリンクされる側とのディレクトリ・ファイルの相対的位置関係に留意する。

目次

ハイパーリンクとURL

ローカルリンクの場合ですらWebブラウザにはWebサーバ経由で情報がHTTPによって転送されてきている
~/public_htmlにあるファイル以外のインターネット上の情報資源にリンクを張るときには、相手先のWebサーバー経由でその情報源を手元のWebブラウザに送ってもらう。 リンク先の情報源を指定するには、本来Webサーバーを通じてどのようにして取り寄せるかというプロトコルをも含めて指定しなければならず、 これをURL（Uniform Resource Locator）という。 自分の所有するHTMLページ以外の情報を参照するためのリンクをハイパーリンクと呼ぼう。

このページ最初のリンク書式で示したようにURLがわかっている情報にハイパーリンクをするには、たとえば次のようにする。 

花咲大学の臼井雉助先生の著した 
<a href="http://www.hanasaki.ac.jp/~hanasaka/index.html">サルかに合戦研究</A>
（石波書店、1978年）はこの分野の基本資料として名高い。

目次

ユーザーページのURL

本学のユーザー s01987tj が作成したファイル ~/public_html/index.htmlのURLは次のようになる。 

http://www.edu.tuis.ac.jp/~b97890/index.html

または 

http://www.edu.tuis.ac.jp/~b97890/

URLの最後のindex.htmlを省略した場合、最後に / がついていることに注意する。 また、ディレクトリ~/public_html はURLには現れていないことにも注意しよう。 また、URLの書き方は電子メールのアドレスとは違っている。

http://は情報を取り寄せるプロトコルがHTTP（hyper text transfer protocol）であることを示し、www.edu.tuis.ac.jpでWebサーバーが稼動している（インターネット上の）マシンを表し、 /~a96789/index.htmlでWebサーバーが情報を取り出すユーザーWebドキュメントの位置を示している。

学内の友人のページリンクを張る場合のように、同じWebサーバーの管理のもとにおかれているユーザーe01897hyの作成した~/public_html/index.htmlにリンクするには、次のようにURLでサーバー場所を省略することができる。 

友人の<a href="/~e01897hy/index.html">花子さん</A>のページは

Webページの作成目次
オンラインテキスト目次

mizutani@rsch.tuis.ac.jp