WEBサイトを作るにあたって、リンクは非常に重要な項目になります。リンクとは、クリックすると他のWEBページを表示してくれるアレです。
例えば、トップページとプロフィールページ、お問い合わせページの3ページを作ったとしましょう。各ページにそれぞれのページへのリンクがないといちいち戻るボタンから戻らなくてはいけません。
それぞれのページへリンクを貼っておいて、どのページからもすべてのページにアクセスできるようにしておくと、構造がわかりやすいサイトになりユーザーにとって使いやすいサイトになります。
さて、そんなリンクですが、文字や画像にリンクを貼るには、aタグを使用します。aタグのaは、アンカー（Anchor）の略で、リンクの出発点と到達点を指定します。 aタグの使い方は色々ありますので、それぞれ例を見ながら覚えていきましょう。
URLでリンクを貼る
TechMemoのトップページにリンクさせたい場合、以下のように記述します。
<a href="https://techmemo.biz/">TechMemo</a>
hrefオプションの値にアクセス先のURLを入れます。 画像にリンクを貼りたい場合は、以下のように書きます。
<a href="https://techmemo.biz/"><img src="image.jpg" width="300px" height="200px" alt="TechMemo画像" /></a>
このようにimgタグの周りをaタグで囲ってあげることで、画像にもリンクを貼ることができます。
ファイルパスでリンクを貼る
自分のサイト内で他のページ(HTMLファイル)にリンクさせたい場合、以下のように記述します。
<a href="profile.html">プロフィールページ</a>
hrefオプションにファイル名を入れればOKです。フォルダの中にファイルが入っている場合等は、「WEBページに画像を挿入しよう」でも書きましたが、 profiles/profile.html というように記述します。もちろん前述の例と同じように画像にもリンクを貼ることができます。
aタグのオプション
aタグにはtargetという便利なオプションがあります。targetオプションに入れた値によって、リンクをクリックした時のブラウザウインドウの開き方が変わります。targetオプションを指定しない場合は、同じウインドウでリンク先が開かれます。
《_blank》
_blankを指定すると、新規ウインドウでリンク先を開きます。ブラウザによっては、新規タブで開きます。自分のWEBサイトから他のサイトに画面が切り替わってほしくない場合等に使います。これはよく使うので確実に覚えておきましょう。
<a href="https://techmemo.biz/" target="_blank">Techmemo</a>
《_self》
_selfを指定するとフレームもしくはウインドウ内でリンク先を開きます。 フレームというのは、1ページを分割して複数のページを表示するための技術です。例えば、中央で縦に分割したフレームを作成して、左側にはページ1を右側にはページ2を表示するといったものです。ちょっと伝わりにくいかもしれませんが、最近はフレームを使用してWEBサイトを作成する自体が主流ではなくなっていますので、フレームという手法があるということを覚えてもらえれば十分です。このページではフレームの詳細な説明は割愛させていただきますので、気になる方はインターネットで調べてみてください。
<a href="https://techmemo.biz/" target="_self">TechMemo</a>
《_parent》
_parentを指定すると親フレームにリンク先を表示します。
<a href="https://techmemo.biz/" target="_parent">TechMemo</a>
《_top》
_topを指定すると、フレームを解除してウインドウ全体にリンク先を表示します。
<a href="https://techmemo.biz/" target="_top">TechMemo</a>
長々と書いてきましたが、リンクの貼り方は慣れてしまえばなんてことありません。aタグは非常に良く使うタグなので、確実に身に付けましょう。