【HTML初心者入門】リンクを挿入する方法を解説
みなさんはHTMLの学習をしていませんか？
今回の記事ではURLをリンクにすることができるリンクタグを追加する方法を解説します。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
他URLへのリンクを生成できるタグ
HTML<a>要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。
具体的には、<a>タグと</a>タグの間に、[対象となる文章]を記述すると、その文章をクリックしたときに、[URL]に設定されたWEBページにジャンプつまりページ移動することができます。
タグ表記
<a href=”[URL]” target=”_blank”>[対象となる文章]</a>
タグの省略
出来ません。開始と終了タグの両方が必要になります。
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
指定できる属性
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”>
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
サンプル
<!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サイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね！
