Guide for Current Customers

Now you have a Web site that you can maintain on your own. But how do you go about maintaining it?

Super-Simple HTML

The only files you need to modify are the ones in the content folder that end in txt. txt means that the file is a simple text document. You can either edit it using the Web-editor or by editing the file on your computer directly and uploading it. The best programs to use are Notepad (Windows) and TextEdit (Mac).

First off, HTML uses 'tags'. Tags are used to mark certain 'elements'. Tags usually come in pairs (there are a few exceptions). The 'start tag' looks like <...> (with the element name replacing the ...) and the 'end tag' looks like </...>. Text goes in between the tags.

For example: <p>This is a paragraph.</p>. ('p' for 'paragraph', get it?)

Text always has to be between tags of some kind. The tags make up an outline, of sorts.

So, now that you know what all of the funky things are in your content, lets's see how to use them.

Headers and Paragraphs

The first line in the txt files is the title of the page. It starts with <h2> and ends with </h2>. h means 'heading', and 2 means 'second-level'.

"Why second-level and not first-level?" you ask.

Well, the page title is second to the site title, which is in a different file (header.txt) and gets the h1.

<h3>***</h3> is a third-level heading.

<h4>***</h4> is a fourth-level heading.

The next chunk of text is probably surrounded by <p> and </p>. The p means 'paragraph'. Pretty simple, eh?

Links

<a> and </a> designate the beginning and end of a link (they used to be called 'anchors', which is why it's a). href="***" is where the link goes. Any URL or URI can replace the ***, just make sure that the URL/URI is surrounded by quote-marks.

Links to pages within your site end in either html or php. Look in your main Web directory to see which file extension is used for your site.

Images

<img /> is one of those funny tags that doesn't have a partner end tag. Instead, the 'end' (/) is included in the start tag. src="***" is the URI to the image. The URI to your images is ../images/***.jpg (or gif, or png, or what-have you). The .. means "back up one folder".

The image tag should also include width="#" and height="#", so that browsers know how big your image is supposed to be before it loads. If your image is very large, try resizing it in Paint (Windows).

Finally, image tags are required to have alt="***". alt is the 'alternate text' that appears while the image is loading (if it is large), or if the image is broken.

Other Tags You Might Find

<acronym title="***"></acronym> is used to mark up acronyms (ovbiously). Acronyms need only be tagged the first time they appear. title="***" is where the acronym is defined.

<abbr title="***"></abbr> is used to mark up abbreviatons. Like acronyms, they only need to be marked the first time they appear. title="***" is where the abbreviation is defined.

More Complicated Code

Occasionally you might see things like class="***" or id="***". Classes and IDs are used to identify particular elements for CSS (and JavaScript, in some cases). If you need to modify a tag that contains one of these, you can, but make sure you don't change the *** within the class or ID itself.