HTML images

HTML Images

The "<img>" tag is used to display images in HTML.
The required attribute for the "<img>" tag is the src attribute, which specifies the URL of the image.
The "alt" attribute is also recommended for the "<img>" tag. It provides a text description of the image for screen readers and in case the image fails to load.
The "<img>" tag is a self-closing tag, meaning it does not require a closing tag.
You can also add borders, padding, and margins to images using CSS.
The "title" attribute can be used to provide additional information about the image when a user hovers over it with their mouse.
Images can be linked to other pages or files using the "<a>" tag. Simply wrap the "<img>" tag in an "<a>" tag and specify the href attribute.
There are several file formats for images, including JPEG, PNG, GIF, and SVG. Choose the format that best suits your needs, considering factors like image quality, file size, and browser support.

HTML Code:

                            <img src="image.jpg" alt="description of image">

The src attribute of the <img> tag is set to image.jpg. This means that the image will be loaded from a file called image.jpg in the same directory as the current page.

The alt attribute of the <img> tag is set to description of image. This means that if the image cannot be displayed, the alt text will be displayed instead.

Next Step : Resize the image

By default, images will be displayed at their original size. If you want to resize the image, you can use the width and height attributes of the <img> tag. Here is an example of how to use the width and height attributes:

HTML Code:

                            <img src="image.jpg" alt="description of image" width="500" height="600">

The width attribute of the <img> tag is set to 500. This means that the image will be displayed at a width of 500 pixels.

The height attribute of the <img> tag is set to 600. This means that the image will be displayed at a height of 600 pixels.

Next Step: Add a caption to the image

If you want to add a caption to your image, you can use the <figcaption> tag. Here is an example of how to use the <figcaption> tag:

HTML Code:

                            <figure>
                              <img src="image.jpg" alt="description of image" width="500" height="600">
                              <figcaption>This is a caption for the image</figcaption>
                            </figure>

The <figure> tag is used to group an image and its caption together. The <figcaption> tag is used to add a caption to the image.

Next Step: Add a link to the image

If you want to add a link to your image, you can use the <a> tag. Here is an example of how to use the <a> tag:

HTML Code:

                            <a href="https://www.txon.in">
                              <img src="image.jpg" alt="description of image" width="500" height="600">
                            </a>

The <a> tag is used to add a link to the image. The href attribute of the <a> tag is set to https://www.w3schools.com. This means that the image will be linked to the txon website.

Next Step: Add an image as a background

If you want to add an image as a background, you can use the background-image property. Here is an example of how to use the background-image property:

HTML Code:

                            body {
                              background-image: url("image.jpg");
                            }

The background-image property is used to add an image as a background. The url function is used to specify the image to be used as a background. The url function is set to "image.jpg". This means that the image will be loaded from a file called image.jpg in the same directory as the current page.

Next Step: Add an image as a bullet point

If you want to add an image as a bullet point, you can use the list-style-image property. Here is an example of how to use the list-style-image property:

HTML Code:

                            ul {
                              list-style-image: url("image.jpg");
                            }

The list-style-image property is used to add an image as a bullet point. The url function is used to specify the image to be used as a bullet point. The url function is set to "image.jpg". This means that the image will be loaded from a file called image.jpg in the same directory as the current page.

Next SStep: Add an image as a border

If you want to add an image as a border, you can use the border-image property. Here is an example of how to use the border-image property:

HTML Code:

                            div {
                              border-image: url("image.jpg") 30 round;
                            }

« Previous Next »