Graphics/Images

Use Graphics Wisely

Although graphics are used to liven up a page, they should be used wisely. Placing too many images on a page can be distracting and make the text difficult to read. Graphics should be used sparingly and each image should have a meaning.

Graphic File Format

Many of these formats exist but there are three that are the most common: gif, jpg, and png. These formats are needed to input graphics.

• gif: This extension is best for line art and animation; it also supports 1-bit transparency.
• jpg: This extension is best for photographs and other images with gradient color.
• png: This extension is best for line art and photographs; it also supports 32-bit transparency.

Inserting Images

In order to display images in HTML you must use the img / tag. Some attributes that go along with img / tag include:

• src: Name and location of image file
• align: Image's alignment
• height: Image's height
• width: Image's width
• border: Image's border size

Optimizing Images

To optimize an image means to make sure that it is ready for the Web. This includes altering the following: resolution, pixels, dimensions, and the color.

Images are not just pictures. You can also add a background image, such as a solid color or some kind of design.

Tables

When creating a table, you are able to format all of its details.

• Alignment
• Borders
• Background
• Dimensions
• Positiong

The tags used when making a table include:

• table.../table: Starts and ends the table's contents.
• tr.../tr: Marks the beginning and end of row contents.
• th.../th: Marks the beginning and end of the table's heading and applies format.
• td.../td: Starts and ends table data.
• caption.../caption: When used with in the table makes text appear as a caption.

Forms

Forms are a way to allow your visitors to send feed back on your site or your topics. Have you ever bought anything online? If so, chances are you have used a form. Forms can consist of text boxes, drop down menus, or check boxes.

Some common tags used when building forms include:

• form.../form: This shows the beginning and end of the form.
• input /:
  • type - Type of form field to create.
  • name - Assigns a form or element name.
  • size - Specifies the length and width of the form field
  • maxlength - Largest number of characters allowed in the field.

Colors

Did you know that colors are displayed by combining red, green, and blue light sources?!

You can set colors to just about anything with HTML. You can set it to fonts, backgrounds, tables, etc. As with images and graphics, you must use color in moderation. If color is misused it may make your web page unattractive and difficult to read and navigate.

Following the "rules of three" can help make your web pages more inviting to users:

1. Increase the amount of white space on your page, but try to keep it within three pages.
2. Use no more than two or three different fonts.
3. Use no more than three main colors.

Color is coded with a series of letter and numbers in the HTML code format. The below link provides a good example of the basic color codes.

www.w3schools.com/html/html_colors.asp

Home | Tools