Web Master Tricks
Using Graphics & Colors

Here you will find some useful tricks and guidelines for using Graphics & Colors on your web site. You will learn the importance of using the Height, Width and ALT tags. Learn the importance of shrinking (optimize) your graphics, and links to free services. Codes for aligning your graphics. Using the full BODY tag elements. Using colors and color charts, backgrounds and colors, and where to find free graphics for your site. Using a small graphic image (thumbnail) as a link to a larger graphic image.

Using Graphic Images

As a general rule you should always include the HEIGHT and WIDTH and ALT tags. And remember many may visit your site with a non-graphical browser, or choose to turn off graphics in their browser.

With sizing tags, a browser can download the text of the page, note the image sizes and know the page layout right away. Your page text will be visible to your visitors while the graphics continue to load.

Without sizing tags, a browser must download all of the text and graphics before it can learn the layout of your page and format it correctly. Nothing is displayed until ALL text and graphics can be determined and placed in the proper format. This can take time and leave a blank page for your visitors to view until the process is complete.

The ALT tag provides a description of the image while your graphics are waiting to be displayed. Non-graphical browsers will view the ALT tag as a description of the images. This would be very important should the graphic be a means of navigating your site. Be sure to include a suitable description for your graphic rather then the name of the graphic file; as some WYSIWYG programs seem to insert. The ALT tag should describe what the graphic is showing or what it is linking to; as the case may be. Using brackets allow non-graphical browsers to differentiate between the graphics and text on your page.

Sample:
<img src="img/valid32.gif" width=119 height=28 alt="[ HTML 3.2 Validated ] " border=0 align=middle>

Height and Width are expressed in pixels and not the number of bytes!

Very important!     Always optimize your graphics so your pages will load quickly. This should be done with ALL the graphics on your site. There are several free services available to optimize your graphics. Note: This does not shrink the actual size, but rather changes the amount of colors being used for the graphic. You are provided with several choices and are then able to choose which one remains as close to the original in looks.

Image maps should also be user friendly by providing text-only links either above or below the actual image map. For the actual image map you would then use the ALT tag as: ALT="[.]" so that they would only see a dot. To leave the ALT tag blank bu using ALT="" as some suggest as it would create an error when validating your code being considered an empty tag element.

Aligning Images - (with respect to the text baseline):

align=LEFT ---- > aligns image with left margin, text wraps around the right hand side of image.

align=RIGHT ---- > aligns image with the right margin, test wraps around the left.

align=TOP ---- > top of image aligns with the tallest item on the line containing the image.

align=MIDDLE ---- > center of image aligns with the baseline containing the image.

align=BOTTOM ---- > bottom of image aligns with the baseline of the line containing the image.

align=ABSBOTTOM ---- > bottom of image aligns with the bottom of the current line.

align=ABSMIDDLE ---- > bottom of image aligns with the middle of the current line.

[ Back to Top ]

---

Smaller Image as a link to a larger image

A very useful trick for providing a small or thumbnail image which will in turn open a larger graphic for a better view. The command to use is:

<A HREF="large.gif"><IMG SRC="small.gif"></A>

[ Back to Top ]

---

Graphic Formats

Most web graphics are either .jpg or .gif. When optimizing your graphics the best compression for photos would be .jpg file due to the range of colors within photos. For other graphics or images the best compression would be as a .gif file.

[ Back to Top ]

Using Colors

When using colors on your pages, keep in mind that not everyone may have the same monitor resolution that you are using. It is highly recommended that to have your colors display correctly for all visitors that you use the standard 256 Color Chart when choosing colors.

Keep in mind that not all browser can interpret the use of named colors.

• Choosing Page Colors (javascript)
• ColorMaker
• Dougie's Color Picker & RGB Color Chart

RGB COLOR CHART

To use the chart the hex code would be Red/Green/Blue for the color you want.
Example: Red - FF0000, Purple - 990099 Green -339933

[ Back to Top ]

---

Backgrounds & Color

When choosing a background color for your page take into consideration how your page will appear in different browsers. It is highly recommended that you avoid using dark backgrounds. The use of red text on any background color is advised against due to many people having visual difficulty with the color red. Be sure to test your site in different browsers to be sure your chosen text color shows up correctly.

If you are presenting information on your page for someone to use and reference be aware that certain colors will not print well. Two colors that do not print well are green and red.

I've visited many sites where the text was very difficult to read due to the choice of background color. My first thought when entering a site with a black or dark background is to decide whether the content is worth staying to read. I would say that 90% of the time I will immediately leave a site with a dark or black background.

Be sure to include all of the <BODY> tag elements on your pages as a means of helping to have your colors displayed as you intended! Of course the background image is optional.

<BODY background="img/bkgrnd1.gif" BGCOLOR="#FFFFFF" TEXT="#110000" LINK="#0000FF" VLINK="#23238E" ALINK="#000000">

Use this javascript - Choosing Page Colors to try out different color combinations.

Are you aware that certain color combinations on your site could be considered spamming by search engines? If they think you are trying to fool them, your pages will not get listed in their directory. People try to fool search engines by using text that is not visible on browsers. For example, a dark background with white text will appear to search robots as if you are using a white background with white text in an effort to hide what you want the search engines to see. Be careful with your use of background and text colors!

[ Back to Top | Meta Tags ]

---

Free Graphics

There are many places on the web where you can find free graphics for use on your pages. Visit Creative's Web Directory and also Creative Shopping - Software & Graphics for resources and links.

When using free graphics from the web remember to read any rules or requirements for use! With some you must provide a courtesy link back to their site. Many host providers frown upon the use of unauthorized graphics Graphic artists should be given credit for their work and generous offer of free graphics.

[ Back to Top | Home ]

Web Hosting by Netfirms | Free Domain Names by Netfirms

       

Copy & Copyright (c) 1998 - 2006   Creative Computing

Web Hosting by Netfirms | Free Domain Names by Netfirms

Please Click To Visit Our Friends At: