Home Site Map Gallery Your Two Cents Service Order


Home HTML Basics Headlines Paragraphs Links Free Links Mail-to Bold Italic Font Color Font Size Background Image Graphics Background Color Aligning Text Aligning Images HTML -Adding Audio HTML - Frames HTML Tables Meta Tags Forms Mouse Over Mega Search Browser Support

Get Your Free E-Mail Account

Isn't it time you
updated your site?





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.


If you want to link to images that are not your own, be sure to get permission from the copyright holder first.


You should always use ALT to specify alternate text for an image, so that users without graphical capability will understand what the image is showing.

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.

Webdesign ] Banners and Graphics ] Promotional Services ] HTML Tutorials ] Consulting ] Hosting ] Domain Registration ] WIN PRIZES!! ]

BizRate Customer Certified (GOLD) Site We are members of the Chamber or Commerce!

Verify our security!
Verify Our Security

Better Business!

AOL Members Choice Award


Webmaster-at-Large:     webmasteratlarge@planetwebdesign.com  

Planet T-Shirt Logo

  PO Box 22157  Knoxville, Tennessee 37933-0157

Telephone:    865-300-3804      FAX:    865-692-9247

PlanetWebDesign LogoCopyright © 1998, 1999, 2000 PLANETWEBDESIGN TECHNOLOGIES, Inc. All rights reservedBye Bye!!