リンクさせてみよう
他のページや画像などのファイルに飛べるようするためのしくみをリンク、詳しくはハイパーリンクといいます。 このハイパーリンクがなければホームページは成り立たないと言っていいほど、サイトを作るため にHTMLを書くにあたっては大切なことなので、少し長くなりますが絶対に覚えてください。
ハイパーリンクをするために存在するのがA要素です。 リンクするためにA要素で囲まれた部分をアンカーと呼びます。タグの書き方は、開始タグが<a>、終了タグが</a>ですが、これだけでは特に何の効果もありません。 href属性を使う必要があります。
href属性
他のページや画像などのファイルにリンクするには、href属性を使います。 開始タグの書き方は、<a href="リンクしたいファイルのパス">です。
パスというのはファイルの置いてある場所、つまりURLとでも思ってください。 例えば、このサイトのトップページに、「トップページへ」という言葉でリンクするなら、
<a href="http://te-koku.com/hp/index.html">トップページへ</a> か、「index.html」は省略することができるので、 <a href="http://te-koku.com/hp/">トップページへ</a>
です。
実際に表示させてみると、「トップページへ」となります。
name属性でアンカーを作る
ページが長くなると、そのページの一部分にリンクしたくなる場合があるでしょう。 そういうときは、name属性でリンクさせたい部分にアンカーを作れば、 ページの一番最初ではなく、アンカーを作った部分に リンクさせることができます。
どういうことかといいますと、例えばこのページの、「href属性」という見出しにリンクさせたいとします。 その場合、「href属性」の部分にA要素を使い、開始タグにname要素で適当な名前をつける必要があります。
ここでは、「<a name="href">」と書きました。
では、「href属性」の部分にリンクさせるにはどうすればいいでしょうか。
<a href="a.html#href">「href」アンカーに飛びます。</a>
このようにhref属性の値で、リンク先のファイルの後に、# (半角のシャープ)を付けて、その後にアンカーの名前を書けば そのファイルのアンカーにリンクさせることができます。
下が実際にリンクさせてみた例です。
一番上に、「href属性」の見出しが表示されたと思います。
target属性
さらにA要素には、target属性というものもあります。
ここではいくつかあるtarget属性の値のうち、よく使われている「_blank」だけ説明します。
<a href="" target="_blank"></a>
これを使うとどうなるかといいますと、リンク先のページを新しいウィンドウで開きます。 つまり、右クリックして「新しいウィンドウで開く」をクリックしたのと同じことが起きます。
リンクするたびにあまりにもパチパチパチパチとウィンドウが立ち上がるのは うっとうしいですし、パソコンの動作が遅くなる可能性もあるので、target=_blankを使うのは 、他のホームページへのリンクなど最小限にとどめましょう。
実際に書いてみましょう
それでは、実際にA要素を書いてこのサイトのトップページにリンクさせてみましょう。
いつも通りh2タグを使った見出しで、「ハイパーリンクのテスト」と書き、 p要素の段落の中でA要素を使い、 <a href="http://te-koku.com/hp/">てーこく・ホームページ作成講座</a> と書いてください。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> 中略 <h2>ハイパーリンクのテスト</h2> <p> <a href="http://te-koku.com/hp/index.html">てーこく・ホームページ作成講座</a> </p>
表示例
へてむるクリエイターの場合
右クリック→「タグの挿入」、「ハイパーリンク」にあります。
href属性でリンクしたいなら「ハイパーリンク」を、name属性でアンカーを作りたいのなら 「アンカーの設定」を選択してください。
タグパレットなら、「カスタム」の右から6番目か、「リンク/画像」の一番左、name属性は左から二番目です。
target属性は、「ハイパーリンク」をクリックした後の画面で選択することができます。