|
HOME Images Links Linebreak Fonts Suggestions |
This page will explain the usage of an Image tag. For explanation purposes, the lines will be color coded for easier explanation. The explanation of each line will be below it showing what is required in each line, and what can be modified to suit your own personal needs.
|
**Required** This tells the browser that it will be loading an image. "yourpicture.xxx" **Required** This will be the filename of the picture you want to display. Just replace the "yourpicture.xxx" with the name of the picture you want to show. It can be in .bmp .gif .jpg .jpeg or .png format width="100" height="100" **Not Required** but helps the images load faster This will tell the browser the dimensions of the picture, in pixels. You can also use this to force the picture to load smaller than it actually is by reducing the pixel size here, but some loss of quality may occur with some formats. alt="Description goes here" **Not Required** This will display text that you have entered between the quotation marks when the user puts their mouse pointer over the picture. It is very helpful when you want to describe what the picture is. border="0" **Not Required** Determines the size of the border, in pixels, around the picture. If this part is not included, it defaults to a 0 setting |
With that being explained, lets take a look at what changing some of the options listed above will alter the way an image is displayed on a webpage.
You can see that I have forced the picture to load twice its size by doubling its dimensions in the tag. This is a good way to keep pictures sized uniformly on a site, but as you can see, stretching or shrinking them too much may cause the pictures to lose their quality.