HTML-画像

画像は、Webページに多くの複雑な概念を簡単に表現するだけでなく、美しくするためにも非常に重要です。このチュートリアルでは、Webページで画像を使用する簡単な手順を説明します。

画像を挿入

*<img>* タグを使用して、Webページに任意の画像を挿入できます。 このタグを使用する簡単な構文は次のとおりです。

<img src = "Image URL" ... attributes-list/>

<img>タグは空のタグです。つまり、属性のリストのみを含めることができ、終了タグはありません。

例

次の例を試すには、HTMLファイルtestと画像ファイルtest.pngを同じディレクトリに保存してみましょう-

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>

   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image"/>
   </body>

</html>

これは、次の結果を生成します-

快適さに基づいてPNG、JPEG、またはGIF画像ファイルを使用できますが、 src 属性で正しい画像ファイル名を指定していることを確認してください。イメージ名は常に大文字と小文字が区別されます。

*alt* 属性は、画像を表示できない場合に画像の代替テキストを指定する必須属性です。

画像の場所を設定

通常、すべての画像は別のディレクトリに保存します。したがって、HTMLファイルのテストをホームディレクトリに保持し、ホームディレクトリ内にサブディレクトリ images を作成して、そこに画像test.pngを保持します。

例

私たちの画像の場所が「image/test.png」であると仮定して、次の例を試してください-

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>

   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image"/>
   </body>

</html>

これは、次の結果を生成します-

画像の幅/高さを設定

*width* および *height* 属性を使用して、要件に基づいて画像の幅と高さを設定できます。 画像の幅と高さを、ピクセルまたは実際のサイズの割合で指定できます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>

   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>

</html>

これは、次の結果を生成します-

画像の境界線を設定

デフォルトでは、画像の周囲に境界線があります。境界線の属性を使用して、ピクセル単位で境界線の太さを指定できます。厚さが0の場合、画像の周囲に境界線はありません。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>

   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>

</html>

これは、次の結果を生成します-

画像の配置を設定する

デフォルトでは、画像はページの左側に配置されますが、 align 属性を使用して中央または右側に設定できます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>

   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>

</html>

これは、次の結果を生成します-

無料のWebグラフィック

パターンを含む無料のWebグラフィックについては、リンクを調べることができます：/free_web_graphics [無料のWebグラフィック]

Html-images

HTML-画像

画像を挿入

例

画像の場所を設定

例

画像の幅/高さを設定

例

画像の境界線を設定

例

画像の配置を設定する

例

無料のWebグラフィック

目次