HTML TRICKS (Basic Essentials) 2

ADDING IMAGES ADVANCE ATTRIBUTES

In previous lesson we learned some basic HTML codes to add an image inside an article or comment box and also in webpages. Now, we are moving a little further in image manuplation.

Image Size Attributes 

I have seen some images inside comment box exceeds the size of the body of comment box and hides under the advertisements. There is a solution which will resize the image to fit in the comment box. Below is the code to resize the image.

<img src=http://imageshack.us/myimage.jpg width="150" height="110">

"width and height" are called size attibutes, these attributes are included in the "img" tag to tell the brower to resize the image to given size on load.

See the example below:

Original Size of the Image       Resized Image
Height= 240 Width= 196         Height= 150 Width=150

Image Border Attribute

'Border attribute' is included into "img" tag to draw a border around the image, that makes the image to look highlighted and beautiful.

<img src=http://imageshack.us/myimage.jpg border = "1">

border ="1" this will add a 1-pixel border around the image. Border pixel value can be increased. border ="0" means no border.

See the example below:

         
1- pixel border           0-pixel border          2-pixel border

Image Space Attributes

You can create space between the image and surrounding text by defining vertical and horizontal space.

<img src=http://imageshack.us/myimage.jpg vspace="5" hspace="10">

See the example below:

Space attributes with alignment attribute.

Alignment Attributes justify the image to the LEFT, RIGHT or CENTER of the webpage.

<img src=http://imageshack.us/myimage.jpg align = "LEFT">

Alignment attributes

align = "LEFT" to position the image to left
align = "CENTER" to position the image in the middle
align = "RIGHT" to position the image to the right

These align attributes also affect the text position, see above image and text position.

<img src=http://imageshack.us/myimage.jpg hspace ="10" vspace="5" align = "RIGHT">

See the text position now and image is aligned to right side of the page. 

I hope, it will be proved as an essential lesson for beginners. Please, rate this tutorial.
Write to me for your questions and comments anytime.

Thanks for reading.