An image map is a graphic image that can be used as site navigation on web pages. Image maps can be practical idea for web page design and site navigation.
Grantastic Designs home Site map Search Grantastic Designs Contact Grantastic Designs
Graphic design services Graphic design gallery Graphic design tips FAQs Design glossaries About Grantastic Designs Graphic design links Order SEO and graphic design services
Design and marketing tips  
*
Graphic design tips - photo
*
 

home > design tips > web site design > graphic image HTML

HTML code for graphic images

Graphic designers who do not specialize in HTML coding and web site design do not know how to code web graphics (GIFs and JPEGs) properly for web page download time and online promotion. This page summarizes the main points of coding a web graphic image.

Here is a sample of the HTML code for a dollar sign web graphic image:

<IMG SRC="images/dollar.gif" WIDTH="31" HEIGHT="44" ALT="Dollar sign" VSPACE="2" HSPACE="2" BORDER="0">

Here is the dollar sign web graphic:

Dollar sign

  • IMG: This is the HTML coding that tells the browser (Netscape or Explorer) to insert a graphic image into a web page

  • SRC: This is the attribute that indicates which file name or URL of the graphic image you want to place on the web page. In this example, the image name is a GIF called dollar.gif, which is stored in the directory called images on our web site. The file name or URL must be enclosed in quotation marks.

    (Note: The names of graphic images are case sensitive. Thus, the graphic image named dollar.gif is not the same as the graphic image named dollar.GIF. You can use this little fact to quiz graphic designers to see if they are web-savvy.)

  • WIDTH / HEIGHT: These tags are your graphic image's dimensions, measured in pixels. Using the WIDTH and HEIGHT attributes in your IMG SRC tag preserves the layout of your web pages. Also, web pages using the WIDTH and HEIGHT attributes in their IMG SRC tags download faster than pages not using these attributes.

  • ALT: Stands for the alternative text attribute. Alternative text must also be enclosed in quotation marks.

    In the event that your visitors want to view text (by turning off the "Auto Load Images" option in their browser) to increase a site's download time, in the place of the graphic image will appear the alternative text. The same text will appear if your visitors are using a text-only browser.

    This attribute is often overlooked by online promotion specialists. Some search engines index alternative text, thus making your graphic images another place to strategically place keywords. Also, if you are using Explorer as your browser, when you position your cursor over a graphic image, Explorer will display the alt-attribute message in a little box next to the cursor (similar to pop-ups). This gives you an opportunity to add to the delivery of your site's marketing message.

  • BORDER: Newbies commonly overlook this attribute. If you are using your graphic image to link to another web page, such as a navigational button, you should set the BORDER to equal zero or else your browser will wrap a border around your image. The color of the border will be the same colors used in your text hyperlinks.

    For example, here is the same graphic image with the BORDER attribute removed. The first dollar sign image on this web page is also set to link to our tips page, but the BORDER attribute is set to zero. You can tell if a graphic image is a hyperlink if you put your cursor over the image and look at the bottom of your browser's screen. If the graphic image is linked to another web page, the URL will appear at the bottom of your browser's screen.

Dollar sign

  • HSPACE / VSPACE: This attribute sets the horizontal (left and right) and vertical (top and bottom) spacing around a graphic image. This attribute is particularly useful if you do not want your text to be flush against the graphic image.

    (Note: Some people format their sites using tables and will set the spacing around their graphic images using the CELLPADDING and CELLSPACING attributes in their tables. Thus, this attribute is optional.)

The HTML code shown on this page for graphic images should be the foundation of what most of your image tags should look like.

Top

If you have any specific questions about our web site design tips, or if you would like permission to republish this design tip on your web site or newsletter, please use our contact form or email us at info@grantasticdesigns.com.

back to web design tips

design services | gallery | design tips | faqs
design glossaries | about us | links | request a quotation
site map | search | contact us | back to home

Copyright Grantastic Designs, Inc. All rights reserved.
Graphic design links - photo

Related web site design tips: