ハイパーリンク


これまでは、ページの装飾方法について述べてました。これからはHTMLの本質であるハイパーテキストを作るための方法を述べます。

リンクを張る

ハイパーテキストとは、同一ページのある場所、または、まったく異なる他のページへの移動を含むテキストです。テキスト中の単語やアイコン、ボタン等をクリックすれば、他のページに移動できます。したがって、ハイパーテキストは、複数の情報を関連づけることができるテキストです。また、他のページに移動することを可能にすることを「リンクを張る」といいます。

他のページに移動するためには、「どこへ」移動するかを指定する必要があります。例えば、現在のページから東北学院大学のホームページに移動できるようにリンクを張るためには、

<a href="http://www.tohoku-gakuin.ac.jp/"> 東北学院大学のホームページ</a>

という指定をします。このような指定をすると、「東北学院大学のホームページ」という文字をクリックすると東北学院大学のホームページに移動することができます。この例からわかるように、「どこへ」の指定は、目的とするリンク先のページのURLを

<a href="URL"> 〜</a>

のように指定します。

また、他のホームページだけでなく、他のHTMLドキュメントへリンクを張るには、URLの部分に、HTMLドキュメントのファイル名を指定します。

上記の例は、「東北学院大学のホームページ」という文字列をクリックすれば、そのURLへ移動できる例ですが、絵や写真をクリックすると、それに関連のあるページにリンクを張ることもできます。以下のように、上記の例の文字列の部分を、絵を表示するように書き換えます。

<a href="URL"><IMG SRC="絵のファイル"></a>

ここで、"URL"は、移動先のURLになります。

絵の作成は、例えば、「すべてのプログラム(P)」→「アクセサリ」→「ペイント」の順に進むと、オリジナルの絵を作成することができます。絵を作成した後は、保存先を、HTMLドキュメントがあるフォルダを指定し、ファイル名を記述してください。また、ファイルの種類で、ビットマップ(bmp)、jpeg、gif、pngのどれかを指定してください。そうすると、ファイル名のあとに、どの形式のファイルかがわかるように、「絵のファイル名.bmp」、「絵のファイル名.jpg」、「絵のファイル名.gif」、「絵のファイル名.png」という拡張子がついて保存されます。例えば、ファイル名が、"gakuin"で、png形式で保存した場合、ファイルは、"gakuin.png"として保存されます。 この"gakuin.png"という絵をクリックし、経営学科のホームページに移動するように指定する場合、

<a href="http://www.tohoku-gakuin.ac.jp/"><IMG SRC="gakuin.png"></a>

のように指定します。

リンクの文字の色を変える

リンクの文字列と他の文字列とをはっきり区別するために、リンクの文字列の色や、すでに行ったことのあるリンクの文字列の色を変えることもできます。例えば、通常の文字列の色を「黒」、リンクの色を「金」、すでに行ったことのあるリンクの色を「銀」に指定するには、<BODY>タグ中で、オプションを以下のように指定します。

<BODY TEXT="#000000" LINK="#000080" VLINK="#c0c0c0">

ここで、TEXTは通常の文字列の色、LINKはリンクの色、VLINKはすでに行ったことのあるリンクの色を、それぞれ3連16進数表記で指定します。