Adding Images and Links

You can use images in a variety of ways on your HTML pages. Images include everything from graphics and clip art, to photographs and other visual objects. Images can illustrate text, show a product, or act as navigational tools for a Web site. An important part of using images effectively on your own site is to understand how browsers display the image for others to view. Although there are numerous file types used for images, JPEG and GIF are the two most popular types used on the Web. Both formats are cross-platform and offer file compression. PNG is a newer arrival in the image file format world and is gaining popularity among Web developers. However, not all older browsers can support PNG.

JPEG	GIF	PNG
JPEG or JPG which stands for Joint Photographic Experts Group, supports 24 bit color, allowing for millions of colors. The JPEG format is commonly used for complex images, such as photos or graphics that used millions of colors and feature lots of detail. JPEG is not a good choice for simple artwork because it results in a larger overall file size, which in turn , takes longer to display on Web pages.	GIF, which stands for Graphics Interchange Format, supports up to 256 colors. The GIF format is more common with simple images, such as simple graphics utilizing basic shapes and lines, and logos. If you image or graphic contains few colors and not a lot of detail, GIF is a good file format choice.	The PNG format, which stands for Portable Network Graphics, offers rich color support and advanced compression schemes. It is good choice for any kind of images, from graphics to photographs. PNG supports 24-bit color, like JPEG, but greater file compression. Choose PNG if you intended audience most likely uses a new browser version.

1. Insert an Image

You can add images to your Web page using the IMG tag <IMG SRC="?"> to add interest or illustrate a topic. For example, you can add a photograph or a graphic to your page. In HTML coding, images are inline elements, which means they appear within the body of the page along with the next elements. You can use image files from a digital camera or scanner, or files you create with a graphic program. If you are not the original author of the image, you need permission to use the image before placing it on a Web site You can also find free clip art images on the Web. (http://office.microsoft.com/en-us/images/).

2. Specify an Image Size

If your image appears too big or too small on a Web page, you can use HTML coding to change the size with image attributes. You can set a size for the width and height of an image. The width and height is measured in pixels, or you can set the size as a percentage value of the overall window size. The syntax to specify the image size is <IMG.. WIDTH="?" HEIGHT="?"> where ? is the size in pixels.

3. Add Alternative Text

For users who do not have images turned on in their browser windows, you can add alternative text that identifies the image on your page Alternative text, sometimes called placeholder text, helps describe the image, and is an important addition to your Web page markup. The syntax to add alternative text is <IMG... ALT="?"> where ? is text describing the image.

4. Align an Image Horizontally

You can use the alignment attributes to control the horizontal positioning of an image on a page. The alignment attributes include Left and Right. The syntax to align an image horizontally is <IMG... ALIGN="?"> where ? is either Left or Right. By default, the image aligns to the left. This alignment attributes also control the way in which text wraps around the image.You can also align an image vertically on a page.

5. Center an Image

You can center your image on the page using tags <CENTER>...<:/CENTER>. Centering an image can give it more emphasis and help the image stand out from text or other page elements.

6. Wrap Text Between Images

You can place two images side by side and wrap text between the two. To create this effect, you align one image to the left <IMG... ALIGN="Left"> and the other to the right <IMG... ALIGN="Right">. Adjacent text flows between and around the images

7. Add Space Around an Image

Most Web browsers display on a small amount of space between images and text. You can increase the amount of space, also called padding, to make the page more visually appealing and easier to read. You can use the HSPACE attribute to control the horizontal padding to an image, which adds space to the left and right of an image. The syntax to add space around an image is <IMG... HSPACE="?"> where ? is the amount of space you want to insert in pixels. You can use the VSPACE attribute to add padding above and below an image. The value used with the horizontal and vertical spacing attributes is measured in pixels. For example, a value of 20 adds 20 pixels.

8. Set an Image Border

You can add a border to an image to give it added emphasis or make the image more attractive on the page. You can define the thickness of the border, measured in pixels. The syntax to add alternative text is <IMG... BORDER="?"> where ? is thickness value in pixels/P>

Adding Images

Steps in adding and formatting images in your HTML document: