HTML images.

Posted by on
Namaste friends…. I am back with my fresh post…hope you guys refer my posts to gain some knowledge regarding web development because I am very eager teach regarding this…so, guys keep on referring my posts in order to gain some knowledge because knowledge is everything.
So, coming back to my previous post. I gave a brief revision about all the tags which I explained you all in the previous posts and with the help of all those tags I made a webpage.

Today, I will be explaining you all about the HTML images

HTML IMG TAG

IMG tag includes

Use the HTML <img>element to define an image.
Use the HTML src attribute to define the URL of the image.
Use the HTML alt attribute to define  an alternate text for an image, if it cannot be displayed.
Use the HTML width and height attributes to define the size of the image.
Use the CSS width and height properties to define the size of the image.

Insert Image

You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
                                             <img src=”Image URL” . . .  attributes-list/>
The <img> tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag.

Input:


Output:


The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.


Images in another folder

If not specified, the browser expects to find the image in the same folder as the webpage.
However, it is common to store the image in a sub-folder. You must then include the folder name in the src attribute:
<img  src= “D:/wallpaper/OverWatch/699057.png”   alt=  “HTML5 Icon”   style=  “width : 128px ; height : 128px ; “>

Images on another server

Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
<img  ,src= “http://www.google.com/images/green.jpg”alt=”w3schools.com”>

Set images width/height
  
You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixel or percentage of its actual size.

Example:
<!DOCTYPE html>
<html>
            <head>
                         <title>set image width and Height</title>
           </head>
           <body>
                       <p>setting image width and height</p>
                        <img  src=”/html/images/test.png”  alt=”Test Image”  width=”150” height=”100”/>
            </body>
</html>

Set image Border

By default image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.
<!DOCTYPE html>
<html>
            <head>
                         <title>set image border</title>
           </head>
           <body>
                       <p>setting image border</p>
                        <img  src=”/html/images/test.png”  alt=”Test Image”  border=”3”/>
            </body>
</html>

Set image alignment

By default image will align at the left side of the page, but you can use align attribute to set it in the center or right.
Example:
<!DOCTYPE html>
<html>
            <head>
                         <title>set image Alignment</title>
           </head>
           <body>
                       <p>setting image Alignment</p>
                        <img  src=”/html/images/test.png”  alt=”Test Image”  border=”3” align=”right”/>
            </body>
</html>

So, this was all for today guys. I will be giving you more knowledge in my next post. So, stay tuned. Thank you.

For latest updates like our fb page Click Here!!!!!!

Comments

Post a Comment