This article explains how to add an Image to a Web Page using HTML and CSS. You will learn how to insert an image into your web page, how to add alt text, and how to style your image using CSS.
Adding an image to a web page makes it more attractive, meaningful and visually appealing. We can insert images in a web page by using the <img> tag(which is an empty tag).
The <img> tag has several attributes that are used to specify the source, height, width, border and alignment of the picture. The following table lists the various attributes of the<img>tag.
| Attribute | Syntax | Functions |
|---|---|---|
| src | <img src=”filename”> | To identify the location of the image file. image should be in .bmp, .gif or .jpeg(.jpg) format. |
| align | <img align=”left”/”right”> | To specify the alignment of the image. |
| border | <img border=border thickness in pixels> | To give a border to your image. The thickness of the border ranges from 1 to 10 pixels. |
| height | <img height=height in pixels> | To specify the height of the image in pixels. |
| width | <img width=width in pixels> | To specify the width of the image in pixels. |
Let us now use the <img> tag and its various attributes to add an image to our Home page (incredible india.html), having a height=275 pixels, a width=250 pixels, an alignment=”right” and a border thickness=4 pixels, by performing the activity on the next page.
Activity
Adding an image to a web page using the<img>tag.
- Open the Notepad file “Incredible India.html” and add the<img>tag and its attributes into it as shown below. Save the file by the same name at the same location using File-> Save As.
- View the above file in your browser’s window.
…..You will see that the image as specified in the <img> tag appears on the web page.
<html><head>
<title>India - A Unique Travel Destination</title></head>
<body bgcolor="pink", text="blue">
<p align="center"><heading1><font size=24 color="maroon">Tourist Pleaces
in India <hr width=60% size=4 color="maroon"></p>
<img src="image.jpg" height=275 width=250 border=4 align="right">
<font face="verdana" color="navy" size=2><b><p>
India is a country of huge diversities and a home to all kinds of
attractions. Ancient temples, historical monuments, world class
architectures (the most famous example of which is the Taj Mahal at
agra), most exquisite kind of wildlife, extremely varied landscape,
and equally varied ethnic and lingual diversity; India displays it all.</P>
<p>Following is a list of some of the unique travel destinations
in india:</p></b>
<p>Heritage Sites and Monuments in India</p>
<p>Hill Station in india</p>
<p>Wild life of India</p>
<p>Pilgrimage Sites in India</p></font>
</body></html>
Remember
It is important to keep the image file and the HTML document file in the same folder. Otherwise you will have to specify the complete path with the src attribute rather than giving just the filename.
See Also
1. Creating a New Web Page
2. Adding Image to a web Page
3. HTML Center Tag