リンクを貼ってみよう

パソコン　レスキュー隊

ホームページの初歩の初歩

PCレスキュー隊目次

HPの初歩の初歩目次　

リンクを貼ってみよう

リンク（正しくはハイパーリンク）は、文字や画像をクリックすると、他のページへジャンプする働きです。インターネットやＨＰの醍醐味ですね。テキスト（文字列）はもちろん、画像にもリンクを設定することもできます。

　1.リンクするHTMLを書いてみよう

　
メモ帳を起動し、下のタグを書いて、「linktest.html」という名前で保存します。
　保存先は「test.html」と同じ「私のHP」フォルダの中を指定します。

<HTML>
<HEAD>
<TITLE>ホームページのリンクのテスト</TITLE>
</HEAD>
<BODY>
<A HREF="test.html">ここをクリックするとジャンプします</a>
</BODY>
</HTML>

「linktest.html」ファイルをダブルクリックして開くと、下のように下線が引かれていますね。
そこにマウスを乗せると、カーソルが手の形に変わると思います。さらに、そこでクリックすると「test.html」ファイルにジャンプします。これがリンクです。

ここをクリックするとジャンプします

<A HREF="test.html">○○○</a>　がリンクのタグです。
「○○○」をクリックすると「test.html」にジャンプするリンクになります。この例の場合はリンク先が同じフォルダ内のファイルですのでファイル名だけでＯＫですが、違うサイト（別のＨＰ）へリンクする場合はフルパス（http://・・・）でＵＲＬ（アドレス）を書かなければいけません。

　2.画像にリンクを貼ってみよう

「表示」→「ソース」とクリックすると、メモ帳が起動してHTMLソースが見られます。次のようにタグを書き換えてみましょう。

<HTML>
<HEAD>
<TITLE>ホームページのリンクのテスト</TITLE>
</HEAD>
<BODY>
リンクのテスト
<BR>
<A HREF="test.html">
<IMG SRC="images/gazou02.gif" border="0">
</a>
<BR>
画像をクリックするとジャンプします
</BODY>
</HTML>

リンクを貼る場所にテキスト（文字）の代わりに画像のタグを書きます。

　3.ファイルを上書き保存しよう

「ファイル」→「上書き保存」して、ブラウザの「更新」ボタンを押すと、下のように表示されると思います。画像が出ましたか？
　万一、画像が出ないときや、うまくジャンプしない時は画像のファイル名、リンク先のファイル名をもう一度確認しましょう。一文字でも違うとエラーです。大文字、小文字、全角、半角に注意。

　リンクのテスト

　
　画像をクリックするとジャンプします

　画像にリンクを設定する時の注意事項

ここで、大事なのは「test.html」「linktest.html」ファイルと画像ファイルの保存場所の関係です。「test.html」と「linktest.html」は同じ「私のHP」フォルダの中ですので、リンク先はファイル名のみでＯＫです。

しかし「gazou02.gif」ファイルは「linktest.html」と同じ「私のHP」フォルダの中の、さらに「images」フォルダの中にありますので、「images/gazou02.gif」と書く必要があります。

「border="0"」　というのは、画像にリンクを設定したとき、画像の周りに青い枠が出ないようにする属性です。これを書かないと、画像の周りに青い枠線が出て見栄えがよくありません。