みなさんはHTMLの学習をしていませんか？
今回の記事ではURLをリンクにすることができるリンクタグを追加する方法を解説します。
他URLへのリンクを生成できるタグ
HTML<a>要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。
具体的には、<a>タグと</a>タグの間に、[対象となる文章]を記述すると、その文章をクリックしたときに、[URL]に設定されたWEBページにジャンプつまりページ移動することができます。
タグ表記
<a href=”[URL]” target=”_blank”>[対象となる文章]</a>
タグの省略
出来ません。開始と終了タグの両方が必要になります。
指定できる属性
1. href(リンクを設定する)
ハイパーリンクのリンク対象を URL または URL フラグメントで示します。
1-1. URLの場合
URL はウェブ (HTTP) ベースのドキュメントに制限されず、ブラウザがサポートする任意のプロトコルを使用できます。具体的に言うと、[file:](特定のファイル） や [ftp:]（FTP）、[mailto:]（メールアドレス） などがほとんどのブラウザで動作します。
※ただし、対応したソフトウェア（メールアドレスならメールソフト）が実行する環境に無いと意味はありません。
ジャンプ先のページやファイル名を、絶対パスか相対パスで指定します。
<a href="http://www.test.com/"> <a href="mailto:hogehoge@test.com">
1-2. URLフラグメント
URL フラグメントは、ハッシュ記号 (#) で始まり、現在のドキュメント内のリンク先位置 (HTML 要素の ID) を指定します。
<a href="#detail">説明を読む</a>
（同一HTMLドキュメント内のID:detailの部分に移動（スクロール）する）
2. target(特定のページにジャンプさせる)
タグにname属性を指定してフレーム名を付けておいたり、name属性を指定して開かれたページなど、既存ページやフレームにページを表示させることができます。
<a href="http://www.test.com/" target="right">
(rightという名前のフレームに表示）
また、特定のキーワードを指定することでも動作します。
2-1. _blank
新しいウインドウを立ち上げて、リンク先のページを表示する。
<a href="http://www.test.com/" target="_blank" rel="noopener">
2-2．_self
リンクを記述しているページ・フレーム、要するに自身のページににリンク先のページを表示させる。
<base href="http://www.test.com/" target="_self">
2-3. _parent
framesetを定義したウインドウにリンク先のページを表示する。
<a href="http://www.test.com/" target="_parent">
2-4. _top
フレーム表示を解除して、ウインドウ全体にリンク先のページを表示させる。
<a href="http://www.test.com/" target="_top">
サンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>サンプルページ</TITLE> </HEAD> <BODY> 私のサイトは、<a href="http://www.test.com" target="_blank">test.com</a>です。 </BODY> </HTML>
まとめ
初心者の方向けにリンクを追加する方法を紹介していきましたが、いかがでしたか？
リンクの追加はWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね！
エンジニア転職を目指すなら…
転職保証付きのプログラミングスクール
で未経験からエンジニアを目指そう！
✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある
転職保証コースは質の高いカリキュラムで転職成功率98％！
