HTMLで画像を表示しよう

次に、先ほどのページに画像を追加してみましょう。

まず画像を準備しましょう。
画像を持ってない場合は、サンプルとして、下の画像を使ってください。
画像の保存方法は、
【 画像の上で右クリック 】→【 名前をつけて画像を保存 】 保存用ダイアログが現れますので、 先ほどのHTMLファイルを格納したCドライブの下の【 MyPage 】フォルダに 名前を付けて保存してください。 デフォルトでは【 logo_html 】という名前のgifファイルになっていますので そのまま保存した事にして話を進めます。
自分の画像を使いたい場合は、【 MyPage 】フォルダに画像を移動しておいてください。

現在、【 C:\MyPage 】には、
・MyPage.htm
・logo_html.gif
の二つのファイルがありますね。
では、【 index.htm 】を編集しましょう。

<html>
<head>
<title>ようこそMyPageへ</title>
</head>
<body>
<img src="logo_html.gif">
<p>ようこそMyPageへ</p>
<p>MyPageでは、○○についての情報を発信していきます。</p>
</body>
</html>

太字の部分が追加した部分です。編集が終了したら、ブラウザで確認してみてください。
画像が表示されましたか?表示されたら成功です。

imgタグ

imgタグは画像を表示することができます。
<img src="(画像のファイル名)">


スポンサードリンク