リンクをはろう

作成したHTMLファイルを文字や画像をクリックして移動できる機能を
リンクといいます、ホームページ作りには欠かせない機能(タグ)ですから
是非使い方をマスターしてくださいね

リンクの基本

<a href="★">☆</a>
★=リンクするファイルまたはURL
☆=リンクを設定するテキスト(文字)や画像。リンクボタンになります
リンクするファイルが同じディレクトリにある場合はファイル名を指定しますが
別サーバにリンクする時はhttp://〜〜からURLを指定します

相対パスと絶対パス

リンクの設定で重要なのはリンク先となるファイルの指定方法です
相対パスとは今自分が作業しているファイルから見た
リンク先のファイルの位置関係で 絶対パスとはインターネット全体から見た
ファイルの住所みたいなものです
相対パスの指定は同じディレクトリ(フォルダ)内なら
ファイル名の指定でOKですが ファイル数が多くなり新しいフォルダを
作って整理した場合などファイル名だけではリンク先を指定できません
 my_homepage
     |      
     +-index.html     
     +-link.html
     |                 
     +---link     
     |       |--link01.html
     |       |--link02.html
     |       |--link03.html
     +-my_diary.html

例えば上の図でindex.htmlから見て
link01.htmlへのリンクは
<a href="link(フォルダ名)/link01.html">リンク01へ</a>となります
逆にlink01.htmlからindex.htmlにリンクするには
<a href="../index.html">トップページへ</a>となります

リンク文字色の指定

<body link="★" alink="☆" vlink="■">
★=未リンク状態の文字色(カラーコードまたはカラーネーム)
☆=リンク中状態の文字色(カラーコードまたはカラーネーム)
■=リンク済みの文字色(カラーコードまたはカラーネーム)

同じページ内でリンクする

<a href="#★">☆</a>
<a name="★">■</a>

★=任意のキーワード(アンカー名)
☆=リンクを設定する要素(文字やイメージ)
■=アンカーを設定する要素(文字やイメージ)
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<a href="#tag">タグを使おう</a>
<a href="#java">ジャバスクリプトを使おう</a>
<a href="#home">ホームページを作ろう</a>
ジャンプしたいところに
<a name="tag">タグ使用例</a>
<a name="java">JAVA使用例</a>
<a name="home">ホームページ作成</a>
</body>
</html>

任意のページの任意の場所にリンクする

<a href="★#☆">〜〜</a>
★=ジャンプ先のURLまたはファイル名
☆=アンカー名
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<a href="tag.htm#tag">タグを使おう</a>
<a href="java.htm#java">ジャバスクリプトを使おう</a>
<a href="tukurou.htm#home">ホームページを作ろう</a>
ジャンプしたいページの指定箇所に
<a name="tag">タグ使用例</a>
<a name="java">JAVA使用例</a>
<a name="home">ホームページ作成</a>
</body>
</html>

新しいウィンドウを開いてリンクを表示する

<a href="★" target="_blank">〜〜</a>
★=リンクするファイルまたはURL

リンクを表示するウインドウやフレームを指定する

基準となるジャンプ先の指定(ヘッダータグ内に記述します)
<base target="★">
それぞれのリンクで指定
<a target="★">
★=ターゲット名(_top,_self,_parent,任意名称)_blankは上記にあるので省略
_topフレームを解除して表示
_blank新しくブラウザ画面を立ち上げる
_selfリンクを設定するファイル(作業中)のあるフレームに表示
_parent今のフレームの親元フレームに表示
任意名称フレーム分割時Name=""でつけたウィンドウの名前の
フレームに表示

メールソフトをたち上げるリンクボタンの作成

<a href="mailto:★">〜〜</a>
★=送信先のメールアドレス
同時にメールタイトルを付け加える方法は
チョットした小技を参照してね

マウスカーソルがのるとヘルプを表示

<a href="★" title="☆">〜〜</a>
★=リンクするファイルまたはURL
☆=表示させるヘルプの文章
カーソルをのせてみて下さい
ヘルプテキスト文に&#13;を加えると改行させることができます(IEのみ)
カーソルをのせてみて下さい

リンクボタンに画像を使う

<a href="★"><img src="☆"></a>
★=リンク先ファイル名またはURL
☆=リンクボタンとして表示させる画像ファイル名
<a href="★"><img src="☆" border="0"></a>
<img>タグのborder属性で0を指定するとリンクボタン外枠の線を
非表示にする事ができます

クリッカブルマップの設定

マップ用画像ファイルの指定とマップの定義
<img src="@" usemap="#A">
マップを定義する
<map name="A">
(リンクの数だけ繰り返します)
<area shape="B" coords="C" href="D" alt="E">
</map>

@=マップに使用する画像ファイル
A=任意のマップ名を指定します
B=クリッカブルマップの形状の指定{default(画像全体),rect(四角形)
circle(正円),poly(多角形)}
C=座標値{Bの形状がrectの場合、X1,Y1,(左上の座標)X2,Y2(右下の座標)
のようにカンマで区切って4つの座標を指定
circleの場合、中心X,中心Y,半径のようにカンマで区切って3つの座標を指定}
D=リンク先URL
E=マウスカーソルが乗った時のテキスト表示
タグ使用例
<html>
<head>
<title>クリッカブルマップ!</title>
</head>
<body bgcolor="#008b8b">
<img src="title01.jpg" width=350 height=70 usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="0,0,65,65" href="tag_top.htm" alt="タグ一覧へ!">
<area shape="rect" coords="65,0,150,65" href="hogehoge.html" alt="hogehogeへ!">
<area shape="rect" coords="220,0,320,65" href="rerere.html" alt="rerereへ!">
</map>

</body>
</html>
サンプル(ジャンプ先は全て同じです(^^;ゞ)
タグ一覧へ! CLICK! ジャーンプ