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 Advanced 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
You already know how to add an image to your web page. Here we will show you some advanced image handling with HTML.

Changing the size of an Image:

If you are not satisfied with the size of the image you can change its appearance size with the help of width and height attributes of the <img> tag.

<h2>Normal Size of Image</h2>
<img src="logo.jpg">
<h2>Smaller Size of Image</h2>
<img src="logo.jpg" width="100" height="50">
<h2>Bigger Size of Image</h2>
<img src="logo.jpg" width="300" height="250">

The output will be:

Normal Size of Image

Smaller Size of Image

Bigger Size of Image

The alt attribute is used to define an "alternate text" for an image. In case the browser can't load the image, it displays the alternate text in the box reserved for the image. The alt attribute can take a string of text as its value:

<img src="logo.jpg" alt="Logo Image">

Converting Images to Links:

We can very easily convert images to links by surrounding the <img> tag with the <a href> tag:

<a href="http://pickatutorial.com"><img src="logo.jpg" alt="Logo Image"></a>

The anchor tag <a></a> is explained in the next lesson.

Next >>> Lesson No. 22: HTML Links

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