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="http://cybergreen.jp/">
<img src="http://cybergreen.jp/wp-content/uploads/2017/06/28611.jpg">
</a>

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


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

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


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

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