HTML リンクを貼る、リンク画像を貼る方法

リンクにはリンク元（始点）とリンク先（終点）という情報が必要です。リンク元になる部分（クリックできる部分）は<a>要素で示します。リンク先は、この<a>要素の開始タグに、属性という追加情報を加えて示します。
ここではハイパーリンクでの参照先を意味するhrefという属性を使います。（要素名と属性は必ず、半角のスペースで区切ります）

記入の方法は<a href=”URL(アドレス)”>テキスト</a>というように記入します。
リンクするための<a>タグを使って、値にリンクしたいサイトのアドレスを、http://からすべて正しく記入し、リンクを設定させたいテキストをこのタグで囲みます。

リンクを設定すると、標準の設定では文字の色が青色になりアンダーラインが引かれます。それと、target属性をつけて値に　_blank　を指定すると、新しいウィンドウが開いて、そこにリンク先の内容を表示する事も出来ます。

【例1：挿入前】

<a href="URL(アドレス)">テキスト</a>

【例2：挿入後】

<a href="URL(アドレス)">テキスト</a>
cybergreenWEBへようこそ

【例3：挿入後target属性をつけた場合_blank　】
リンクを押すと新しいウィンドウが開いて、リンク先が表示されます。

<a href="URL(アドレス)"　arget="_blank">サイバーグリーンWEB</a>
サイバーグリーンWEB

他のサイトに画像をリンクする

画像を使ったリンクを貼りたい場合は <img src=”URL（画像のアドレス）”>で画像を指定し、これをテキストにリンクを貼る時と同じように、<a href=”～”>～ </a>で囲みます。
画像にリンクを貼った場合、古いブラウザでは画像の周りに枠が表示されますが、<img>タグにborder属性をつけて値に0を指定すれば、枠を表示させないことができます。

【例1】

<a href="https://on-web.jp/">
<img src="https://on-web.jp/wp-content/uploads/2017/06/28611.jpg">
</a>

画像をクリックするとリンク先が表示されます。

【例2:border属性を追加した場合(古いブラウザの場合枠線が消えます)】

<a href="https://on-web.jp/">
<img src="https://on-web.jp/wp-content/uploads/2017/06/28611.jpg" border="0">
</a>

HTML リンクを貼る、リンク画像を貼る方法についてでした

このように<a href=”～”>～ </a>を使うことでテキストにリンクを貼ることが可能になります。
他にもHTMLには多くのタグがあります。これからもHTMLについて記事を掲載していきます。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, ,