勝手にHTML4.0講座 - リンク 参照

1.リンクとアンカーの概説

リンクというのは、あるWebリソースから別のリソースへ結びつけることを言います。 一つのリンクには、二つのアンカー(起点と目的地)と一つの方向性が含まれます。 リンクを使うと、他のWebリソースに簡単にアクセスすることができて便利です。 また同じHTML文書のある部分にリンクする事もできます。

HTMLには、他のリソースへリンクを設定するような要素・属性が幾つかありますが、いちばん有用なのは A要素です。 A要素はボディー部内でのみ使用可能です。 href属性が設定されているA要素は、起点アンカーを表し、これをアクティブにすると(クリックなど)リンク先へアクセスできます。 name属性やid属性が設定されたA要素は、よそからリンクされる目的地であることを示します。 また、1つのA要素開始タグにname属性とhref属性を同時に設定することもできます。

2.<A>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
name = 文字列別からのリンクの目的地として、名前を付けます。同じ文書で同じ名前は付けられません。
href = URIリンクするWebリソースのアドレスを指定します。
hreflang = 言語コードhref属性が設定されているときのみ設定可能な属性で、リンク先文書の言語コードを指定します。
type = MIMEタイプリンク先リソースのMIMEタイプを指定します。
rel = リンクタイプリンク元文書からリンク先文書を見た関係性を指定します。
rev = リンクタイプリンク先文書からリンク元文書を見た関係性を指定します。
charset = 符号化方法リンク先文書の符号化方法を指定します。
target=目標フレーム名文書を表示させるフレーム名を記します。
tabindex = 数字タブキー移動のための順序づけをします。
accesskey = 文字アクセスキーを指定します。
shape = 形状コードイメージマップの形状を定めます。
coords = 座標リストイメージマップの座標位置を指定します。値の数や順序は形状によって異なります。
内在イベントonfocus , onblur , onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

A要素を使うと簡単にアンカーを作り、リンクすることができます。 href属性はアンカーを起点アンカーとして働かせます。 name属性はアンカーの名前を設定し、他からのリンクの目的地にできるようにします。

次の例では、起点アンカーが「W3C Webサイト」で、目的地アンカーが「"http://www.w3.org/"」です。
W3Cについては、<A href="http://www.w3.org/">W3C Webサイト</A>をご覧下さい。
W3Cについては、W3C Webサイトをご覧下さい。

では次に、目的地アンカーとそれにリンクしている起点アンカーを作ってみます。
より詳しくは <A href="#anchor-one"> anchor one</A>をご覧下さい。
<A name="anchor-one">ここは目的地アンカー「ancor-one」です</A>

また、起点リンクと目的地リンクの両方を同時に設定することも可能です。

アンカーの名前は、同じ文書で重複させてはいけません。 id属性とname属性でも同じ名前を使ってはいけません。 またリンク元、リンク先での名前を完全に一致させなければなりません。 そしてASCII文字のみを使って記す必要があります。

A要素によって示すリンク・アンカーは、入れ子にはできません。
あらゆる要素の開始タグには、id属性を設定してアンカーとして機能させることができます。 次の例では、id属性を使ってH2要素自体をリンク先アンカーとして働かせる書き方を示します。

詳しくは <A href="#section2">第2章</A>をどうぞ。
...中略
<H2 id="section2">第2章</H2>
...中略
詳細は前述の <A href="#section2">第2章</A> をご覧下さい。

name属性では文字参照を利用できるので、命名の自由度は高いです。 id属性はアンカー名以上の働きをし得ますが、サポートされていない場合があります。 また存在しないリソースにリンクしても、エラーが出るだけで意味がありません。

3.<IMG>要素

開始タグ: 必要
終了タグ: なし

属性 = 属性値説明
src = URI画像データの所在を示します。
longdesc = URI画像に関する補足説明の文書へのリンクを指定します。alt属性を補う文章になっている必要があります。
alt = 文字列画像を表示できない人のための代替テキストを示します。
ismapサーバー側イメージマップの指定をします。この場合、A要素の内容とする必要があります。
usemap = URIイメージマップとの関連づけをするときに、そのイメージマップのURIを指定します。
hspace = 長さ要素の周囲に取りたい左右の余白を指定します。
vspace = 長さ要素の周囲に取りたい上下の余白を指定します。
width = ピクセル数画像の横幅を指定します。[非推奨]
height = ピクセル数画像の高さを指定します。[非推奨]
align = 配置コード表示するときに、水平方向での配置を指定します。[非推奨]
border = ピクセル枠の幅のピクセル数を指定します。
内在イベントonclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

文書中の、画像を埋め込みたい場所にIMG要素を配置することで、画像を埋め込むことができます。 alt属性は画像表示がされない場合に、画像の代役を果たす文章を記すためのものです。 またlongdesc属性を使って、補足説明文書へリンクすることもできます。

<IMG src="../../image/hepopo.gif" alt="バナ〜">
バナ〜


4.<OBJECT>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
classid = URIダウンロードすべき実行用プログラムの所在を指定します。data属性と併用、代用されます。
codebase = URIclassid,data,archive属性の基準URIを指定します。
codetype = MIMEタイプclassid属性によって指定されたオブジェクトのMIMEタイプを指定します。
data = URI実行用プログラムに扱わせるデータ(画像など)の所在を指定します。
archive = URIリストリソースを所蔵している書庫ファイルの所在をURIリスト(空白で区切るリスト)で指定します。
declareサーバーからダウンロードをしたあと、表示・実行をせずに待機状態にします。
standby = 文字列捜査対象のオブジェクトをダウンロードしているときにひょじされる文章を記します。
name = 文字列別からのリンクの目的地として、名前を付けます。同じ文書で同じ名前は付けられません。
type = MIMEタイプリンク先リソースのMIMEタイプを指定します。
tabindex = 数字タブキー移動のための順序づけをします。
usemap = URIイメージマップとの関連づけをするときに、そのイメージマップのURIを指定します。
hspace = 長さ要素の周囲に取りたい左右の余白を指定します。
vspace = 長さ要素の周囲に取りたい上下の余白を指定します。
width = ピクセル数横幅を指定します。[非推奨]
height = ピクセル数高さを指定します。[非推奨]
align = 配置コード表示するときに、水平方向での配置を指定します。[非推奨]
border = ピクセル枠の幅のピクセル数を指定します。
内在イベントonclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

OBJECT要素を使うと、いろいろなデータを画面外で使う、ブラウザ内に表示する、等の指定をすることができます。 またサポートされていないデータ形式も、扱うことができます。 この場合、下記の情報が必要となります。
OBJECT要素は上記3点を全て扱えますが、3つ全てを記す必要はない場合があります。 例えば、操作対象データを外部から与える必要がないオブジェクトや、特別な表示用プログラムを必要としない場合などです。 表示用プログラムや操作対象データはOBJECT要素で記しますが、実行時に与えるパラメータはPARAM要素で記します。
また、OBJECT要素はHEAD要素内にも記され得ますが、内容文を記してはいけません。

次の例では、OBJECT要素によってアナログ時計アプレットがHTML文書中に埋め込まれています。 二番目の例では、代替テキストが記されています。
<OBJECT classid="http://www.miamachina.it/analogclock.py"></OBJECT>
<OBJECT classid="http://www.miamachina.it/analogclock.py">アニメーション時計</OBJECT>

HTML 4.0のOBJECT要素には、重要な機能として代替オブジェクト表示機能が施されています。 入れ子にされたOBJECT要素は、各々の要素の内容物を代替表示物として扱います。
次の例文では、この代替表示機構を説明するため複数のOBJECT要素を入れ子にしてあります。

<OBJECT title="宇宙から見た地球の姿" classid="http://www.observer.mars/TheEarth.py"> <!-- Python applet -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg"> <!-- MPEG video -->
<OBJECT data="TheEarth.gif" type="image/gif"> <!-- GIF画像 -->
宇宙から見た地球の姿。 <!-- 文章 -->
</OBJECT>
</OBJECT>
</OBJECT>

表示させたいデータは行内データ、あるいは外部データの2通りのやり方でオブジェクトに引き渡せます。 行内データの方が概して表示は素早いですが、大量のデータを扱うには不便です。
次の例文は、行内データがOBJECT要素に与えられている状態を示したものです。

<OBJECT id="clock1" classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="data:application/x-oleobject;base64, ...base64形式のデータ..."> 時計 </OBJECT>


5.<PARAM>要素

開始タグ: 必要
終了タグ: なし

属性 = 属性値説明
name = 文字列実行用パラメータの名前を付けます。同じ文書で同じ名前は付けられません。
value = 文字列name属性で名付けられた実行用パラメータの値を指定します。
valuetype = データ型value属性のデータ型を設定します。(data,ref,object)
type = MIMEタイプvaluetype属性が[ref]の場合のみ、リンク先リソースのMIMEタイプを指定します。
その他id

PARAM要素は、オブジェクトの実行時に与える必要があるようなパラメータ値を設定するものです。 順序や個数は問われませんが、OBJECT要素（あるいはAPPLET要素）の開始タグの直後に記す必要があります。

次の例では、アプレットに高さ(height)と横幅(width)のパラメータ値を設定しています。
二番目の例はGIFファイルのURIを指定しています。また standby属性を指定しているので、読み込み中に文字列が表示されます。

<OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
このユーザエージェントは Python アプリケーション に対応していません。
</OBJECT>

<OBJECT classid="http://www.gifstuff.com/gifappli" standby="エルヴィスを読み込み中です...">
<PARAM name="Init_values" value="./images/elvis.gif" valuetype="ref">
</OBJECT>

オブジェクトの実行用プログラムの所在は、URIによって記されます。 そしてURIでデータへアクセスするときは、アクセス手段を指定する必要があります(httpなど)。 そしてJavaアプレットの場合は「java」、ActiveXアプレットの場合は「clsid」と記す必要があります。
codetype属性を設定しておくと、自分で実行できる物かどうかを判断してダウンロードします。

<OBJECT classid="java:program.start"></OBJECT>
<OBJECT codetype="application/java-archive" classid="java:program.start"></OBJECT>
<OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="http://www.acme.com/ole/clock.stm">このアプリケーションはサポートされていません。</OBJECT>

オブジェクトは、単独ではなく複数に分けることが可能です。こうすると宣言と起動とを分けることができます。 組み込みと起動の分離には、次のような利点があります。
オブジェクトの読み込み時点で即実行が開始されることを避けるためには、論理型属性declareを設定しておきます。 このとき、同時にOBJECT要素のid属性によってそのオブジェクトに固有の名前をつけておかねばなりません。 このような宣言部分のOBJECT要素は、それを最初に起動する部分よりも前に記す必要があります。

次の例では、OBJECT要素にリンクしている起点アンカーをクリックすると起動されます。

<OBJECT declare id="earth.declaration" data="TheEarth.mpeg" type="application/mpeg">
宇宙から見た地球の姿。
</OBJECT>
<A href="#earth.declaration">地球のアニメーション</A>

次の例文では、実行時の値として他のオブジェクトを使用する方法を示します。 この例では、詩文を見るための臨時プログラムに表示させたいテキストを入力します。 詩文表示プログラムは、実行時の値として「font」データを参照します。 この実行時の値はそれ自体が独立したオブジェクトで、フォントオブジェクトを挿入する代物です。

<OBJECT declare id="tribune" type="application/x-webfont" data="tribune.gif"></OBJECT>
...ここで [S. T. Coleridge の] KublaKhan.txt からの詩文を表示...
<OBJECT classid="http://foo.bar.com/poem_viewer" data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
</OBJECT>


6.<APPLET>要素[非推奨]

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
codebase = URIアプレットの所在の基準URIを指定します。
code = 文字列codeの状態で保存されているアプレットを読み込むときに、その名前を指定します。
name = 文字列アプレットに名前を付けます。同じ文書で同じ名前は付けられません。
archive = URIリストリソースを所蔵している書庫ファイルの所在をURIリスト(空白で区切るリスト)で指定します。
object = 文字列objectの状態で保存されているアプレットを読み込むときに、その名前を指定します。
hspace = 長さ要素の周囲に取りたい左右の余白を指定します。
vspace = 長さ要素の周囲に取りたい上下の余白を指定します。
width = ピクセル数横幅を指定します。[非推奨]
height = ピクセル数高さを指定します。[非推奨]
align = 配置コード表示するときに、水平方向での配置を指定します。[非推奨]
alt = 文字列画像を表示できない人のための代替テキストを示します。
その他lang , dir , id , class , style , title

HTML文書にJavaアプレットを組み込むために使います。しかしOBJECT要素の採用により、「APPLET」要素は非推奨としました。 APPLET要素の内容文はアプレットを実行できない、あるいは実行しないよう設定されている場合の代替テキストを表示するために記されます。 また必要な初期値は、PARAM要素で与えます。

<APPLET code="Bubbles.class" width="500" height="500">
泡が動き回るJava appletアニメーション。
</APPLET>
 上の例文はOBJECT要素で次のように書き換えることができます。
<OBJECT codetype="application/java" classid="java:Bubbles.class" width="500" height="500">
泡が動き回るJava appletアニメーション。
</OBJECT>


7.イメージマップの概要

イメージマップ機能は、画像やオブジェクトを幾つかの区画に分割し、各区画毎に何かある動作の引き金を設定する ものです（例えば、次の文書へリンクしたり、プログラムを起動させたり）。 読み手がある区画をアクティブにすると、その区画に設定された動作が始まります。
イメージマップには次の2種類のものがあります。


クライアント側イメージマップの方が、サーバサイドのものより少なくとも次の2点で優れています。 まず、非グラフィック系環境での読み手にも利用できること。 そして、選択地点が有効な区画かどうかについて即座に反応が生じることです。

8.<MAP><AREA>要素

(MAP)
開始タグ: 必要
終了タグ: 必要
属性 = 属性値説明
name = 文字列MAP要素によるイメージマップに名前を付けます。


(AREA)
開始タグ: 必要
終了タグ: なし

属性 = 属性値説明
shape = 形状コードイメージマップの形状を定めます。[default,rect,circle,poly]
coords = 座標リストイメージマップの座標位置を指定します。値の数や順序は形状によって異なります。
nohrefこの区画からのリンクがないことを示します。
name = 文字列別からのリンクの目的地として、名前を付けます。同じ文書で同じ名前は付けられません。
href = URIリンクするWebリソースのアドレスを指定します。
target=目標フレーム名文書を表示させるフレーム名を記します。
accesskey = 文字アクセスキーを指定します。
tabindex = 数字タブキー移動のための順序づけをします。
usemap = URIイメージマップとの関連づけをするときに、そのイメージマップの名前を指定します。
alt = 文字列画像を表示できない人のための代替テキストを示します。
内在イベントonfocus , onblur , onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

MAP要素は、別の要素（IMG要素、OBJECT要素、INPUT要素）と連携してクライアント側イメージマップを構成します。 イメージマップは、usemap属性によって、連携先の要素と結びつけられます。 OBJECT要素にusemap属性の設定がある場合、その「OBJECT」要素には画像が含まれていると推察されます。
どのMAP要素にも、以下の要素を内容として記せます。

  1. 一つ以上のAREA要素：イメージマップの区割りを設定し、各区画にリンクを設定します。
  2. ブロックレベル要素：イメージマップの区割りとリンクを設定するA要素を含ませます。

画像データが不在だったり利用できなかったりする場合のために、ユーザエージェントも、 当該文書の書き手も、文章で代用する仕掛けを用意しておく必要があります。

下の例は、OBJECT要素を素材に使ったイメージマップを表しています。 OBJECT本体が表示される場合はイメージマップが前面に出て表示されます。 MAP要素の内容(テキストでのリンク)は、OBJECT本体が表示できない場合にのみ表示されることになります。

<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
Navigate the site:
<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
<A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">Top Ten</A>
</MAP>
</OBJECT>

次の例はAREA要素を使っています。 OBJECT要素が表示されるとイメージマップが表示されますが、表示されない場合はただの文章が表示されます。 なるべく上のようなA要素を使ったイメージマップを使った方がいいみたいです。

<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
This is a navigation bar.
</OBJECT>
<MAP name="map1">
<AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28">
<AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28">
<AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60">
<AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,373,28,50,50,100,120">
</MAP>

もちろんOBJECT要素の代わりにIMG要素を使ってイメージマップを作ることも可能です。

次の例は、「A」要素を用いてイメージマップ中のリンク無効区域を設定する方法を説明したものです。 最初のアンカーはリンク無効の小さい円形を設定していて、2番目のアンカーで、リンク有効の大きい円形を設定しています。 この両者によって、中心部がリンク無効で周辺部がリンク有効となっているドーナツ状のリンク区域が作られています。 大きい円を小さい円が上書きしなければ意味がないので、このアンカーの配置順が要点となります。

<MAP name="map1">
<A shape="circle" coords="100,200,50">使えません</A>
<A href="outer-ring-link.html" shape="circle" coords="100,200,250">使えます</A>
</MAP>

同様にAREA要素のnohref属性は、区画には関連づけられるリンクが存在しないということを記すものです。

9.サーバー側イメージマップ

サーバ側イメージマップは、クライアント側イメージマップとして扱うには複雑すぎる場合に有効です。
サーバ側イメージマップは、IMG要素かINPUT要素でのみ扱えます。 IMG要素の場合はIMG要素をA要素の内容として記し、論理型属性である ismap を設定しておきます。 INPUT要素の場合は、「image」形式で記す必要があります。

画像がクリックされてイメージマップ中のリンク部分がアクティブになると、 表示中のスクリーンの座標値がサーバに直接送信されます。

<A href="http://www.acme.com/cgi-bin/competition"><IMG src="game.gif" ismap alt="target"></A>

クリック位置の情報は、次のようにしてサーバに渡されます。 まずユーザエージェントは、A要素のhref属性に記されているURIを元に、 「?」「x座標値」「,」「y座標値」の順に付加情報を記した新しいURIを書き出します。 つまり上の例で言うと、読み手が「x=10,y=27」の点をクリックしたとすれば、 生成されるURIは「http://www.acme.com/cgi-bin/competition?10,27」というものになるというわけです。

★INDEX★