HTML-画像
画像は、美しくするだけでなく、Webページに多くの複雑な概念を簡単に表現するために非常に重要です。このチュートリアルでは、Webページで画像を使用するための簡単な手順を説明します。
画像を挿入
を使用して、Webページに任意の画像を挿入できます。 <img>鬼ごっこ。以下は、このタグを使用するための簡単な構文です。
<img src = "Image URL" ... attributes-list/><img>タグは空のタグです。つまり、属性のリストのみを含めることができ、終了タグはありません。
例
次の例を試すために、HTMLファイルtest.htmと画像ファイル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ファイルtest.htmをホームディレクトリに保持し、サブディレクトリを作成しましょう。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グラフィックスのための無料のWebグラフィックス