HTML　書き方講座④ 〜画像・リンク〜

みなさんこんにちは さくちゃん です。

今回は、「画像の挿入」「リンクの挿入」について勉強していきます。
では早速やっていきましょう！

画像の挿入

では始めに「画像の挿入」についてやっていきます。
画像の挿入で使用するタグは

<img src="リンク">

になります。
実際にGoogleの写真を貼ってみましょう。

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

では、ブラウザで確認してみましょう。

また、画像に「altタグ」をつけてあげると親切です。
画像が何らかのエラーで表示されなくなった時でも、何の画像かを教えてくれます。
「altタグ」の書き方はこうです。

 <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">

リンクの挿入

では次に「リンクの挿入」についてやっていきます。
リンクの挿入で使用するタグは

<a href="URL">テキスト</a>

と書きます。
では実際に、「google.com」のリンクを挿入してみましょう。

<a href="https://google.com">Google</a>

ではブラウザで確認してみます。

うまく表示されましたね。

また、このリンクを画像に挿入することができます。
先ほど作成した画像に挿入してみましょう。

書き方はこうです。

 <a href="https://google.com">
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">
 </a>

ではブラウザで確認してみましょう。

画像をクリックしてみましょう

うまく表示されましたね。

では今回は以上になります。