画像表示とリンクを貼るタグ
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>＜表示例＞
このように画像にリンクを貼り付ける方法が分かれば
ウェブページに画像を貼り、活用できるようになります。
コメント