HTMLタグで画像表示とリンク貼りをしよう!

HTML

画像表示とリンクを貼るタグ

HTMLタグでは画像を表示したり、
リンクを貼ることができます。

画像をブログで表示するには、PC上の画像ファイルを
アップロードし、記事に貼り付けることで可能になります。

そのアップロードされた場所(URL)が分かれば
ウェブページから画像にリンクを貼るなど
応用することが出来ます。

そこで、まずは画像を表示するタグを紹介します。

IMGタグ

画像を表示するためには、img タグを使用します。

例:<img src=””画像ファイルのURL””>

このタグは開始タグのみで、終了タグはありません。

IMGタグの主な属性

img タグで指定できる主な属性は

画像ファイルURLの指定:src=”画像ファイルURL”
画像の代わりとなる代替文字:alt=”代替文字”
画像の幅を指定:width=”画像の幅”
画像の高さを指定:height=”画像の高さ”
画像の説明:title=”画像の説明文”
画像の周りに枠線を指定:border=”枠線の太さ”

例:<img src=”abc.gif” alt=”abc” width=”20″ height=”20″ title=”abc” border=”0″>
abc.gifというファイルを幅20高さ20、回りに枠線を引かないという設定です。

A タグ

それから、ウェブページではリンクを貼ることがあります。

どこかのサイトや画像の案内などに使いますね。

テキスト画像に貼り付けることが出来ます。
そのテキストや画像をクリックしたときに、
「リンク先URL」にジャンプすることができます。

リンクを貼るためには、a タグを使用します。

例:<a href=””リンク先URL””></a>

A タグで指定できる主な属性は

リンク先URLの指定:href=”リンク先URL”
リンク先を別ウィンドウで表示:target=”_blank”
リンク先の補足情報:title=”リンク先の情報”

<記述例>

<a href="https://www.yahoo.co.jp/" title="Yahoo! JAPAN" target="_blank">
Yahoo! JAPAN トップページ</a>

<表示例>

上記例は「Yahoo! JAPAN トップページ」というテキストに
リンクを貼っていますが、画像に置き換えることも出来ます。

つまり、画像をクリックすると、
指定したリンク先URLへジャンプします。

<表示例>にある”yahoo.jpg”という画像をクリックすると
Yahoo! JAPANのトップページが表示されます。

<記述例>

<a href="https://www.yahoo.co.jp/" title="Yahoo! JAPAN" target="_blank">
<img src="http://pc.yakutachi.net/wp/wp-content/uploads/2020/04/yahoo.jpg" alt="yahoo"></a>

<表示例>

yahoo

このように画像にリンクを貼り付ける方法が分かれば
ウェブページに画像を貼り、活用できるようになります。

コメント

タイトルとURLをコピーしました