|
|
|
|
|
|
Placing A Picture On The Web Page
Once you've got the image file prepared, the next step is to place it in your HTML document with markup tags. Images in HTML are included by using the <IMG> tag. This page will cover the basic elements and attributes used when including an <IMG> tag in your document.
Locate the place in your document where you'd like to insert the image. You can place images in your HTML document by using the <IMG> tag. To insert an image into your HTML document, type <IMG>. There is no closing </IMG> tag. Now you need to specify the URL of the image to load by placing the SRC (source) attribute within the <IMG> tag. If you store your images in the same directory as your HTML files, the URL can simply be the file name of the image. For example, to insert a GIF file named myimage.gif into your HTML document, you would type <IMG SRC="myimage.gif">. To link to images that are not in the same directory as the HTML document, use relative URLs to locate them. For example, if you stored the above myimage.gif file in a subdirectory called images in your HTML documents folder, you would type <IMG SRC="images/myimage.gif">. The ALT attribute allows you to create alternate text for your image that will be shown to users who have browsers that do not support graphics. Some browsers will also display the alternate text while the image is loading. To specify the alternate text, type ALT=, followed by the text in quotes. How to Format Images in HTML As you've learned, it's very easy to include an image in your HTML document. However, simply including an image is only the first step. HTML provides you with several ways to format your image inside your document. You can align your image with the margins to allow text to flow around it. You can also specify the size you'd like the image to be, allowing the reader's Web browser to scale the image accordingly. You can determine the height and width of an image by opening the file in Paint Shop Pro. The number of pixels in the height and width of the image are displayed in the status bar. It's always a good idea to specify the height and width of your image, even if you don't want to scale it to a different size. When you indicate a size in the <IMG> tag, many browsers will insert a rectangle as a placeholder while the image downloads. This will allow users to read the text of your document immediately, instead of having to wait for the images to download first. To specify the alignment of an image, use the ALIGN attribute inside the <IMG> tag. To align the image above the text that surrounds it, type ALIGN=BOTTOM. This sets the bottom of the image equal to the baseline of the text. Likewise, to align the image below the surrounding text, type ALIGN=TOP. You can also align the middle of the image to the text baseline by typing ALIGN=MIDDLE. To force text to wrap around an image, type ALIGN=LEFT inside the <IMG> tag. This will align the image with the left margin of the document, and text will flow around it, beginning with the current paragraph. To place the image in the right margin of your document, type ALIGN=RIGHT. You can specify the height and width of your image. If you specify a different height and width than the actual image, the browser will scale the image to fit your settings. To set the height, place your cursor in the <IMG> tag and type HEIGHT=, followed by the height of the image in pixels. To specify the width of the image, type WIDTH=. There are a number of enhancements to the <IMG> tag. Netscape and Internet Explorer provide many extensions for greater layout control. |
PO Box 22157 Knoxville, Tennessee 37933-0157 Telephone: 865-300-3804 FAX: 865-692-9247
|
™
Copyright
© 1998, 1999, 2000 