User:Erbingha/Image Tags
Image tags are used to include an image in the web page. The Image tag is an empty tag - not requiring a closing () tag. Image tags are used to include an image in the web page. The Image tag is an empty tag - not requiring a closing () tag. The syntax for an Image tag is: Where URL is the location of the image file to be included Note:SRC is short for Source For example, if you wanted to include this NCCES Home button on your page, include the following tag: Attributes Note: not all browsers support all of the attributes described below.
Alternate value (required). This attribute must be included in all IMG tags. It allows users who are using text browsers to know what the image is supposed to be. Also, some users will disable the displaying of images to reduce the amount of time it takes for pages to load. Often users will stop a page from loading before the image has been received. If there is no ALT attribute in the IMG tag, they will get a null image. If, however you include the ALT attribute describing the image, they may try to reload the image if it is important. Syntax:
Sizing. Images It is strongly recommended to let the browser know what size space to allow for your image by including the HEIGHT and WIDTH attributes in your image tags. This will allow many browsers to load a page faster because they can start displaying the rest of the page before the image arrives. These options can be also be used to scale the image to new dimensions. Be cautious when changing the size, you don't want to have to transfer a large image and then have it scaled down. It it better to save a smaller version of the image and link to the larger image. See: "Determining the Size of an Image File". Syntax: (where n is the measurement in pixels)
- WIDTH - the width of the image.
- HEIGHT - the height of the image.
Aligning Images. To define where images display you can add alignment attributes to the IMG tag. Syntax: (where value is one of the following)
- LEFT - Aligns the image along the left-hand margin and allows text to flow beside the image.
- RIGHT - Aligns the image along the right-hand margin and allows text to flow beside the image.
- TOP - Aligns the top of the image with the line's text
- MIDDLE - Aligns the middle of the image with the line's text
- BOTTOM - Aligns the bottom of the image with the line's text
NOTE: to stop the text from flowing or wrapping around the image, use:
Border. The border option indicates how large the border is around an image if the image is being used as a link. A common usage is to make the border of a button equal to zero, so that no border is displayed. Syntax: (where n is the measurement of the border thickness in pixels)
Spacing Images. To specify the spacing between images and surrounding text, use one of the following attributes. Syntax: (where n is the measurement of the blank spaces in pixels)
- HSPACE - The space along the horizontal edges of the image and the adjacent text.
- VSPACE - The space along the vertical edges of the image and the adjacent text.
By: John Dorner, IV, Area Specialized Agent, Information Management