画像表示

表示例

下の画像をクリックするとリンク先のページが表示されます。

リンク先ページ

ソース解説

■ HTML ファイルの作成

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>リンクサンプル</title>
    </head>
    <body>
        <h1>リンクサンプル</h1>

        <p>「imgタグ」で画像を表示します。<br>
            <img src="sampleImg.jpg" width="100" height="100" alt="サンプル画像" >
        </p>
        <p>次に、画像表示とリンクを追加しま結びつけてみます。<br>
           画像をクリックすると別のWebページを表示します。<br>
           <a href="linkpage.html" target="_blank">
               <img src="sampleImg.jpg" width="100" height="100" alt="サンプル画像" >
           </a>
        </p>
    </body>
</html>

 

ファイル名「index.html」、文字コードは「UTF-8」で保存して下さい。

タグと要素の説明

<img src="image.jpg" width="380" height="380" alt="サンプル画像" >
「imgタグ」は、画像を表示します。
「src="sampleImg.jpg"」で画像を指定します。
「width="100" height="100"」で画像の幅と高さのサイズを指定します。
「alt="サンプル画像"」でカーソルを画像のところに合わせると表示する文字を指定します。