HTMLハイパーリンク_HTML/Xhtml_Webページ制作の詳細説明

ハイパーリンク

ハイパーリンクは、Web サイトで頻繁に使用される HTML 要素です。これは、Web サイトのさまざまなページがハイパーリンクによって接続されており、ハイパーリンクによってページ間のジャンプが完了するためです。ハイパーリンクはブラウザとサーバー間の対話の主な手段であり、次のテクノロジーでハイパーリンクについて徐々に詳しく学んでいきます。

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

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

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

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

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

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

<本体>

リスト設定ページに入る

ブラウザのアドレス バーに 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 属性を提供します。 title 属性の値はプロンプトの内容です。ビューアのカーソルがハイパーリンク上にあると、プロンプトの内容が表示されます。これは、ページ レイアウトのきれいさには影響しません。 a.htm Web ページ ファイルを変更し、コード 4.19 に示すようにコードを記述します。

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

<本体>

リスト設定ページに入ります

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

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

4.5.4 アンカーとは

多くのウェブ記事には多くのコンテンツが含まれているため、ページが非常に長くなり、閲覧者は必要なコンテンツを見つけるためにブラウザのスクロール バーを常にドラッグする必要があります。ハイパーリンクのアンカー機能は、アンカーを船のアンカーから導き出し、アンカーを落とした後、船が簡単に流されたり、迷ったりすることを防ぎます。実際、アンカーは 1 ページ内の別の場所にジャンプするために使用され、ブックマークと呼ばれる場所もあります。

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

コード 4.20 ハイパーリンク アンカー: a_anchor.htm

<本体>

ここがトップアンカーです

1 位

2 番目

第3期

第 4 回

第 5 回

第6回

アメリカ合衆国大統領

●第 1 期 (1789-1797)これは第 1 期のアンカーです

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

ジョージ・ワシントン

生没年: 1732-1799

政党:: 連盟

●第 2 期 (1797-1801)これは第 2 期のアンカーです

名前: ジョン・アダムス

ジョン・アダムス

生没年: 1735-1826

政党:: 連盟

●第 3 期 (1801-1809)これは第 3 期のアンカーです

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

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

生没年: 1743-1826

政党:: 中国共産党

●4 代目 (1809-1817)これは 4 代目の錨です

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

ジェームズ・マディソン

生没年: 1751 ～ 1836

政党: 中華民主共和国

●第 5 代 (1817-1825)これは第 5 代の錨です

名前: ジェームス モンロー

ジェームズ・モンロー

生没年: 1758 ～ 1831

政党: 中華民主共和国

l>

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

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

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

— 注: アンカーを定義するタグ は必ずしも特定のコンテンツを必要とするわけではなく、単なる位置決めにすぎません。

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

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

メールを送信

電子メール アドレスは完全である必要があります (intel@qq.com など)。

前述したように、Web の閲覧には http プロトコルが使用され、FTP サーバーは FTP プロトコルを使用して接続されます。

リンクテキスト

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

リンクテキスト

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

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

<本体>

メールを送信

FTP サーバーに接続

Telnet サーバーに接続

s

ブラウザのアドレス バーに http://localhost/mail.htm と入力すると、ブラウジング効果は図 4.22 のようになります。

図 4.22 ハイパーリンクのその他の設定