Sample Charity
Other awards:
Sample Charity
In an effort to help the administrators of one-click sites (particularly generous individuals who donate their spare time), I have created a set of templates illustrated a made-up charity. The HTML from the Sample Charity pages is free for anyone to use and change as they see fit. I ask that if anyone uses them with few changes, that they provide a link back here so that others may benefit (a link is already included in the templates, but like everything else it could be removed).
The only restriction is that the templates can only be used on non-profit or strictly volunteer pages. I do not want any enterprise that intends to profit as a part of having a one-click charity to use these templates, as a profit-making site ought to be able to afford to pay their own webmasters to make their own pages.
All phone numbers, addresses, email addresses, statistics and other information shown on the Sample Charity pages are fictional, and any resemblance to a real charity or other enterprise is purely coincidental. If anyone wishes me to change any of the false data, please contact me and clearly explain what you wish changed and why.
Use of these templates in no way guarantees any grade by One-Click Charity Check. I have designed them such that they would get an A+ according to my criteria, but that is not a guarantee that any site will get that grade by using them, since essential changes are needed such as maintained donation totals, etc.
How to use the templates
All instructions here assume a moderate level of computer skills and familiarity with the Internet, HTML, and associated technologies. Unfortunately, because of ethical issues regarding impartiality as a reviewer, I cannot provide personal assistance to any site. If you have general questions about the use of these templates, feel free to contact me, but if your questions are very technical in nature, you're better off seeking help from some of the sites listed under Technical Resources on the links page.
Below are links to the HTML and .txt versions of the files. Some browsers will automatically interpret the .txt versions as HTML and convert them accordingly. If this happens, to save the template file as a text file for editing or to see how things are done, click View on the toolbar, then Source/Page Source from the drop-down menu, and save accordingly. If you have trouble getting the source code, email me and I will send you the text in an email message.
- Index - HTML - Text
- About Widget Exploitation - HTML - Text
- About Us - HTML - Text
- Contact Us - HTML - Text
- FAQ - HTML - Text
- Donation Totals - HTML - Text
- Privacy Policy - HTML - Text
- Sponsor Information - HTML - Text
- Links - HTML - Text
- Thank You Page - HTML - Text
All of the HTML has been verified as valid according to the W3C specifications for HTML 4.01. This includes the use of a cascading style sheet (CSS). For those who are unfamiliar with CSS, what they do is provide a simple means of controlling style elements for every HTML document that refers to them. Thus, you can control fonts, colours, etc. from one document, making changes fast and easy and ensuring all pages follow a specified style. The HTML 4 specifications require use of a CSS for style elements such as font and colours, having deprecated tags such as FONT and BGCOLOR.
The CSS that manages all of the Sample Charity pages can be downloaded either as a .css file, or by copying the code presented below:
H1 {font-family: Arial, sans-serif; font-weight: bold; font-size: x-large;
text-decoration: underline; text-align: center;}
H2 {font-weight: bold; font-size: small; text-decoration: underline;
text-align: left;}
H3 {font-weight: normal; font-size: small; text-decoration: underline;
text-align: left;}
H4 {font-weight: normal; font-size: small; text-align: left;}
body {font-family: verdana, sans-serif; color:black;}
a:link {background-color:transparent;}
a:visited {background-color:transparent;}
a:hover {background-color:#FFFF33;}
a.imagelink:hover {background-color:transparent;}
span.boldsmall {font-weight: bold; font-size: x-small;}
span.xxsmall {font-size: xx-small;}
span.italic {font-style: italic;}
ol.a {list-style-type: lower alpha;}
.center {text-align: center;}
.table {background: #FFFFCC;}
.bentable {background: #FFCCCC;}
p.question {font-weight: bold; text-align: left;}
p.answer {text-indent: 1cm;}
p.top {font-size: x-small;}
(The "bentable" item is used only for the sample beneficiary page.)
On a Windows machine, you may have to tell the OS to handle .css files in Notepad or another text editor if no default application is set. I make/edit all of my CSS files in Notepad.
For more information on CSS and how to use it, see W3C's CSS information page.
If you do not employ the CSS, the pages will be readable but less stylized (I've provided an example of how the sample index page looks without a CSS). Part of the point of using a CSS coupled with valid HTML is to allow all browsers to read your page; since style elements can vary in comprehension from browser to browser, moving style elements to the CSS allows browsers that can't understand those elements or .css files to ignore all of that and present the content in a readable fashion. The command to include the CSS is in the header of the HTML document. If you change the name of the .css file, be sure to change the link command in the header.
Throughout the HTML files, I have made comments to indicate what the HTML in a given section is for and why it is formatted a certain way. None of these comments will appear in a browser, since they are in special comment tags. If you're using the templates in an effort to get a good review, be sure to adhere to HTML, CSS, and accessibility specifications, many of which are indicated in the comments. All of these elements are required for (but do not guarantee) an A+ grade.
The sample pages contain no server-side or other scripting, some of which may be necessary, depending on how you intend to track donations. They are simple HTML layouts that include all of the necessary information according to my review criteria, such as questions and answers that should appear in a FAQ, etc.