リンクを設定しよう
自分のサイトの違うページや、外部のサイトへ飛ぶにはLink(リンク)を貼る必要があります。
「リンク」とは英語で、つなぐ・関連するという意味になります。
webサイトにおいても根本的な意味は同じになります。
ページやファイルを繋げる「a要素」
<a href="リンク先のパス・ファイル名、URL">テキストや画像</a>
<body>
と</body>
の間に書きます。
webページでは指定された範囲をクリックするとwebページやファイルを参照する仕組みがあります。
この仕組みを「ハイパーリンク」(リンク)と呼びます。リンクを設定することを「リンクを繋げる」と言います。
リンクを繋げるには「a要素」(アンカータグとも呼ばれる)を使用します。
aタグは、必ずhref属性を記述します。
href属性の値には、webページやファイルの場所や名前を指定しましょう。
a要素の開始タグと終了タグのあいだはテキストを記述したり画像の挿入をします。
ページやファイルを指定する「href属性」
href属性には、リンク先やファイル名を指定しましょう。
ローカルの環境にあるwebページを参照するには、そのファイルまでのパスを指定します。
インターネット上にあるwebページを表示させる場合はURL(絶対パス)を記述します。
表示方法を指定する「target属性」
通常、リンク先のコンテンツはリンク元と同じウィンドウに表示されますが、target属性を使うとリンク先のドキュメントをどこに表示するかを指定することができます。
必須の属性ではありません。
画像にリンクを設定する方法
<body>
<a href="dog.html"><img src="images/shibaken.jpg" alt="柴犬の子供"></a>
</body>
img要素aタグ
で囲むことによって画像をクリックするとリンク先へ繋げることが可能になります。
メールアドレスへのリンク
<a href="mailt:sayaka@gmail.com">テキストや画像</a>
メールアドレスのリンクは「mailto:」に続けてメールアドレスを書きます。
電話番号へのリンク
<a href="tel:08012345678"><テキストや画像></a>
電話番号は「tel:」に続けて電話番号を書きます。
電話番号はハイフンを挟まず数字を連続して書きましょう。
スマホではリンクを指定しなくてもタップすると電話をかけることはできますが、画像やボタンなどからリンクさせたいときに「tel:」を指定して活用しましょう。