htmlのhyperlinkタグのTARGET属性の説明A
2022-01-30 05:46:08
hyperlink<a>タグは、リンクポイントを表し、英語ではアンカーの略語です。その役割は、現在位置のテキストや画像を他のページやテキスト、画像にリンクすることで、これはすでによく知られていますが、その構文構造は少し知られていないかもしれず、生かすためにはその構文構造を理解する必要があります。<a>タグの基本的な構文構造は、次のとおりです。
<a
class=type
id = 値
href = reference
名前 = 値
rel=same|next|parent|previousを指定します。
rev = 値
target=window
スタイル = 値
title=title
onclick = function
onmouseout = function
onMouseOver=function>connect</a>
マークアップの構文構造からわかるように、ハイパーリンクを設定する際には、さまざまなリンク効果を得るために多くのパラメータを選択することができます。これはちょっと驚きですよね!
TARGETの説明。
1._blank <a href="example.html" target="_blank">example</a> ブラウザは新しいウィンドウを開き、example.html文書を表示します。
2._parent <a href="example.html" target="_parent">example</a> フレームセットの親ドキュメントを指し示します。
3._self <a href="example.html" target="_self">example</a> 現在のページフレーム内のドキュメントに移動します。
4._top <a href="example.html" target="_top">example</a> すべてのページボックスを取り除き、フレームセット文書を document.html で置き換えます。
ヒント1:他の人のフレームセットがあなたのページを参照できないようにする ドキュメントヘッダに <base target="_top"> を追加します。
ヒント2:リンクを開いたり、現在のページで更新を行うと、ファイルヘッダの現在のページにプラス: <base target="_self"> を送信します。
ここで、classとidオプション:は、リンクポイントが属するタイプと割り当てられたID番号を設定するもので、通常は設定されない。よく使われるパラメータは href と name で、href はハイパーテキストリファレンスの略語で、リンク先のアドレスを設定するのに使われる。リンク先アドレスは必ずurlアドレスでなければならず、特定のパスが与えられない場合、デフォルトのパスは現在のページへのパスと同じである。また、リンク先のファイルは、HTMLファイルであれば、現在のブラウザで直接開く場合、実行ファイル(.exeファイル)であれば、直接実行またはダウンロードする場合、当社がダウンロード用に提供しているファイルは、その特徴を生かして作られている場合、ワード形式などのテキストファイルであれば、ブラウザで開いて編集や加工が可能な場合などに分かれる。
rel: リンクを設定する関係を示します。rel=sameはリンク先のファイルがこのファイルと同じであることを、rel=nextはリンク先のファイルが次のページであることを、rel=parentはこのファイルがリンク先のファイルの親であることを、rel=previousはリンク先のファイルが前のページであることをそれぞれ意味します。
rev: は、バックリンクの設定に使用します。
target: はフレームウィンドウを使用する場合にどのウィンドウにリンクするかを設定し、target="_bank" は新しいウィンドウでページを開くことを指示します。
タイトルを指定します。リンクポイント選択時に表示されるタイトルを設定します。
onclick: リンクポイントがクリックされたときに発生するイベントに対応し、対応するサブルーチンが実行されます。
onmouseover: onclickと同様、マウスがリンク先のポイント上に移動すると、対応するイベントが発生します。
onmouseout: マウスがタウンコンタクトの外に移動したときに、対応するイベントが発生します。
いくつかの例を挙げます。
<a href="index.htm">Back to the home page</a>
<a href="sound.wav">音声ファイルを再生する</a>
<a href="javascipt.open()"> 対応するプログラムを実行する</a>
<a herf="document.doc"> 処理するために対応する文書を開く</a>
アプリケーションのヒント
1. ダウンロード可能なファイルの提供
多くのユーザーから、ダウンロード提供の効果をどのように行うかについての質問が書き込まれました。実際には、ハイパーリンクであることに変わりはありませんが、ダウンロード用のファイルはウェブサイトにアップロードされている必要があります。例を挙げましょう。ダウンロード用の "web tips" のパッケージがあり、ファイル名が "homepagejq.zip" で、それがウェブサイトにアップロードされている場合、このリンクのコードは次のように記述することができます: <a href=" homepagejq.zip"> Click here to download the "Web Tips" package</a>.
2. リンク先のページを新しいウィンドウで開く
target"の値を"_blank"に設定します。例 新しいウィンドウで"aboutme.htm"というページを開く。この効果をもたらすコードは、次のとおりです。 <a href="aboutme.htm" target="_blank">About me ...... </a>.
3. リンクにマウスオーバーすると、説明文が一行表示されます
この効果を得るには、"title"パラメータの値を設定します。例 リンク "黄山村芙"にマウスオーバーすると、説明文 "Web制作技術を紹介する専門サイトです"が表示されます。このリンクのコードは次のようになります。 <a href="hscf.htm"タイトル"これはウェブ制作技術を紹介するプロのウェブサイトです">黄山村夫</a>.
4. リンクにマウスオーバーしてウィンドウをポップアップする
これは、onmouseoverパラメータを設定することで得られる効果です。例 マウスがリンクの上に乗ったとき、ウィンドウがポップアップし、ウィンドウに "ホバー効果デモ!"と表示されます。. このリンクのコードは次のようになります: <a href="other-pages.htm" onmouseover="alert('Mouse hover effect demo!') ">link</a>. 同様の方法で、マウスが押されるとポップアップウィンドウが、マウスが離れるとプロンプトウィンドウが表示されるような効果を作ることができます。
5. このページの指定コンテンツへのリンク
このページの一部にリンクする(別名:"ファイル内ジャンプ")には、パラメータnameでリンク先の名前を指定する必要があります。選択されたテキストの一部には、リンクの目的で name パラメータで名前を付けることができます。いわゆる同一ファイル内ジャンプは、読者が非常に長い文書を読んでいるとき、内容のある部分だけに興味がある場合、ジャンプ読書法を使用することができます。その基本的な書式は
<a href="#linkpointname">Part 2</a>Part 1の内容
<a name = "リンクポイント名"></a>実際のコンテンツの2番目の部分
そのため、ハイパーリンクの "Part2"をクリックすると、自動的に "Part2の実際のコンテンツ"に移動することになります。"name"パラメータで定義したリンク先の名前は任意ですが、リンクの"href"パラメータのリンク先の名前は必ず一致させ、その前に"#を付けるのを忘れないようにしましょう。
6. 他ページの指定されたコンテンツ位置へのリンク
方法は上記の例と同様ですが、"href"パラメータのリンクポイント名の前に、Webページのファイル名を追加する必要があります。例 page1.htmとpage2.htmという2つのページがあり、それぞれが2つの部分からなる。page1.htmに、リンクを押すとpage2.htmの2番目の部分に移動するハイパーリンクを作りたい場合。そうすると、まずpage2.htmの2番目の部分のコンテンツに、次のようなコードを書きます: <a name="リンクポイント名" ></a> page1.htm に次のようなリンクコードを書きます: <a href="pagw2.htm#link point name" >page2 の2番目の部分のコンテンツ</a>.
7. Eメールへのリンク
ハイパーリンクをクリックすると、クライアントマシンのメール管理ソフトが起動し、書き込みを行います。このコードの行の例: <a href="mailto:[email protected]">Please write me a letter</a>. この "Please write me" のリンクをクリックすると、メール管理ソフト(OEなど)の手紙作成機能が自動的に起動し、受信者のアドレス欄にメールアドレスがすでに追加されます。
リンクはテキストベースだけでなく画像ベースも可能で、画像の一部をキャリアとして使用することもできます。キャリアは2組の角括弧の間にあるリンクの部分ですが、いずれも同じ方法で効果を得ることができますので、これ以上の例は省略します。
<a
class=type
id = 値
href = reference
名前 = 値
rel=same|next|parent|previousを指定します。
rev = 値
target=window
スタイル = 値
title=title
onclick = function
onmouseout = function
onMouseOver=function>connect</a>
マークアップの構文構造からわかるように、ハイパーリンクを設定する際には、さまざまなリンク効果を得るために多くのパラメータを選択することができます。これはちょっと驚きですよね!
TARGETの説明。
1._blank <a href="example.html" target="_blank">example</a> ブラウザは新しいウィンドウを開き、example.html文書を表示します。
2._parent <a href="example.html" target="_parent">example</a> フレームセットの親ドキュメントを指し示します。
3._self <a href="example.html" target="_self">example</a> 現在のページフレーム内のドキュメントに移動します。
4._top <a href="example.html" target="_top">example</a> すべてのページボックスを取り除き、フレームセット文書を document.html で置き換えます。
ヒント1:他の人のフレームセットがあなたのページを参照できないようにする ドキュメントヘッダに <base target="_top"> を追加します。
ヒント2:リンクを開いたり、現在のページで更新を行うと、ファイルヘッダの現在のページにプラス: <base target="_self"> を送信します。
ここで、classとidオプション:は、リンクポイントが属するタイプと割り当てられたID番号を設定するもので、通常は設定されない。よく使われるパラメータは href と name で、href はハイパーテキストリファレンスの略語で、リンク先のアドレスを設定するのに使われる。リンク先アドレスは必ずurlアドレスでなければならず、特定のパスが与えられない場合、デフォルトのパスは現在のページへのパスと同じである。また、リンク先のファイルは、HTMLファイルであれば、現在のブラウザで直接開く場合、実行ファイル(.exeファイル)であれば、直接実行またはダウンロードする場合、当社がダウンロード用に提供しているファイルは、その特徴を生かして作られている場合、ワード形式などのテキストファイルであれば、ブラウザで開いて編集や加工が可能な場合などに分かれる。
rel: リンクを設定する関係を示します。rel=sameはリンク先のファイルがこのファイルと同じであることを、rel=nextはリンク先のファイルが次のページであることを、rel=parentはこのファイルがリンク先のファイルの親であることを、rel=previousはリンク先のファイルが前のページであることをそれぞれ意味します。
rev: は、バックリンクの設定に使用します。
target: はフレームウィンドウを使用する場合にどのウィンドウにリンクするかを設定し、target="_bank" は新しいウィンドウでページを開くことを指示します。
タイトルを指定します。リンクポイント選択時に表示されるタイトルを設定します。
onclick: リンクポイントがクリックされたときに発生するイベントに対応し、対応するサブルーチンが実行されます。
onmouseover: onclickと同様、マウスがリンク先のポイント上に移動すると、対応するイベントが発生します。
onmouseout: マウスがタウンコンタクトの外に移動したときに、対応するイベントが発生します。
いくつかの例を挙げます。
<a href="index.htm">Back to the home page</a>
<a href="sound.wav">音声ファイルを再生する</a>
<a href="javascipt.open()"> 対応するプログラムを実行する</a>
<a herf="document.doc"> 処理するために対応する文書を開く</a>
アプリケーションのヒント
1. ダウンロード可能なファイルの提供
多くのユーザーから、ダウンロード提供の効果をどのように行うかについての質問が書き込まれました。実際には、ハイパーリンクであることに変わりはありませんが、ダウンロード用のファイルはウェブサイトにアップロードされている必要があります。例を挙げましょう。ダウンロード用の "web tips" のパッケージがあり、ファイル名が "homepagejq.zip" で、それがウェブサイトにアップロードされている場合、このリンクのコードは次のように記述することができます: <a href=" homepagejq.zip"> Click here to download the "Web Tips" package</a>.
2. リンク先のページを新しいウィンドウで開く
target"の値を"_blank"に設定します。例 新しいウィンドウで"aboutme.htm"というページを開く。この効果をもたらすコードは、次のとおりです。 <a href="aboutme.htm" target="_blank">About me ...... </a>.
3. リンクにマウスオーバーすると、説明文が一行表示されます
この効果を得るには、"title"パラメータの値を設定します。例 リンク "黄山村芙"にマウスオーバーすると、説明文 "Web制作技術を紹介する専門サイトです"が表示されます。このリンクのコードは次のようになります。 <a href="hscf.htm"タイトル"これはウェブ制作技術を紹介するプロのウェブサイトです">黄山村夫</a>.
4. リンクにマウスオーバーしてウィンドウをポップアップする
これは、onmouseoverパラメータを設定することで得られる効果です。例 マウスがリンクの上に乗ったとき、ウィンドウがポップアップし、ウィンドウに "ホバー効果デモ!"と表示されます。. このリンクのコードは次のようになります: <a href="other-pages.htm" onmouseover="alert('Mouse hover effect demo!') ">link</a>. 同様の方法で、マウスが押されるとポップアップウィンドウが、マウスが離れるとプロンプトウィンドウが表示されるような効果を作ることができます。
5. このページの指定コンテンツへのリンク
このページの一部にリンクする(別名:"ファイル内ジャンプ")には、パラメータnameでリンク先の名前を指定する必要があります。選択されたテキストの一部には、リンクの目的で name パラメータで名前を付けることができます。いわゆる同一ファイル内ジャンプは、読者が非常に長い文書を読んでいるとき、内容のある部分だけに興味がある場合、ジャンプ読書法を使用することができます。その基本的な書式は
<a href="#linkpointname">Part 2</a>Part 1の内容
<a name = "リンクポイント名"></a>実際のコンテンツの2番目の部分
そのため、ハイパーリンクの "Part2"をクリックすると、自動的に "Part2の実際のコンテンツ"に移動することになります。"name"パラメータで定義したリンク先の名前は任意ですが、リンクの"href"パラメータのリンク先の名前は必ず一致させ、その前に"#を付けるのを忘れないようにしましょう。
6. 他ページの指定されたコンテンツ位置へのリンク
方法は上記の例と同様ですが、"href"パラメータのリンクポイント名の前に、Webページのファイル名を追加する必要があります。例 page1.htmとpage2.htmという2つのページがあり、それぞれが2つの部分からなる。page1.htmに、リンクを押すとpage2.htmの2番目の部分に移動するハイパーリンクを作りたい場合。そうすると、まずpage2.htmの2番目の部分のコンテンツに、次のようなコードを書きます: <a name="リンクポイント名" ></a> page1.htm に次のようなリンクコードを書きます: <a href="pagw2.htm#link point name" >page2 の2番目の部分のコンテンツ</a>.
7. Eメールへのリンク
ハイパーリンクをクリックすると、クライアントマシンのメール管理ソフトが起動し、書き込みを行います。このコードの行の例: <a href="mailto:[email protected]">Please write me a letter</a>. この "Please write me" のリンクをクリックすると、メール管理ソフト(OEなど)の手紙作成機能が自動的に起動し、受信者のアドレス欄にメールアドレスがすでに追加されます。
リンクはテキストベースだけでなく画像ベースも可能で、画像の一部をキャリアとして使用することもできます。キャリアは2組の角括弧の間にあるリンクの部分ですが、いずれも同じ方法で効果を得ることができますので、これ以上の例は省略します。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン