St Charles Church .org
News & Events	Faith	Ministries	Parish	Volunteer	Help	Contact Us

Coding Shortcuts | Header/footer PHP Code

Parish Web & HTML Style Guidelines

Here are consistent style guidelines for creating HTML content for the parish website. We encourage as many people in the parish as possible to participate in creating content for this website while ensuring a degree of consistency and compatibility. Direct any questions or issues not addressed by these guidelines to webteam@stcharleschurch.org.

Guiding Principles:

Keep it simple and accessible. Not everyone has the latest computer with the fastest connection and the most software. As an informational and evangelical service of St. Charles, our primary goal is to reach as many people as possible eqsily and quickly. Generally avoid superfluous clipart in your pages, but use small file size image of real parishioners where possible. Text-based alternatives, like alt tags, should always be provided for users with limited image capability or who might be using text-to-speech software. In all cases, we are striving for equal compatibility for all types of computers and browsers.

In general, all HTML created for the St. Charles Website should follow HTML standards. The W3C site (www.w3.org) contains useful information on HTML authoring.

Editors such as Dreamweaver and HoTMetaL Pro provide built in checking for compliance with W3C standards and make it nearly impossible to create "incorrect" HTML. If you are writing HTML "by hand" using a simple text editor or using a Microsoft product, then make an effort to avoid using non-standard tags. Microsoft software is known to produce consistently non-compliant HTML code, so keep this in mind if using Microsoft Word or Frontpage.

We don't delete pages. You never know which page someone will bookmark so we never want to remove what could be someone's one link into the site. Nor would we want to lose any of our pages already captured by search engines. See explanation of "linkrot" at www.useit.com/alertbox/980614.html. Before creating a new page, consider how it will stand the test of time. If you have an announcement that is going to run for only one week, can it go on an existing page instead of a brand new one? Or, can you format the announcement so that it is reusable? Instead of "party2004.php", maybe it could be "homelessevents.php" and serve as a latest events page for your ministry. Either way, include the year with any dates in your body text because a future visitor might not know whether your April event is this year or three years ago.

Pages fall into one of two categories:

1) Archival pages - generally updated once, but remain accessible indefinitely. Any weekly bulletin falls into this category. The <title> tag can include the date with year because that isn't going to change.
2) Reusable/rotating pages - page is a placeholder for recurring content, which means you can always link to that page for the latest version (although previous versions won't be available). The Oktoberfest page is an example: each year the basic facts remain largely unchanged, but the date, time and entertainment line-up needs updating. As a result, we don't put a year or date in the <title> tag because a bookmark/search engine entry would show the "old" year indefinitely.

Remember that someone else may edit your page some day. Don't get too fancy and remember to include comments if you have some clever code. The beginning programmer who's using a text editor to update your page next year will appreciate it.

Specific Elements:

Getting the HTML Source Code for a Page

For pages that end in .htm or .html, use your browser's menu to select View / Source (code). Do not use File/Save As because this will not save your code properly; your file names and links will not match what is on the site even though it may appear ok to you. Trust us!
If using IE, the code will move into Notepad with the file name slightly modified, such as with a [1].
If using Netscape, highlight all of the text, copy it (such as with control-c), and paste it into your editor.
Save it to the appropriate local directory (see below) using the same file name as the file you are copying, such as "index.html" or "prayerclub.htm"

Exception: Files that End with PHP Extensions cannot be copied using View/Source because they include background scripts that won't be picked up. For example, you might see what appears to be a hardcoded file date, but in fact it is a PHP-generated field. For .php files, use the parish file manager or have the Web Team email you the file.

Filenames/Directory Structure

Filenames of HTML files end in .htm (not .html) and appear in all lower-case letters. Do not use spaces. (Top-level files like index.html are the exception.

In all cases, relative filename addressing must be used. In other words, if a file in the directory /neighborhood/christmasparty.htm contains a link to another file called signup.htm in the /neighborhood directory, the correct HTML would be: <a href="signup">signup.htm</a>. To refer to a directory one above the current directory, you would use: ../filename.htm.

If a directory is specified without a particular filename (e.g., href="/neighborhood/") then the server will look for a file called default.htm in that directory, an unfortunate holdover from when we used to be on a Microsoft server. In many cases, default.htm will be the most general, high level file in a particular directory. The main home page for the St. Charles website is located at:http://www.stcharleschurch.og/index.php.

For reference, the St. Charles Website is arranged according to this directory structure:

Directory	Description
/	"root" level directory
/images	general purpose image & graphics files
/bulletin	weekly bulletins, yyyymmdd.php like 20040131.php
/calendar	parish calendar files
/center	parish community center
/council	parish council info.
/cya	st. charles young professionals site
/events	Photo album index and parish-wide annual events
/events/2004	Photos, stories from 2004
/fair	Ministries (Volunteer) Fair
/faith	spiritual- and prayer-related content
/fun	April Fool's Day pages, humor
/help	help pages, instructions on using site
/history	parish history files
/ministry	pages for the various ministries
/ministry/2003	Fliers, handouts, minutes for 2003
/ministry/jubilee	Jubilee 2000 information
/mission	parish 4-day spiritual mission (retreat), or future ones
/m4m	music for moms fundraiser
/neighborhood	pages for parish neighborhoods
/news	parish news, what's new on this site
/sancarlos	Spanish-language pages
/sancarlos/boletin	Spanish-language weekly bulletins
/sancarlos/calendario	Spanish-language calendar
/staff	parish staff & parish office files

Refer to the site map as well.

Non-HTML Documents

MS Word should be an exception, such as for editable forms. The first preference is HTML, followed by PDFs for printing. Remember, we're running a website, not a LAN!
PDFs should have a footer with a URL (partial or full) and page numbers, and date if appropriate. The URL might just be "www.stcharleschurch.org," the location of the webpage that holds the link to the PDF, or the actual URL of the PDF, depending on the purpose of the document.

Title

The title tag of each page should include St. Charles, either at the beginning or at the end. For example: St. Charles Parish Picnic or How to Set up Oktoberfest Moonbounce (St. Charles). The reason for this convention is that many browsers take the title of the page as the name of a bookmark. If people bookmark a page to our website, we want them to know that it came from St. Charles- even if the page bookmarked is several levels below the home page. The title also is displayed in the results of some search engines. "Map" or "What a Fun Party!" aren't descriptive enough without "St. Charles" added in there at a minimum.

Many browsers will truncate the title tag after 64 characters, so choose your words carefully. Some search engines place a high value on what's in the title, so include important words that also appear in the body and that might be used in a search query.

File Names

Use all lower-case letters, including the first letter. For new pages, use a .php extension, which lays the groundwork for future automation. Generally, do not use "stcharles" in the file name since this is usually redundant given the file location and URL. The shorter the file name, the better as long as it might make some sense when seen printed out. Also consider the file name in terms of where it falls in a directory. For example, if you are in /events/2003/ then your file name could be carwash.php rather than carwash03.php or carwash2003.php. If you wanted to get more specific because the event takes place a few times a year, use something like carwash1.php (for January) or carwash06.php (for June).

Background, Text and Link Colors

The standard background color is: #FFFFCC (cream); don't specify text, links, visited links. The yellow background helps visitors to know they're still on our site. Letting them use their default link colors makes it easier for them to tell which pages they've been to on our site.

HTML example: <body bgcolor="#ffffcc">

Images

Images of scanned photographs or other many-color images should be submitted in JPEG format. Small images with a limited number of colors (such as icons, bullets, arrows) are best saved as GIF format. Whenever possible GIFs should be saved with a transparent background to avoid having a block of white space around the image.

As a rule of thumb, inline images should be limited to around 80K (less if there are multiple such images on the same page). If a larger image is necessary to provide adequate detail or quality, use a small, low-resolution version as the in-line image (a so-called "thumbnail") and make that a link to the full resolution image.

In all cases, a text label for each image must be provided using the ALT="image caption"tag.

You can see some of the images currently available on the server in the /images directory. To use any of these images in an HTML document, the code would be: <img src="/images/homebut.gif" alt="St. Charles Homepage">

Links

At a minimum, all pages should contain a link to return to the main parish home page. The general format is: <a href="../index.php"><img src="../images/homebut.gif" border="0" alt="St. Charles Home Page" width="72" height="72" ></a>

Use the trailing "/" for directories, which gives a slight increase in performance because the server doesn't have to do a redirect. <a href="faith/"> rather than <a href="faith">.Note: you don't have to specify "index.php" in that example.

Whenever possible, other navigational links should be provided to return to, for example, the core ministry related to the current page.

Use the navigation toolbar.

Use title link tags where appropriate. In later versions of Internet Explorer, these tags produce a small pop-up tool-tip message over a hyperlink that can provide additional information. <a href="http://www.made-up-site.mil/gerry/" title="exit to recipe on made-up-site.mil">Gerry's recipe for fish and chips</A>
St. <a href="../history/charlesb.htm" title="biography of Charles Borromeo">Charles Borromeo</A> Catholic Church.

Email Addresses

Spell out email addresses, like yourname@companyname.com, rather than creating a mailto link to something like Write Us!. Showing the entire address helps those users who don't have their email application integrated with their browser or those reading a printed version of the page.

To thwart some unscrupulous merchants who harvest email addresses, replace the "@" (at symbol) and "." (period) with @ and ., respectively, to obfuscate the address from some email spiders. The code will still work with email software and will look normal to humans.
<a href="mailto:yourname@companyname.com">yourname@companyname.com</a>.
We used this approach with the webteam email address at the bottom of this page.

Navigation Bar at Top of Page

All new pages (and updates to old pages) must show the parish navigation bar, such as seen at the top of this very page. You'll find the navigation bar on our page tags area.

Avoid Setting Links To Open in New Browser Windows

Having a new browser window open when clicking a link can be disconcerting or even annoying, nullifies the "back" button and is rarely necessary. Visitors already have the choice to open in a new window if they choose, such as by right-clicking and selecting "open in new window or tab."

Fonts Must Be Relative and Have Multiple Options

Don't use absolute fonts, like , because that prevents the user from increasing or decreasing the point size using their browser. This option is especially important for low-vision visitors who need to bump up the size of the text so that they can read what's on our site. Use relative sizes, like , instead.

If you specifiy a font type, include a default font like serif or sans-serif. You don't know that the user has your same fonts, even with a "safe" font like Times Roman (which may be New Times Roman or just Times on some systems). Suitable font families include:

, and 

Submitting HTML Files:

Email webteam@stcharleschurch.org your completed files. Explain which directory each file belongs to. Use the same file names as the originals if you're replacing existing files. You may need to zip your files if you are using some email clients that automatically embed HTML files into the body section.

External Resources for More Information

Absolute and relative links from Webmonkey.
http://hotwired.lycos.com/webmonkey/99/39/index3a_page3.html

Revised/reviewed March 8, 2004

St. Charles Borromeo Catholic Church
3304 North Washington Blvd, Arlington, VA, 22201, USA
Tel: 703-527-5500 Fax: 703-527-5505 Web: www.stcharleschurch.org