HTMLの勉強(ハイパーリンク編)

<目次>
 6. ハイパーリンク
  1)同じディレクトリ内にあるドキュメント(ホームページ)間をリンクします。(サイト内リンク)
  2)異なるディレクトリ内にあるドキュメント(ホームページ)間をリンクします。(サイト内リンク)
  3)アンカーリンク(サイト内リンク)
  4)サイト外リンク
  5)メーリングソフトへのリンク

6. ハイパーリンク
 

ハイパーリンクとは、リンクオブジェクト(テキスト、イメージなど)をクリックすることで同じホームページ内の異なる行にジャンプ(リンク)したり、他のページや他のサイトへジャンプ(リンク)することをハイパーリンクといいます。
 ここで言う「サイト」とは、ユーザに割り当てられるホームページエリアを言います。
 ハイパーリンクには、以下の種類があります。
  1.サイト内リンク
    サイト内リンクは、一つのホームページエリア内でリンクを張ることを言います。
    サイト内リンクは、更に2種類に分かれます。
     ①ドキュメント内リンク
       一つのホームページ内で異なる行にリンクすることを言います。
     ②ドキュメント外(ページ間)リンク
       ホームページ間でリンクを張ることを言います。
    ①②を組み合わせて他のホームページの指定行にリンクを張ることができます。

  2.サイト外リンク
    他(他人)のホームページエリアのホームページにリンクを張ることを言います。
     1.の①②を組み合わせて他のホームページの指定行にリンクを張ることができますが、あまり使われていません。ほとんどは、1.②にあたります。

 ハイパーリンクするためには、リンク先URLを指定しないといけません。URLとは、インターネット資源(インターネットリソース)の利用を要求するフォーマットのことで、その要求方法には以下の2種類があります。
  1.相対指定
    URLを現在の場所(リンクを張るプログラムがある位置)からディレクトリパスをたどってリンクされるファイルを指定する方法です。
    この方法はサイト内リンクでは使えますが、サイト外リンクでは使えません。

  2.絶対指定
    URLをリンクするサイトのドメイン名からディレクトリパスをたどってリンクされるファイルを指定する方法です。
     ドメイン名とはホームページを見るときに指定するインターネット上のコンピュータ名で「www.lacoms.net」などがこれにあたります。
     この方法はサイト内リンク、サイト外リンク両方で使えます。
    ただし、この方法でホームページを作る場合は、インターネット環境が実現していないとリンクの確認ができません。(ドメイン名がインタネット上のコンピュータ名であるためです。)

 ハイパーリンクには、次のタグが使われます。
  <a href="ハイパーリンクするURL">

  1) 同じディレクトリ内にあるドキュメント(ホームページ)間をリンクします。(サイト内リンク)
    a. 以下のディレクトリを作成しましょう。(図Fig6-1の赤の部分を作ってください。)
     
    b. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html6-1.htm」を作成します。
    c. b.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>同じディレクトリ内にあるドキュメント間をリンクします。(html6-1.htm)</title>
</head>
<body>
<p>ページ1(html6-1.htm)です。 </p>
<p><a href="html6-2.htm">ページ2(html6-2.htm)へリンクします。</a> </p>
</body>
</html>
    d. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html6-2.htm」を作成します。
    e. d.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>同じディレクトリ内にあるドキュメント間をリンクします。(html6-2.htm)</title>
</head>
<body>
<p>ページ2(html6-2.htm)です。 </p>
<p><a href="html6-1.htm">ページ1(html6-1.htm)へリンクします。 </a></p>
</body>
</html>
    f. ブラウザで「html6-1.htm」を開いてリンクをクリックしてリンクしていることを確認してください。(サンプルの表示
    g. プログラムの説明です。
       実際にハイパーリンクしているタグは次のタグです。
 「html6-1.htm」のプログラムでは次のタグです。
   <a href="html6-2.htm">ページ2(html6-2.htm)へリンクします。</a>

 「html6-2.htm」のプログラムでは次のタグです。
   <a href="html6-1.htm">ページ1(html6-1.htm)へリンクします。</a>
 赤字の部分がリンクする相手のURLを指定する部分です。それぞれが、お互いのページにリンクしていることが分かります。
 この部分を詳しく説明すると次のようになります。
  href="ディレクトリパス/リンクするホームページファイル名"の形でURLを書きますが、「ディレクトリパス」が書かれていません。これは、同じディレクトリに「html6-1.htm」、「html6-2.htm」が存在するためディレクトリパスを指定する必要がないからです。
 ちなみに、厳密には、次のように先頭に「.」をつけます。これは、現在のディレクトリ(カレントディレクトリ)示します。
  <a href="./ディレクトリパス/リンクするホームページファイル名">
 しかし、これは省略してもかまわないようになっています。

 次に実際にリンクするためのオブジェクトの指定ですが、これは、テキストやイメージにリンクをつけることができます。
 リンクを付けるオブジェクトは、<a href="URL">と</a>の間に書きます。また、テキストの場合は、<font>タグを使って書式指定もできます。
次にタグを示します。
 テキストにリンクを付ける場合
  <a href="html6-1.htm">ページ1(html6-1.htm)リンクを付けるテキスト</a>
 イメージにリンクを付ける場合
  <a href="html6-1.htm">ページ1(html6-1.htm)<img src="URL"></a>
 次に、異なるディレクトリに存在するドキュメントのリンクをして見ましょう。
  2) 異なるディレクトリ内にあるドキュメント(ホームページ)間をリンクします。(サイト内リンク)
    a. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html6-3.htm」を作成します。
 このプログラムは、ディレクトリ(page0)の下にある「html6-4.htm」にリンクします。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>異なるディレクトリ内にあるドキュメント(ホームページ)間をリンクします。(html6-3.htm)</title>
</head>
<body>
<p>ページ3(html6-3.htm)です。 </p>
<p><a href="page0/html6-4.htm">ディレクトリ(page0)の下(ディレクトリ(public_html)の一つしたの階層のディレクトリ)にあるページ4(html6-4.htm)にリンクします。</a></p>
</body>
</html>
    b. 「page0」ディレクトリ(フォルダ)の下にホームページファイル「html6-3.htm」を作成します。
    c. b.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>異なるディレクトリ内にあるドキュメント(ホームページ)間をリンクします。(html6-4.htm)</title>
</head>
<body>
<p>ページ4(html6-4.htm)です。</p>
<p><a href="../html6-3.htm">ディレクトリ(public_html)のすぐ下(ディレクトリ(page0)の一つ上の階層のディレクトリ)にあるページ3(html6-3.htm)へリンクします。</a></p>
</body>
</html>
    d. ブラウザで「html6-3.htm」を開いてリンクをクリックしてリンクしていることを確認してください。(サンプルの表示
    e. プログラムの説明です。
       実際にハイパーリンクしているタグは次のタグです。
 「html6-3.htm」のプログラムでは次のタグです。
  <a href="page0/html6-4.htm">ディレクトリ(page0)の下(ディレクトリ(public_html)の一つしたの階層のディレクトリ)にあるページ4(html6-4.htm)にリンクします。</a>

 「html6-4.htm」のプログラムでは次のタグです。
   <a href="../html6-3.htm">ディレクトリ(public_html)のすぐ下(ディレクトリ(page0)の一つ上の階層のディレクトリ)にあるページ3(html6-3.htm)へリンクします。</a>
 赤字の部分がリンクする相手のURLを指定する部分です。それぞれが、お互いのページにリンクしていることが分かります。
 この部分を詳しく説明すると次のようになります。
  href="ディレクトリパス/リンクするホームページファイル名"の形でURLを書きますが、異なるディレクトリ間にあるホームページをリンクする場合は、その道筋(パス)つまり「ディレクトリパス」が書かれていなければいけません。
 このディレクトリパスは、リンクを付けるホームページ(リンクタグをプログラムしているホームページプログラム)が存在する位置からリンクされるホームページが存在するまでの道筋(パス)を書きます。そして、最後にリンクするホームページのファイル名を指定します。
 ディレクトリパスの考え方は、以下のようになります。
 ・下層のディレクトリに入るときは、そのディレクトリ名を書きます。
    href="page0/html6-4.htm"の「page0」ディレクトリは、リンクを付けるホームページプログラムが存在するディレクトリから一つ下の階層でその中にある「html6-4.htm」にリンクすることを示しています。
   「/」は、ディレクトリとディレクトリやディレクトリとファイルの区切りを表す記号です。
   UNIXとインターネットでは、「/」が使われます。
   Macintoshは「:」で、Windowsは「¥」になります。
   この記号が連続して2つ書かれているときは、「インターネット上」、「ネットワーク上」へのアクセスを示します。

 ・上層のディレクトリに戻るときは、「..」を書きます。
   
href="../html6-3.htm"の「..」は、一つ上の階層のディレクトリを指します。(戻ります。)
  「../..」と書くと二つ上の階層のディレクトリを指します。(「..」の数分だけ階層を戻ります。)
  たとえば、Fig6-1で「html6-4.htm」から「html6-5.htm」へリンクする場合は、「html6-4.htm」のプログラムは、以下のようになります。
   <a href="../page1/html6-5.htm">ホームページ「html6-4.htm」から「html6-5.htm」リンクします。</a>
   これは、「html6-4.htm」は、存在するディレクトリ(page0)に存在しますが、「html6-5.htm」は、ディレクトリ(page1)の下にあります。ディレクトリ(page1)へ到達するための道筋(パス)は、ディレクトリ(page0)から一つ上の階層に戻って(..)ディレクトリ(public_html)の下の階層のディレクトリ(page1)に入るために上記のようなプログラムになります。ディレクトリ(page0)から一つ上の階層に戻るとディレクトリは、「public_html」なっていることに注意してください。
  3) アンカーリンク(サイト内リンク)
     アンカーリンクは、ホームページの途中にアンカータグをつけることでページの途中にリンクさせることができます。
 アンカーリンクには、一つのホームページ内でリンクする方法と、ホームページ間でリンク先のホームページの途中にリンクさせる方法があります。
    一つのホームページ内でリンクする方法
      a. 「page2」ディレクトリ(フォルダ)の下にホームページファイル「html6-6.htm」を作成します。
      b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
        <html>
<head>
<title>アンカーリンク(一つのホームページ内でリンクする方法)</title>
</head>
<body>
<p>アンカーリンク(一つのホームページ内でリンクする方法)</p>
<p>プログラム名:html6-6.htm</p>
<p>メニュー<br>
 <a href="#M1">アンカー「M1」へリンクします。</a><br>
 <a href="#M2">アンカー「M2」へリンクします。<br>
</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="M1"></a>アンカー「M1」です。<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="M2"></a>アンカー「M2」です。<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</p>
</body>
</html>
      c. ブラウザで「html6-6.htm」を開いてリンクをクリックしてリンクしていることを確認してください。(サンプルの表示
      d. プログラムの説明です。
         アンカーリンクをしているプログラムは、以下のプログラムです。
   <a href="#M1">アンカー「M1」へリンクします。</a>
”#M1”がアンカーにリンクする部分で”#アンカー名”で指定するとそのアンカーへリンクします。
 リンク先のアンカーは、以下のタグでプログラムします。
  <a name="アンカー名"></a>アンカー「M1」です。
アンカー名は、リンクを付けるタグで指定するアンカー名と同じでないとリンクできません。
    ホームページ間でリンク先のホームページの途中にリンクさせる方法
      a. 「page2」ディレクトリ(フォルダ)の下にホームページファイル「html6-7.htm」を作成します。
      b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
        <html>
<head>
<title>アンカーリンク(ホームページ間でリンク先のホームページの途中にリンクさせる方法)</title>
</head>
<body>
<p>アンカーリンク(ホームページ間でリンク先のホームページの途中にリンクさせる方法)</p>
<p>プログラム名:html6-7.htm</p>
<p>メニュー<br>
 <a href="../page3/html6-8.htm#M3">ディレクトリ「page3」の下にある「html6-8.htm」のマーカ「M3」にリンクします。 </a>
</body>
</html>
      b. 「page3」ディレクトリ(フォルダ)の下にホームページファイル「html6-8.htm」を作成します。
      c. b.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
        <html>
<head>
<title>アンカーリンク</title>
</head>
<body>
<p>アンカーリンク</p>
<p>プログラム名:html6-8.htm<br>
</p>
<p><a href="../page2/html6-7.htm#M1">ディレクトリ「page2」の下にある「html6-7.htm」のアンカー「M1」にリンクします。</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="M3"></a>アンカー「M3」です。<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</p>
</body>
</html>
      d. ブラウザで「html6-7.htm」を開いてリンクをクリックしてリンクしていることを確認してください。(サンプルの表示
      e. プログラムの説明
        異なるディレクトリ間のホームページ間のリンクと同じページ内のアンカーリンクの説明を参照してください。
  4) サイト外リンク
     サイト外リンクは、他のサイトのホームページにリンクするためURLから指定する絶対指定しか利用できません。以下にYahoo!とGoogleにリンクする方法をやって見ます。
    a. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html6-9.htm」を作成します。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>サイト外リンク</title>
</head>
<body>
<p>サイト外リンクです。</p>
<p>プログラム名:html6-9.htm</p>
<p><a href="http://www.yahoo.co.jp/index.html">Yahoo!へリンクします。 </a><br>
<a href="http://www.google.com/index.html">Googleへリンクします。</a></p>
</body>
</html>
    c. ブラウザで「html6-7.htm」を開いてリンクをクリックしてリンクしていることを確認してください。(サンプルの表示
    d. プログラムの説明です。
     

絶対指定でサイト外リンクしているプログラムは、以下です。
  <a href="http://www.yahoo.co.jp/index.html">Yahoo!へリンクします。 </a>
 URL(http://www.yahoo.co.jp/index.html)は、以下の意味を持っています。
  http: → インターネット(ネットワーク)上で使用されるネットワークアプリケーションのプロトコルを表します。
        http:は、ホームページに関するネットワークアプリケーションのプロトコルです。
        ftp:は、FTPに関するネットワークアプリケーションのプロトコルです。
        mailto:は、メールに関するネットワークアプリケーションのプロトコルです。 などがあります。
  // → インターネット上のネットワークパスを表します。(2)e.を参照してください。)
  www.yahoo.co.jp →
     インターネット上に存在するホスト(コンピュータ)の名前でドメイン名といいます。
     この名前は、世界に二つと同じものはありません。
  index.html →
     インターネットクライアント(ホームページを見るコンピュータ)に実際にダウンロード
     するファイル名を指定します。このファイル名は、省略することもできますが、Web
     サーバのほうで指定されているファイル名だけ省略していいことになってます。
     通常、トップ(一番先に表示される)のページのファイル名は、省略できるように
     設定されています。したがって、トップのページに使えるファイル名は、管理者
      (プロバイダなど)から知らされます。

  5) メーリングソフトへのリンク
     メーリングソフトへのリンクは、他のホームページのリンクするのではなく、メールをするためのアプリケーションが起動します。通常は、件名と本文を入力して送信します。「ご意見等はこちらまで」となっているのは、この機能を使っています。Webメールなどは、別の方法が使われています。
    a. public_html」ディレクトリ(フォルダ)の下にホームページファイル「html6-10.htm」を作成します。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>メーリングソフトへのリンク</title>
</head>
<body>
<p>メーリングソフトへのリンクをします。</p>
<p>「<a href="mailto:lacoms@lacoms.net">ご意見・ご希望等はこちらまで</a>」 </p>
</body>
</html>
    c. ブラウザで「html6-10.htm」を開いてリンクをクリックしてリンクしていることを確認してください。(サンプルの表示
    d.

 メーリングソフトへのリンクをしているのは以下のプログラムです。
  <a href="mailto:lacoms@lacoms.net">ご意見・ご希望等はこちらまで</a>
 mailto: → メーリングソフトネットワークアプリケーションを開くためのプロトコルです。どのメーリングソフトを開くかは、ブラウザやシステム設定で設定できます。
 lacoms@lacoms.net → メールを送信するメールアドレスを書きます。するとメーリングソフトの宛先には、自動的にこのアドレスが設定されます。これ以外は、通常のリンクと同じです。
  ここに、他人のメールアドレスや、携帯のメールアドレスを設定するのは、やめましょう。いたずらメールや未承諾広告の原因になります。

ページ3

ページ2へ  ページ4へ