Website Workshop: HTML


 

Color
Alignment
Link Color and Underlining
Whitespace is your friend!
Download time is important
Make the structure of your site clear!
Writing Text for the Web

Color and HTML

1) Hex Colors
All hex colors specified in HTML documents need to have # in front of them. SeeUThere code currently alternates between correct and incorrect use of Hex colors, even within the same document.

Incorrect: bgcolor="FFFFFF"
Correct: bgcolor="#FFFFFF"

2) Background Colors and the Transparent GIF
seeUthere.com header and navbar structures formerly made use of table cells with colored image backgrounds AND colored images, just to get the effect of a certain background color. Multiple single-pixel GIF images have been created in a variety of colors, just to provide background color.

A much more efficient solution is to use a clear single-pixel GIF to hold space open within a table, then use the bgcolor attribute for the table cell to provide the background color. This makes for a much faster download, since throughout the page only one image (clear.gif) is required for background color. The color itself is provided in the HTML, not by various images.

Using a clear single-pixel GIF will also ensure that the table cell has the height and width measurements that you want. You can be redundant and specify those measurements in both the GIF attributes and the table cell attributes, if you like, but the image attributes will be what really ensures the proper measurements of that table cell.

If you only specify the height and width of the table cell, and have no corresponding image of that height and width inside the cell, the cell can sometimes collapse or shift to different dimensions, depending on the browser and what is in the table cells surrounding the one in question.

Incorrect: <td background="/art/pxl/ffffff_pxl.gif" align="left" width="5" height="5">
<img src="/art/pxl/ffffff_pxl.gif" width="1" height="1"></td>
Correct: <td bgcolor="#FFFFFF" align="left">
<img src="/art/pxl/clear.gif" width="5" height="5"></td>


 
 
Next Topic: Cascading Style Sheets