ハイパーリンク

 <a> タグとオプション

タグ オプション
<a> 〜 </a> href= url リンク先のURLを指定
#marker_name ページ内のアンカーへ飛ぶ
mailto:your@mail.address メール機能の呼び出し
name= marker_name ページ内にアンカー名を設定
target= frame_name リンク先のフレーム名を指定
top 新しいウィンドウを開いて表示
_topフレームを解除して,現在のウィンドウに表示

 リンクの基本的な使い方 


 相対パスを使おう 

相対パスとは,現在のファイルから見て,ディレクトリ構造上,何階層上か下かを 記述する方法です。相対パスを使うと,はじめフロッピーディスクに 作成しておいたファイルをハードディスクや,サーバーに置いたりしても, URLの記述を変更しなくて済みます。

リンク先のファイルの位置 URL
同じディレクトリにあるファイル filename
現在のディレクトリより下位階層にあるファイル directoy/filename
現在のディレクトリ ./
現在のディレクトリから一つ上の階層のディレクトリ ../
現在のディレクトリから一つ上の階層にあるファイル ../filename
さらにもう一つ上の階層にあるファイル ../../filename

図はA:\ドライブ上にいくつかのフォルダとファイルを作ってある様子を示している。
今,A:\hobby\photo\index.html から各ファイルにリンクする場合の URL を示してみよう。

    ファイル構成図
[A:\]
  |
  +--index.html
  +--daisuki.html
  +--[hobby]
  |    |
  |    +--index.html
  |    +--hitorigoto.html
  |    |
  |    +--[photo]
  |    |    |
  |    |    +--index.html ←
  |    |    +--snap.html
  |    |    +--[images]
  |    |          |
  |    |          +tori.jpg
  |    |
  |    +--[computer]
  |          |
  |          +--index.html
  |          +--cpu.html
  |          +--[mobile]
  |                |
  +--[family]      +--index.html 
        |
        +--index.html
        +--hana.gif

A:\hobby\photo\snap.html にリンクする。
  <a href="snap.html"> 〜 </a>

A:\hobby\photo\images\tori.jpg にリンクする。
  <a href="images/tori.jpg"> 〜 </a>

A:\hobby\hitorigoto.html にリンクする。
  <a href="../hitorigoto.html"> 〜 </a>

A:\hobby\computer\cpu.html にリンクする。
  <a href="../computer\cpu.html"> 〜 </a>

A:\index.html にリンクする。
  <a href="../../index.html"> 〜 </a>

A:\family\index.html にリンクする。
  <a href="../../family/index.html"> 〜 </a>



 index.html という名のファイル 

"index.html" というファイル名は特別な意味を含みます。 一般的に WEB サーバーは,URL にただ単にディレクトリのみ指定された場合は, そのディレクトリ内の "index.html" という名のファイルを検索して表示します。 したがって,先ほどのURL は次のように書くことができます。

<a href="index.html"> →  <a href="./">

<a href="computer/index.html"> →  <a href="computer/">

<a href="../../family/index.html"> →  <a href="../../family/">

なお,これは WEB サーバーにファイルを FTP などで置いてはじめて有効になるので, ローカルコンピュータ上では,index.html は検索・表示されずに, ディレクトリ一覧が表示されます。


 target の使い方 

target オプションを使うと,フレームなどを使用しているときに, リンク先のページを表示するフレームやウィンドウを指定できます。

   詳細はフレームのこちらを参照して下さい





戻る




















































































<a name="mark1">マーカー2はここ</a>

マーカー2はここ
マーカー1へ戻る