作ってみよう

 Step.9  画像の貼り付け

 画像の貼り付け  
   
 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
   
<html>
<head>
<title> My Web Sight </title>
</head>
<body>
ここから ↓

<p>
<img src="check1.gif" alt="チェック柄">
</p>

ここまで ↑

</body>

</html>
 タグの説明

 <img src="○○" alt="●●">指定した場所に、
 画像を埋め込みます。

 ○○には画像ファイルのURLを記入します。
 今回は先程、背景で使用した画像を貼り付けました。

 ●●には画像が表示できないブラウザや表示をoffにして
 いるブラウザのために画像の代わりに表示されるテキスト
 を記入します。
 
   
 入力出来たら保存してindex.htmlを開いてみましょう。以下のように 表示されていると思います。
   
 

チェック柄

 

   
 画像のサイズを指定  
   
 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
   
<html>
<head>
<title> My Web Sight </title>
</head>
<body>
ここから ↓

<p>
<img src="check1.gif" width="100" height="100" alt="チェック柄">
<img src="
check1.gif" width="200" height="80" alt="チェック柄">
<img src="
check1.gif" width="20%" height="25%" alt="チェック柄">
</p>

ここまで ↑

</body>

</html>
 タグの説明

 <img src="
○○" width="●●" height="●●"
                      alt="
チェック柄">

 width="
●●"  画像の幅  ピクセル又は%

 height="
●●"  画像の高さ ピクセル又は%

 今回は背景に使用した画像を使っています。

 背景に使用した画像の基本サイズは
                100ピクセル×100ピクセルです。
   
 入力出来たら保存してindex.htmlを開いてみましょう。 『 ここ 』のように表示されていると思います。
   

Home  Step.10