HTML - Images
What are HTML Images
Images are really important to make our HTML documents as well as to describe many complex concepts in a very simple way on your web page. In this section, we will go through simple steps on how to use images in web pages.
Insert Image
You can put in any image on your web page just by using <img> tag. The following is the simple syntax on how to use this HTML tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is a void tag, which basically means that it can contain only a number of attributes and does not have a closing tag.
Example
Here is a simple way to use the <img/> tag to bring in an image on our webpage
Example
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src = "/html/images/test.png" alt = "Test Image" /> </body> </html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify the correct image file name in the src attribute. The image name is always case sensitive.
The alt HTML attribute is a compulsory element attribute that describes an alternate text for the image if the image cannot be displayed due to some network reason.
Set Image Location
Usually, we keep all the images in a different directory. So let's place our HTML file image.html in our home folder and create a subdirectory image inside the home directory where we will keep our image test.png.
Example
Let's Assume that our image location is "image/siitgo.png", try the following example:
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src = "/html/images/siitgo.png" alt = "Test Image" /> </body> </html>
Set Image Width/Height
You can manually specify the width and height of an image based on how you want it to be by making use of the width and height attributes. You can also set the width and height of the image according to either pixels or a 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/siitgo.png" alt = "Siitgo Image" width = "150" height = "100"/> </body> </html>
Set Image Border
By default, the image will have some sort of border around it, you can manually set the border thickness of the image is based on pixels using border attribute of the <img> tag. For instance, giving an image the thickness of 0 basically means, there will be no border around the image.
Example
<!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>
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
