HTML #9 - HTML Images and it's attributes Introduction, Uses and How to use

Hello friends, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know about HTML Images, its uses and also know the way of using it. We will also know about some common attributes of images. The tutorial also contains some example codes related to images, which helps us to easily learn about the images. So friends, let's begin...

HTML Images

Images are the important component for any web page. It enhances the design and appearance of the Webpage. In HTML, "<img>" tag is used to show images in any Webpage. It is an empty tag i.e. it only has starting tag, it doesn't contains any content within it. It uses "src" attribute which takes the path of the image file as it s value, and then, the image is shown to the user. There are some more attributes which is required with "<img>" tag, which helps in showing image properly. So, let's know about these attributes along with the "src" attribute, which is described above :- 

1. "src" attribute:-

<img src ="/images/programming.jpg" title="path from web server"/>
<img src ="c://images/programming.jpg" title="path from local storage'/>
<img src="https://www.google.com/programming.jpg" title="url of image on another Server"/>

This attribute is the most important while showing an image, as it contains the image path, which is used by the browser for showing images.

We can use here the file path of the image which is stored in the website server or in your local storage ( it only works when you open it in your local browser ), which is read by the browser to show image. 

For showing remote images ( the images that is neither on your server, or on your local storage i.e. if you are using any another online server for storing images e.g. google images etc.), we can use here the URL of the image, that you want to show, and the browser will load it from that server and will show it. The syntax of using this attribute is given above. 

In the above code, "title" attribute is used to only explaining the file path, that, which path is from where used showing the image. 

2. "alt" attribute :- 

<img src ="https://www.google.com/programming.jpg" alt="Programming Infinity Logo" />

It is used to provide a short description of the image, which is used by the web browsers to show alternate text instead of image, when an image fails to load due to some error. It is also used by screen readers to give the short description of the image. It is a required attribute, because, the web browsers use it to validate the image correctly. you can understand it as a name for the image, as without name anyone will not know you. The syntax of using this is given above.

3. "width" and "height" attribute :-

- width and height attribute :-

<img src="https://www.google.com/programming.jpg" alt = "Programming Infinity Logo" width="100" height="100" />

- style attribute :- 

<img src="https://www.google.com/programming.jpg" alt = "Programming Infinity Logo" style="width:100px; height:100px;" />

These are used to customize the width and height of the image respectively. it takes its value in pixels. We can customize the width and height also through css, where we can give value in in, mm, cm, px and so on. These are the required attributes for the image, because, if this attribute is not used, then, the image will sometimes flicker while loading. The syntax of using these attributes is given above. 

In the above code, style attribute is used, which takes its value in css "property:value" pair, and this css is applied particularly to the element, in which it is used. For more information about the style attribute, check out the "style" tutorial.

There are still many attributes of the <img> tag. We will know about thisetin the upcoming tutorials.

Some ProInfinity points :-

1. We can also show gif using "<img>" tags. For showing gif, just copy the path of the gif and add it in the "src" attribute i.e. provide the path of the gif as a value of the "src" attribute.

2. We can customize "width" and "height" through both CSS (using style attribute ) or HTML. It is recommended by Programming Infinity to use "style" attribute for customizing "width" and "height", if you want the image width and height not to be altered by CSS i.e. If we customize the width or height or both through CSS of all images in Webpage, the images whose width are customiZed through "style" attribute will not be changed, whereas, the width and height will change of the images with "width" and "height" attribute.

3. In HTML5, the "<img>" tag is an empty tag, as described earlier, but, It is a container tag in XHTML. So friends, when you are writing in XHTML Version, then use closing tag with opening tag for "<img>".

4. It is recommended by Programming Infinity to write all the code in lowercase, as it is not required to strictly validate the code by the different HTML Versions. All the codes of the Programming Infinity are written in lower case.

So friends, that's all for this tutorial. Hope u enjoyed it. If u have any question, then ask me in comment box.

Thanks

Programming Infinity ( Samridh Sharma )