初心者のためのWebページ作成: HTMLのハイパーリンクAタグの使い方を学ぶ

ハイパーリンク a タグはリンクポイントを表し、英語の単語「anchor」の略語です。その機能は、現在の位置にあるテキストまたは画像を他のページ、テキスト、または画像に接続することです。これはよく知られていますが、その文法構造はあまり知られていないかもしれません。効果的に使用するには、その文法構造を理解する必要があります。ハイパーリンク <a> タグはリンクポイントを表し、英語のアンカーの略語です。その機能は、現在のテキストまたは画像を他のページ、テキスト、または画像に接続することです。これはよく知られていますが、その文法構造はあまり知られていないかもしれません。効果的に使用するには、その文法構造を理解する必要があります。 <a> タグの基本的な構文は次のとおりです。
<a
クラス=タイプ
id=値
href=参照
名前＝値
rel=同じ|次|親|前
rev＝価値
ターゲット=ウィンドウ
スタイル=値
タイトル=タイトル
onclick＝関数
onmouseout＝関数
onMouseOver=関数> </a>
タグの文法構造から、ハイパーリンクを設定するときにさまざまなリンク効果を実現するために選択できるパラメータが多数あることがわかります。これは少し予想外でしょうか? ！
class および id オプションは、リンクポイントのタイプと割り当てられた ID 番号を設定するために使用され、通常は設定されません。最もよく使用される 2 つのパラメータは href と name です。このうち、href はハイパーテキスト参照の略語で、リンクアドレスを設定するために使用されます。リンクアドレスは URL アドレスである必要があります。特定のパスが指定されていない場合、デフォルトのパスは現在のページのパスと同じになります。リンクされたファイルもいくつかの状況に分かれており、HTML ファイルの場合は現在のブラウザで直接開かれ、実行ファイル (.exe ファイル) の場合は直接実行またはダウンロードされます。ダウンロード用に提供されているファイルはこの機能を使用して作成されており、Word 形式などのテキストファイルの場合はブラウザで開かれ、編集できます。
rel: は設定されたリンクの関係を示します。rel=same はリンク先のファイルがこのファイルと同じであることを意味し、rel=next はリンク先のファイルが次のページであることを意味し、rel=parent はこのファイルがリンク先のファイルの親ファイルであることを意味し、rel=previous はリンク先のファイルが前のページであることを意味します。
rev: は逆リンクを設定するために使用されます。
target: は、フレームウィンドウを使用するときにリンクするウィンドウを設定するために使用され、target="_bank" は、新しいウィンドウを開いて Web ページを開くことを意味します。
title: リンクポイントが選択されたときに表示されるタイトルを設定するために使用します。
onclick: イベントに対応します。リンクポイントがクリックされると、このイベントがトリガーされ、対応するサブルーチンが実行されます。
onmouseover: onclick と同様に、マウスがリンクポイント上に移動すると、対応するイベントがトリガーされます。
onmouseout: マウスが接触点から外れると、対応するイベントがトリガーされます。
以下にいくつかの例を示します: <a href="index.htm">ホームページに戻る</a>
<a href="sound.wav">オーディオファイルを再生</a>
<a href="javascipt.open()">対応するプログラムを実行する</a>
<a herf="document.doc">処理するドキュメントを開きます</a>
応用スキル1. ダウンロードファイルを提供する<br />多くのネットユーザーが、ダウンロード効果を提供する方法について質問しています。実際、それはまだハイパーリンクですが、ダウンロードするファイルは Web サイトにアップロードする必要があります。たとえば、「Web Page Skills」のファイルパッケージがダウンロード可能で、ファイル名が「homepagejq.zip」であり、Web サイトにアップロードされている場合、このリンクのコードは次のように記述できます。<a href="homepagejq.zip">「Web Page Skills」ファイルパッケージをダウンロードするには、ここをクリックしてください</a>。
2. リンクされたウェブページを新しいウィンドウで開く
「target」の値を「_blank」に設定します。例: Web ページ「aboutme.htm」を新しいウィンドウで開きます。この効果を生み出すコードは次のとおりです: <a href="aboutme.htm" target="_blank">About me...</a>。
3. マウスをリンクに移動すると説明文が表示されます。
この効果は、「title」パラメータ値を設定することで実現できます。例：「123WORDPRESS.COM」というリンクにマウスを移動すると、「Webページ作成テクニックを紹介する専門サイトです」という説明が表示されます。このリンクのコードは次のとおりです：<a href="hscf.htm" title="Webページ制作スキルを紹介する専門サイトです">123WORDPRESS.COM</a>。
4. マウスをリンク上に移動すると、ウィンドウがポップアップします。<br />これは、onmouseover パラメータを設定することで得られる効果です。例: マウスをリンク上に移動すると、ウィンドウがポップアップ表示され、「マウスホバー効果のデモ!」が表示されます。このリンクのコードは次のとおりです: <a href="other web pages.htm" onmouseover="alert('Mouse hover effect Demonstration!')">link</a>。同様の方法を使用して、マウスが押されたときにポップアッププロンプトウィンドウが表示され、マウスが放されたときにポップアッププロンプトウィンドウが表示される効果を作成できます。
5. このページの指定されたコンテンツへのリンク<br />このページのコンテンツの特定の部分にリンクするには（つまり、「ファイル内でジャンプする」には）、パラメータ名を使用してリンクポイントの名前を指定する必要があります。テキストブロックを選択し、名前パラメータを使用してリンクで使用する名前を付けます。いわゆる「同じファイル内でのジャンプ」とは、読者が非常に長いファイルを読んでいるときに、コンテンツの特定の部分だけに興味がある場合に、ジャンプ読み取り方式を採用できることを意味します。基本的な形式は次のとおりです。
<a href="＃リンクポイント名">第2部</a>第1部の内容......
.............................................
<a name="リンクポイント名"></a>第2部の実際の内容は……
.............................................
このように、「パート 2」のハイパーリンクをクリックすると、「パート 2 の実際の内容」に自動的に移動します。「name」パラメータで定義されるリンクポイント名は任意ですが、リンクの「href」パラメータ内のリンクポイント名はそれと一致している必要があります。先頭に「#」を追加することを忘れないでください。
6. 他のページの指定されたコンテンツの場所へのリンク<br />方法は上記の例と似ていますが、「href」パラメータのリンクポイント名の前に Web ページファイル名を追加する必要があります。たとえば、page1.htm と page2.htm という 2 つの Web ページがあり、各ページには 2 つのコンテンツ部分があります。page1.htm にハイパーリンクを作成し、リンクをクリックすると page2.htm のコンテンツの 2 番目の部分にリダイレクトされるようにします。次に、page2.htm のコンテンツの 2 番目の部分の先頭に次のようなコードを記述します: <a name="link point name"></a>。page1.htm に次のようなリンクコードを記述します: <a href="pagw2.htm#link point name">page2 のコンテンツの 2 番目の部分</a>。
7. 電子メールへのリンク
ハイパーリンクをクリックすると、クライアントコンピューター上の電子メール管理ソフトウェアが起動し、メールが作成されます。たとえば、次のコード行: <a href="mailto:[email protected]">Please write to me</a>。「私に書いてください」リンクをクリックすると、メール管理ソフトウェア（OE など）の書き込み機能が自動的に開始され、受信者のアドレスバーにメールアドレスが追加されます。
リンクはテキストだけでなく、画像や画像の一部でも運ぶことができ、すべて上記の効果を実現できます。方法も同じで、唯一の違いはリンクの2組の角括弧の間の部分であるキャリアであるため、別の例は示しません。

<<: Vueシングルページアプリケーションの事前レンダリング方法の例

>>: MySQL マスタースレーブステータスチェックの実装