Images play an important role to beautify webpage as well as to depict many complex concepts in simple way on your web page. These images can show some meaningful message regarding the topic. This tutorial will take you through simple steps to use images in your web pages. Image will separate the HTML file into the two types by using the images user can easily understand.
Inserting Images on webpage in HTML
You can insert any image in your web page by using <img> tag after following the proper syntax. Lets see the syntax of inserting image on webpage.
<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. Let us take an example code to understand inserting an image on webpage.
<!DOCTYPE html> <html> <head> <title>Use of Images in Webpage</title> </head> <body> <p>We are inserting an image in our webpage</p> <img src ="URL of image.jpg or .png or .gif" alt = "Test Image" /> </body </html>
It results as : We are inserting an image in our webpage
Image will display here
You can use .PNG, .JPEG or .GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive. The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
How to set image height and width?
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 pixels or percentage of its actual size. Let us take an example of setting image’s width and height in our webpage.
<!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <p>Setting image width and height</p> <img src = "URL of an image" alt = "Image not found" width = "250" height = "200"/> </body> </html>
The above code will display an image when we insert URL of this image with width and height as set in the code.
How to 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 = “URL of image.jpg or .png or .gif" alt = "Image not found" border = "2"/> </body> </html>
The above code will result an image with border set as 2 in pixels.
How to set image alignment?
By default, an image will align at the left side of the page, but you can use align attribute to set it in the center or right. Let us take an example in the form of code shown below.
<!DOCTYPE html> <html> <head> <title>Set Image Alignment</title> </head> <body> <p>Setting image Alignment</p> <img src = "URL of an image" alt = "Not found" border = "3" align = "center"/> </body> </html>
The above code will set an image alignment as center.