About HTML.

HTML stands for "Hypertext markup language" and is the simple set of codes that are used to define the appearance and functioning of a World Wide Web page. HTML is a constantly evolving set of codes, which are also known as tags.

Do I have to learn this HTML stuff?

If you're not used to computers, some of the information presented here may seem a little daunting. But don't worry! You only need to learn HTML if you decide that your organization wants to write its own Web pages.

If you simply want your group's basic information on the CommunityNet without learning HTML, just register for an account and we will automatically generate a web page with your own URL, name, description of what your group does, address, phone number, fax number and email button from your registration. You don't have to do anything. This single web page can then be edited later if you want to.

However, if you want to build and maintain your own set of pages, this section of the manual is for you! Learning HTML is not much more difficult than learning a word processing program, and can be quite fun. Of course, don't forget that there are also lots of skilled HTML consultants in town to whom you can contract out Web page creation services.

About HTML files.

HTML files are always plain, unformatted text (ASCII) files. Such files can be created with any text editor or word processor or a web editor such as Arachnophilia. If you have a Macintosh you can use SimpleText or TeachText, which come free with your Mac, to edit text files. If you use a Windows PC you can use the Windows Notepad. Other computers have similar free text editors available.

By convention an HTML file will end with the suffix ".html". Also by convention, HTML file names are usually in lower-case. Note that Windows and DOS systems, which have severe file name restrictions, truncate this suffix to ".htm", and often have upper-case file names.

The HTML codes themselves are bracketed with angle brackets <like so>. Anything within angled brackets is assumed to be an HTML tag by the browser and thus is normally not displayed on-screen for the user to see. HTML codes are thus analogous to the codes used by word processors such as Wordperfect. (the "Reveal Codes" function)

This raw HTML - a document marked up with these tags - is called the "source" file. Your browser takes this source file and creates the final marked-up copy for you to read.

Creating HTML

There are three basic ways to create an HTML file.

The first is to open a word processor or text editor and type in the tags manually. This gives you complete control over the appearance of the document, but obviously requires familiarity with HTML codes.

The second is to use a special HTML editing program such as Arachnolphilia. These programs show you the HTML code that is being produced but help you create lists, paragraphs and links by putting in the correct tags at the click of a button. These programs require basic knowledge of HTML but produce clean pages that are easy to view regardless of browser and also simple to update.

Finally, there are "wysiwyg" editors an acronym for "what you see is what you get". These programs let you manipulate text on-screen, just like a word processor. The editor then generates the HTML code. You have probably noticed that you can save word processed documents to HTML with newer software. These can be easy to use but obviously tend to be somewhat restricting.

Viewing the Source.

If you use Lynx, pressing the "\" key lets you view the raw HTML source for a document, which is a great learning tool. Netscape and Explorer and most other graphical browsers have similar "View Source" functions that let you see the unformatted HTML that makes up a given Web page. One of the best ways to learn how Web pages work is to look at a page you like and examine its source.

What is a CGI?

CGI stands for Common Gateway Interface. Basically a CGI is a software program or tool that links a Web server with some external service. For example, you might have a little program that keeps track of the number of times your page is viewed. This page counter could be a CGI.

Here at the CommunityNet we make extensive use of CGIs on our system, and provide a small library of free CGIs for the use of any organization that wants one. The CGIs are documented in our Cool Stuff file, at:

http://www.vcn.bc.ca/help/guides/coolstuff.html

HTML Tags

HTML tags generally have two parts - the opening tag and the closing tag. Take the example below.

On a browser this HTML code would look like this:

This is boldface text!

Notice how this works. The opening tag, <B>, tells the browser to make the text boldface. The closing tag, </B> tells the browser to stop using boldface. In other words the attributes of the text between the opening and closing tag are defined by the opening tag.

HTML is not case sensitive. Therefore <B> and <b> are equivalent tags. HTML is often typed in uppercase for legibility, however. Uppercase tags are easier to spot in a document than lowercase or mixed case tags.

Indicates the document is an HTML document. Note that at the very end of the document is a </HTML> tag. This is a closing tag. Most HTML tags are followed by a closing tag. The text between the opening and closing tags is controlled by the opening tag. Think of the text as being within a container.

You don't have to include the <HTML> tag at the start and end of a document, but it's good form to do so.

<HEAD>…</HEAD>

The second tag indicates the header portion of the document. This is also optional, and is generally the section of the document used to store information about the file that's normally not directly viewed by the user, such as the document's title.

Each document should have an informative title explaining its purpose in life. The title of a document is usually displayed at the top of the screen or on the title of the window bar of the browser, separate from the text of the document itself. Any text enclosed in <TITLE> tags is the title. Titles should only be a brief line of text.

<BODY>…</BODY>

Now the actual document begins! The <BODY> tag is yet another optional tag, but is used to indicate the actual text of the document. This actual text of the document is displayed by the browser.

<Comments>…</COMMENTS> OR <!-- -->None.

At times you might want to put a comment into a document that you don't want others to see. For example, you may write the current date into every document so you know when you last changed it. There's no need to make this date visible to viewers, so you could put it in as an HTML comment. <!-- and --> has the same effect. You can only view the text when you view the source for the file.

Headings <H*>…</H*>

HTML supports six levels of headings. These headings are used to separate out important headings from the body of text of a document. To choose a heading level, replace the * with a number between 1 to 6. Here is a top level heading, Heading 1.

This heading will appear differently depending on what browser you have. Generally, level 1 headings are shown in large bold type onscreen. The remaining 5 headings are shown in correspondingly less dramatic type.

<I>…</I>

This is similar to our friend <B>. However the <I> tag italicizes text. At least, it does so in browsers capable of italicizing text. Some browsers can't display italics and so underline the text.

<P>

The <P> tag is a paragraph marker, and is a bit different from the preceding tags.

Normally HTML documents flow on and on and ignore any carriage returns you may put in. This is totally unlike most word processors. Not only that but your browser will collapse multiple spaces or blank lines into a single space. (you can put all the blank lines - carriage returns - you want into your HTML source file, and it'll appear as a single space when viewed by a browser. Often HTML documents are spacious and use tabs to make it easier to understand them when the time come to change them.)

If you want to indicate a blank line you must use the <P> tag. The closing </P> tag is not essential.

<BR>

You've probably noticed that inserting a paragraph break puts in a whole blank line. This is obviously undesirable in some instances, where you simply want a new line to start. The line break tag is used for this purpose. Thus:

Vancouver Community Network<BR>
411 Dunsmuir Street<BR>
Vancouver, BC. V6B 1X4<P>

<BLOCKQUOTE>…</BLOCKQUOTE>

Sometimes you'd like to be able to indent text in from the left side of the screen, much as this document does throughout. Unfortunately basic HTML has no provisions for tabbing and so on, but does have a tag called "blockquote".

Block quotes are intended to be used when you quote a sizeable portion of someone else's work. Normally when you do that in a print document the text is indented from the left side. So, by using the blockquote tag you can move things in from the left margin. This is not using the code precisely as it was intended, but it achieves an effect on virtually all browsers, so why not?

<HR> … Horizontal Rules

Most browsers can draw horizontal lines across the screen. This is one of those tags with no closing tags.

<PRE>…</PRE> Preformatted Text.

Another useful trick is putting in preformatted text. As noted above, your browser will collapse any lines of spaces to a single space, and any blank lines of text to a single space. This can be a problem if you want to display something like a table of text that has been formatted with spaces to make things line up.

The answer? The <PRE> tag, which allows you to insert preformatted text. When you put in preformatted text the browser won't collapse any spaces. Graphical browsers also usually display preformatted text with a typewriter-style font.

<PRE>
          This  is
  preformatted  text.
        Notice  how
    text lines  up?
</PRE>

Unordered Lists

A common element of many Web pages is a list of items, marked with bullets. (dots) HTML can do this for you automatically.

<UL>
<LI>Trees
<LI>Fish
<LI>Doughnuts
</UL>

This code is displayed by the browser like this:

Trees

Fish

Doughnuts

The <UL> tag specifies an "unordered list." The <LI> tag specifies a "list item". And the closing </UL> tag marks the end of the list.

Ordered Lists

Sometimes you want numbered lists, though. HTML supports them too!

<OL>
<LI>Combine ingredients
<LI>Bake at 375 degrees until brown
<LI>Cool before eating
</OL>

This becomes:

Combine ingredients

Bake at 375 degrees until brown

Cool before eating

Definition Lists

Maybe you want a list of words with their definitions indented and following:

<DL>
<DT>Cube
<DD>a six sided object with planes intersecting at 90 degrees
<DT>Tetrahedron
<DD>a four sided object with each face consisting of an equilateral triangle
</DL>

This becomes:

Special Characters.

Since the angled brackets < and > and the quotation mark " have special meaning in HTML, how can you use these characters within a document? Obviously if you were to type an angled bracket into a document the browser would assume you were trying to put in a tag and things would break down.

HTML solves this problem by using "escape sequences". An escape sequence starts with the ampersand (&) character and ends with a semicolon (;). Unlike the rest of HTML, these escape sequences are case sensitive!

In other words, uppercase differs from lowercase.

&lt; is <

&gt; is >

&amp; is &

&quot; is "

Accents and Diacriticals.

One very useful feature for a "World Wide" Web is the ability to support non-English accents and diacritical characters. Since different computers - PCs, Macs, UNIX systems - all handle accents differently, HTML has its own way. HTML accents are similar to special characters. Here are a few HTML diacriticals used in French.

&ccedil; is a lowercase c with a cedilla. Français.
&eacute; is a lowercase e with an acute accent. Café
&ecirc; is a lowercase e with a circumflex accent. Fenêtre.
&egrave; is a lowercase e with a grave accent. Brève.

For a complete list of all the non-English diacritical characters, check this URL:

Linking to a URL.

EMail Links.

Plain Text Links - A quick and easy shortcut.

One of the most compelling features of HTML is the ability to embed small picture files that can be viewed using a graphical browser. This is done using the <IMG> tag, as shown below.

Notice, first of all, that this is a tag containing various options. In this case the SRC attribute specifies the source file, or the graphic to be displayed. Here the source is a picture named "picture.gif" that is in the same directory as the HTML file itself.

Image Formats

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"-->.

• 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

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.

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.
1. 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.
2. 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.
3. 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.
4. Frames suck: frames make it impossible for people to bookmark individual pages. There are unnecessary and not compatible with browsers for disabled people.
5. 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.
6. 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.
7. 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.
8. 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.
9. Be consistent: keep a consistent look and feel throughout the entire site.

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:

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)

Initial Remote Host Directory: webdata

Your screen should look like the diagram below:

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).