Image handling in HTML, Free online HTML Tutorial, Learn HTML online for free...

Web pages containing only text look lifeless. Images not only add beauty to a web page they also bring life to web pages. Almost every web page has some kind of images on it. In this lesson we will be showing you how you can add images to your web pages.

HTML supports many image formats. The most commonly used formats are GIF and JPEG. JPEG is used for photographic quality images and GIF is used for other types of images.

Before going any further you should have an understanding of relative path and absolute path and the difference between the two.

We use <img src="path"> tag, where path is the absolute or relative path of the image file. <img> tag has no ending tag. It is one of the stand alone tags of HTML.

<h2>Web page with an Image</h2>
<img src="logo.jpg">

The above HTML will result in the following output:

Web page with an Image

Here the src attribute takes the relative path of the image file. It could also take the full absolute path of the image file. The resultant code with the same output would have been:

<h2>Web page with an Image</h2>
<img src="http://pickatutorial.com/resources/logo.jpg">

By default the image appears aligned to the left. If we want to see it in the center, we could place <center> tag around the <img> tag, as under:

<h2>Web page with an Image</h2>
<center>
<img src="logo.jpg">
</center>

Web page with an Image

Next >>> Lesson No. 21: Advanced Image Handling