P. 1
HTML Tag Reference

HTML Tag Reference

|Views: 215|Likes:
Published by sandeepbhasin2006

More info:

Published by: sandeepbhasin2006 on Jan 20, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

07/21/2012

pdf

text

original

Before an image has downloaded, a box will appear showing where on
the page it will be. This box may be any size, and often the wrong size.
Then, when the image finally begins to download, it is suddenly found
to be too big for the space your browser has given it, and so
everything has to be shifted around to make room, messing up
whatever you were reading at the time and generally causing a
disturbance. You can prevent this with the height and width image
attributes.
The concept is simple: you input the dimensions of your image in
pixels into your HTML code. This tells the browser how much space to
leave empty, ready for your image, ensuring that no post-load shifting
goes on, and keeping your layout correct all the way through the
download process. Example:

height="3" width="500">

Giving the correct size has many advantages:

•It stops the loading mess-ups
•Your page appears to be loading faster, as everything is in place
•If people have images turned off, they still get the same page layout

You can also change the size of the images displayed in the browser.
Note that this does not change the filesize of the image. Nor will it
make any permanent changes to the image. It is just twiddling the
image in the browser, nothing more. All you do is put in whatever height
and width you want. See those horizontal blue lines I use further up the
page there? They are actually 1x1 pixel images made to their shape by
this sort of manipulation.
Some images resize better than others. Photographs and the like will
look terrible if you start resizing them with these attributes. Simple
blocky images will be fine, and in fact you can make these small in
your image editor and then multiply their size in your browser, which
makes the image load faster as the filesize will be smaller.

Where are the numbers?

If you don't know the dimensions of your images you can find it out in
a number of places. When you have the image open in your graphics
editor, it should have the dimensions somewhere on the screen, in the
form 120 x 80 x 16. These numbers correspond to the width, height,
and number of colours.

Otherwise, in your browser right-click on the image and select
'properties'. Beware, however, that this shows the display size, so if the
image you're checking has already been resized, you're going to get
that size. Some of the better HTML editors will add in the heights and
widths for you, saving you the hassle.
And never, EVER downsize the image with these attributes — do it in
your image editor. You'll be showing a small image and downloading
big ones. Nasty.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->