• Caidenhead, Rogers; Teach Yourself to create a Home Page in 24 Hours, 1st edition; Samsnet Publishing; ©1997 Samsnet Publishing; ISBN 1-57521-325-7
• Castro, Elizabeth, ed.; HTML for the World Wide Web, Visual QuickStart Guide, 4th ed.; Peachpit Press, Berkely CA; ©2000 Elizabeth Castro; ISBN 0-201-35493-4
• Plotkin, David; How to do Everything with FrontPage 2000; Osvorne/ MacGraw-Hill, Berkely CA; ©2000 The MacGraw-Hill Companies; ISBN 0-07-2125-6
• Weinman, Lynda & Weinman, William; <creative html design 2>, a hands-on web design tutorial; New Riders Publishing, Indianapolis IN; ©2001 Lynda Weinman & William Weinman; ISBN 0-7357-0972-6

• W3Schools Online Web Tutorials
• Webmonkey
• Washtenaw Community College, etc.

• spacing between rows (I've used this for numbered lists and definition lists),
• background colour of text (this is how the highlighting effect is done for my links)
• margins for any element (I now have "left-margin" & "right-margin" defined for the body instead of using "blockquote")

• Because of the additional complexity, I had never gone beyond using either "Arial" or the user's default font on my pages. Now I can define selectors (tags) by using font-family statements like
  • "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif
  • Arial, Helvetica, Verdana, sans-serif
  • Georgia, "Times New Roman", Times, serif
• I am using rather conservative font choices because visitors must have the font already on their systems for it to be invoked and not all fonts have extended character sets.

• I have left in-line bold, italics, font colours, background image, etc. on my pages. Partly this is because creating all the class definition statements and inserting all the code will be a lot of work, but also so that most viewers can still see this formatting.
• Old browser versions that don't support CSS are still in use. Netscape 3 users (still 1% of viewers in May 2003 per Netmechanic) will no longer see my pages in Arial (even if they have that font on their system). They will see only their default text font and sizes and will miss any new effects.
• Because there are browsers that do not implement all CSS statements, some other viewers will miss various enhancements. (I've try to avoid effects that are not widely supported).
  • "lang" (which does not affect appearance but identifies blocks of text in a language other than that specified in the META tag — more on language below) is not supported by Netscape. Netscape users of all versions are 12% of viewers (same info source as above).
  • Coloured horizontal rules are not supported by Netscape 4 and below (10% of all users). Although the css statement validates, "colour" is not really a valid attribute of the HR tag. As of Feb 2004, I am using the "background" attribute to invoke coloured rules for Netscape 6 and Opera. Supposedly, a solid-colour graphic should be used instead, but images don't look or act the same as the HR tag and the html code is bigger.
• Update May 2006: Have started using descendant selectors to target css statements better and reduce the number of time a class needs to be invoked. Valign removed from table cells. More 'semantic' class names.

• NetMechanic's HTML Toolbox .
• W3C MarkUp Validation Service:
  HTML validator: http://validator.w3.org/
  CSS validator: http://jigsaw.w3.org/css-validator/
• HTML Validator, based on TIDY (Firefox extension): http://users.skynet.be/mgueury/mozilla/

• All my pages are now coded as iso-8859-2 (East European character set) for consistency. This character set covers all the characters I am likely to need for English, German, Romanian, Hungarian, Polish... 
  • For more on ISO-8859 codes, see The ISO 8859 Alphabet Soup.
  • According to some sources, utf-8 (Unicode), while ideal where multiple character sets are required, is not well-supported by some older browser versions. Also, decimal codes are better supported than hexidecimal codes. For more on Unicode (ISO 10646), see Unicode Home Page. Free Online Unicode Character Map helps you create short texts with unicode characters.
  • Character codes can be indicated at least 4 ways: 
    1. typed from the keyboard (exact character): ä
    2. named code (if available): format "&name;", example "ä" (a with umlaut), result "ä"
    3. decimal code (with appropriate meta coding): format "&#---;", example "ä" (a with umlaut), result "ä"
    4. hexadecimal code (with utf-8 coding): format "&#x----;", example "ä" (a with umlaut), result "ä". Note that 00E4_base16 = 228_base10
• I've also cleaned up some unusual codes (check this page's source code): … replaced with ..., – and — replaced with —, ’ and ‘ replaced with  ', † and some + replaced by †, „ and ,, replaced with ".
• Non-keyboard characters appearing in my pages (some of these don't work in Netscape 4.6):
  punctuation: † – — § © ° ½
  same as iso-8859-1: Á Ä Ç É Í Ñ Ö Ú Ü ß à á â ä è é ê í î ó ô ö ú ü ÿ 
  require iso-8859-2 character set:  ă ą ę Ł ł ń ő Ś ś Ş ş Ţ ţ Ż ż

• Shea, Dave & Holzschlag, Molly; The Zen of CSS Design: Visual Enlightenment for the Web; New Riders / Peachpit Press, Berkely CA; ©2005 Dave Shea & Molly Holzschlag; ISBN 0321-30347.
• Holzschlag, Molly; Cascading Style Sheets: The Designer's Edge, Sybex Inc., Alameda CA; ©2003 Sybex Inc.; ISBN 0-7821-4184-6.

• (Added Mar 2006) Accessibility checkers require that the <HTML> tag use the lang attribute to identify language of the webpage. The appropriate coding has been added, in addition to the existing language identification in the Meta tags.

• So far, having both texts on the same page is preferred because
  1. Visitors can easily tell if a page is available in their language. (I really hate it when a link to an alternate language page leads to a blank "under construction" page or "page not found" message!)
  2. Visitors can compare texts to check their understanding of a term or to aid in learning the other language (or critique my grammar!)
  3. Search engines will find my pages with search terms in either English or German (ideally)
  4. I can make create and re-check both texts more easily
  5. Graphics don't need to be repeated
• When the time comes, some of the longer or more complex pages will need to broken into shorter segments or split into original and translated pages.
• Currently, on pages with only one language, visitors might invoke an on-line translator (such as the ones available on the Translation Gateway Page).

• Guidelines on alt texts in img elements
• HTML Tip: Using ALT And TITLE Attributes
• Titles and alternative text for images
• How do I... Create an Accessible Page in FrontPage

• Required for <IMG> and <AREA> tags. 
• Not available for other elements, except <INPUT TYPE="image"> and <APPLET>.
• Text is shown on page when image is not available. ALT text is read by screen readers.
• Purpose is to replace information embedded in an image when the image is missing: do not use to provide essential information when the image is shown.

• Available as a core attribute to all tags (except base, head, html, meta, param, script, style, and title elements). However, browser support on some tags may be limited.
• Shows as tool tip on mouseover: small pop-up window enclosing the text. Line breaks, alignment & formatting defined by user's browser. Usually fades after about 5 sec.
• Ignored by IE 4.x and Netscape 4.x and below
• Best for short, supplementary texts

• Uses mouseovers (ie. will remain in view as long as the viewers mouse is over the object (text or image).
• Page must completely load, javascript must be enabled.
• Depending on script: box width & offset, background colour, text colour, font size & line breaks can be specified by the author.
• Browser support may be depend on script
• Best for longer, more complex texts or effects.

• Review ALT texts, modify if needed to provide better image replacement texts. Use browsers with image downloading turned off to check. Thumbnail images will need particular attention. (Note, added May 2006: The WebDeveloper extension includes a number of options for checking images).
• Evaluate images, tables and links to determine where tool tips are needed and implement. Some TITLE texts will duplicate the ALT texts. Remember to keep these texts short!
• Provide captions or other texts for essential information that should be visible to visitors.

• The earliest versions of these charts were my first documentation of my family, even before I used index cards or computers.

• it is not searchable -- needs appended table of names
• images are not linked together -- need to be embedded in a webpage for either image mapping (too complicated with up to 28 links on single image, esp. if the image shifts when updated) or navigation links
• in older browsers, large images may not be fully rendered or degrade when scrolling

1. noframe view should have similar information (links, image and names) which would be complicated to keep up to date, and aids to help might present additional problems for older browsers and at Rootsweb (for example, advertising banners on included pages).
2. navigation between GenChts would be a nightmare to set up as both right and left frames would change each time and some links would need to break out of frames.

• not only is image not viewable as whole, but navigation (above) and names (below) are not viewable at same time
• in older browsers, large images may not be fully rendered or degrade when scrolling

• width sizable in % -- adapts to various monitor sizes and resolutions
• height set to allow most of screen to show image but also navigation
• scroll bars will disappear if not needed. Works with wheel mouse after clicking on content
• not supported before IE4 and NN6 (still 10 % of users) - iframe content is invisible -- but you can explain with "no iframe" text!
• image in iframe will not generate additional advertising banners
• iframe not resizable by visitor
• iframe is reportably not spidered by search engines: not an issue with an image! but therefore the table of names shouldn't be in a 2nd iframe
• element invisible in FrontPage normal view - can add comment as placeholder

• cannot include a message visible only when content is not rendered correctly
• excess may be hidden (WebTV) or degrade in some older browsers instead of scrolling
• cannot use wheel mouse with overflow (mouse defaults to page scroll bars)
• whole image is visible in FrontPage normal view

1. image & table only (original choice)
2. iframe for chart image (see faults under iframe)
3. overflow for chart image (see faults under overflow)
4. iframe for chart image & overflow for table (too many scroll bars; cannot fit both into same browser window and see much of either, and both truncated on printout)
5. *iframe for image & img as substitute & title for instructions in case image is not substituted (best, implemented)

In all the above presentations, the whole GenCht is not printable from the browser window when oversize. Scroll bars are printed with overflow, no bars with iframe, excess is hidden. Still need printable version (pdf or txt or htm?).

• all favicons use the same filename (cannot have more than one in a sub-directory), 
• the page title should already distinguish each page, and 
• favicons can be used to evoke the continuity of a website, just as a common page template does.

• It seems that older versions of IE would use favicons found in the same directory as a bookmarked page without the image being referenced by the page, but there were potential security issues associated with that method. Now browsers require that image to be used must be specified by the webpage.

• http://www.favicon.com/ - All about favicons
• How to Create and Install a favicon.ico
• FavIcon from Pics - creates a favicon from your images. FavIcon instructions don't include recommendations for images; for best results with this service:
  • use a square image (otherwise, the favicon will be distorted)
  • image can be .jpg, .gif or .png format but not .bmp (bitmaps not processed)
  • contrasting colors help a design stand out.
  • keep design simple: a favicon is only 16x16 pixels