Saturday, July 9, 2011

Attributes for <IMG ...>

So, pretty much every time I create a blog post I do a search for the HTML image tag to grab and use... mainly with all the attributes; HEIGHT, WIDTH, ALT. I should remember it really, but it avoids small mistakes with missing quote marks, etc.:

<IMG SRC="image.gif" WIDTH=500 HEIGHT=500 ALT="Planetary Folklore">

I figure if I'm using it so much I ought to add an article - and grab the code from here!
Some info on this tag:

– WIDTH and HEIGHT tell the browser the dimensions of the image. The browser can use this information to reserve space for the image as it contructs the page, even before the image has downloaded.
– WIDTH and HEIGHT are not required:

<IMG SRC="image.gif" ALT="Planetary Folklore">

– WIDTH and HEIGHT do not have to be the same dimensions as the actual picture. If you set different dimensions the image will be stretched or shrunk to accomodate the dimensions.
– You can use percentages instead of pixel widths. Percentages are of the available width or height that the image could fill - when using percentages be sure to enclose the value in quotes:

<IMG SRC="image.gif" WIDTH=500 HEIGHT="50%" ALT="Planetary Folklore">

– You can specify only one of WIDTH or HEIGHT, and generally browsers will render the image so that the ratio of height to width stays the same:

<IMG SRC="image.gif" WIDTH=500 ALT="Planetary Folklore">

– Always use the ALT attribute

HTML Images - HTML Code Tutorial

1 comment:

Blog Widget by LinkWithin