HTMLテキストリンク

HTML リンクは、リンクまたはハイパーリンクです。これにより、別のページ、画像、または Web サイトにリダイレクトされます。それは何でも構いません。これらは、同じページ内の特定のセクションに移動するためにも使用されます。以前は、データやドキュメントをクリックするだけでレンダリングされていました。ドキュメント、画像、URL、またはデータをテキスト内にラップします。要件に応じて、同じページまたは別のページ上のファイル、オブジェクト、またはその他のものを指すこともできます。 HTML リンクの上にマウスを置くと、カーソルが別のアイコンに変わります。これらがどのように機能するか、およびそれらを作成する方法については、記事の次のセクションで説明します。このトピックでは、HTML テキスト リンクについて学習します。

HTML リンクの構文

以下の構文から最初の HTML リンクを作成できます。以下の指定された構文では、別のタグ、属性、および対応するプロパティを使用します。

<a url>Link your corresponding text here</a>

上記の構文では、アンカー タグを使用して HTML リンクまたはハイパーリンクを作成します。このアンカー タグについては後で詳しく説明します。

アンカー タグは、テキスト、フレーズ、または単語を添付またはリンクして、外部リンクまたは内部リンクを作成できるタグです。アンカータグを使用する。他のページ、ウェブサイト、またはページ上の同じセクション内に移動するために使用できる URL をページ内に作成します。

アンカータグを使用すると、以下に示す多くの利点があります。

• 整理: データを整理するのに役立ちます。管理のために複数の Web ページを作成したり、データをいくつかのチャンクに分割したりする必要はありません。データを 1 か所だけで簡単に整理できます。
• スクロールなし: HTML リンクまたは HTML 内部リンクを使用すると、非常に長いページのスクロールを心配する必要がなくなります。そのリンクをクリックすると、目的のセクション ページを見つけることができます。そのため、ページ上のデータやセクションを簡単に見つけることができます。

アンカー タグを作成するには?

上記の構文でわかるように、ここでは非常に多くのものを使用しています。作成方法とその仕組みを詳しく見ていきます。

これは 3 つの異なる部分 (属性) で構成されます:

1. href 属性
2. ターゲット属性
3. 名前属性

1. href 属性

Href 属性はハイパーテキスト参照を表します。ハイパーリンクを作成したいとします。そのため、最初の要件は、別の Web サイトや PDF などのファイルなど、任意のドキュメント アドレスです。

たとえば:

<a href="http://www.google.com">Google</a>

この例では、http://www.google.com が href 属性に割り当てられる値です。したがって、Google をクリックするたびに、Google ホームページのリンクにリダイレクトされます。したがって、 href 属性にはドキュメントのアドレスが含まれます。 href への独自の HTML リンクを言及することもできます。

たとえば

<a href="demo.html">My page</a>

2.ターゲット属性

target 属性は、ドキュメントを開く方法を定義します。種類も豊富で、用途に合わせて使い分けられます。

• _parent: 添付されたドキュメントを親フレームに開くだけです。
• _blank: ドキュメントを新しいタブまたはウィンドウで開きます。
• _top: 添付文書を全ウィンドウで開きます。
• _self: クリックしたのと同じウィンドウまたは同じタブでドキュメントを開きます。デフォルトでは、このターゲットは有効になっています。以下のように変更できます:

<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>

ここでの target=”_blank” は、それを使用するための構文です。

3.名前属性

name 属性は、ページ上の特定のポイントにジャンプまたは移動するために使用されます。これは、非常に多くのコンテンツを含む重要な VRU ページがある場合に役立ちます。これにより、スクロールせずにユーザーの発見と時間を節約できます。以下の構文:

<a name="to%20end"></a> or

ここでは、クリックして下にスクロールせずにページの最後に移動します。

<a href="#SomeSection">Section</a>

このブラウザはセクションを識別しますが、name 属性には (#) を使用する必要があります。

<a href="otherpage.html#title">Link your text</a>

これにより、内部的に他のページの「タイトル」を参照することができます。ここでも、ページのアドレスの末尾に (#) を使用する必要があります。

HTML リンクの色

HTML リンクに色を指定することもできます。デフォルトでは、リンクの色には 3 つの状態があります。これはすべてのブラウザに表示されます。

• アクティブ リンク: リンクをクリックすると、赤色の下線付きのアクティブ リンクになります。
• 未訪問のリンク: 未訪問のリンクの標準ブラウザのデフォルト色は青で下線付きです。
• 訪問したリンク: これらは紫色で下線が引かれています。

ただし、以下の構文を使用してリンクにカスタムカラーを提供することもできます。この異なるタイプに従って、リンクに色を付けることができます。ただし、ここではインライン CSS を使用しています。必要に応じて、外部 CSS を作成することもできます。

• Directly provide the name of the color.
• By using the HEX color code.
• By using rgb() and rgba() values.
• By using hsl and hsla() values.

<a href="http://demo.com/" style="color:blue;">Red Link</a>

We can directly specify the color name in the style attribute. This is an inline CSS.

<a href="http://demo.com/" style="color:#FF0000;">Red color code</a>

Here we are specifying the color by using color codes. (HEX color codes)

<a href="http://demo.com/" style="color:rgb(255,0,0);">Red color</a>

We can also use RGB() values to specify the color of our links. We can control the opacity of the color by using rgb().

<a href="http://demo.com/" style="color:rgba(255,0,0,0.4);">Red color</a>

You can replace rbg() with rgba() but specify the fourth value for transparency and opacity.

<a href="http://demo.com/" style="color:hsl(0,10%,50%);">Red color</a>

We can also use HSL t color our link. HSL stands for hue, saturation, and lightness. We can also use HSLA for specifying color, but we need to provide one more parameter in hsla().

Conclusion – HTML Text Link

So in Sort, we use the anchor tag and its attributes to create the hyperlink or link in HTML. HREF contains the document’s address and the target responsible for handling the document. We can also color our link using inline or external CSS.

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