■「A HREF リンクの基本」 〜世界へジャンプ〜
リンクのコツは「 囲 む 」&「 ファイル位置の把握 」。最重要事項リンクについて学ぼう!
「他のWebページや外部のWebサイトへジャンプする。」これを可能にするものがリンクです。
「リンクを貼る」などという言い方もします。リンクを貼るには、a タグ(アンカー(Anchor)の略)を使用します。
■ リンクタグの基本型
・リンクさせたい部分の「テキスト」をリンクタグで囲みます。
<a href="...">リンク部分</a>
・リンクさせたい部分の「画像のタグ」をリンクタグで囲みます。
<a href="..."><img src="title.gif"></a>
◆◆補足
・ ハイパーリンクとは他の文書や画像、Webページなどの位置情報のこと。
リンクされた 部分をマウスでクリックすると、定義されたリンク先にジャンプする。
・ 終了タグ必須。閉じ忘れると以降全てリンク部分になるので閉じ忘れは厳禁。
・ 同じサーバ内のファイルを指定する時は、"http://〜"は省略可。
・ 同じフォルダ内のファイルを指定する時はファイル名の指定のみで良い。
・ 1つ上の階層フォルダのファイルを指定する時は(../)とピリオド2つを書く。
■ ファイル位置の把握
「リンク」はファイルの位置情報を把握していることが必須です。
と言っても難しいことではないのでまずは読み進めてみてください。
( 例 ) フォルダイメージ ※例えばこのようなフォルダ構成とします。
「webフォルダ」---"comeon.html"
|
|
---「htmlフォルダ」---"index.html"
|
|
---"aboutlink.html
▼ 具体的な書き方
・「webフォルダ」の"comeon.html"から「htmlフォルダ」の中にある"index.html"にリンクする場合
<a href="html/index.html">HTMLリファレンスへ</a>
・「htmlフォルダ」の"index.html"から同じ「htmlフォルダ」の中にある"aboutlink.html"にリンクする場合
<a href="aboutlink.htm">リンク集です。</a>
・「htmlフォルダ」の"index.html"から一つ上の「webフォルダ」の中にある"comeon.html"にリンクする場合
<a href="../comeon.html">「はじめに」お読みください</a>
" ../"をつければ1つ上の階層を指します。
" ../../ "をつければ2つ上の階層を指します。
・「htmlフォルダ」のindex.html""から"Yahoo!Japanのトップページにリンクする場合
<a href="http://www.yahoo.co.jp/">yahooへ</a>
※"URL"はダブルコーテーション(")で囲むようにしてください
▼ その他の使い方
・「 Outlook 」などのメーラーを開く場合
<a href="mailto:aa@a.com">メールはこちら!</a>
・その他の使い方
<a href="index.htm#aaa">aaaへ進む!</a>
nameを使用すれば同一ページ内にジャンプできます。
・nameタグ
<a name="aaa">〜</a> // 囲んだ部分(〜)に aaa という名前を指定します。