Most websites use graphics of some sort - photographs, cartoons, buttons, bullets, bars, and so on. Some of the graphics are animated. Fortunately, all of these different sorts of images use the same tag... the image tag. It is a stand-alone, and so has no ending tag. You just put it where you want the image to be. The basic image tag looks like this:With, of course, the appropriate file location and extention inserted where you see
filename.jpg. Just like with the
BODYtag, you can also set many other attributes if you wish. The following are not requred, but can be used if you want.
ALTstands for alternative text. This is the text which is displayed while the image loads, if the image link is broken, if the visitor's browser does not load images, or when a visitor hovers their mouse pointer over the image. For example, the
ALTtext of the image below is
Pretty cool, eh?
ALIGNtag lets you sent the images alignment with respect to the surrounding text. For example, the images on either side of this paragraph are put there by the values of their
ALIGN=RIGHTaligns the image with the right margin.
ALIGN=LEFTaligns it with the left margin. Use "View Source" to look at the tags. If the text around the images is long enough, it will wrap around them, filling in the extra space. To see how this works (if your screen is too big and so the text doesn't go past the bottom of the images), resize your browser window until it's small enough to demonstrate.
ALIGN=TOPaligns the top of the image with the tallest object in the current line.
ALIGN=MIDDLEaligns the middle of the image with the baseline of the current row.
ALIGN=BASELINEaligns the baseline of the image with the baseline of the current row. If you don't set a value for
ALIGN, it will automatically use
BORDERtag refers to the line you often see around images used as links. Look at the linked images below. From left to right, their borders are set at
If you don't enter a value for
BORDER, most browsers will automatically display a border of 2.
WIDTHset the dimensions of the image in pixels. You may sometimes want to slightly shrink or enlarge an image without having to alter the image itself. You use these tags to do it.
VSPACEtags set the space around the image, again in pixels.
HSPACEsets the horizontal space, and
VSPACEsets the vertical. For example, the images used in the
BORDERexample all have an
Design Tip: when you want to illustrate a text with images, alternate which side of the page you put the pictures on.