Friday, April 26, 2019
HTML Image Tag:
The HTML `<img>` tag is used to embed images in an HTML document. It is a self-closing tag, meaning it doesn't have a closing tag. The `<img>` tag has several attributes that allow you to specify the source (URL) of the image, alternative text, dimensions, and more.
 |
Add a Photo to the Webpage
|
Here is the basic syntax of the `<img>` tag:
html
<img src="image-source" alt="alternative-text" width="width-value" height="height-value">
`src`: Specifies the URL or file path of the image.
`alt`: Provides alternative text for the image. This is displayed if the image cannot be loaded and is also used for accessibility purposes (screen readers).
`width` (optional): Specifies the width of the image in pixels.
`height` (optional): Specifies the height of the image in pixels.
Here's an example of how you might use the `<img>` tag in an HTML document:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Example</title>
</head>
<body>
<h1>My Web Page</h1>
<p>This is an example of an image:</p>
<!-Using the img tag with source, alt text, and optional width and height attributes -->
<img src="example.jpg" alt="An example image" width="300" height="200">
</body>
</html>
In this example, the `<img>` tag is used to display an image with the source file "example.jpg," alternative text "An example image," and specified width and height attributes. The width and height attributes are optional and can be adjusted based on the desired dimensions of the displayed image.
Remember to replace "example.jpg" with the actual path or URL of your image file. Additionally, providing meaningful alternative text is important for accessibility and is good practice in case the image cannot be loaded.