テキストや画像をクリックしたらほかのページへ遷移したい場合、
<a>タグを使います。<a>タグのaは「anchor」という
錨や繋ぎ止めておくものを意味する英単語が由来です。
<a>タグをリンクとして使うには、hrefという属性の値に
リンク先を「絶対パス」や「相対パス」を指定します。
それをすることでリンクとして機能します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> </head> <body> <h1>Googleへのリンク 絶対パスの例</h1> <a href="https://www.google.co.jp/">ここをクリック</a> <br> <h1>HTMLのメモ 相対パスの例</h1> <a href="../memo/index.html">このブログのトップページ</a> </body> </html> |
絶対パス
●誰から見ても変わることがない場所を示す。
上記の例をみるとGoogleのトップへ遷移しますが、
だれがクリックしてもGoogleへ遷移します。
相対パス
●この相対パスが書かれているHTMLファイルを基準にして、
どこへ遷移するかを記載しています。
サンプルコードのHTMLの1つ上の階層に「memo」フォルダがあって
そのフォルダのなかに「index.html」があればブラウザに表示されます。
私のパソコンでは相対パスでindex.htmlは見れますが、
読者さんのパソコンでは動きません。
それと、<a>タグ内にtarget属性に値を設定することで、
対象のaタグがクリックされた気に、新しいタブが開くか否かを
指定できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> </head> <body> <h1>Googleへのリンク</h1> <a href="https://www.google.co.jp/">ここをクリック</a> <br> <h1>Googleへのリンク target="_parent"</h1> <a href="https://www.google.co.jp/" target="_parent">ここをクリック</a> <br> <h1>Googleへのリンク target="_blank"</h1> <a href="https://www.google.co.jp/" target="_blank">ここをクリック</a> <br> <h1>Googleへのリンク target="_top"</h1> <a href="https://www.google.co.jp/" target="_top">ここをクリック</a> <br> <h1>Googleへのリンク target="_new"</h1> <a href="https://www.google.co.jp/" target="_new">ここをクリック</a> <br> </body> </html> |
_blankは新しいウィンドウが開くのは分かりますけど。
_parentと_topの違いがよくわかりません。
勉強不足で申し訳ない。ただウェブサイトを作るには
そんなに不便しないはず。