ハイパーリンクの基本 |

ハイパーリンクの設定

　Yahoo( http://www.yahoo.co.jp )にリンクを張る場合は><a>タグを用い href属性のURIを記述します。

<a href="http://www.yahoo.co.jp">Yahoo!のページを開く</a>

実験例

ページが同じサーバー内にある時は、http://～を省略して記述することができます。

<a href="/aaa/bbb/ccc.html">ページ</a>

ページが同じフォルダにある場合は /aaa/bbb/ などのフォルダ名も省略することができます。

<a href="ccc.html">ページ</a>
<a href="./ccc.html">ページ</a>

　相対リンクでの指定も可能です。../ は1つ上のフォルダ、./ は現在のフォルダを意味します。また / はルートフォルダです。

<a href="./next.html">ページ</a>
<a href="../top.html">ページ</a>
<a href="../../demo/">ページ</a>

　サーバーや.htaccessの設定にもよりますが　/test/index.html は /test/ とファイル名を省略して開く事ができます。通常 index.htm や index.html はファイル名を指定しなくても表示するよう設定されています。　

<a href="/test/">testフォルダへ</a>
<a href="/test/index.html">testフォルダへ</a>

　同一ページや、他ページの指定の場所へリンクする事もできます。
ジャンプ先の箇所にname属性やid属性に名前を付けて「到達点」を設定します。

<a name="名前">～</a>
<h3 id="名前">～</h3>

　ジャンプ元は以下のようにURLに#名前を付けておきます。

<a name="#名前">～</a>
<a name="/test/demo.html#名前">～</a>

実験例

<a href="#footer">このページの下部へジャンプ</a>
<a href="/html/func/a.html#footer">Aタグの説明ページの下部へジャンプ</a>

target="_blank"の属性を指定することにより、リンク先を新規ウィンドウで表示することができます。

<a target="_blank" href="http://www.yahoo.co.jp/">Yahoo!</a>

target属性には以下が用意されています。

属性名	説明
_blank	常に名前無しのウィンドウを新規に開いて、そこに表示します。
_self	自分自身のウィンドウ（フレーム）に表示します。
_top	ウィンドウがフレームに分割されていれば、分割を全て解除して、そこに表示します。
_parent	ウィンドウがフレームに分割されていれば、1段だけ分割を解除して、その親フレームに表示します。

実験例

　target属性の名前は自由に設定することができます。target="w1"でリンク先を表示後、他のtarget="w1"となっているリンクを開いた場合は同一のウインドウに表示されます。

実験例