HTML-テキストリンク

Webページには、他のページや特定のページの特定の部分に直接移動するさまざまなリンクを含めることができます。これらのリンクはハイパーリンクと呼ばれます。

ハイパーリンクを使用すると、訪問者は単語、フレーズ、画像をクリックしてWebサイト間を移動できます。したがって、Webページで利用可能なテキストまたは画像を使用してハイパーリンクを作成できます。

注意-link：/html/understanding_url_tutorial [Understanding URL]の短いチュートリアルを実行することをお勧めします

ドキュメントのリンク

リンクは、HTMLタグ<a>を使用して指定されます。このタグは*アンカータグ*と呼ばれ、開始<a>タグと終了</a>タグの間にあるものはすべてリンクの一部になり、ユーザーはその部分をクリックしてリンクされたドキュメントに到達できます。以下は、<a>タグを使用する簡単な構文です。

<a href = "Document URL" ... attributes-list>Link Text</a>

例

あなたのページでhttp://www.finddevguides.comをリンクする次の例を試してみましょう-

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>

   <body>
      <p>Click following link</p>
      <a href = "https://www.finddevguides.com" target = "_self">Tutorials Point</a>
   </body>

</html>

これにより、次の結果が生成されます。生成されたリンクをクリックすると、チュートリアルポイントのホームページ（この例）にアクセスできます。

ターゲット属性

前の例では target 属性を使用しました。この属性は、リンクされたドキュメントを開く場所を指定するために使用されます。以下は可能なオプションです-

Sr.No	Option & Description
1	_blank リンクされたドキュメントを新しいウィンドウまたはタブで開きます。
2	_self リンクされたドキュメントを同じフレームで開きます。
3	_parent リンクされたドキュメントを親フレームで開きます。
4	_top リンクされたドキュメントをウィンドウ全体で開きます。
5	targetframe 名前付き_targetframe_でリンクされたドキュメントを開きます。

例

次の例を試して、ターゲット属性に指定されたいくつかのオプションの基本的な違いを理解してください。

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.finddevguides.com/">
   </head>

   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index" target = "_blank">Opens in New</a> |
      <a href = "/html/index" target = "_self">Opens in Self</a> |
      <a href = "/html/index" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index" target = "_top">Opens in Body</a>
   </body>

</html>

これにより、次の結果が得られます。異なるリンクをクリックして、ターゲット属性に指定されたさまざまなオプションの違いを理解できます。

ベースパスの使用

同じWebサイトに関連するHTMLドキュメントをリンクする場合、すべてのリンクに完全なURLを指定する必要はありません。 HTMLドキュメントヘッダーで <base> タグを使用している場合は、これを取り除くことができます。このタグは、すべてのリンクのベースパスを提供するために使用されます。そのため、ブラウザは指定された相対パスをこのベースパスに連結し、完全なURLを作成します。

例

次の例では、<base>タグを使用してベースURLを指定します。後で、すべてのリンクに完全なURLを指定する代わりに、すべてのリンクへの相対パスを使用できます。

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.finddevguides.com/">
   </head>

   <body>
      <p>Click following link</p>
      <a href = "/html/index" target = "_blank">HTML Tutorial</a>
   </body>

</html>

これにより、次の結果が生成されます。生成されたリンクをクリックすると、HTMLチュートリアルにアクセスできます。

現在、指定されたURL <a href = "/html/index"は<ahref = "http://www.finddevguides.com/html/index%22と見なされています

ページセクションへのリンク

*name* 属性を使用して、特定のWebページの特定のセクションへのリンクを作成できます。 これは2段階のプロセスです。

'_注意-HTML5で廃止された_name_属性。この属性は使用しないでください。代わりに_id_および_title_属性を使用してください。_

まず、ウェブページ内でアクセスしたい場所へのリンクを作成し、次のように<a …>タグを使用して名前を付けます-

<h1>HTML Text Links <a name = "top"></a></h1>

次のステップは、ドキュメントとあなたが到達したい場所をリンクするハイパーリンクを作成することです-

<a href = "/html/html_text_links#top">Go to the Top</a>

これにより、次のリンクが生成されます。生成されたリンクをクリックすると、[トップに移動] *をクリックして、HTMLテキストリンクチュートリアルのトップに移動できます。

Go to the Top

リンクの色を設定する

<body>タグの link 、 alink および vlink 属性を使用して、リンク、アクティブリンク、および訪問済みリンクの色を設定できます。

例

以下をテストで保存し、任意のWebブラウザーで開いて、 link 、 alink 、および vlink 属性の動作を確認します。

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.finddevguides.com/">
   </head>

   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index" target = "_blank" >HTML Tutorial</a>
   </body>

</html>

これにより、次の結果が生成されます。リンクをクリックする前にリンクの色を確認し、次にアクティブにしたとき、およびリンクにアクセスしたときにその色を確認します。

ダウンロードリンク

テキストリンクを作成して、PDF、DOC、ZIPファイルをダウンロード可能にすることができます。これは非常に簡単です。あなただけの次のようにダウンロード可能なファイルの完全なURLを与える必要があります-

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>

   <body>
      <a href = "https://www.finddevguides.com/page.pdf">Download PDF File</a>
   </body>

</html>

これにより、次のリンクが生成され、ファイルのダウンロードに使用されます。

ファイルダウンロードダイアログボックス

ユーザーがリンクをクリックし、実際のコンテンツを表示する代わりに「ファイルのダウンロード」ボックスをポップアップするオプションを提供したい場合があります。これは非常に簡単で、HTTP応答でHTTPヘッダーを使用して実現できます。

たとえば、 Filename ファイルを特定のリンクからダウンロード可能にしたい場合、その構文は次のようになります。

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

注意-PERL CGIプログラムの詳細については、チュートリアルリンク：/perl/perl_cgi [PERL and CGI]を参照してください。

Html-text-links

目次