ハイパーリンクの設定書式
書式　<a href="url">・・・</a>　　　　　　　文字列および画像にハイパーリンク設定

　　　url (Uniform Resource Locator) はリンクして表示するページまたは画像の保存場所とファイル名
　　　・・・は文字列／画像を表示するimgタグ　　　urlの解説参照

１　別のページを開く
　　例１.１　　　　　　　　　　　　　　　　　　　　 例１．２　　　　<img src="link.gif">
　　<a href="junbi.htm">ここをクリック</a>　　 　　 <a href="junbi.htm"></a>
　　　　リンク先　　　文字にリンク設定　　　　　　　　 リンク先　　　画像にリンク設定

２　画像を開く
　　例２.１　　　　　　　　　　　　　　　　　　　　 例２．２　　　　　　<img src="link.gif">
　　<a href="hana/hana1.jpg">ここをクリック</a>　　 <a href="hana/hana1.jpg"></a>
　　　　リンク先　　　　　　文字にリンク設定　　　　　　　　リンク先　　　画像にリンク設定

３　別のサイトを開く
　　例３．１
　　<a href="http://iroha-pc.hp.infoseek.co.jp/">北野台パソコンクラブHP</a>
　　　　　　　　　リンク先　　　　　　　　　　　　　文字にリンク設定

　　例３．２　　　　　　　　　　　　　　　　<img src="link.gif">
　　<a href="http://iroha-pc.hp.infoseek.co.jp/"></a>
　　　　　　　　　リンク先　　　　　　　　　　画像にリンク設定

４　別サイトの画像を表示する
　　例４．１
　　<a href="http://iroha-pc.hp.infoseek.co.jp/sozai/kitano.jpg">北野台パソコンクラブHP季節画像</a>
　　　　　　　　　リンク先　　　　　　　　　　　　　　　　　　　　　　　文字にリンク設定

　　例４．２　　　　　　　　　　　　　　　　　　　　　　　　<img src="link.gif">
　　<a href="http://iroha-pc.hp.infoseek.co.jp/sozai/kitano.jpg"></a>
　　　　　　　　　リンク先　　　　　　　　　　　　　　　　　　画像にリンク設定

５【６．ページを増やす　その１】で作成した【pet1.htm】の
　　次の４行に大きな画像へのリンクを設定する。　　　　　　　　　　　　【pet1.htm】完成サンプル

<td class="wh"><img src="pet1s.jpg" style="float:left"><br><br><br>ポチです。</td>
<td class="wh"><img src="pet2s.jpg" style="float:right"><br><br><br>タマです。</td>
<td class="wh"><img src="pet3s.jpg" style="float:left"><br><br><br>デブです。</td>
<td class="wh"><img src="pet4s.jpg" style="float:right"><br><br><br>ヌルです。</td>

　文字列と画像にハイパーリンクを設定する。
文字列 および 画像 のどちらでもクリックすると大きい画像を表示するよう次ぎのとおり赤文字部を追加します。

<td class="wh"><a href="pet1.jpg"><img src="pet1s.jpg" style="float:left"><br><br><br>ポチです。</a></td>
<td class="wh"><a href="pet2.jpg"><img src="pet2s.jpg" style="float:right"><br><br><br>タマです。</a></td>
<td class="wh"><a href="pet4.jpg"><img src="pet3s.jpg" style="float:left"><br><br><br>デブです。</a></td>
<td class="wh"><a href="pet4.jpg"><img src="pet4s.jpg" style="float:right"><br><br><br>ヌルです。</a></td>

６【index.htm】に子ページへのリンクを設定してください。              【index.htm】完成サンプル

【pet1.htm】へのリンクは次の赤文字部を書き加えます。
 その他の子ページにも同様のリンクを設定してください。

<td><a href="pet/pet1.htm">可愛らしいペット<br><img src="pet/pet1s.jpg"</a></td>


解説
リンクに設定した画像について
画像にリンクを設定すると、それを明示するために画像の周囲にリンク色の境界線(border)ができる。
borderプロパティの値をnoneに設定するとその境界線の表示をなくすことができる。

スタイルシート解説参照　　borderプロパティ

タグ解説参照　　<a>タグ