PROGRAMMING IN COMPUTERS (HTML MID-LEVEL) PART - #3

Hi there, Welcome to the another part of PROGRAMMING IN COMPUTERS (MID LEVEL) PART - 2. In the previous article we have seen about some tags like Comment Tag and How to do Comment in HTML, TT Tag and some information about it. 

You can read the previous part of Article by clicking here :- CLICK HERE!!!!  

In this article we will about Image Tag and it all types of Attributes. 

IMAGE TAG : Image tag is used to place image in the webpage. It is a empty tag, means it has no ending tag. The image can be placed in webpage by using <img> tag.

To extract the image from the folder your have to use <img src> (src stands for source) source is the pathway to the image in the folder. After when you write img src in brackets then give = sign and under double inverted comma ("Location") paste the location of that image. 

We already know how to get the Location, i.e. to right click on the image and select Properties Option and under it copy the image location and paste it under double inverted comma and then give a slash (\) and write the name of the image and write the extension (i.e. .JPG or .PNG) and then close the brackets.

STEPS TO INSERT AN IMAGE IN THE WEBPAGE :

1. Write the image tag (img) and then write src and paste the location of the image, that you copied from Image Location.  

Syntax : <img src="Location of the image"> 

Example :-  

HTML CODE FOR IMAGE INSERTATION 

2. Right click on the image and then copy the location from the Properties Option and paste it under image location in the HTML code.

LOCATION OF THE IMAGE

3. Now after all this, your image will be uploaded on your webpage. 

OUTPUT OF CODE 

ATTRIBUTES OF IMAGE TAG : 

1. Src : Src stands for source. It is used to locate the path of the image form the folder of the computer.

Syntax: <img src="Sample Picture.jpg">

2. Height : This attribute is used to adjust the height of the Image. Max height off the image can be 100. The number (100) is used to display number of pixels in the webpage.

Syntax: <img src="Sample Picture.jpg" height="30">

3. Width : This attribute is used to adjust the width of the Image. Max width of the image can be 500 pixels to 900 pixels in the webpage.

Syntax: <img src="Sample Picture.jpg" width="45">

4. Alt : Alt stands for Alternate Text. This attribute used to display the alternate text when the image is not displayed on the webpage or image is not available at that time. 

There are 2 reasons when image cannot be displayed on the webpage, that are:

1. The Location of the image is incomplete of wrong.

2. The Image is not available in the computer or device.

Syntax: <img src="Sample Picture.jpg" alt="The image cannot be displayed"> 

5. Border : This attribute is used to give a border to the image. Numeric values are used to decide the border size and width. The default border of the image is 0.

Syntax: <img src="Sample Picture.jpg" border="5">

6. Border Color : This attribute is used to color the border of the image. 

NOTE - "Color" spelling is used instead of its spelling "Colour" as it is  the US/UK spelling. 

Syntax: <img src="Sample Picture.jpg" border="5" bordercolor="green">

7. Hspace : Hspace stands for Horizontal Space. This attribute is used to give Horizontal Space at the Horizontal Side of the Image. The numeric value is used and denotes the number of pixels for the spaces. 

Syntax: <img src="Sample Picture.jpg" hspace="4">

8. Vspace : Vspace stands for Vertical Space. This attribute is used to give vertical spacing on the both sides (Right Side and Left Side) of the Image. 

Syntax: <img src="Sample Picture.jpg" hspace="4" vspace="6"> 

THANK YOU !!!!!!!   

You can now SUBSCRIBE us for more information. Just click on ALLOW Button which will pop-up on the screen. SUBSCRIBE NOW! for more information and Get Notified when the new Articles comes.

If you like the Article then press LIKE Button to Like !!!!