HTML ハイパーリンクの詳細な説明

ハイパーリンク

ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるため、Web サイト上で最も頻繁に使用される HTML 要素です。ハイパーリンクはブラウザとサーバー間の主なやり取り手段であり、次の技術で徐々にその研究を深めていきます。

— 注: 画像はリンクとしても使用できます。これについては、次の章「Web ページ上の画像」で詳しく説明します。

4.5.1 テキストへのリンクの追加

ハイパーリンクのタグは <a></a> です。テキストにハイパーリンクを追加する方法は、他の装飾タグと同様です。リンクを追加した後のテキストには、他のテキストと区別するための独自の特別なスタイルが適用されます。デフォルトのリンクスタイルは、下線付きの青いテキストです。ハイパーリンクは別のページにジャンプします。<a></a> タグには、新しいページのアドレスを指定する href 属性があります。 href で指定するアドレスは通常、相対アドレスを使用します。

— 注: Web サイトの開発では、ドキュメント相対アドレスがより一般的に使用されます。

D:\web\ ディレクトリに Web ページファイルを作成し、a.htm という名前を付けて、コード 4.18 に示すようにコードを記述します。

コード 4.18 ハイパーリンク設定: a.htm

<html>

<ヘッド>

<title>ハイパーリンク設定</title>

</head>

<本文>

<a href="ul_ol.htm">リスト設定ページに入る</a>

</本文>

</html>

ブラウザのアドレスバーに http://localhost/a.htm と入力すると、図 4.19 のようなブラウジング効果が表示されます。

図4.19 ハイパーリンク設定

図 4.19 からハイパーリンクのデフォルトスタイルを確認できます。ページ内のリンクをクリックすると、同じディレクトリ内の ul_ol.htm ページ (前のセクションのリスト設定ページ) にジャンプします。ブラウザの「戻る」ボタンをクリックして a.htm ページに戻ると、テキストリンクの色が紫色に変わり、このリンクがアクセスされたことが閲覧者に通知されます。

4.5.2 リンクのウィンドウを開く方法を変更する

デフォルトでは、新しいページを開くハイパーリンクは自身を上書きします。ブラウザのさまざまなニーズに応じて、読者はハイパーリンク用に新しいウィンドウを開く他の方法を指定できます。ハイパーリンクタグには設定用のターゲット属性があり、その値は _self (自己カバレッジ、デフォルト)、_blank (新しいウィンドウを作成して新しいページを開く)、_top (すべてのフレーム構造を無視してブラウザウィンドウ全体で開く)、_parent (上位レベルのウィンドウで開く) です。

— 注: _top メソッドと _parent メソッドはフレームページに使用されます。これについては、次の章で詳しく説明します。

4.5.3 リンクにヒントテキストを追加する

多くの場合、ハイパーリンクのテキストだけではリンクの内容を説明するのに十分ではありません。ハイパーリンクタグは、閲覧者に簡単にヒントを与えることができるタイトル属性を提供します。 title 属性の値はプロンプトコンテンツです。閲覧者のカーソルがハイパーリンク上に留まるとプロンプトコンテンツが表示されますが、ページレイアウトの整頓性には影響しません。 a.htm Web ページファイルを変更し、コード 4.19 に示すようにコードを記述します。

コード 4.19 ハイパーリンク設定: a.htm

<html>

<ヘッド>

<title>ハイパーリンク設定</title>

</head>

<本文>

<a href="ul_ol.htm" target="_blank" title="こんにちは、読者の皆様。プロンプトテキストが表示されています。このリンクをクリックすると、新しいウィンドウが開き、ul_ol.htm ページにジャンプします。">リスト設定ページに入ります</a>

</本文>

</html>

ブラウザのアドレスバーに http://localhost/a.htm と入力すると、図 4.20 のようなブラウジング効果が表示されます。

図4.20 ハイパーリンクプロンプトテキスト

4.5.4 アンカーとは何ですか?

多くの Web 記事には大量のコンテンツが含まれており、ページが非常に長くなります。閲覧者は、必要なコンテンツを見つけるために、ブラウザのスクロールバーを頻繁にドラッグする必要があります。ハイパーリンクのアンカー機能はこの問題を解決できます。アンカーは船のアンカーから派生します。アンカーを投下した後、船は簡単に流されたり、行方不明になったりすることはありません。実際、アンカーは 1 ページ内のさまざまな場所にジャンプするために使用され、一部の場所はブックマークと呼ばれます。

ハイパーリンクタグの name 属性は、アンカーの名前を定義するために使用されます。ページには複数のアンカーを定義できます。ハイパーリンクの href 属性は、名前に応じて対応するアンカーにジャンプできます。 D:\web\ ディレクトリに Web ページファイルを作成し、a_anchor.htm という名前を付けて、コード 4.20 に示すようにコードを記述します。

リスト 4.20 ハイパーリンクアンカー: a_anchor.htm

<html>

<ヘッド>

<title>ハイパーリンク設定</title>

</head>

<本文>

<a name="top">これがトップアンカーです</a>

<h2>アメリカ大統領</h2>

●1番目（1789-1797） <a name="1">これが最初のアンカーです</a>

名前: ジョージ・ワシントン

ジョージ・ワシントン

生年: 1732-1799

政党: 連邦

●第2回（1797-1801）<a name="2">第2回アンカーはこちら</a>

名前: ジョン・アダムス

ジョン・アダムス

生年: 1735-1826

政党: 連邦

●第3回（1801-1809年） <a name="3">こちらが3番目のアンカーです</a>

名前: トーマス・ジェファーソン

トーマス・ジェファーソン

生年: 1743-1826

政党：民主進歩党

●第4回（1809-1817年） <a name="4">第4回アンカーはこちら</a>

名前: ジェームズ・マディソン

ジェームズ・マディソン

生年: 1751-1836

政党：民主進歩党

●第5回（1817-1825） <a name="5">こちらが第5回アンカーです</a>

名前: ジェームズ・モンロー

ジェームズ・モンロー

生年: 1758-1831

政党：民主進歩党

</本文>

</html>l>

テストの前に、コード 4.20 から、アンカーも <a></a> タグを使用して定義され、アンカーの名前は name 属性を使用して定義されていることがわかります (名前には制限がなく、カスタマイズできます)。アンカーリンクを見つけるには、href 属性を使用して対応する名前を指定し、名前の前に # 記号を追加します。ブラウザのアドレスバーに http://localhost/a_anchor.htm と入力すると、図 4.21 のようなブラウジング効果が表示されます。

図4.21 ハイパーリンクアンカー

閲覧者がハイパーリンクをクリックすると、ページは href 属性値名のアンカー位置まで自動的にスクロールします。

— 注: アンカーを定義するタグ <a name=""></a> には、必ずしも特定のコンテンツは必要なく、単に位置決めとして機能します。

4.5.5 電子メール、FTP、Telnet リンク

ハイパーリンクを使用すると、Web ページの機能をさらに拡張できます。よく使用される機能には、電子メール、FTP、Telnet 接続などがあります。上記の機能を完了するには、ハイパーリンクの href 値を変更するだけです。電子メールを送信する形式は次のとおりです。

<a href = "mailto:email address">メールを送信</a>

電子メールアドレスは [email protected] のように完全である必要があります。

前述のように、Web ブラウジングでは http プロトコルが使用され、FTP サーバーでは接続に FTP プロトコルが使用されます。リンクの形式は次のとおりです。

<a href = "ftp://サーバーのIPアドレスまたはドメイン名">リンクテキスト</a>

FTP サーバーリンクと Web ページリンクの違いは、使用されるプロトコルが異なることです。 FTP にはサーバー管理者からのログイン許可が必要です。ただし、一部の FTP サーバーは匿名でアクセスできるため、一部の公開ファイルを取得できます。同様に、Telnet プロトコルを使用してサーバーに接続する場合も同様の方法を使用し、形式は次のようになります。

<a href = "telnet://サーバーのIPアドレスまたはドメイン名">リンクテキスト</a>

telnet プロトコルはほとんど使用されず、http プロトコルが最もよく使用されます。 D:\web\ ディレクトリに Web ページファイルを作成し、mail.htm という名前を付けて、コード 4.21 に示すようにコードを記述します。

リスト 4.21 ハイパーリンクのその他の設定: mail.htm

<html>

<ヘッド>

<title>ハイパーリンクのその他の設定</title>

</head>

<本文>

<a href="mailto:[email protected]" title="読者の皆様、メールを送信するにはここをクリックしてください。">私にメールを送信</a>

<a href="ftp://101.22.25.11" title="読者の皆様、FTP サーバーへようこそ。">FTP サーバーに接続します</a>

<a href="telnet://101.22.25.11" title="読者の皆様、Telnet サーバーへようこそ。">Telnet サーバーに接続します</a>

</本文>