| |
Grammar
- Some people may not need this, but there are a number of on-line spell-checkers available. These come and go from time to time,
and there are quite a few around with differeng capabilities, but here is one that that is representative of the genra:
Mark Horrell - Online Spell Checker
(http://www.markhorrell.com/tools/spellcheck.asp).
- Many people may not need this, but Altavista provides an
on-line translator
(http://babelfish.altavista.com/babelfish/tr).
- A style manual always helps:
- For citations of electronic sources, the U.S. Library of Congress provides
Citing Electronic Sources.
- The W3C provides a general resource, The W3C Manual of Style.
- Also from the W3C is Style Guide for Online Hypertext
- A comprehensive on-line resource is available from Western Washington University - -
Citation Guides & Style Manuals.
- Another on-line resource is available from
Diane Hacker - - Research and Documentation.
- Generally, the so-called "big three" of syle authorities are
- -
The Chicago Manual of Style, 15th Edition for use generally,
especially in history;
- -
MLA
Handbook for Writers of Research Papers, 6th Edition especially for the humanities; &
- - The
Publication Manual of the American Psychological Association, Fifth Edition
for the social sciences.
The American Sociological Association has their own
handout for their journals and other publications, and
there are various manuals and formats for the physical sciences (e.g., the Council of
Science Editors (known as The Council of Biology Editors [CBE] prior to January
1, 2000) Scientific Style and Format: The CBE Manual for Authors, Editors, and Publishers, 6th Edition).
- Other useful resources would be a dictionary and a thesaurus,
and as a general resouce,
- For more on writing style, see Writing Hints
Text
Style
- Capitalize the first letter of each word in headings, whether at the top of the page or within the page,
unless the heading is a sentence; do not capitalize articles (a, an, the) or conjunctions (e.g., and, but, or) unless they are
the first word of a sentence or the first word following a colon.
- Use an "em dash" ("—") or a double dash ("--"), not a hyphen ("-"), between phrases (e.g., "The sunset -- crimson as
blood -- was dire in its portense"); use an "en dash" ("–") to compound a word (e.g., "She put in a first–place effort").
[An em-dash is — or —
(the non-standard — generally works, but should probably not be used);
an en-dash is – or – --
see Frequently Used Symbols
for a comprehensive list of standard and non-standard symbols.]
- Web pages generally read best when written more like newspapers than like books or journals; so,
- Use an active voice.
- Use direct language: the fewer the words, for the same message, the better!
- Use short paragraphs (but not so short as to make reading choppy).
- Don't change headers, footers, or other established design or navigation elements within a page or from page to page within a site
(or within a discrete sub-site, which may have its own look and feel to establish a distinct identity).
Markup:
- Use bold (<b></b>) for visual effect; use strong (<strong></strong>)
for spoken effect.
Similarly,
- Use italic (<i></i>) for visual effect; use emphasis (<em></em>) for spoken
effect.
However,
- In general, it is probably best to avoid using italic and emphasis: as you can see, they
"de-emphasize" visually on Web pages: when style dicates the use of italic font (e.g., book or newspaper titles), it is probably best to
add bold as well (so it comes out like this).
- Never use underscores (<u></u>) as these are reserved for links (although in usage such as the
abbreviation for "megaHertz" it conforms to common usage and is very unlikely to be confused with a link: thus
MHz is essentially innocuous.
Links
- Periodically check links for functionality and content [manually or try the
W3C's link validator
(http://validator.w3.org/checklink)].
- Text links should be separated by a non-link character or graphic to fascillitate use by screen readers and other
non-graphical browsers.
- Also, as general aspects of good style,
- Avoid drawing attention to the medium. That is, do not link with words like
"click here," "read," "find," "go to," etc., unless some broad directive is required (e.g., "return to referring page" where the link
is generated by JavaScript through a reference to the DOM document.referrer) or where
reference to the medium is specifically intended (e.g., "go to home page").
- Use relative links, not absolute links, within an individual Web site.
- When linking to a page or site, don't use quotation marks around the text or link.
- Text links are not generally underlined when:
-- the link is a part of the overall design of the site, such as page footers; or
-- text is included in an image file where the enitre image is clickable.
- If you wish to provide the user with the acutal URI, give the page title first (as a link) and then in parentheses the URI
(also as a link).
- And yes, the trailing slash is a part of the URI (omitting it is technically incorrect: thus http://www.docsteve.com/ is
the correct URI, while http://www.docsteve.com is incorrect).
- And yes, it's URI (Uniform Resource Indicator), not URL (Uniform Resource Locator, a type of URI): see
Naming and Addressing: URIs, URLs, ... .
Graphics/Images
- Always provide alt attributes (image description) for images.
[NOTE: "alt" atributes are supposed to display when the user agent
(i.e., the browser) does not display the underlying object (e.g., the browser is set not to display graphics or is a
non-graphical browser); it is not supposed to display as a mouse-over: many browsers have implemented this
incorrectly. If you want a mouse-over text-box, use the "title" attribute.]
- If possible, have images originate in-house or from some shared resource. This avoids infringing on copyrights.
Design and HTML
- Don't use frames: the potential for confusion far outweights the benefits.
- Use the <p> (paragraph) or <div> elements to delimit paragraphs.
- Use XML-compatible elements when possible (e.g., <br /> instead of <br>,
<hr /> instead of <hr>;
however, note that <meta> elements will not validate as html 4 with the internal close.
- Don't use incorrect markup just for formatting purposes: e.g., do not use <th> to make the contents of a table
cell bold and centered when the cell does not contain header information; instead, use
<td style="text-align:center;font-weight:bold">, which will not confuse
non-graphical browsers and screen readers.
- For tables,
- If you want no border, no cell padding, or no cell spacing, put in a "0" (zero) for each one.
There are no default values for these attributes listed in the DTDs:
the defaults used by browsers are generally cellpadding="1" and cellspacing="2" -- but who knows? -- while
the default for border is generally based on the absence of a "border" attribute in the start tag of the table element,
thus the absence of the attribute implies border="0" while its presence (e.g., the now deprecated usage <table border>)
implies border="1" (or some greater value based on the browser's default).
- Also, don't forget other table-formatting possibilities, such as
rules=none|groups|rows|cols|all and
frame=void|above|below|hsides|lhs|rhs|vsides|box|border
(border="0" -- either explicit or implicit as the the general default -- implies frame="void" and rules="none",
while any other value for border implies frame="border" and rules="all".
- For examples of these usages, see the Tables Demonstration Page.
- When in doubt about how the table will justify, specifiy the justification (e.g.,
(<td align="left">):
text inside tables might default to being centered or right justified through CSS inheritance rules,
even when not using CSS in the markup (IE6 is especially prone to this, although it is not clear
how pervasive this is or if this is a "bug": see the IE6
Cascade Test Page for a description).
This problem may also appear with other elements as well.
- Multiple blank spaces generally mean nothing (leading, trailing, at the beginning of a line, etc.), so don't worry about them: e.g., indent as
desired for clarity. The only time white space is meaningful is when the style white-space:nowrap is set, as in
<span style="white-space:nowrap">keep this
together<span> or when the non-breaking space is used ( or
 ).
- When entering coded values for html characters and symbols, use only the standard sets of values (see
Frequently Used Symbols for a comprehensive list of standard and non-standard
symbols).
Colors
- For accessibility,
- For the visually imparied, Reds are better than blues, as the longer wave-lengths pass more
more easilly through cataracts.
- Don't use colors to convey information (this will be lost to those with color-blindness or without a color monitor).
- Similarly, if there is a need to use colors, make sure foreground and background colors contrast sufficiently (in color and gray-scale) and wherever possible provide an
alternate means of conveying the information.
- For more on designing with color, see Working with Color
- For technical notes on color, including a critique of the the standard, browser-safe color palatte, see
W3C Standard Colors, "Standard" Palette, and Name/Number Crosswalk.
Fonts
- Different fonts may be used to manage a presentation (e.g., mono-space to align columns within pre-formatted text) or
to convey moods (e.g., fantasy, to convey a whimsical feeling). Here are some of the most common examples
(note: the generic name is in grey-blue):
- serif, e.g.,
- Book Antiqua
- Georgia
- Palatino Linotype
- Times
- Times New Roman
- sans-serif, e.g.,
- Arial
- Arial Black
- Arial Narrow
- Century Gothic
- Helvetica
- Impact
- Trebuchet MS
- Verdana
- cursive, e.g.,
- fantasy, e.g.,
- monospace, e.g.,
DTDs and the title, html, & meta elements
- Always use a standard DTD (document type definition) and correct <html> & <meta> elements (aka "tags")
- The standard DTDs on this (and related) sites are the following:
- For XHTML 1.1,
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- For XHTML 1.0,
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- For HTML 4.01,
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- For HTML 3.2,
<!DOCTYPE HTML
PUBLIC "-//IETF//DTD HTML//EN//3.0" "html-3.dtd">
- For HTML 2.0,
<!DOCTYPE HTML
PUBLIC "-//IETF//DTD HTML Level 2//EN//2.0">
- For XHTML, an XML declaration should go ahead of the DTD:
<?xml version="1.0" encoding="iso-8859-1"?>
(other standard DTDs are at the W3C's
Quality Assurance site at
List of valid DTDs you can use in your document)
- The standard <html> elements on this (and related) sites are the following:
- For XHTML,
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en-US">
- For HTML,
<html
lang="en-US">
- The standard <meta> elements on this (and related) sites are the following:
- <meta
http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
- <meta
http-equiv="Content-Style-Type"
content="text/css" />
- <meta
name="author"
content="..." />
- <meta
name="description"
content="..." />
- <meta
name="keywords"
content="..." />
- <meta
name="date"
content="..." />
(Note the internal close on the above tags, necessary for an xhtml DTD and validation -- it should be removed if used for an html DTD and validation.)
- The title element (<title>) should generally be the same as the heading (or title) as shown in the text on the page.
- The content of the meta element with name "description" may be the same as the title element, may be a standard description for all pages on the stite, or some combination thereof.
- The content of the meta element with name "keywords" may be general to the site but may also be specific to the page.
- The content of the meta element with name "date" should be in the internet standard of yyyy-mm-ddThh:mm:ss, where
- yyyy-mm-dd is the date in year, month, and day format, as delimited
- T is the capital letter "T"
- hh:mm:ss is the time in hours, minutes, and seconds format, as delimited
The time segment (Thh:mm:ss) may be omitted.
In General
- ALWAYS ALWAYS ALWAYS follow W3C standards (see the Home Page for more on web standards).
- If may be helpful to save a template or to mentally designate one page to be the template, and have that page include all of the standard headers, footers, and markup.
- Don't introduce odd colors and fonts simply because content is being updated: be consistent, follow the pattern of what is already there, and only change the style of a page when setting-off specific information requires it (i.e., let the content drive the format).
- Validate after changes, and use the validator icons: Bobby icons are at "Bobby Approved Icon" Guidelines; W3C icons are with their respective validators.
- Assume that Internet Explorer 5/6, Internet Explorer 7, Netscape 4/6/7, and Mozilla/Firevox will all display differently: do what can be done, but remember that the object of the page with respect to all possible platforms is total usability of the information, not total consistency of the presentation.
- Internet Explorer 7 and Mozilla/Firefox should display identically, but there may still may be some differences: always check.
- With the proliferation of handhelds (e.g., the Palm Treo), consider how these small units will display.
- It may be fair to assume that with ever heightening concern about security and maintaining up-to-date software and security patches that users will no longer be using non-compliant browsers (i.e., Internet Explorer prior to release seven and pre-Mozilla versions of Netscape): it may be safe to assume that, but maybe not.
- Going along with the preceeding, with Internet Explorer 7, Microsoft's problems with the display of the box model appear to be resolved, so it is time for everyone to start using style sheets for all their presentation.
- Where many noteworthy links appear scattered through a page, it may be helpful to consolidate them by providing a separate a "key links" section. This would probably best be situated at the foot of the page, just like where a list of references would be.
Key Links
- Key links mentioned on this page include the following:
|
|
