【HTML初心者入門】リンクを挿入する方法を解説
みなさんはHTMLの学習をしていませんか？
今回の記事ではURLをリンクにすることができるリンクタグを追加する方法を解説します。
他URLへのリンクを生成できるタグ
HTML<a>要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。
具体的には、<a>タグと</a>タグの間に、[対象となる文章]を記述すると、その文章をクリックしたときに、[URL]に設定されたWEBページにジャンプつまりページ移動することができます。
タグ表記
<a href=”[URL]” target=”_blank”>[対象となる文章]</a>
タグの省略
出来ません。開始と終了タグの両方が必要になります。
「独学でのプログラミング学習に苦戦していませんか？」
独学でのプログラミング学習の挫折率は9割以上と言われています。
✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない
と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！
完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください！
＼簡単30秒／
下のバナーからLINE友だち追加をして、無料で限定資料をGET！
指定できる属性
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”>
「プログラミング学習に苦戦しているあなたへ」
独学でのプログラミング学習の挫折率は9割以上と言われています。
✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない
と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！
完全無料なので、悩む前に今すぐ下のバナーをクリックして資料をGETしましょう！
＼簡単30秒／
下のバナーからLINE友だち追加をして、無料で限定資料をGET！
サンプル
<!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サイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね！
