HTML: How to add image to your webpage?

 Image Tag IN HTML


        In this post we will see how to add images to your webpage. You can see in webpages where images are displayed, since it belongs to content layer of web, HTML is responsible for that too!

The <img> Tag in HTML used to display an Image in a webpage. It has many Attributes with it! One of the main Attribute of this tag is src Attribute. Which is used to give source of the image. The correct usage of this tag is

<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.

img_tag_attrbutes_list

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

Popular posts from this blog

Introduction To Python

HTML: Text Tags: Part 1

HTML: Anatomy of Tags