他のページや他のサイトにリンクするには <a> を用います。
<a href="http://www.tohoho-web.com/how2/link.htm">リンク</a>
ジャンプ先が同じサイトの場合は http://～ を省略することができます。
<a href="/how2/link.htm">リンク</a>
ジャンプ先が同じフォルダの場合はさらに /～/ を省略することができます。
<a href="link.htm">リンク</a>
ひとつ上のフォルダのファイルにジャンプする場合は、「ひとつ上のフォルダ」を意味するドットドット(..)を用います。
<a href="../index.htm">トップ</a>
ページの途中にリンクするには、ジャンプしたい場所の任意のタグに id="名前" をつけておき、<a href="ページ#名前">...</a> でジャンプします。例えばこのトピックには次のように名前をつけています。
<h4 id="nameLink">ページの途中にリンクするには</h4>
そうして、次のようにリンクを張ります。
<a href="link.htm#nameLink">ページの途中にリンクするには</a>
<img> タグを <a> で囲むことにより、画像をリンクボタンにすることができます。border=0 を指定しないと画像の周りに枠線が表示されてしまいます。また、<img> タグの < の前や > の後ろにスペースや改行を空けてしまうと、ブラウザによっては画像の前後に小さなゴミのようなもの(下線付きのスペース文字)が表示されてしまうことがあります。
<a href="xx.html"><img src="xx.gif" alt="xx" border=0 width=10 height=10></a>
リンクの色を変えるには、<head>～</head> の間に以下の記述を追加します。
<style>
a:link { color: #0000cc; }
a:visited { color: #000080; }
a:active { color: #ff0000; }
</style>
ひとつひとつのリンクの色を個別に指定するには、次のようにします。
<a href="xx.htm" style="color:red">XXXX</a>
スタイルシートの text-decoration を用います。例えば、<head>～</head> の間に以下の記述を追加することで、そのページのすべてのリンクで下線を表示しないようにすることができます。
<style>
a { text-decoration: none; }
</style>
<head>～</head> の間に以下のように記述してください。IE4.0 以上が対応しています。スタイルシートを変更すれば、他にもフォントを大きくしたりなどいろいろアレンジすることができます。
<style>
a:hover { color: red; }
</style>
直前に見ていたページに戻るには、JavaScript の history.back() や history.go() を用いると便利です。
<a href="javascript:history.back()">[戻る]</a> <a href="javascript:history.go(-1)">[戻る]</a>
別ページにジャンプするには、<head>～</head> の間に下記の記述を追加してください。0 を 5 に変更すると、5 秒後に自動ジャンプします。
<meta http-equiv="Refresh" content="0; url=http://www.yahoo.co.jp/">
下記のテクニックを用いることで、セレクトボックスで選択したサイト(ページ)にジャンプさせることができます。
<select onchange="location.href=this.options[this.selectedIndex].value"> <option value="#">検索サイトにジャンプ <option value="http://www.yahoo.co.jp/">Yahoo <option value="http://www.google.co.jp/">Google <option value="http://www.infoseek.co.jp/">Infoseek </select>
Word や Excel などの文書ファイルを開かせるには、単にその文書へのリンクを張るだけで構いません。指定したファイルがダウンロードされ、.doc であれば Word、.xls であれば Excel など、拡張子に従って適切なアプリケーションが起動されます。
<a href="sample.doc">サンプル文書</a>
クリックするとウィンドウが閉じるような、閉じるリンクをつけるには、次のようにします。IE の場合、JavaScript を用いて開いたウィンドウはそのまま閉じることができますが、閲覧者があらかじめ開いていたウィンドウを閉じる際には、セキュリティの都合上、「ウィンドウは、表示中の Webページにより閉じられようとしています。このウィンドウを閉じますか？」の確認ダイアログが表示されます。
<a href="#" onclick="window.close()">[閉じる]</a>