ハイパーリンクの基本-HTMLの基本をおさらい

TOP > HTML > ハイパーリンクの基本

ハイパーリンクの設定

他サイトへのリンク

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

実験例

Yahoo!のページを開く

自サイト内のリンク

ページが同じサーバー内にある時は、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>

index.htmlの省略

 サーバーや.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>
このページの下部へジャンプ
Aタグの説明ページの下部へジャンプ

新規画面でリンクを表示する

target="_blank"の属性を指定することにより、リンク先を新規ウィンドウで表示することができます。
<a target="_blank" href="http://www.yahoo.co.jp/">Yahoo!</a>

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

実験例

_blankで開く
_selfで開く

指定した新規画面でリンクを表示する

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

実験例

ウインドウ名「w1」で「yahoo」を開く
ウインドウ名「w2」で「goo」を開く
ウインドウ名「w1」で「excite」を開く



blank