About Comments in HTML Pages and CSS Stylesheets

You are encouraged to use comments liberally in your HTML and CSS files. This will be a big help as you make changes on your sites, and it is invaluable when you return to it after time has passed. If you ever have to pick up someone else’s code, you will love them if they put in comments, and hate them if they did not. You use different groups of characters to denote comments, depending on where the comment appears:

• <!--This is a terminated comment in an HTML file.-->
• /* This is a terminated comment in a CSS file or a Javascript file. The comment
  can span multiple lines. */
• // A single-line Javascript comment, and it does not have to be terminated.

About Whitespace in HTML

When displaying HTML, browsers will ignore multiple spaces (unless they are non-breaking spaces) and newlines. Except inside quotes, you can pretty freely add whitespace to make your HTML more readable.

About Images

The most common media type other than text is the image. Currently, the two most common image types used on the Web are GIF and JPEG. (A third image type, PNG, is a superior format to GIF, but has yet to achieve widespread usage because of poor support in Internet Explorer.)

• GIF images are small, support transparency, and have a limited palette of colors. This makes them ideal for menus and buttons and other line art – especially where things need to overlap without obscuring. The limited palette of colors (only 256 maximum) makes GIF a bad choice for displaying a photographic image. You can use a PNG wherever you would use a GIF, but do not expect Internet Explorer to render transprarency properly.
• JPEG images excel at displaying continuous-tone images, so they are ideal for displaying photographs. JPEG images use compression to hold down on the file size, but you can choose the desired level of compression, trading off file size for detail in the image.
  • More Compression = Smaller File Size = Less Detail in Photo.
  • Less Compression = Larger File Size = More Detail in Photo.

About Colors

Colors are represented in a number of ways in Web pages, but these are notational differences that describe the same thing. Color on computer monitors is represented with varying amounts of 3 fundamental colors: Red, Green, and Blue (also called RGB). By varying the amount of each of the 3 components, it is possible to produce the appearance of a vast array of colors. Each of the 3 components has a value from 0 to 255 (the range that can be represented in one byte = 8 bits = 2^8). The larger the number, the lighter the color (255 is the brightest for any of the 3 basic colors, while 0 is the darkest.)

The most common representational scheme for color uses the hexadecimal (base 16) notation, where each number runs from #00 to #FF. For example, #FFFFFF means that the Red/Green/Blue components are all #FF, and #0099FF means that Red is #00, Green is #99, and Blue is #FF. Here is a handy decimal-to-hexadecimal chart from Elizabeth Castro's site.

Here are the primary ways you can refer to a color in HTML:

• #RRGGBB, where RR is the red component (0-FF, which is 255 in base 10), GG is green, and BB is blue. If all three colors are at maximum (#FF), then the resulting color is White. This is the preferred way to represent colors.
• #RGB is the shorthand version of the previous entry, for the case where digits are doubled: #F8C == #FF88CC. Avoid this unless you are obsessed with making your code as tiny as possible.
• rgb(rrr.rr%, ggg.gg%, bbb.bb%), where the RGB values are specified as percentages like 72.5%. No one does it this way; use hexadecimal.
• rgb(rrr,ggg,bbb), where the RGB values are decimal numbers in the range 0-255. No one does it this way; use hexadecimal.
• keyword, where keyword is one of these predefined colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. No one does it this way, since your color choices can change constantly over the life of a project.

About Fonts

Fonts are one of the more problematic areas of Web design. Since fonts are not embedded in pages, it is always possible that some users' computers will not have the font chosen by the designer. In HTML, you can specify a list of fonts to try, and the Web browser will choose the first one that is found on the computer. There is little commonality in fonts available across PCs, Macs, and Unix boxes. Accordingly, the Web designer must take care to specify a comprehensive list of fonts that will achieve the desired look on each platform. The apparent size of the same font will vary across platforms, as well. Web browsers often allow users to scale the size of fonts up or down.

Given these factors, it takes some care to achieve a cross-browser, cross-platform look. Here are some guidelines:

• The most widespread Sans Serif fonts on the Web are Arial, Verdana (for Windows), and Helvetica for Mac OS. Ideally, you should choose one of these 3 for your primary font, and specify the other two as backup choices.
• Times New Roman is the most used Serif font on the Web. It is compatible for both Macs and PCs, and should be your primary Serif backup choice.
• Courier is a widely-available monospaced font, but it's ugly.
• Common Mac Fonts are Serif: Times, New Century Schoolbook, Palatino; Sans Serif: Helvetica, Arial, Verdana (only installed by IE); Monospace: Courier.
• Common PC Fonts are Serif: Times New Roman, Georgia; Sans Serif: Arial, Tahoma, Verdana; Monospace: Courier New.
• All that being said, there's a lot to be said for using nicer fonts than the lowest common denominator. Fortunately, whenever you specify a font in CSS, you can actually give a list of fonts to try. Simply put the nicer fonts at the beginning of your font list, and then make sure that the end of the list contains at least one font guaranteed to work on each platform.
  • Example:    font-family: Palatino, Georgia, "Times New Roman", Times, serif : a Mac user will see Palatino, a Windows user will see Georgia, and you'll always have Times (New Roman) just in case, with serif as the ultimate fallback position.
  • It's always a good idea to test each of the fonts in your list, to make sure that you don't get unexpected overflows because the text expands from a font choice to a larger than expected size.
• Here are some common font combinations:
  • Arial, Helvetica, sans-serif
  • Times New Roman, Times, serif
  • Courier New, Courier, mono
  • Georgia, Times New Roman, Times, serif
  • Verdana, Arial, Helvetica, sans-serif
  • Geneva, Arial, Helvetica, sans-serif

Here are some possible ways to specify the size of fonts:

• keywords: a good method for screen use, using relative sizes. One of the most versatile schemes for managing font size for a site calls for setting a single font-size keyword in CSS for the BODY tag, and then specify all other fonts in terms of percentages relative to the base size.
  body { font-size:large; }
  h1 {font-size: 150%; }
  
• percentages: another good way to specify fonts relatively for the screen (larger or smaller, not large or small).
  Example: h3 {font-size: 125%; }
• em: comes from the width of the capital "M". Changes to the base font size affect all others relatively, so this is also a convenient way to handle fonts for the screen.
• pixels: another natural way to specify fonts for the screen. This does not scale, though, so it removes flexibility from the user who needs larger text.
• ex: comes from the height of the letter "x". Not used much.
• inches: print-oriented.
• centimeters: print-oriented.
• picas: print-oriented.
• points: print-oriented.