HTML Images
What is images in HTML?
HTML images refer to the use of images in web pages using the HTML (Hypertext Markup Language) markup language. Images are an important element of web design and can be used to add visual interest, enhance user experience, and convey information.
To include an image in an HTML document, the tag is used with the source (src) attribute to specify the URL or file path of
the image file. The alt attribute is also used to provide alternative text for the image, which is displayed if the image cannot
be loaded or is unavailable for any reason.
Basic Syntax of HTML image tags-
In the above picture you can see you need to use <img> tag with "src" attribute to show an image in web pages. The <img> tag does not have a closing tag.
Example of an HTML image tag
<img src="cartoon.jpg" alt="A picture of a cartoon">Result
To display the image "cartoon.jpg" in HTML, you can use the <img> tag with the "src" attribute set to the file path or URL of the image, and The "alt" attribute provides a description of the image for accessibility purposes, which is important for users who may be using screen readers or have images turned off in their browser.
Note: Make sure to replace "cartoon.jpg" with the actual file path or URL of the image.
More Example of HTML image tags-
<img src="images/my_image.jpg" alt="A beautiful landscape">Here i have a folder named images in the same directory where the html file located and inside of that folder i have the actual image named my_image ( .jpg is type of file ) .
Note: Make sure the image file must be located in the same directory as the HTML file or its path should be specified properly.
Image size - "width" and "height" attributes
In HTML, you can specify the size of an image using the "width" and "height" attributes in the "img" tag. Here's an example:
Example of HTML image tags using height and width attributes-
<img src="path/memory/image.jpg" alt="Image description" width="500" height="300">In the example above, the "src" attribute specifies the path to the image file (here first we created a folder named path and inside of that folder we created another folder named memory and inside of that folder we have the actual image named image), the "alt" attribute provides a description of the image for accessibility purposes.
The "width" attribute specifies the width of the image in pixels, which in this case is 500 pixels. The "height" attribute specifies the height of the image in pixels, which in this case is 300 pixels.
Note that the actual size of the image may differ from the dimensions specified in the HTML code. If the image is larger or smaller than the specified dimensions, it will be automatically resized to fit within the dimensions specified in the code.
Images from another server
To display images from another server in your HTML code, you can use the img tag with the src attribute set to the URL of the image on the other server. Here's an example:
<img src="https://example.com/image.jpg" alt="Example Image">In this example, the src attribute specifies the URL of the image on the example.com server.
Note that if the image is on a different domain, you may need to ensure that the server hosting the image allows cross-origin requests. This can be done by setting the appropriate "Access-Control-Allow-Origin" header on the server.
Add a link to an image
You can add a link to an image using <a> tags . Here's an example of how to add a link to an image tag in HTML:
<a href="https://www.google.com">
<img src="image.jpg" alt="Example Image">
</a>In this example, the a tag wraps around the img tag and provides the link to the URL specified in the href attribute. The img tag specifies the source of the image in the src attribute and includes an alt attribute for accessibility purposes.
So whenever someone will click on that image it'll go to google.