Image tag in HTML full explained(post 3) | Basics of HTML | CSS | JAVASCRIPT For beginners - by enggfact.blogspot.com

HTML

BASICS OF HTML - FOR BEGINNERS

Hello geeks,

Nice to see you here , as you know this is the third post on the topic - basics of html for beginners . I am feeling overwhelmed after seeing the reaction of readers on previous two posts on this topic . So , i think to make a full series of html covering all the important tags which you can use to make your website more professional and stylish .

If you are an absolute beginner then this series gives you an brief idea and working of the tags used in HTML . I want to tell you that after covering all the tags of HTML , I will cover all the tags of CSS also . So , this is a great opportunity of you guys go follow our blog and subscribe it for more technical posts .

Now , we are going to learn about the most important tag which is widely used in the field of web-development and you can see this tag in many websites which you visit daily , the name of that tag is <img> image tag .

WHAT IS IMAGE TAG ?

As you can guess the working of this tag through its name that it is used to show images in your website .This tag is widely used in creating the professional websites because you human nature is bound to images e.g. if you learn something through images and videos then it is more memorable then learning that theoretically hence this is the main aim of using images in websites to make them memorable in human so that they can visit it frequently .

FORMAT OF IMAGE TAG ?

The format of image tag is easy . We have to write <img> for linking am image to our website . But for addressing the image we have to give the name of image to source which will link it to the image tag .
So the format is like -

<img src="imagename.jpg">

Here , you have to remember one thing don't write .jpeg in place of .jpg because some browser are unable of identifying this (.jpeg) format so , you always use .jpg .

REQUIREMENT OF IMAGE TAG ?

For showing image on your website , it is necessary condition that you have to save your image that you want to show in your website in your current folder means the folder where you are saving your .html files .

NOW , LETS CODE IT -

<html>
<body>
<img src="ImageName.jpg" width=size height=size>
</body>
</html>

This is the program that is used to display image without using size attributes like width and height .

By writing above program , this is the output image .

When size attributes are used in the above program .

This is the output when we use size attributes .

WE HAVE TO SAVE IMAGE WHICH WE HAVE TO DISPLAY IN THE CURRENT FOLDER WHERE WE ARE WORKING . LOOK I DID THE SAME THING .

Here , width and height is used to give the visual size of image which is visible to your user and src is used to give the source to the browser of that particular image .

SOME INTERESTING FEATURES OF IMAGE TAGS -

1) If there is a condition that you forget to save your image on current folder or your saved image get deleted then there is a alternative way to show some message in place of the image when the user opens your website . Now , we are going to learn that method .
For showing this message we have to use alt attribute which is used to show an alternative message if browser is unable to detect any jpg file in the current folder .

<html>
<body>
<img alt="write your message here" src="imagename.jpg">
</body>
</html>

This is the program to display message in place of image .

This is the output of the above program .

2) There is also a professional use of image tag which you can see in your daily life . When you open any website you see an image and when you click on it then the image becomes large in size means it is zoomed in size . This is due the use of image tag in a clever manner . Now we are going to learn this technique of image tag . How we can make this in our own website .
This we have to use href means we have to give the reference of the image for creating this feature in our website .

<html>
<body>
<a href="imagename.jpg"> <imag src="imagename.jpg" width=size height=size> </a>
</body>
</html>