最新のWeb開発のチュートリアル

HTMLリンク

❮前 次の章❯

リンクは、ほぼすべてのWebページに記載されています。 リンクは、ユーザーがページからページへの道をクリックすることができます。

HTMLリンクの説明

ハイパーリンク、または単にリンクは、読者が直接、クリックタップ、またはホバリングのいずれかによって従うことができ、データへの参照です。

ハイパーリンクは、文書全体または文書内の特定の要素を指します。 ハイパーテキストは、ハイパーリンク付きテキストです。 リンクされているテキストはアンカーテキストと呼ばれています。

表示とハイパーテキストを作成するために使用されるソフトウェアシステムは、ハイパーテキストシステムであり、ハイパーリンクを作成することがハイパーリンクする（あるいは単にリンクすること）です。 ユーザー次のハイパーリンクを移動したり、ハイパーテキストを閲覧すると言われています。

HTMLリンク - ハイパーリンク

HTMLリンクはハイパーリンクされています。

ハイパーリンクは、テキストやあなたがクリックして、別の文書にジャンプすることができる画像です。

HTMLリンク - 構文

HTMLでは、リンクがで定義されている<a>タグ：

<a href=" url "> link text </a>

例

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
»それを自分で試してみてください

href属性は、宛先アドレスを指定します(http://www.w3ii.com/html/default.html)

リンクテキストは、目に見える部分である(Visit our HTML tutorial) 。

リンクテキストをクリックすると、指定されたアドレスにお送りします。

リンクテキストはテキストである必要はありません。 これは、HTMLイメージやその他のHTML要素とすることができます。

サブフォルダアドレスの末尾にスラッシュがなければ、サーバーへの2つの要求を生成することがあります。 多くのサーバーは自動的にアドレスの末尾にスラッシュを追加し、新しい要求を作成します。

ローカルリンクス

上記の例は、絶対URL使用(A full web address) 。

ローカルリンク(link to the same web site) 、相対URLで指定されている(without http://www.... ) 。

例

<a href="html_images.asp">HTML Images</a>
»それを自分で試してみてください

HTMLリンク - 色

あなたがリンクの上にマウスを移動すると、二つのことは通常起こります。

  • マウスの矢印が少し手に変わります
  • link要素の色が変わります

デフォルトでは、リンクは次のように表示されます(in all browsers) ：

  • 未訪問のリンクは下線付きと青です
  • 訪れたリンクは、下線付きと紫です
  • アクティブリンクは下線付きと赤です

あなたは、スタイルを使用して、デフォルトの色を変更することができます。

例

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
»それを自分で試してみてください

HTMLリンク- target属性

target属性は、リンクされたドキュメントを開くために場所を指定します。

この例では、新しいブラウザウィンドウまたは新しいタブでリンクされたドキュメントを開きます。

例

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
»それを自分で試してみてください
目標値 説明
_blank 新しいウィンドウまたはタブでリンクされたドキュメントを開きます
_self それがクリックされたのと同じフレーム内でリンクされたドキュメントを開きます(this is default)
_parent 親フレームにリンクされたドキュメントを開きます
_top ウィンドウのフルボディにリンクされたドキュメントを開きます
framename 名前のフレームにリンクされたドキュメントを開きます

あなたのWebページがフレームにロックされている場合は、使用することができtarget="_top"枠から抜け出すために：

例

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
»それを自分で試してみてください

HTMLリンク - リンクなどの画像

リンクとして画像を使用するのが一般的です。

例

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
»それを自分で試してみてください

ボーダー：0 IE9防ぐために添加される(and earlier)画像の周囲に境界線を表示します。

HTMLリンク - ブックマークを作成します。

HTMLのブックマークは、読者がWebページの特定の部分にジャンプできるようにするために使用されています。

あなたのウェブサイトは、長いページを持っている場合、ブックマークは実用的です。

ブックマークを作成するには、最初のブックマークを作成し、それへのリンクを追加する必要があります。

リンクをクリックすると、ページがブックマークした場所にスクロールします。

例

まず、とブックマークを作成するid属性：

<h2 id="tips">Useful Tips Section</h2>

その後、ブックマークへのリンクを追加します("Useful Tips Section")同じページ内から、：

<a href="#tips">Visit the Useful Tips Section</a>

または、ブックマークへのリンクを追加します("Useful Tips Section")他のページから、：

例

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
»それを自分で試してみてください

章のまとめ

  • HTMLを使用し<a>リンクを定義するための要素を
  • HTMLを使用しhrefリンクアドレスを定義する属性を
  • HTMLの使用targetリンクされたドキュメントを開くために場所を定義する属性を
  • HTML使用<img>要素(inside <a> )リンクとして画像を使用します
  • HTMLの使用id属性( id=" value ")ページにブックマークを定義します
  • HTMLを使用しhref属性( href="# value ")ブックマークにリンクします

練習で自分自身をテストします！

演習1» 演習2» 演習3» 演習4» 演習5»

HTMLリンクタグ

タグ 説明
<a> ハイパーリンクを定義します

❮前 次の章❯