Hey, this is my 4th day of 100 days web development challenge. I started this challenge with learning HTML as it is the foundation for structuring a web page. I have already completed with what is html and it's syntax, heading tags and lists, and yesterday completed with formatting tags in html.
Today, I have learnt the <img> tag and this blog is about the image tag.
Topics:
<img> tag:
- The <img> tag in html is used for displaying images on a web page.
- Images make a web page more attractive.
- The <img> tag is an empty tag, which means it does not has a closing tag.
- For displaying an image, we need to specify the path of that image.
- We use the "src" attribute inside the <img> tag to specify the image's path in the form of an URL(Uniform Resource Locator).
- For example: <img src="image url">
There are two ways in which we can provide the image url:
- Absolute url:
- Absolute url means providing the full path of the url.
- This is a preferred type of providing url.
- This type is useful when we provide the image url which is uploaded on some other server or website.
- for example: <img src="https://plus.unsplash.com/premium_photo-1669668198837-aff19a7a75ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Zmxvd2VyJTIwd2FsbHBhcGVyfGVufDB8fDB8fHww&w=1000&q=80">
<img src="https://plus.unsplash.com/premium_photo-1669668198837-aff19a7a75ef?ixlib
=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Zmxvd2VyJTIwd2FsbHBhcGVyfGVufDB8fDB8fHww&w=
1000&q=80">
- Relative url:
- We use this type of url when the image is present in the same folder in which the code of our website is present.
- We don't need to specify the full url as the absolute url.
- for example: <img src="image.jpeg">.
<img src="tree.jpg">
<img> attributes:
- The attributes provide extra information about the tag.
- They are written inside the opening tag after the name of the tag.
- The values of the attributes are placed inside double quotes after equal to sign.
- src: as discussed above, the src attribute provides the source of the image in the form of url.
for example: <img src="image.jpeg"> - alt: the alt attribute displays an alternate text if the image cannot be displayed.
for example: <img src="tree.jpeg" alt="image of a tree"> - width: It is used to specify the width of the image.
For example: <img src="tree.jpeg" alt="image of a tree" width="340"> - height: It is used to specify the height of the image.
For example: <img src="tree.jpeg" alt="image of a tree" height="350">
<img src="tree.jpg" alt="image of a tree" width="340" height="350">
Images as a link:
- We can use a image as a link if we want our user to be directed to any other website or any other web page of the same website when the image is clicked.
- We make use of the anchor tag <a> to add a hyperlink to other website. We will learn more about the anchor tag in next blogs.
- We need to place the <img> tag inside the opening and closing <a> tag.
- We must provide the link o the website that we want our user to be redirected at.
- For example: <a href="https://www.wikipedia.org/"><img src="tree.jpeg" alt="wikipedia" width="340" height="350"></a>
<p>Click on the image to go to Wikipedia</p>
<a href="https://www.wikipedia.org/"><img src="tree.jpg" alt="wikipedia"
width="340" height="350"></a>
All links:
Comments
Post a Comment
If you have any doubts, Please let me know.