HOME

楽しい消防団

自転車に乗ろう

私がせんむ

パソコンレスキュー隊

せんむのQ&A

PC改造部屋

宮中囃子連

掲示板

リンク集

パソコン レスキュー隊

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

PCレスキュー隊目次

HPの初歩の初歩目次 

 

リンクを貼ってみよう

リンク(正しくはハイパーリンク)は、文字や画像をクリックすると、他のページへジャンプする働きです。インターネットや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」にジャンプするリンクになります。この例の場合はリンク先が同じフォルダ内のファイルですのでファイル名だけでOKですが、
    違うサイト(別のHP)へリンクする場合はフルパス(http://・・・)でURL(アドレス)を書かなければいけません。

 

 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.ファイルを上書き保存しよう


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

 リンクのテスト

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

 

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

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

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

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


表を使ってレイアウトしよう  フレームページを作ろう  目次

       

おまけのページTOPへ

質問は掲示板へ

HPのトラブルはURLを書いてください

 

 

 

 


女の子お絵かき掲示板ナスカiPhone修理池袋 ブラジリアンワックス