References, Tutorials, Structure, Tags

Administrative

Decide on which HTML editor is to be used; get ftp or other file upload/download mechanism working.

Upper case or lower case? Lower case for tags and attributes! Quotes or no quotes for attributes? Put all attributes in quotes! Close all tags! Conform to the latest CSS, HTML and XHTML specifications!

Online tutorials and references for HTML, XHTML, XML

HTML and CSS code Validators

Remember to put a Document Type Declaration at the very top of the HTML document, of form (the text after PUBLIC is case sensitive!):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
or for a page containing a <frameset> use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">
to make the validator happy (the second line with the URL seems optional).

Other useful online references

Web Content Accessibility Guidelines 1.0. The Checklist has detailed guidelines of what to check for.

HTML Document Structure

Body Attributes

The BODY of a document contains the document's content. The content may be rendered by a user agent (e.g. a browser) in a variety of ways. For example, for visual browsers, you can think of the BODY as a canvas where the content appears: text, images, colors, graphics, etc. For audio user agents, the same content may be spoken. Since style sheets are now the preferred way to specify a document's presentation, the presentational attributes of BODY have been deprecated.

Tags (Controls) format the Content

- (Note Many of these (colored orange) are deprecated in HTML 4.01; see CSS Replacements for alternatives)

Website structure

Folder hierarchy is optional. It can make some housekeeping chores easier, but hyperlinks become a little more complicated. Duplicate the hierarchy of the website onto your hard drive, and test the links. Suggestion: create separate folders for images, sounds, multimedia, and styles, as applicable, and in addition a separate subdirectory for each major topic your website will contain.

Font Attributes

Note: the FONT tag is now officially deprecated in HTML 4.0, even though it is still very common. It is better to control various font attributes with Cascading Style Sheets (CSS) instead.

Font <font face="times new roman">Times New Roman text</font> Use of FONT is risky, if not necessary don't use. If you designate fonts, make sure to indicate second and third choices that are common: face="Verdana,Arial,Helvetica". Common PC fonts: Verdana, Arial, Helvetica, "Courier New", Palatino, "Times New Roman"; Common Unix fonts: Helvetica, Times; Common Macintosh fonts: Helvetica, Courier, Palatino, Times, Verdana, Arial. Generic: sans-serif, serif, cursive.

Font color

Note: the FONT COLOR tag is now officially deprecated in HTML 4.0, even though it is still very common. It is better to control various color attributes with Cascading Style Sheets (CSS) instead.

Color <font color="#000000|color_name">Text to be colored</font> The 16 common colors with names and their sRGB values (the name or value can be used in the quoted value for color): black="#000000"; green="#008000"; silver="#c0c0c0"; lime="#00ff00"; gray="#808080"; olive="#808000"; white="#ffffff"; yellow="#ffff00"; maroon="#800000"; navy="#000080"; red="#ff0000"; blue="#0000ff"; purple="#800080"; teal="#008080"; fuchsia="#ff00ff"; aqua="#00ffff".

In addition, there are another 124 named colors that most browsers understand and can display. These include the standard colors and some with more exotic names, such as cornflower blue, papayawhip, and peachpuff. There are swatches of the 140 colors and their names at MountainDragon's Web site.

An important note on color: currently web browsers only share 216 common colors. When designing key elements in your web site you should stay within the 216-color pallet. If you go outside the 216 color pallet, you start to use colors that do not exist within that browser, and the browser has to mix the colors that do not exist. Some displays will distort the tiny dots used to create the "dithered" color to the point where the image is so speckled that it does not appear to be a solid color. This makes text very hard to read if it is placed over the dithered color. You should always use a browser safe color when using solid color as a design element, or as a background for text. You should use yellow and red colors sparingly in your web site itself. Only use them in areas where you want the visitor to focus on. For a good dispay of the 216-browser-safe-color palette, visit the Color Lab at VisiBone. For an extended colorchart, see HYPE's 360+ Color Specifier. For a lot more information on using color, visit About.com and search on web colors. See also the article Splash Color onto Your Web Pages by Darrell Elmore at ZDNET. John Buck suggests Web Designer Community at SitePro Central, it's also interesting to play with it. The sliders let you adjust the color to your liking, then you can use the Hex RGB code. There are other website-building tools on its home page. Found on digg.

Size <font size="#">Font whose size is changed</font> 1=smallest, 8=largest. Relative is +1|2|3|4 or -1|2|3|4. The actual size depends on browser and user-set preferences. See http://www.netmechanic.com/news/vol3/design_no8.htm

Combined face, color, size <font size="1" color="#000000" face="times new roman">affected text</font>.

Font Type, Face and White Space

Here is some advice from Gregory McNamee -- see the full article at www.webreview.com/2001/03_23/designers/index01.shtml. Choose your font to match the purpose of your content. For long pieces of text, a serif face is preferred; for headlines, display type, pull quotes, click-here-to-purchase callouts, and any other material that you want your reader to linger over, use a sans serif font. Some modern digital sans serif fonts -- Arial, Optima, Verdana, and Helvetica -- also have the roundness and easily distinguished letterforms of the serif counterparts, and they're well suited for on-screen presentation of all kinds of writing.

Most serif fonts are designed to be optimally readable at 10 to 14 points; most sans serif fonts can be reduced a point or two below that and remain legible.

Allow ample margins around your text -- at least an inch, or even two, on all sides. Ideally, legible paragraphs will have only ten to twelve words per line, a feat best accomplished not by blowing up the type to larger sizes (use large type only to emphasize headlines and other important elements), but by affording your paragraphs plenty of breathing space.

Allow plenty of white space both in the margins and between lines of type. This between-line spacing (called "leading") helps the type stand out against the background. Another rule of thumb is to allow leading of at least 25 percent of the text weight -- that is, with 10 point type use at least 2.5 points of leading, with 12 point type use at least 3 points.

Accessibility

Consider how your site will appear on a PDA, to a blind person's browser, to a cell phone, etc. Accessibility needs to be considered and coded into your site.

Valid HTML 4.01!  Valid CSS!