Guidelines for Creating Web Pages

The following were some guidelines for North Bend residents (Committee and Board members, in particular) to create pages for the NBTHA website. Since the NBTHA Board decided in 2012 to remove the former native HTML/CSS-based website and replace it with something else, the following no longer applies to nbtha.org, but the general rules are still good for building HTML/CSS web pages for other sites.

Coding Samples

• See Samples of HTML and CSS Coding for some HTML/CSS coding examples.

  The associated notes discuss how to edit source files and how to view the source code of existing pages to see how others have coded their pages.

• Possibly use http://jgkhome.name/HTML_CSS/$$$skeleton.htm as a model for your main web page.
• Here is a quick reference to some colors used in HTML/CSS.

File Format and Naming

• Use HTML format instead of Word .doc or Excel .xls formats where possible.

  Not everyone has Word, WordPad, or Excel to display .doc and .xls files. In fact, if they have older versions of those programs, the older versions may not properly handle the .doc or .xls files created by the current versions. In any event, HTML files are considerably smaller than corresponding .doc and .xls files and will download more quickly.

• Avoid spaces and special symbols in file names. Use only letters, numbers, hypens, and underscores.

  Some programs have problems with file names containing spaces or special symbols.

• Use case consistently in file names.

  Case is important for many internet servers, e.g., those based on Linux. If you name a file "MyFile.htm" and then try to access it as "myfile.htm" with a link or even from a browser, the file will not be found on such servers. You (and anyone else accessing the file) must use exactly the same case for each letter when accessing the file as you used to create the file originally.

Graphics

• Avoid using graphics, especially large graphics files.

  Minimizing the number of graphics files simplifies maintenance of the website.

  Avoid large graphics files on your main page because they download very slowly over phone lines. Instead, link to a large graphics file by using a small graphics file link (a thumbnail) or just use a text link. This lets users have the option of not downloading large files unless they explicitly choose to do so. Warn the user if clicking on a link will start a large (possibly long) download.

Mandatory Code

• Include the HOME button code at the end of your web page.

  The HOME button provides a quick and consistent way for users to return to the website's home page, no matter where they are in the site. You can copy this code from the end of the source code for http://jgkhome.name/HTML_CSS/$$$skeleton.htm, for example. It is the six lines starting with the "div" id="button" tag and ending with the final "/div" tag.

  If the page will be printed, include the media="print" style section containing a div#button {display: none;} rule and put the HOME button division within a div id="button" division to suppress printing the button. See the source code for http://jgkhome.name/HTML_CSS/$$$skeleton.htm.

Addressing

• Use relative addressing in URLs to reference other files on the website.

  Using a relative URL instead of an absolute URL lets the website files be tested more easily outside of the normal website location. A relative URL might be "../../abcde.htm"; whereas the corresponding absolute URL might be "http://my.website.com/finance/history/abcde.htm". Each "../" means "go up one level in the directory tree". Thus the explicit directory names of the higher level directories and the specific disk drive on which the tree resides do not have to be stated in the URL. This allows the whole set of website files to be moved from one place to another without affecting the operation of the internal links within the tree. For example, you can put your whole website on a USB drive and run it on any PC.

Checking for Problems

• Proofread and check your web page before submitting it.

  Of course check for errors in spelling and grammar.

• Ensure the page is formatted to make it easily readable. Be careful with colors. Not all PCs display all colors well. Also, some users may have trouble easily seeing faint colors no matter how they are displayed.
• Submit the page to a validation service to see if there are any HTML or CSS syntax errors. For example, for a source file on your PC, you can use this validation service supplied by W3C. Even better, if you use Firefox for your browser, you can install the free HTML Validator add-on from Mozilla Add-ons for Firefox.
• If possible, imbed the page in an accurate local website environment and then test links from and to your page in that environment. Check the links again in the real website after uploading the web page.
• Test that the page displays properly under both Firefox and Edge. All browsers are supposed to obey the HTML/CSS rules, but there are sometimes bugs. You may have to experiment to see what will work best.
• If you want the file to be printable, be sure to test that it prints well. Spacing and colors (or shades of gray) may not come out as expected. Fortunately you can make some adjustments in the media="print" style section, since print formatting can be done independently from display formatting if you use CSS.

Uploading to the Website

• Upload files yourself, e.g., using FileZilla, or send them your webmaster for uploading.
• If you upload files yourself, you may need to notify your webmaster in case he or she might need to take further action, e.g., to rebuild a search index.