HTML でのページのリンク

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

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

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

構文:

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

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

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

構文:

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

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

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

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

構文:

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

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

構文:

<a href="Browser's%20_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 
<h6>This code works as a bookmark, so can jump directly to the home
Section by clicking on link </h6>
</h4>

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

例:

<a href="Demo.html%20#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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543989912696.png?x-oss-process=image/resize,p_40" class="lazy" alt="Travel"> </a>

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

HTML でのページのリンク例

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

例 #1

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

コード:

<title>Linking Pages in HTML</title>


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

出力:

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

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

例 #2

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

コード:

<title>Linking Pages in HTML</title>


<h2 id="linking-Pages-in-HTML">linking Pages in HTML</h2>
<p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p>
<h4 id="a-href-https-www-educba-com-target-blankwindow-More-About-US-a"><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4>
<h2 id="HTML-Image-as-Page-Link">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="/static/imghwm/default1.png" data-src="t3.jpg" class="lazy" alt="HTML tutorial"   style="max-width:90%">
</a>

出力:

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:

<h4 id="Linking-Pages-in-HTML-Using-Button-as-a-Link">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>

Output:

Whenever we are going to click on the button, it will work as a link to open another page:

Conclusion

Finally, linking pages in HTML can be done by using tag with a href attribute. This element is useful in various features to create a bookmark, open the document in the target blank tab, the same thing in parent tab, self tab, create the image as a link, and create a button as a link and many more others.

以上がHTML でのページのリンクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。