fc2ブログ

リンクの張り方(アンカータグの基本)

リンクを張るためには、少しHTMLを知っておく必要があります。
HTMLの講座のようですが、基本的なことなので我慢してください。

アンカータグの基本
リンクを張るためには、アンカータグと言うHTMLを使用して記述します。 基本的な記述方法は
<a href="***">(文字や画像)</a>
です。

<a href="***">は、アンカータグの初めを意味する開始タグです。
</a>は、アンカータグの終わりを意味する終了タグです。

ほとんどのタグは、この開始タグと終了タグで1ペヤのタグになります。
また、タグは大文字でもかまいませんが、なるべく小文字で記述するようにしたほうが良いと私は思います。

href属性
<a href="***">でのhref="***"は、アンカータグの属性になります。
この場合、href="***"はhref属性になります。
この属性は半角スペースを挟んで、複数の属性を付けることができます。

そして、href="***"での「***」という部分にリンクさせたいアドレス(URL)を記述します。

また、href="***"での「"」(ダブルコーテーション)は、(無くても動作しますが)正式には付けるものですので、忘れないようにしてください。

では、実際にYahoo!へのリンクを追加してみたいと思います。
アンカータグの記述方法は、
<a href="http://www.yahoo.co.jp/">Yahoo!</a>
になります。

画面上では、
Yahoo!
となります。
(クリックするとこの画面がYahoo!に行きますので、上記のYahoo!へのリンクをクリックした後は、ブラウザの「戻る」ボタンなどで戻ってきてくださいね^^;)

target属性
上記の<a href="***">(文字や画像)</a>という記述では、その画面がリンク先の画面になります。

そこで、リンク先を別画面で表示させるには「target="_blank"」というtarget属性をアンカータグに追加します。

記述方法は
<a href="***" target="_blank">(リンク文字や画像)</a>
になり、Yahoo!へのリンクを記述すると、
<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo!</a>
となります。

画面上では
Yahoo!
となり、見た目では「href属性」で紹介したYahoo!へのアンカータグと同じですが、クリックすると別画面でYahoo!が表示されます。

リンク元の画面を残したまま、新しい画面でリンク先を表示させたい場合に使用します。

また、リンク先が同じサイト内で必要以上にtarget="_blank"を使用していると、訪問者に嫌がられますので注意してください。
(ケースバイケースですが・・・)

title属性
リンク文字にカーソルを合わせた時に、ポップアップで文字を表示させたい場合には、このtitle属性を追加します。

記述方法は
<a href="***" target="_blank" title="(ポップアップ文字)">(リンク文字や画像)</a>
になり、Yahoo!へのリンクを記述すると、
<a href="http://www.yahoo.co.jp/" target="_blank" title="Yahoo! へ">Yahoo!</a>
となります。

もちろん、(ポップアップ文字)や(リンク文字)には自分で好きな言葉を入れることができます。

そして、画面上では、
Yahoo!
となり、上記のYahoo!へのリンク文字にカーソルを合わせると「Yahoo! へ」という文字がポップアップされ、訪問者にとって親切なリンクにすることができます。


以上、アンカータグの基本的事項でした。
アンカータグは様々なところで使いますので、是非覚えておいてください。

また、ここで紹介した属性以外にもアンカータグには様々な属性がありますが、これ以上覚える必要はなく、必要な時に調べる程度で良いと思います。

スポンサーサイト



tag : リンク HTML アンカータグ アンカーリンク 文字リンク 画像リンク 

カテゴリ
新着記事
サイト
QRコード
QRコード