Putting Graphics on a Web Page

| Basic Image Tags |  New Alignment Tags |  Controlling Size, Borders, and Spacing |  References |

Basic Image Tags	Putting an image before text Putting an image in your Web page is as simple as inserting this line, <img src="gfleurx.gif">. When you use this basic statement, the text immediately following the statement starts at the bottom right-hand corner of the image and wraps around to the left margin, just underneath the image. To align adjacent text with the top of the image, add ALIGN=TOP to the statement (i.e., <img align=top src="gfleurx.gif">). To get the text to start under the image, put a paragraph tag, <P>, between the image statement and the text. Note: There is a better way to do this with a new tag which was not available in the original version of HTML. See below for how to use this tag. Last, to align adjacent text with the middle of the image, add ALIGN="MIDDLE" (i.e., <img align=middle src="gfleurx.gif">). Putting an image after text When you have an image that immediately follows text, all but the last line sits above the image. The last line leads up to bottom left corner of the image. This usually leaves an unsightly blank space in the middle of the paragraph. To make the image appear under the last line of the text, put the paragraph tag, <P>, between the text and the image statement. | top of page |
The New Alignment Tags	More ways to align images Whereas all browsers understand the HTML tags we have talked about so far, the newer ones also understand the HTML 3.0 extensions which add the alignment options of left right texttop absmiddle baseline bottom absbottom Inserting an image in the left margin ALIGN="LEFT" makes the browser put the image in the left margin, underneath the preceeding text. All text following the image will be placed to the right of the image, until the bottom of the image is reached.     Even if you insert a paragraph tag, the text will still be placed to the right of the image. To force the subsequent text to appear under the image, instead of to the right of it, use <BR CLEAR="LEFT">. This tells the browser to break the line and move down until it finds a clear left margin. (Netscape understands the clear option, but Internet Explorer does not). Notice the difference between using this break tag and using the paragraph marker to force text to be placed under an image. The break tag will not put a vertical space between the image and the text. Inserting an image in the right margin ALIGN="RIGHT" is used to put the image on the right side and to place the text on the left. The text extends to the right margin when it reaches the bottom of the image. <BR CLEAR="RIGHT"> will break the line and move down until the right margin is clear. Aligning with the top of the text The difference between ALIGN="TOP" and ALIGN="TEXTTOP" is that with TOP, the image will align with the tallest item in the line, whereas with TEXTTOP, the image will be aligned with the tallest text in the line. Typically, these are the same. Aligning with the middle of the text ALIGN="ABSMIDDLE" places the image such that its center lines up with the last line of the preceding text. In this example, the statement is: <img align="absmiddle" src="gfleurx.gif"> places... Aligning with the bottom of the text ALIGN="BASELINE" and ALIGN="BOTTOM" both align with the bottom of the current line. <BR CLEAR="ALL"> moves the text down to where both margins are clear of images. | top of page |
Controlling Size, Borders, and Spacing - More HTML 3.0 Extensions	Width and height Including WIDTH=value HEIGHT=value in the image statement helps to speed up the display of the document. It can also be used to manipulate your image (but this is not recommended). In this example, the resize option in LView Pro was used to get the size of the image (40x37). The following statements produced these images: <img width="40" height="37" src="gfleurx.gif"> <img width="60" height="37" src="gfleurx.gif"> <img width="40" height="86" src="gfleurx.gif"> Borders To put a box around the image, add BORDER=n (n = pixel width of the border, such as 1, 4, 8) When you use an icon that looks like a button for an anchor (a link), you may not want the anchor-border that is automatically placed around the image. To explicitly turn this off, put BORDER="0" in your image statement. Note: with Internet Explorer, the border will be invisible unless the image is an anchor. Controlling spacing If you want to control the amount of space between the text and the image, add VSPACE=value HSPACE=value to your image statement. For example, <img vspace="25" hspace="25" src="The Imaget3.gif"> will clear a space 25 pixels wide around the image. | top of page |
References	A Beginner's Guide to HTML