4. ハイパーリンク

since 6th/Dec. and last modified 4th/April 2000

1. Anchor Element

参照；HTML 4.01 Specification

インライン要素であるA要素に付いて少し詳しく紹介します。A要素には大きく分けて二通りの使い方があります。

リンクとは、二つの端点（アンカー）を結び付ける事ですが、この二つの端点、「起点と目的地」は、A要素を用いて作ります。

起点アンカーの例

• <A href="http://www.w3.org/">W3C</A>
• <A href="../index.html">Style Sheetとは何だろうか</A>
• href="..."とあるのがhref属性です。属性は要素の開始タグの中に記述します。

文書中の目的地アンカーの例

• <A name="anchor">Anchor Element</A>
• <H2 id="anchor">3. Anchor Element</H2>
• name="..."とあるのがname属性、id="..."がid属性です。

id属性はNetscapeCommunicator4.x同梱のブラウザでは目的地アンカーとして働きません。

以下では順番にA要素の取る一部の属性の機能に付いて説明します。

• href…目的となる資源の位置
• title…資源のタイトル
• target…ブラウザで資源を呼び出す位置
• name…資源として呼び出される場合の名前

2. href属性- Hyper Reference

ここでは、いわゆるリンクを張ります。Web上の資料の位置を指定することですが、ここで指定できる資料には、

• 画像…[.gif], [.jpg], [.xbm], [.png], etc.
• 文書…[.html], [.txt], etc.
• サウンド…[.au], [.aiff], [.mid], etc.
• 動画…[.aiv], [.mov], [.mpg], etc.

など様々なものがあります。ここでは、href属性を持ったA要素のことを起点アンカーと呼ぶことにします。

絶対パス

<P>
HTMLやXHTML、CSSには、
<A href="http://www.w3.org/" title="W3C">定義の策定・勧告団体</A>が存在します。
</P>

上のP要素を今開いているHTMLファイルのBODY要素内に貼り付けて下さい。これをブラウザで表示すると、この部分は、次のようになるはずです。

【表示例】

試しに上の文字列「定義の策定・勧告団体」に指定されたリンクを働かせて（クリックして）みて下さい。W3Cと云う団体のWebSiteのHTML文書が取得できる筈です（ホームページに行かれるはずです）。

href="http://hogehoge"の//hogehogeが、目的のWebコンテンツの所在地を示します。ここでは、http://www.w3.org/が指定されていますが、このhttp://から始まる文字列は、全世界の無数に存在するネットワーク中で、一意的に位置を特定する、Webコンテンツの「住所」みたいなものです。この指定のし方を「絶対パス」と呼びます。

title属性はWindowsやMac.の場合、そのリンクにカーソルを合わせると、title属性値がポップアップし、その上で右クリックからブックマーク（お気に入り）に登録すると、title属性の属性値で登録されます。「参照する資源の名前」とは異なる文字列からリンクを張るときには、title属性を指定するのを忘れないようにしましょう、

ここでは、参照する資源の位置・目的地を絶対パスで指定しましたが、相対パスというものがあります。自分で作っているサイト上のfileへのリンクは、普通この相対パスで行います。

相対パス

上の例では、文書の位置を絶対パス（URL; http://hogehoge）で指定しましたが、相対パスというものがあります。自分で作っているサイト上のfileへのリンクは、普通この相対パスで行います。

<P>
このコンテンツは、<A href="../index.html">WebSite作成支援系コンテンツ</A>の下部コンテンツです。
</P>

上の例では、一つ上のディレクトリ（../）に有るindex.htmlというfileの場所が指定されています。自分と同じディレクトリは「./」、一つ上のディレクトリは「../」、二つ上は「../../」で指定します。

例えば、ディレクトリが次のような階層をなしていたとします；

root-|-dir01
     |-dir02-|-dir201--file201.html
     |       |-dir202--file202.html
     |-dir03
     |-dir04--file04.html

このとき、file202.htmlから見たfile201.htmlの位置は、../dir201/file201.htmlとなります。

同様に、file202.htmlから見たfile04.htmlの位置は、../../dir04/file04.htmlとなります。

「ピリオド； . 」の無い、「/」はfileが置いてあるサーバの「ルート」になりますので、「ピリオド」を忘れないように注意してください。

3. target属性

<P>
HTMLは
<A href="http://www.w3.org/" target="_top" title="W3C">W3C</A>
が管理しています。
</P>

属性targetのパラメタは呼び出した文書を開くフレームの名前の指定です。FRAME文書 (N)を作るまでは、余り気にしなくても良いでしょう。一応、href属性のパラメタに予約された規定値を紹介しておきます。規定値は_で始まることで予約されていることを示します。

target属性のパラメタは、上に上げた規定値の他に、殆ど任意のアルファベット名を取り得ます。例えば、あるA要素の開始タグ中にtarget="external"と記述すれば、W3Cと云う名前が付いたFRAME枠内にhref属性で指定されたweb resourceが開かれます。FRAME文書のFRAME要素でname="external"が指定されていなければ、新しいウィンドウがexternalと名付けられて開かれます。その次にtarget="external"を持ったA要素をクリックすると、新しいウィンドウは開かれず、externalと名付けられた当該のウィンドウに上書きされます。これは、いちいち新しいウィンドウを開く_blankとは一線を隔します。試してもらえば一発で分ると思います。

target="external"、target="external"、target="_blank" これらを繰り返し開いてみて下さい。開かれるウィンドウの数が異なることだろうと思います。

4. name属性

Hyper Linkの目的地は、今までの所、任意のウェブ上のリソース、ファイルでした。

しかし、一つのHTMLファイルを目的地とした時、当概のHTML文書内の任意のHTML要素を目的地とする事も出来ます。そのために使うのが、name属性とid属性です。

あるHTMLファイル；sample.htmlのなかに、次のような記述が有ったとします。

<H2>
<A name="1-2">第二節</A> 既往の認識論の隘路と遺棄された案件
</H2>

この時、上のA要素はハイパーリンクの目的地になり得ます。この時起点アンカーは次のように書きます。 # に注意して下さい。

三項図式の棄却に付いては、
<A href="./sample.html#1-2"
   title="既往の認識論の隘路と遺棄された案件">第一章 第二節</A>
を参照下さい。

同一文書内からのリンクならば、href="#1-2"となります。これを使えば、HTML文書内の任意の文字列が目的地に出来ます。

目的地がHTML要素の場合は、id属性を用いて次のようにもかけます。

<H2 id="1-2">既往の認識論の隘路と遺棄された案件</H2>

起点アンカーは、A要素のname属性と同じく # を用いて、<A href="./sample.html#1-2">第一章 第二節</A>です。

或るURLに有るHTMLファイルの中で、A要素のname属性；name="name"、又は任意のHTML要素のid属性；id="name"で定義した目的地アンカーを参照する場合のhref属性は、href="URL#name"となります。

5. BASE Elements

相対URLでの指定がされている場合、基準となるURLの設定によって、絶対URLとして解釈されます。BASE要素を使うと、 その文書における基準URLを、実際の位置に関わらず、明示的に設定することができます。これはAnchor要素に限った話ではなく、画像やCSSなどの外部ソースとの関連付け一般に効いてきます。

BASE要素には終了タグが存在しません。開始タグしか存在しない要素は他に、META要素、LINK要素、IMG要素、BR要素、HR要素などが挙げられます。

BASE要素を設定する場合には、HEAD要素中のなるべく先頭で、他の要素が外部ソースとの関連づけを始めていない場所に配置する必要があります。BASE要素によって示されるURLの基準点は、当該文書中でのみ有効です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
 <HEAD>
   <TITLE>Our Products</TITLE>
   <BASE href="http://www.louvre.or.jp/louvre/img/photos/collec/peint/">
 </HEAD>
 <BODY>
   <P><A href="./vignet/inv0779.jpg">モナリザ</A>がどこにあるか御存知でしょうか？
 </BODY>
</HTML>

例えば、上のように設定されたBASE要素により、A要素の指定する相対URLの、
「./vignet/inv0779.jpg」は、
「http://www.louvre.or.jp/louvre/img/photos/collec/peint/vignet/inv0779.jpg」として解釈されます。

BASE要素にはtarget属性も指定できます。例えば、HEAD要素の中に<BASE target="main">と書いてあれば、当該文書中のhref属性を持つAnchor要素は一般にtarget="main"を持ちます。これは個別のA要素のtarget属性によって上書きされます。FRAME文書 (N)で多いに役立ちます。

6. Mail

上の例では、href属性の属性値に、http-protocol (HyperText Transfer Protocol)と云う、HTMLによるWeb上の資源の送受信のための仕組みが指定されていました。これでWeb上の資料を楽に参照できるわけです；href="http://hogehoge"。

一方、メイルの送受信には、MailTo-Protocolが使われます；href="mailto:foo@hoo"。

<A href="mailto:���[���A�h���X"
   title="Mail to Sugai">���[���A�h���X</A>

上のサンプルで標準のメーラが起動する筈です。

また、環境によっては、必ずしも機能しないようですが、ヘッダーも指定できます。例えば、件名に「意見 感想」、本文冒頭に「ご意見を御願いしますm(_ _)m」と入れるように指定したい場合は次のように書きます。

<A href="mailto:���[���A�h���X?subject=意見%20感想&body=ご意見をお願い致しますm(_%20_)m"
   title="Mail to Sugai">���[���A�h���X</A>

上手く機能すると、メーラが起動し、タイトルと本文に「意見 感想」、「こちらにご意見を御願い致しますm(_ _)m」と入れこんである筈です。%20は半角スペースで、他に%7Eで「チルダ； ˜ 」などがあります。

上のリンクは私宛てですので、この機会に、是非御意見・御感想などをメール下さい(^^;

まとめ

• A要素は其の内容に、テキストと殆どのインライン要素を取り得ます
• が、唯A要素自身だけは取り得ません。A要素同志の入れ子は不正です。
• A要素は、href属性とname属性の両方を同時に取る事が可能です。
• HTMLの送受信にはhttp-protocol、mailの送受信にはmailto-protocolが利用されます、

A要素の取り得る属性はまだ他にもあります。