Web Programming Basics
   
 
   
  Codes for HTML – Web Programming Basics
   
 

Codes for HTML

   
 

Codes for HTML – Colors, Images, and Background

   
 

Once you have the basics down for your HTML Web site design, the next step is to add some creativity.

   
 

The best way to enhance the visual appeal of your Web site is to incorporate a color scheme, images and background. However, while taking a virtual paint brush to your canvas, be careful not to overdo it, especially if you are designing a site for your business.

   
 

Visitors tend to shy away from overbearing Web sites that are too busy.

   
 

On the other hand, you don’t want a Web site that bores the visitor. The following are some suggestions for how to incorporate color, images and a background to your Web site.

   
 

Color

   
 

The two most common uses of the HTML color-coding system are generic color names and the hexadecimal system.

   
 

Generic colors are preset HTML coded colors where the value is the name of each color. The 16 generic colors include black, gray, silver, white, yellow, lime, aqua, fuchsia, red, green, blue, purple, maroon, olive, navy and teal.

   
 

These colors can be coded this way:

 

<font color=“black”>This is the color black.</font>

<font color=“yellow”>Or perhaps you might want to try yellow?</font>

Web designers by trade use the hexadecimal system because it offers more of a variety of colors.  A hexadecimal is a six-digit representation of a color. The first two digits (RR) represent a red value, the next two are a green value (GG), and the last are the blue value (BB).

An example:

bgcolor=“#RRGGBB”

The code is instructing the program to run a red-green-blue maximum intensity in the background of the Web site. The hexadecimal system uses digits 0 through 9 and letters a through f.

Some examples: The code “#000000” produces a black color. The code “#00FF00” is green. Yellow is “#FF0000.”

Novice Web designers might be scared at first of the six-digit codes, but it is to their advantage to become knowledgeable with the codes. The hexadecimal system is more reliable and widely compatible among Web browsers. It is the standard for colors on the Internet.

   
 

Images

Images are defined with the <img> tag in HTML. 

In order to display an image on your page, you need to use the src attribute. Src stands for "source.” The value of the src attribute is the URL of the image you want to display on your page.

An example:

<img src=“baseball.gif” width= “120” height = “120”>

The program is accessing a picture of a baseball that is saved as “baseball.gif” on your server. The image will be 120 pixels wide by 120 pixels high.

If you want to publish an image that exists on a different Web site, you can go about it this way:

<img src=“http://www.espn.go.com/images/baseball.gif”>

You will notice that the <img> tag does not require a closing tag because it contains only attributes.

One more feature is the “alt” attribute, which signals to the viewer what the image is in case their browser can not load images. The browser will display an alternate text where the picture is supposed to be. Moreover, when the viewer mouses over the image on the site, the “alt” text can serve as a caption.

An example:

<img src="baseball.gif" alt="Major-league baseball">

   
  Background

The default background color of Web site is white, which should be the appropriate background for a business Web site. Again, too much flash and color for something as serious as your business (depending what kind of business it is) can take away from your presentation.

At any rate, if you would like to add color or an image to your background, it is quite simple.

   
  Example of a background color:

<body bgcolor= “#C0C0C0”> … This provides a background color of gray to your site.

The value of the background image is the URL of the image you want to use. The image will repeat itself until it fills the entire browser window.

Example of a background image:

  <body background=“tile.gif”> … The background will have repeated images of tiles.

Some factors to consider while using a background image include the increased time to load your site, how the image meshes with other images on your site, does the repeated use of the image work, and does the image get confused with the text making it difficult for the viewer to read your site?

   
  What makes the development of a Web site so intriguing is the continual avenues you can take to improve it.  Just when you thought your site might be good enough, you can add images, certain colors and background effect to make it even better.

It is indeed like painting a picture, but it is easier to alter than getting out an eraser for a sketch or having to paint over a canvas. The computer does the work for you. You just have tell it what to do.

   
  Thank you to for this “Codes for HTML” article.
   
  Latest Web Programming Basics Articles:
   
 
   
 
   
 
   
 
   
 
   
 
   
Copyright © Webprogrammingbasics.com 2008, All rights reserved