www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons Image handling in HTML Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
Lesson 28
Lesson 29
Lesson 30
Lesson 31
Lesson 32
Lesson 33
Lesson 34
Lesson 35
Lesson 36
It is a famous saying that "A picture is worth a thousand words".

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





Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.