第2章　画像の入れ方

この章では、画像の挿入について説明します。

HOMEPAGE

画像の入れ方

HTMLで画像を挿入するためには <img>タグを使用します。

※<img>に終了タグがありません

src属性は画像のパスを指定します。指定する際は絶対パス、相対パスどちらでも可能です。

title属性は画像やリンク先のタイトルを表示します。マウスカーソルを画像に合わせると吹き出し形式で表示されます。

alt属性は何らかの理由でブラウザが画像を表示できない場合の代わりにテキストを提供します

width、height属性は図面の幅と高さを指定できます。ピクセル数またはパーセントで指定可能です。


例：[sample2-1.html] 

<img src="https://academy.addli-ne.com/course_html/inu.png" alt="犬の画像" title="pet" width="120" height="100">
実行結果

犬の画像

<a>タグの内部にimg<タグ>を設定するだけで画像をリンクとして利用可能です。 

<a href="遷移させたいURL"> <img src="画像のパス" alt="テキスト"></a>
例：[sample2-2.html]
<a href="https://academy.addli-ne.com/"> 
    <img src="https://academy.addli-ne.com/course_html/inu.png" alt="犬の画像" title="クリックしてください" width="15%">
</a>
実行結果

犬をクリックしてください。
犬の画像

<!-- ... --> は HTMLソースの中にコメントを記述します。コメントはブラウザには表示されません。

<!--  コメント -->

<!-- ... --> の間を改行して書くこともできます。 

<!--  
改行しても
コメントに
なります 
-->
例：[sample2-3.html]
<img src="https://academy.addli-ne.com/course_html/inu.png" alt="犬の画像" title="pet" width="120" height="100">
<!--<p>　　猫です。</p>-->
<p>　　犬です。</p>
実行結果

犬の画像

　　犬です。


練習

問題 [Ex2_1.html]
下記のページを作成してください。
ただし、イメージのクリック効果はイメージに遷移すること。

犬探してます

2021年1月23日 大阪市北区付近で行方不明

犬の画像 犬をクリックしてください

犬のプロフィール

名前：タマネギ　種類：雑類
性別：オス　　　年齢：４歳
毛色：茶色　　　大きさ：30CM
首輪：赤色

見かけた方や、保護された方は下記へご連絡お願いします。
連絡先：google＠gmail.com


戻る