Rotary District 9750 - Web Site Guide
Designing and creating your site.       [Print This Page]

Use of simple, in some cases free, tools are all that is needed.
See the pages on Web Site Tools here.

To learn more about creating a web site:

Contact your local TAFE or Evening College about the excellent web design courses available in your local community. Sometimes they are looking for class exercises and might even design your site for free. Otherwise you can hire someone to set up your site or use various templates available.

What is HTML:

It stands for Hyper Text Markup Language.
It is just text, but with a syntax that tells web browsers (eg Internet Explorer, Firefox or Netscape) how to present the information. You can do simple corrections to an existing page just in a text editor (like Notepad on a PC or SimpleText on a Mac). To do much changes to the format requires more knowledge of HTML than any of us are interested in gaining, so an editor helps us to do that so we can see what is happening.

Is HTML the only way to create a web site?
There are several other methods that build on the basic HTML features, such as ASP, PHP and others.
The major use of these is to tie into live database information and present it on a page with the right formatting, called ACTIVE pages. The Club List page on this site is an example of this, using ASP.
This has been extended to treat the pages on a site as if they were a database, so a whole site may be built with ths. The information presented on the pages is still mainly HTML though.

Use a TEMPLATE:

You can start with any of a number of web site templates, many free, and just adapt it to your information.
There are a number you can use:

• You can request one from Rotarnet if you arrange your site hosting through them.
• Past RI President Frank Devlin has a free one available on his web site.
• There have been others around, but they change location or disappear over time, so if you copy this phrase in italics: rotary club web template and paste it into the search text box on our "Search" page, select the search the WWW button (not just this site), and then hit the search button, you will have a number of possibilities to select from.

Creating a HTML document from a Word document

It is becoming increasingly easier to convert documents to html. Most programs allow you simply to save as an html file (which will usually be saved with the extension .htm or .html). Below are a few simple tricks which will allow you to produce a well laid out html document from a Word document with a minimum of fuss. If you can use "tables" in Word, you have the level of technical acuity to pick up editing a web page. You can just use MS Word to edit web pages, but it is not as easy as using a web page editor, and there are some rules to make the results bettter, whether done in word or imported into a web editor after creation in Word:

1. Banish tabs to the wilderness, they do not exist in HTML.

• If you are planning to use columns, always use tables.
• Tables convert rather well to html but keep internal formatting (i.e. centering) to a minimum.
• Keep text flows within rows rather than columns.
• Though you can nest tables within tables in HTML, keep it to a minimum, or preferably stack tables next to each other.

2. Only use double spacing between paragraphs when you want a HUGE space.

• html is very generous with spacing between paragraphs and a double paragraph is simply too generous.
• when you are in Word, use the format/style/modify/format/paragraph function to give you a 6pt space after each paragraph in your normal text. This will alleviate the need to use double spaces after each paragraph.

3. Use the standard headings in Word - these convert well into html.

4. If you have a big document, use the insert/index-tables/table of contents/ before you convert or save to html.

• a Table of Contents can be used to create links to the parts of the html document.

5. If you have a really large document, think about breaking it up into a couple of smaller documents - this will assist in loading when it becomes an html document.

6. Bold. Italics, etc. convert to html but try to not use underlining because underlining is often used for active links within an html file.

7. Take care with bullets and indents. Keep indents, in particular to a minimum. The conversion can do really strange things.

8. Remember that the default background for a Word/html document is often grey. Once you have saved as html, use the page properties to format the background as white (or your colour scheme).

9. Arial size 10 font produces a compact and readable text flow.

Using PDF files

PDF's are great for producing documents for use on the web. The following may assist you in creating usable PDFs for the web with the lowest possible file size, if you have access to the PDF writer software. (The PDF reader is free, the PDF writer costs several hundred dollars).

If the source document is a Word document, for example, use the standard headings.

Think out how hyperlinks will be used. PDF requires the use of full URL addresses, not relative links.

The use of the PDF printer driver Word/Excel etc may be fine for a small document that is primarily text.

It is often better to use a the PDF Distiller (and the 'Convert to Adobe PDF' icon within Word should use this), however the Distiller must be configured correctly for page size, graphic resolution and the like in both the Distiller propeties and the Distiller Print Settings in the printers list). If the PDF writer is on another PC you can use a two stage process viz.:

1. Print document to file using a PostScript printer.
2. Convert printer file (.ps or .prn) using Acrobat Distiller to PDF. Distiller allows you to choose compression ratios for images.

Once you have created a PDF file it is recommended to do a few things:

1. Under File/Document Properties/Summary add a title.
2. Under File/Document Properties/Open Options Choose 'Magnification' of 100%
3. (If you are using bookmarks) Under File/Document Properties/Open Options choose 'Bookmarks and Page'
4. Save the file using the 'Save As' option and overwrite the existing file.

Save Work - Link:

Text links have two parts, the label (the text the user sees in their web browser), and the URL (universal record locator) - ie the address that the link points to. They don't have to be the same, but can be.

Link to existing pages rather than reinvent the wheel and do the work of creating a page yourself.
For example, you could include links to pages on this site, with labels such as:
D9750 Club List and enter the URL to http://rotaryd9750.org.au/rotarnet_index/clubindex.asp
Rotary Info and enter the URL to http://rotaryd9750.org.au/rotinfo
Acrobat Reader and enter the URL as http://rotaryd9750.org.au/webinfo/acrobat.htm

or others, like particular projects in the District Projects area, or on the RI site, or on other sites. If you use frames on your site, such pages can even be included inside your frame. Note that a link has two parts - the label (what the user sees, which can be simply "Rotary Information" for the first example above, and the actual URL reference, which is the http part.

Use the minimum link needed.
There are a number of file names, like "index" or "home" and some others, depending on the host server, eg "default". If the web site link works without specifying the actual file (eg home.htm or index.asp etc), then don't use it in your link. If the site changes from HTM to ASP or PHP or anythig else that may come along, but with one of the standard default file names, your link will still work, but if it specifies the file name it will break with the change in file type. Look at the three examples in the previous chapter, the first third have to specify the file name (clubindex.asp and acrobat,htm) because they are not a default. The other one uses a standard default and so is not actually needed. This applies to absolute addresses (see below, generally to other web sites.
If your link uses a relative link (see below) to files on YOUR site, (eg ../info/index.htm) then that link must specify the whole file name to work.

Note: Make sure that if you do link direct to a page on the District (or other) site within your site, that it makes sense when opened on its own. Most pages on the District site are really meant to be opened within the site's "Frame" setup, and many others do too. Take the three examples above. The Club List opens on its own anyway, so that is appropriate to link to it that way. The Rotary Info and Acrobat Reader pages are there as information pages that can be included in another site without losing anything. Other pages, particularly the other top level ones, like Calendar, Officers. Links etc, are available from the frames sidebar buttons, and meant to be in that context, so it makes more sense to just link to the District site itself as a whole.
It is easiest to use the "Target=_blank" trick below to open it in a new window or tab.

Also, one quirk of FrontPage Express, and some other editors, is that it will display all links on a page in the default link colour defined for links on that page (set under Page Properties). If that text is set for "default" colour, then that is also what you will see when loaded into a browser. However, if that text has been set to an actual colour, that is what it will come up as in a browser, and may look quite different to how it looked in the editor. Always load your page into a browser after saving any changes, and such discrepancies will be apparent.

See these two examples for inserting a link to the Rotaract District site on Rotarnet for what I mean: Use either
1. Rotaract District 9750
2. Rotaract District 9750: http://rotarnet.com.au/Rotaract9750
Ah, but you ask, why have the second one display the shortcut as the label but actually go to the full address? If the viewer clicks the link on-line they will be taken immediately to the actual site. If they print out the page, or just remember it, the shortcut is much easier to type in, but it does take you to the shortcut page and then that transfers you to the actual page. So it saves downloading an extra page. You could just use the shortcut as the link as well, and that extra step will occur automatically, just takes that little bit longer is all. For more on using "Shortcut" addresses, see the shortcut example on the Host page.

Hiding e-mail addresses

One extrememly useful link is the "mailto:xxxxxx@yyyyyyy.zzz" link, which will start a blank e-mail addressed to the one defined after the "mailto:". You would also like to offer e-mail contacts to the club and maybe particular officers, whether as a link or just listed. However you are worried that doing so will expose those addresses to being harvested by spammers, using web spiders crawling over the web picking up any e-mail addresses they find.
There is an excellent method for encoding a web link so that the link works when clicked upon but the address does not appear anywhere in the HTML (visible of hidden). The technique is the E-mail Riddler and does not require any other thing other than the user has JavaScript enabled in their web browser (which is the default). The encoding does not require a cross access to another web site, it is all within your page (there is a link for copywrite purposes, but is only available when viewing the source HTML). This has been applied to the all of the District's e-mails on this site.

The E-mail riddler web page is:
http://www.dynamicdrive.com/emailriddler
Enter the e-mail address to be linked in the first box, what the label to appear for the e-mail in the second box, and whatever you want set as the message subject when the link is used (but usually blank) in the third box, submit and paste the generated script into your HTML (so your need to view the page source, not just paste into the web editor).

Example, enter this information
Email Address: xxxxxx@yyyyyyy.zzz
Email Text: E-mail xxxxxx
Subject (optional): About the web site
Hit "Encrypt email", and the following will result after being pasted in:
Note: If you are a bit more savvy with your web editor, you can paste the generated script, minus the JavaScript header and footer lines, into an "insert JavaScript script" function in the editor itself for the same result.

What is a target or a bookmark:

When you create a link there are a couple of options with a link under "Target" or "Target Frame":

Target:
Do you want to replace the current page with your link - leave the target empty.
Do you want the link to open in a new window - specify the target as " _blank " (without quotes).
Do you want the link to open as the top level in the current window - specify the target as " _top " (without quotes, this last one is mainly used if the web site uses frames).

Bookmarks / Anchor:
If you want the link to open in a specific part of the page, you need to set some text in part of the page as a bookmark (in FrontPage) or an Anchor (in other editors), then add that as " #bookmarkname " to the normal link to the page. The link to the shortcut example in the section above uses a bookmark in the link URL.
Example: to go to this paragraph, where the heading words "Bookmarks / Anchor" have been bookmarked as "bookmarks", the link's URL would be http://rotaryd9750.org.au/webinfo/create.htm#bookmarks .

Use it - with RELATIVE addresses for files on your site.

For files on your own site, make them relative rather than absolute addresses, ie where the new page is in relation to the one you have open, not to a full address specification. Just use the link option to another open web page file in FPx, and you will see what the link looks like for "other" local file links, then you can run your whole site off files on your hard disk before committing them to the web site and it will work just as well there. Of course pages on other sites will require the full address to find them, that is an absolute address. Note, some more involved HTML programming are beyond FPx's capabilities, MS wants you to have some reason to pay for the full FrontPage version. You can still see this as text though and can make simple mods like that. One thing, absolute addresses can be to a site or folder (eg http://rotaryd9750.org.au ), but relative addresses have to be to the actual page (eg ../index.htm ), and these examples produce the same result from this page.

That's it, you can now do HTML files. There are templates you can use, ask Rotarnet for them when you arrange your site there for example. Try creating or modifying links.

Other resources:

Rotary Downloads  (Official Rotary graphics and info, Rotary forms, also latest MoP (Manual of Procedure), Code of Policies, Standard Constitution and By-Laws, other resource sites and much more).

Help group for computer or web site problems ROTIcare from Rotarians on the Internet (ROTI).

www.builder.com/Authoring will give you a good on-line guide to authoring a web page in HTML, from the basics through to the more complex.

www.w3.org/MarkUp/html-spec/html-spec_toc.html will also give you a good on-line guide to authoring a web page in HTML, from the basics through to the more complex.

werbach.com/barebones will give you a downloadable guide to authoring a web page in HTML. in various formats and languages.

http://www.acn.net.au/resources/guides/g9/s4.htm will tell you what a couple of simple "Meta Tags" are and how they can help your page being indexed by web search engines.

http://www.programmingtutorials.com will give you a bunch of useful tutorial sites, from simple to not so simple.