Graphic designers who do not specialise 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 our logo web graphic image:
<IMG SRC="images/our-logo.gif" WIDTH="31" HEIGHT="44" ALT="Our logo " VSPACE="2" HSPACE="2" BORDER="0">
Here is our logo web graphic:
-
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 our-logo.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 our-logo.gif is not the same as the graphic image named our-logo.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 colour of the border will be the same colours 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.
-
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.
All of these articles may be freely reprinted in any e-zine, newsletter, newspaper, magazine, website, etc. as long as my name and bio remain intact. |
