HTML Images:
In HTML, images are added to a webpage using the `<img>` (image) element. The `<img>` element does not have a closing tag and is used to embed images in the HTML document.
Here's the basic syntax:
html
<img src="image-url" alt="alternate-text">
src (source): This attribute specifies the URL or file path of the image. It can be an absolute URL (starting with "http://" or "https://") or a relative URL.
alt (alternate text): This attribute provides alternative text for the image, which is displayed if the image cannot be loaded or for accessibility purposes (screen readers). It's a good practice to include descriptive alt text.
HTML Images |
Here's an example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Image Example</title>
</head>
<body>
<h2>My Image</h2>
<img src="https://example.com/my-image.jpg" alt="A beautiful landscape">
</body>
</html>
In this example:
The `<img>` element is used to embed an image.
The `src` attribute contains the URL of the image.
The `alt` attribute provides alternative text describing the image.
Make sure to replace "https://example.com/my-image.jpg" with the actual URL or path to your image.
Additionally, you can use other attributes to control the display and behavior of the image:
width: Specifies the width of the image in pixels or as a percentage.
height: Specifies the height of the image in pixels or as a percentage.
html
<img src="image-url" alt="alternate-text" width="300" height="200">
It's important to consider the size and resolution of the images to ensure optimal performance and user experience.