HTML でのページのリンク-htmlチュートリアル-php.cn

HTML でのリンクページの構文

HTML を使用してページにリンクするにはどうすればよいですか?

ブックマークを作成するためのリンク

ドキュメントをダウンロードするためのリンク

HTML でのページのリンク例

例 #2

Example #3

Conclusion

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML でのページのリンク

PHPz

Sep 04, 2024 pm 04:51 PM

html html5 HTML Tutorial HTML Properties HTML tags

リンクは単にクリック可能なテキストとして定義されているため、このテキストがクリックされるたびにあるページから別のページに移動するのに役立ちます。あるページから別のページに移動するには、ページ、画像、Web サイトなどの要素へのリンクを指定します。 HTML リンクはを使用します。パスを持つ href 属性を持つタグは、実際にはジャンプしたいのです。 HTML コードに含まれるリンクはデフォルトで青色で表示されます。ユーザーが以前にこのリンクにアクセスしたことがある場合は、紫色で表示されます。 CSS を使用してこのリンクの色を変更することもできます。このトピックでは、HTML でのページのリンクについて学習します。

HTML でのリンクページの構文

HTML を使用して実際にページのリンクがどのように行われるかを見てみましょう。

構文:

<a href="url"> Text_Content </a>

ログイン後にコピー

上記の構文、アンカータグは、ターゲットリンクなどの定義された属性を使用して、新しいターゲットページまたはドキュメントを定義して開くのに役立ちます。

これは、HTML ファイルパスのコンテンツで前述した絶対ファイルパスとまったく同じように機能します。

構文:

<a href="url"></a<strong>>

ログイン後にコピー

同じ構文を使用してコンテンツの単純なパスを定義することで、Web サイトの特定のページまたは部分を開くこともできます。

特定のページを開く必要がある場合は、

のような相対ファイルパスを使用することもできます。

構文:

<a href="page_name.html"></a>

ログイン後にコピー

HTML リンクを使用すると、空白のブラウザウィンドウを開いたり、構文を使用して Web ページを新しいウィンドウで開いたりできるため、もう 1 つ興味深いことができます。

構文:

<a href="Browser's _URL" target="_blank"></a>

ログイン後にコピー

親ウィンドウで Web ページを開きたい場合は、次のような構文を使用することもできます:

構文:

<a href="path" target="_parent"> </a>

ログイン後にコピー

HTML を使用してページにリンクするにはどうすればよいですか?

前と同様に、href 属性を持つアンカータグを使用して、Web ページ、画像、その他のドキュメントをリンクする方法を説明しました。これは、絶対パスと相対パスの両方を定義することによって行われます。

私たちは、新しい空白のウィンドウを開く、親ウィンドウで Web ページを開く、デフォルトで使用しているようにセルフウィンドウでページを開く、ドキュメントを開くなどの機能を実行するためのリンクのターゲットを処理する方法にも精通しています。 _top 属性などを使用して、フルブラウザウィンドウで実行します。

ブックマークを作成するためのリンク

HTML のリンクを使用してブックマークアンカーを作成する方法を見てみましょう。これらの機能は、Web ページのブックマークとして機能します。大きなページデータから何かを見つけたいときは、テキストまたはドキュメントをリンクとして定義するだけで、このターゲットの場所に直接ジャンプできます。

ブックマークを定義するには、タグ内の href に含まれる「#」と呼ばれる記号を渡すことにより、その値よりも実際にジャンプしたい特定の要素に属性として ID を追加する必要があります。。これは以下に示すとおりです:

例:

<a href="#home"> Homepage </a>
<h4 id="home"> Home </a>
<h6>This code works as a bookmark, so can jump directly to the home
Section by clicking on link </h6>

ログイン後にコピー

href 属性を使用してアンカータグにそのページの URL を定義するだけで、別のページから特定のセクションを直接開くこともできます。これは次のとおりです:

例:

<a href="Demo.html #contactus"> Contact US </a>

ログイン後にコピー

ドキュメントをダウンロードするためのリンク

HTML でのリンクを利用して、ドキュメントのダウンロードに役立つリンクを作成することもできます。テキストをリンクとして定義するのと同じものがあり、宛先ファイルのパスを URL として追加するだけなので、このリンクをクリックするたびに、接続されているドキュメントまたは Web ページが自動的にダウンロードされます。そのため、PDF、zip、jpg などのファイル形式をダウンロードできます

例:

<a href="downloads/demo.pdf"> This will download file in PDF format </a>
<a href="downloads/brochures.zip"> This will download file in zip
Format </a>
<a href="downloads/dinjo.jpg"> This will download file as a Image</a>

ログイン後にコピー

HTML リンクとしての画像: HTML リンクのもう 1 つの機能は、画像を HTML ドキュメント内のリンクとして考慮することです。これは次のように定義できます:

例:

<a href="demo.html"> <img src=”travelling.png alt="Travel"> </a>

ログイン後にコピー

リンクとしてのボタン: HTML ではボタンをリンクとして定義することもできます。さらに、JavaScript コードを追加する必要があります。したがって、クリックイベントが発生すると、リンクされたページが開きます。

HTML でのページのリンク例

以下に挙げる例は次のとおりです

例 #1

この例では、Web サイト用のリンクと、システムにローカルに保存されている Web ページ用の単純な HTML リンクを追加しています。

コード:

<!DOCTYPE html>
<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>HTML Page Link</h2>
<p>Stay stunned with us for the latest news and update across all over globe </p>
<h4><a href="https://timesofindia.indiatimes.com/">Latest News and Updates</a></h4>
<p>Open another webpage by linking pages in HTML</p>
<h4><a href="Webpage%20Design%20HTML.html">To browse new webpage click Here</a></h4>
</body>
</html>

ログイン後にコピー

出力:

最初のリンクの場合、Web サイトが開きます

2 番目のリンクでは、ローカルシステムに保存されている Web ページが開きます

例 #2

これは、クリックされるたびに新しいタブで Web ページを開くためのリンクと、新しいドキュメントを開くためのリンクとして画像を使用していることを示す例です。

コード:

<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>linking Pages in HTML</h2>
<p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p>
<h4><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4>
<h2>HTML Image as Page Link</h2>
<p>As we discussed we can give link to the image, so are giving link to the image here which will open another page.</p>
<a href="Webpage%20Design%20HTML.html">
<img src="t3.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>

ログイン後にコピー

出力:

The first link to open another page in the new target window:

Image as a link to open another webpage:

Example #3

In this example, we are using Button as a link.

Code:

<!DOCTYPE html>
<html>
<body>
<h4>Linking Pages in HTML Using Button as a Link</h4>
<p>Most important thing we can do give the link to the button to open another page.</p>
<button onclick="document.location='HTML inline tags.html'">HTML Inline tags</button>
</body>
</html>

ログイン後にコピー

Output: