HTML: How to add image to your webpage?
Image Tag IN HTML
<img src="file path/url">
Where src is the key and its value must be a url or file path
File path is used to display an image in your device, which is especially used for local hosting. But URL is the best way to host images into a webpage. For example see the image below
You can a simple image here. The actual code behind this is:
<img src="https://i.postimg.cc/BZYT9f8K/20201101-092919.jpg">
So here you can actually see the what is the URL. So okay now, let's see some other Attributes of this image tag.
In this list, only some are used in every cases. The most used Attributes in image tag are:
Src, Width, height and alt
As defined above src attribute actually gives the url of the image to be displayed. It is compulsory! Okay now let's move to other Attributes,
Width - Used to define width of the image. Regardless of it's original width its value must be in pixels.
<img src="../images/test.jpg" width="20">
This tag takes test.jpg image in images folder in your system storage. Let's say the actual width of this image is 80 pixels. By the width attribute it shortens its width to 20 pixels. If this attribute is not specified, the browser takes the default width of the image.
Height - Same as Width Attribute, but defines height of the image.
Alt - Gives the image an alternate information. That is, there maybe some situations where the client ( one who sees the webpage ) can't see the image, it can be due to their network or maybe media blocked, etc, on those times, we should inform the client that, what image it is, by a fallback text ( if you are thinking what is a fallback message, it is a message used to display when an error occurred from client or server side ) In most cases, the alt text is same as file name. See the example code below
<img src="../images/blog_logo.png" width="128" height="128" alt="blog_logo.png">
This tag gives output a image of 1:1 ratio ( Image Ratios are used for measurement purposes) When an error occurred and the client can't see the image, the value in alt Attribute will be displayed as text in browser ( because nothing can block texts ) So the client knows that there is a image here.
That's all for today, you can frame exercises on your own!
Feel free to ask your queries, post feedbacks in comments section.
See you all in next post, till then take care!
Stay Tuned♡!
Comments
Post a Comment