Community Learning Network
Location: Internet Tools and CD > - Intro to HTML > - Appendices Visitor: Login Printable version
CLN Pages
Training
Internet Tools & CD
    - Content Management
    - Intro to HTML
       - HyperLinks
       - Images
       - Tables
       - Web Building Links
       - Appendices
    - Multimedia
    - Skills Inventories
Community pages
Home Page

Appendix A - Basic Template.

The following HTML code is a basic template for creating a single Web page on the CommunityNet. It's the basic code that's generated by our Instant Web Page Kits. If you want to create a simple Web page on our system, just take this text and copy and paste in the appropriate information for your organization. Everything that's in italics should be replaced by your information.

<HTML>
<HEAD>
<TITLE>Your IP's name</TITLE>
<LINK REV="owner" HREF="mailto:Your email
address"> 
<!-- created the date  by your email address -->
<!-- modified the date  by your email address -->
</HEAD>

<BODY>

<CENTER>

<!--#include virtual="/includes/ip-hosted1.html"-->

<HR>

<IMG SRC="sample.gif" ALT="" WIDTH=190
HEIGHT=76 VSPACE=10><BR> 

<FONT SIZE="+2">- <B>Your IP Name</B>
-</FONT> 
<P>
<HR>

</CENTER>

<BLOCKQUOTE>

<B>Mission:</B><BR>
Your organization's mission statement.
<P>
<B>Services:</B><BR>
Services, if appropriate.

</BLOCKQUOTE>
<P>

<HR>

<P>

<BLOCKQUOTE>

<B>Contact:</B><BR>
Contact name, if appropriate.

<P>

<B>Your IP's name</B><BR>
Street address<BR>
City, Province. Postal code<BR>
Canada.

<P>

<B>Phone:</B> Your phone number.

<BR>

<B>Fax:</B> Your fax number.

<P>

<B>Email:</B> <A HREF="mailto:Your email
address">Your email</A>

<P>

This page last updated the date.

<P>

Copyright &copy; 1996 Your IP's name.

<P>

</BLOCKQUOTE>

<!--#include virtual="/includes/footer.html"-->

</BODY>

</HTML>

Notes:

First, be very careful with the lines that begin with <!--#include. If you insert an additional space in the wrong place in those lines then they won't work. Sorry, but computers can be very fussy at times. Note also that the #include information will only appear once your file has been installed on the VCN computer.
Second, we have a couple of variants on the "We're hosted by CommunityNet" graphic. If you don't like the default one, try the other option:
<!--#include virtual="/includes/ip-hosted2.html"-->
Third, you can have our system automatically timestamp your files with the most recently modified date. That saves you the bother of having to update the date manually each time you make a change. Just put in the following text into your page:
This document was last modified on
<!--#config timefmt="%B %e, %Y"-->
<!--#echo var="LAST_MODIFIED"-->.
Once again, be very careful if you use this code - it must be typed in precisely as show above, or it won't work. For more details on this, check out the Cool Stuff page.

Back to top

Appendix B - Coding Style

Appendix B - Coding Style

  • As you begin coding documents for your organization, it will benefit you greatly if you define your own standards and style that you apply without question to every page you build.
  • This will help immensely when you 1) rewrite all your pages and can use a script to replace one set of standard text with another set of standard text instead of doing all the changes by hand and 2) when someone else tries to modify or add to your collection of web pages.
  • Style is a personal thing, but there are a few standards that have become...well...standard.
  • Use capital letters for tags, arguments and values.
  • Use a space before and after equal signs within tags.
  • Use quotes around tag attribute values whether or not they include white space.
  • Use embedded spacing in your HTML code so that the code itself looks similar to how it will be formatted by a browser. In other words, use indentation and paragraph markings in the code when you specify paragraphs in the code.
  • Keep your line width to 80 characters so that UNIX editors will be able to read your code. If a tag goes beyond 80 characters, indent continuing attributes.
  • Follow HTML standards even if browsers will let you slide. This means, use closing tags like </HTML>
  • Include no extra spaces in anchors and only anchor meaningful words

Coding Style by Example

Here is an example of "bad" code.

<HTML ><head><Title>Hello World</TITLE></Head><Body bgcolor=white text=black> This is a very simple web page. Notice that the browser does not pay attention to spaces that we add to our document unless you specify what type of spacing you want<p>Like when you use a paragraph tag or a <br> break line tag. <A HREF = "next.html"> click here to go on to the next page </A></BODY>

 

Here is an example of good code:

<HTML>

<HEAD>

<TITLE>Hello World</TITLE>

</HEAD>

<BODY BGCOLOR = "FFFFFF" TEXT = "000000"

VLINK = "AAAAAA" ALINK = "564345">

<!-- CREATED NOVEMBER 25, 1999 -->

This is a very simple web page. Notice that the

browser does not pay attention to spaces that we

add to our document unless you specify what

type of spacing you want

<P>

Like when you use a paragraph tag or a

<BR>break line tag.

<P>

Continue<A HREF = "next.html">on</A> to go to the next page.

<!-- ENDING OF PAGE BODY -->

</BODY>

</HTML>

 

  • Notice how the example of "good" code is VERY easy to read. Putting white space above the <P> made the new paragraph look like a new paragraph.
  • As your code gets more and more complex, good coding standards will become more and more important.
  • Finally, take some time to get familiar with an HTML Validation Program that you can use to check your code against the various HTML standards.

Back to top

Appendix C - Top Ten Tips for Designing a Usable Web Site

Appendix C - Top Ten Tips for Designing a Usable Web Site

  1. Use titles on all your pages: fill in an appropriate title in the <title> tag. This is what will be displayed on the top blue bar in Netscape, as well as the label for any user's bookmark.
  2. Design your pages for all browsers and monitors: known as cross-browser compatibility, this type of design will ensure that all users can see your page, regardless of what configuration they have.
  3. Conduct a usability test: ask someone unfamiliar with your organization to test your page. Direct them to complete several tasks, such as looking up your hours of operation. Adjust your design accordingly.
  4. Make a site index: sometimes called a site map, this page has links to all pages in the site. Unlike a real "map" however, this page is a simple text-only listing of how the site is organized.
  5. Frames suck: frames make it impossible for people to bookmark individual pages. There are unnecessary and not compatible with browsers for disabled people.
  6. Provide redundant navigation: this is a fancy way of saying give your users more than one way to find things. Link to important pages from multiple places.
  7. Universal navigation: tell users three things on every page: where they are, where they've been and where they can go next. Yahoo! does a great job of this with its simple system of labelling each page: Home > News> Canadian News.
  8. Always give users an out: let users get back to the home page at any time. This can be done simply by putting your logo on each page, in the same spot, and linking it back to the home page.
  9. Label your links well: make sure you are succint and clear with your link labels. Good examples: Home, Back to Board of Directors' Page, Annual Report. Bad examples: Back, Go Back, Click Here. Avoid "click here" as much as possible.
  10. Be consistent: keep a consistent look and feel throughout the entire site.

Back to top

 

Appendix D - Uploading/Downloading files.

Well, once you've created your splendid HTML documents, how do you get them to the CommunityNet? Here are the steps:

1. You can upload the files using our dialup lines.

Log into our dialup system and transfer the files using WS_FTP95 LE or other FTP programs - FTP (file transfer programs).
a) Log into the system using your VCN dialup network connection.
b) Once you have logged onto the VCN system, load your FTP program (instead of Netscape Communicator). You will then have to connect to our webserver using the address, username, and password given to you by us.
When you click on Connect, your screen should look like the diagram below:
Session Properties
c) Type in the following on the general menu as it appears above:
Profile Name: Vancouver CommunityNet
Host Name/Address: vcn.bc.ca
Host Type: Automatic detect
User ID: your vcn login ID
Password: your vcn password (click on save Pwd so you don't have to type this again)

 

 

 

d) Before connecting, click on the startup menu and type in the following:

 

Initial Remote Host Directory: webdata
Initial Host Directory: c:\mywebdata (or whatever directory you have set up on your local system to hold your website files)

e) Click on the connect button at the bottom left of the screen to make the connection.

 

Your screen should look like the diagram below:

WS_FTP

f) Downloading (from the webserver to your personal computer):

Highlight the file(s) you want to download by clicking on them in the right column. Click on the left arrow key ( ) in the middle column to transfer the files to your c:\mywebpage directory.

You can now edit this file using either a webpage editor or a text based program.

g) Uploading (from your personal computer to the webserver)

Highlight the file(s) you want to upload by clicking on them in the left column. Click on the right arrow key ( ) in the middle column to transfer the files to your webdata directory on the server.

h) Close your FTP connection by simply clicking on the close button (bottom left of screen).

Back to top