|
リンク
タグの簡易テスト(別窓)
| 文字でリンク | 画像でリンク
| リンクターゲット |
変化するリンク | 同じページ内でのリンク
|
| ロールオーバーイメージでリンク
|
文字でリンク
<html>
<head>
<title> </title>
</head>
<body>
☆表示させたい部分に記述します☆
</body>
</html>
| 表示例 |
記述 |
文字
|
<a href="リンク先のURLやファイル名.html">文字</a> |
| 解説 |
リンクはご覧のとおり、とっても簡単なタグで出来ちゃいます。リンクには指定の仕方が2種類あります。
相対パス指定: <a href="link-test.html">文字</a>
絶対パス指定: <a href="http://laz.chu.jp/hp/tips/link-test.html">文字</a>
↑これはこの「ホームページできるかな」では同じファイルを指しています。
相対パス指定はサイト内(ディレクトリ・フォルダ内)でのリンク、絶対パス指定はインターネット上のリンク、です。
イメージとしては、相対パス指定は「うちのクラスの相川さん」、絶対パス指定は「日本の東京都○○区○○小学校1年2組出席番号1番相川○○」といったかんじです。
相対パス・絶対パス |
Point
普通にホームページ専用のフォルダを作り、その中にHTML文書を保存している限り、リンクは相対パス指定で済むはずです。絶対パス指定は他のホームページをリンクするときに使います。
※この絶対パス指定で画像を呼び出すのが「直リンク」です。
このページのトップへ
画像でリンク
文字の場合と同じく<body>〜</body>間の表示させたい部分に記述します。
| 表示例 |
記述 |

|
<a href="リンク先のURLやファイル名.html">
<img src="表示させたい画像GIFやJPG" width="画像の横幅" height="画像の高さ">
</a>

←この場合は・・・
<a href="link-test.html">
<img src="banner.gif" width="88" height="31">
</a> |
FAQ:青や紫色の枠線が付いてしまう!
リンクしたら枠線が表示される時は、以下のスタイルシートを記述するか、または<img>タグ内に border="0"
を記述してください。
<html>
<head>
<title> </title>
☆スタイルシートはこの部分に記述します☆
</head>
<body>
</body>
</html>
| スタイルシート <head>区間に |
<style type="text/css">
<!--
img { border: 0px}
-->
</style> |
| タグ <img>タグ内に |
<a href="link-test.html">
<img src="banner.gif" width="88" height="31"
border="0">
</a> |
※スタイルシートまたはタグのみでOKです。両方記述する必要はありませんよ。
このページのトップへ
リンクターゲット
リンク先をどのように開くか(表示させるか)の指定です。新しいウィンドウで表示させるか、同じウィンドウ内で表示させるか、などです。
そのまま
| <a href="リンク先.html" target="_self">文字や画像</a> |
そのまま2
| <a href="リンク先.html" target="_parent">文字や画像</a> |
※↑上記2つは同じウィンドウ内で表示されます。同じ働きです。
新しいウィンドウ(別窓)
| <a href="リンク先.html" target="_blank">文字や画像</a> |
同じウィンドウ
フレームなどに左右されず、ウィンドウいっぱいに開きます。
| <a href="リンク先.html" target="_top">文字や画像</a> |
フレーム指定
| <a href="リンク先.html" target="フレーム名">文字や画像</a>
|
■ページ全体に適用
ページ内のすべてのリンクターゲットが一括指定できます。新しいウィンドウですべて開くリンク集ページや、フレームを使用したページに便利ですよ。
これは <head> 〜 </head>内に記述します。すると<body>〜</body>の表示部分は普通にリンクするだけで、リンクターゲットが適用されます。
<html>
<head>
<title> </title>
☆この部分に記述します☆
</head>
<body>
</body>
</html>
| 記述 |
| <base target="リンクターゲット"> |
| 新しいウィンドウで開く記述 |
| <base target="_blank"> |
| フレームページへリンクの記述 |
| <base target="フレーム名"> |
Point:
<base target="リンクターゲット">
を、<head> 〜 </head>内に記述してリンクターゲットを一括指定しても、個別に
<a href="リンク先.html" target="リンクターゲット">文字や画像</a>
と指定して、リンクターゲットを変えられます。
例えば、リンク集のページですべて新しいウィンドウで開くようにリンクターゲットを一括指定しても、「HOME」や「BACK」などは個別にリンクターゲットを記述することによって、同じウィンドウ内で移動したりできますよ。
このページのトップへ
|