My home page on the World Wide Web is probably the closest that I will ever come to having a Bulletin Board System. It includes many features that I'd want to include on a BBS, like activities to participate in, files to download, and information about Commodore computing. I feel I have an advantage though. If I were to have a bulletin board, I'd want it to be run on the best system possible for the Commodore. That would mean giving up the use of my favourite equipment like my CMD RAMLink, SwiftLink and hard drive. I'm generous with my time and efforts, but when it comes to my Commodore equipment, I guess you could say I'm greedy - I don't want to share it! I'd also want my BBS to be on line and available 24 hours a day, which would mean installing a dedicated telephone line. I can't really afford this option. So for me, having a home page gives me the ability to share with other Commodore users while using someone else's hard drive space and telephone line. Visitors also benefit, as anyone around the world can drop in and check it out without spending money on long distance charges.

A recent advertisement in the comp.sys.cbm newsgroup offered "free" home pages to users, but charged an eye-popping $10.00 Canadian per extra item. Extras of course, are what the World Wide Web is all about. These are any "links" that visitors would click on. This means that if you want visitors to be able to send you Email from your "free" home page, you'd have to spend $10. Add another ten if you want to offer a link to another site, or have a graphic of yourself on line. I don't even want to consider what the bill would be for my pages - I'd be broke! If you're using an Internet provider that allows you to have a home page, there's no need to spend money letting someone else put it together for you. After all, we're Commodore users - we know how to save money and do things ourselves. So with a little work, you too can have something on the World Wide Web - without paying a fortune for it.

HyperText

World Wide Web pages are created using something called "HyperText". When I hear the word, I think of text that has become alive and jumps around a lot. That's not its literal meaning, but when using HyperText to create a World Wide Web page, the description is close to the mark. The text viewed on the screen has words or sentences highlighted, and when reading text in this format you can jump (or move) to other areas of interest. Hypertext is used for more than this though. It can be used to format text so it's displayed in an easy to read manner. Formatting options can be added to text giving it a fresh uniform appearance, such as titles, headings, list creation, etc.

HyperText Markup Language (HTML) can be thought of as the equivalent to embedded commands used within a word processing file you wish to print. Instead, the words and formatting will be printed to the screen by a program that displays HyperText, such as a WWW browser. You can use just about any text editor or word processor to create HTML files, as long as the file can be translated to ASCII. And since HTML is text, there's no reason a CBM program to display HTML couldn't be written, but I digress.

What kind of things can HyperText do? You can add titles, headings of varying sizes, unordered, numbered or definition lists, bold, italics and even fonts to your words. When displayed by a web browser (or any HyperText capable program), the text on the screen is shown the way you've formatted it. Not all of the above features can be displayed by Lynx, the browser used by many Commodore users to view web sites, but they're still available for use.

Creating a Small Home Page

When I write, I prefer to type my thoughts and then go back to format the text later. This keeps the spell checker happy, and it keeps the formatting commands from interrupting the flow of my writing. Let's begin exploring HyperText by using something already written, and add HTML tags (HyperText commands) as we go along. In geek speak, we would call this "marking up the page," but let's not speak geek.

When creating a home page, the first file to write is an "index" file. Most web browsers find and display the index.html file as a default when it isn't given a specific page designation. This index file is a starting, or jumping off point from which you can send readers to other pages you may create, or other places on the Net. The "index" is usually the first introduction to you and your web site, and it's important to make a good first impression. Let's start with a typical home page and add formatting as we go along, and have a bit of fun while we're at it. Jeff has decided he wants to create his own home page. He wants to call it a dungeon since he feels so overworked and never gets to have a "play" on the Internet. Jeff's first paragraph will introduce us to him and to the theme of his web site.

Jeff's Dungeon

Introduction

Welcome to my dungeon.  My name is Jeff Swift. 
I work at ACME Wax Museum in the Drip Department.  
I'm so overworked I rarely get the chance to web 
browse, but I decided to create this home page 
anyway. This site is dedicated to fans of the 
Commodore 64 computer, the best computer ever 
created.

There are seven basic formatting additions that can be used. Can you spot them? Looking into the bag of HyperText tricks (er, tags), the first HTML item that can be used is <title>. This will cause the words "Jeff's Dungeon" to appear in the top right corner of the screen. Next, he can treat the word "Introduction" as a heading so it will be displayed differently from the rest of text. The remaining additions may not be obvious, but if you've spent much time web browsing you may be able to find them. Since you can use HyperText to move the reader from one location to another, the remaining changes are to add links to the items mentioned in the paragraph. The five items are: Jeff Swift, ACME Wax Museum, Drip Department, web browse, and Commodore 64. Each of these may have other web sites that Jeff can send the reader. Additionally, he can create other pages (i.e. files), such one with personal information about himself.

After adding the HTML tags the same text would look like:

<title>Jeff's Dungeon</title><p>

<h1>Introduction</h1><p>

Welcome to my dungeon. My name is <A HREF="jswift.html">Jeff Swift.</A> I work at <A HREF="http://www.wherever.com/~acme/waxm.html">ACME Wax Museum</A> in the <A HREF="http://www.wherever.com/~acme/drip.html">Drip Department.</a> I'm so overworked I rarely get the chance to <A HREF="http://www.yahoo.com/">web browse,</A> but I decided to create this home page anyway. This site is dedicated to fans of the <A HREF="http://cbm.videocam.net.au/index.php">Commodore 64</A> computer, the best computer ever created.<p>

The "addresses" or links displayed are called URL's. URL means "Uniform Resource Locator", and is a shorter (and geekier) way of saying "address". You might have noticed that Jeff's personal page doesn't have a complete URL. Since his personal page is in the same directory as his index file, the complete URL isn't needed.

When viewed by a program that interprets the marked up text, the links will be highlighted or numbered.

Click here to View Jeff's Dungeon with your browser.

Jeff's Dungeon

Introduction

Welcome to my dungeon. My name is Jeff Swift. I work at ACME Wax Museum in the Drip Department. I'm so overworked I rarely get the chance to web browse, but I decided to create this home page anyway. This site is dedicated to fans of the Commodore 64 computer, the best computer ever created.

Lets go over the HTML tags we've just used:

HTML tags can be in either upper or lower case. You probably noticed that most commands including <title> have an "on" and "off" switch. The off switch consists of a "/" before the text in the tag, such as </title>. This lets the display program know when to begin displaying text in a specific format and when to stop displaying in that format. The programs that display HyperText rely on the file name to tell them if the file is in HTML format or not. When Jeff added his personal page, he used the extension of ".html" so it would be displayed correctly. If he had used ".txt", the browser would have displayed it as-is, without formatting the text in anyway.

<title> and </title>

Displays the title of the page in the top right corner of the screen when viewed with Lynx.

<p>

This designates the end of a paragraph, similar to the way some word processors mark paragraphs. The browser programs add a blank line after the paragraph tag. This isn't always something you will want, as there are times when you will want the text to appear on the next line, such as for your postal address. The command for this is <br> which means break. The <p> and <br> commands don't have an "off" switch.

<h1> and </h1>

This is the first level of "heading". Headings can be used to separate key points from the rest of the text. This is like when you use an outline format where the boldest points are at the beginning. You can only have one <h1> command in a text file, but you may have other headers in ascending order from <h2> through <h6>. The larger the number, the smaller the significance of the header. Lynx displays text within headers separate from other text. Other browsers act on the numbers shown and display the text in larger or bolder fonts. I've noticed that lynx does tend to follow this trend, but it's most noticeable by the space(s) shown between the heading text and the rest. Some versions of lynx display headers in reverse video.

<A HREF="

This is the beginning of an "anchor", the highlighted text that's used to send readers to other text.

The entire anchor looks like:

<A HREF="http://personal.html">Jeff Swift.</A>

An anchor has three (3) parts:

1. This first part lets the browser know an anchor has begun and gives the actual URL (where to send the reader):

   <A HREF="http://personal.html"

2. The next part of the anchor shows where the URL stops and the descriptive text that is to be highlighted:

   >Jeff Swift.

3. The last part of an anchor designates the end of the anchor and stops the highlighting of text:

   </A>

More Details about Anchors

The URLs used in an anchor don't have to begin with "http://" (the format for HyperText on the World Wide Web). You can include other types of resources such as ftp, gopher, wais, news or telnet. The following examples show how to include other resources on your home page:

FTP:

<a href="http://ftp.videocam.net.au/cbm/
">ftp files from ftp://ftp.videocam.net.au/cbm/</a>

Example:

ftp files from ftp://ftp.videocam.net.au/cbm/incoming/

Telnet:

<a href="telnet://bbs.neverending.com/">Telnet to bbs.neverending.com</a>

Example:

Telnet to bbs.neverending.com

Gopher:

<a href="gopher://gopher.soonet.ca
/11%5cCOMPUTERSMITH">SSI Catalog</a>
This lets the user to view the Software Support International catalog.

Example: (NOTE, this site doesn't exist anymore)

SSI Catalog
This lets the user to view the Software Support International catalog.

NOTE: Most Gopher services have been replaced by http (Web) servers. The above link is for example only. The link no longer functions.

Email

Our poor overworked Jeff has no time to read mail, but he still wants to add the ability for readers of his home page to send him mail. To do so, he can use an anchor similar to the ones shown above, but this one is designed just for Email:

<hr>

<address>Jeff Swift / swift@nowhere.com</address><p>

I don't have time for <a href="mailto:swift@nowhere.com">mail</a> but send me a note anyway.<p>

This will appear as:

I don't have time for mail but send me a note anyway.

The HTML tags we've just used:

<hr>

This gives a Horizontal Rule or line. It's a method of separating text. This tag doesn't have an "off" switch.

<address> and </address>

This is used by the browser to learn the owner of the document. It's usually the last item in file. It includes the owners Email address, not their postal address. This is the address that is used if the viewer chooses to "send a comment" to the document owner.

<a href="mailto:swift@nowhere.com">mail</a>

This is an Email anchor. As with other anchors, it has three parts to it. Naturally you would insert your own address, and you can have any relevant text instead of the word "mail" for your anchor.

Lists

On Jeff's personal page, he's decided to add a list of things about himself. He has to make a decision about what type of list he wants to use, as he can have unordered (bulleted), ordered (numbered), or a definition list.

Unordered lists look like this in HTML format:

<ul>

<li> I work too much.

<li> I love my C=64

</ul><p>

Unordered lists appear as when viewed:

• I work too much.
• I love my C=64

Ordered lists look like this in HTML format:

<ol>

<li> I work too much.

<li> I love my C=64

</ol><p>

Ordered lists appear as:

1. I work too much.
2. I love my C=64

The HTML tags we've just used for unordered and numbered lists:

<ul> and </ul>

The on and off tags to show the beginning and end of an unordered list.

<ol> and </ol>

The on and off tags used before and after a numbered list. The "ol" stands for "ordered" list. If Jeff used a numbered list, he would have used these instead of <ul> and </ul> in the example above.

<li>

Each item has <li> before it, designating it as a new item in the list.

Definition Lists

Getting rid of Jeff for a moment, let's use another example to show a definition list. When constructing the QWKRR home page, I wanted to include a list of file names and their purpose. The easiest way to display this information was with a definition list. This formats the text consistently and it takes less key strokes than trying to format it manually.

Here's what a definition list looks like in HTML format:

<DL>

<DT>QWKRR128 V4.30

<DD>This is the main program (208 blocks). This is additional text
to show how more than one line of text is formatted.

<DT>QWKC.STD

<DD>Character set (5 blocks)

</DL><P>

This is how a definition list will appear when viewed:

QWKRR128 V4.30

This is the main program (208 blocks). This is additional text to show how more than one line of text is formatted.

QWKC.STD

Character set (5 blocks)

*NOTE*

This page uses the Definition List format to display HTML tags and their purpose.

The HTML tags for Definition Lists:

<dl> and </dl>

The on and off tags used before and after a definition list.

<dt>

Definition Term. This is used before the word or phrase to be defined, and is used before the actual definition.

<dd>

Definition. This is used before adding the definition or description.

Adding Files to Download and Graphics

Adding programs to download and graphics involves using the same type of anchors as when linking to other places.

Jeff has a photo of himself that he wants to include on his personal page. He has it in two formats, one for Commodore users and one for those using a graphic browser. To let us download the file, he includes this text:

<A HREF="file.prg">Download Commodore Photo</A> press the letter -d- when your cursor is over the text.<p>

When viewed, it will appear as:

Download Compressed Koala (GG) Commodore Photo press the letter -d- when your cursor is over the text.

Note that any file can be used here, not just a graphic file.

For those who use other computers he has included an "in-line graphic". This will show his photo on the screen along with his text when someone using a graphical browser visits his page. The format for this is:

<img src="jswift1.gif">

When viewed with Lynx, we will see the following. Depending on the version of Lynx we're using, we may not be able to download or view the image. Those with Graphic Web Browsers will see the image on the Web page.

Note that Jeff could have also made the photo.gif available to ALL users by adding a linked anchor within the in-line graphic command:

<a href="photo.gif"><img src="photo.gif" ALT="[Jeff Swift]"></a>

Anyone using a graphic browser would see the photo, and those of us who use text browsers could select the link and download the file to view it later. It appears as:

HTML Tags for Local Files and Graphics:

<A HREF="file.prg">Download File</A>

This tag can be used for either a local HTML file (such as we used for Jeff Swift's personal page), or to offer a file to download that's in the same directory as the HTML file.

<img src="jswift1.gif">

This is the basic tag when displaying a graphic file. This type of tag will only display the file or for Lynx users will show: "[INLINE]" or "[IMAGE]" without giving any meaningful text.

<a href="photo.gif"><img src="photo.gif"
ALT="[alternate text]"></a>

This example shows how to format a graphic image so it is a selectable link that will be displayed to graphic WWW browsers but will also be available easily to anyone using a text browser like Lynx. It has alternate text which acts as the name of the link to select. The brackets ("[ ]") are optional. Note that there is only one "</a>" in this example.

Things to Avoid or Substitute

If you're creating a WWW site and don't have access to a graphic browser, avoid using formatting commands that influence the image you're displaying. This rule of thumb is especially important if you have several images you want to display on a page. It's like trying to put a jigsaw puzzle together when you can't see the pieces.

Since the HTML format requires the use of tags that are also text, there are some characters you may want to avoid when writing HTML files. You can substitute them with alternatives the browser will recognize and replace as needed. These characters are: < > & "

Suggested alternatives to use instead are: "( )" for < >, the word "and" instead of "&", and the apostrophe (') instead of the quote ("). If the alternatives are unacceptable, you can substitute a series of characters instead.

Substitute: &lt; for <

Substitute: &gt; for >

Substitute: &amp; for &

Substitute: &quot; for "

Easy HyperText

Almost any tag can be made into a macro with your favorite word processor, making HyperText much easier to add to your text file. I have the following defined in QWKRR128 for myself. The Write Stuff also supports the same macro format. A similar format can be created for PaperClip III, too.

r1=<a href="

r2=">

r3=</a>

p=<p>

b=<br>

hp=http://

The tags are added while in insert mode after the rest of the text is written. The first three commands (r1, r2 and r3) are used when adding links or other files. After I've typed the URL and the text to be highlighted, I insert r1 before the URL, r2 after it, and r3 after the text I want highlighted.

Like:

r1 http://www.somewhere.com/~somename/some.html r2 highlight text r3

When I hit the spacebar after the "r1, r2 and r3" macros, the HTML formatting text is inserted. I have to remove the spaces that appear between the items, but that's easier than typing the full URL and anchor each time. WHY do it this way? It keeps typos a minimum, and if you import a text file with URLs into your file, it is easier than typing each anchor individually. Once the URLs are in the editor, it's simply a matter of adding the three HyperText elements to create an anchored link.

It's faster to do than to describe.

To demonstrate, if I want to make my URL into a HyperText link, with "Gaelyne's Home Page" as the highlighted text, I would use the following steps.

1. Either type the URL and description or import it. In my case, this is a macro that I've predefined (anything to avoid typing!).

   http://gaelyne.com/index.php Gaelyne's Home Page

2. Cursor up to the start of the URL (the "http") and type my first macro (r1).

   <a href=" http://gaelyne.com/index.php Gaelyne's Home Page

3. Move to the end of the URL (after "gaelyne") and add the second macro (r2).

   <a href="http://gaelyne.com/index.php"> Gaelyne's Home Page

4. After the last word to be highlighted ("Page"), I use the third macro(r3).

   <a href="http://gaelyne.com/index.php"> Gaelyne's Home Page </a>

5. Clean up the spaces between the macros.

   <a href="http://gaelyne.com/index.php">Gaelyne's Home Page</a>

Word Processor Work-Arounds

Unfortunately, The Write Stuff and other word processors don't deal with the underscore (_) or tilde (~) characters very well so you must use substitutes instead. Luckily, you can use their hex equivalent (don't panic - there's only two you'll need to know, and they're easy!) You can use this technique if you're not sure what keys to press when browsing the web, too. Since my former URL is a bonafide worst-case example, here's what it would look like with the substitute text replacing the tilde and underscore:

http://www.msen.com/%7Ebrain/guest/Gaelyne%5FMoranec

• %7E replaces the tilde (~) character.
  
• %5F replaces the underscore (_) character.
  

Going LIVE on the Web

When you've finished creating your web masterpieces, it's time to upload them to your Internet account. Before you do, create a new directory in your home directory called "public_html". Then set its permission so that it's accessible to others. If using a UNIX shell account, the command to do this is: "chmod a+x public_html". Upload the files into this directory. Now you'll need to make the files accessible to the public. Move to the directory and type "chmod a+x *". If you are not using a UNIX shell account, check with the System Administrator about where to upload your files and if you need to set the files' permissions.

Before telling the world about your new web site, test it and all of the links you've included to be sure they are correct. When using Lynx, you can edit your HTML files by pressing the letter "e". When you exit the editor after making your changes, you are returned to Lynx so you can continue viewing and testing. The best intentions can go astray, and it's possible a typo or two may have crept into your HTML file. Some of the symptoms you might run into include having the entire screen end up highlighted, or a link that should be visible that isn't. These usually happen when you've accidentally left off the end of an anchor (</a>), or forgot to add a greater than or less than symbol (<>).

The last step in testing your new web site is to ask a friend to view your work. If they can't access it, check your file permissions. Once your friend can view your work, you can announce it to the world. Good places to let other Commodore users know about your new site are the comp.sys.cbm newsgroup and CBM Fidonet echoes.

Summing Up

I find HyperText to be an extremely interesting form of displaying text and graphics. There are many things you can do with it, and while it seems complex, it's not much different from formatting word processor files for printing. On a recent bookstore visit, I was amazed to see dozens of titles on HTML. I've noticed that many magazines are running multiple series on the topic, too. Personally, although I'm very keen on the subject, I find it a bit of overkill. It really isn't that difficult to have your own page on the World Wide Web. My pages were created using an easy to follow HTML guide I found online. Later, I learned how to view the "source" of an interesting Web site and use it as an example for the effects I desired. Just as in computer programming, HTML "source" file is the text with the commands shown instead of being acted upon. The Lynx command to view the source of a web page is the backslash, which is the British pound symbol on
the Commodore.

If you'd like to find out more about HyperText, this URL will send you to the right place:

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html.

HyperText terms and Formatting Tags

Anchor

The highlighted text on web pages that loads a new file or goes to another web location. An anchor has 3 parts. The first part begins the anchor and gives the URL. The second part shows where the URL stops and the highlighted text begins. The last part designates the end of the anchor and stops the highlighting of text.

Anchors look like:

<a href="http://www.msen.com/~brain/cbmhome.html">CBM Home Page</a>

|___________________1_________________________|_______2_______|_3_|

Substitute Characters

Characters which shouldn't be used (as text) within HyperText: < > & "

Suggested text alternatives to use: ( ) "and" and the apostrophe.

HyperText substitutions:

&lt; replaces <

&gt; replaces >

&amp; replaces &

&quot; replaces "

Definition List

Text formatted with the defined word(s) separate from the text defining it.

HTML

HyperText Markup Language

HTML tags

HyperText commands

INDEX.HTML

The"default" file loaded by most browsers when a file name isn't specified.

Ordered List

Numbered list.

Unordered List

Un-numbered, or bulleted list.

URL

Uniform Resource Locator. The "addresses" used on the World Wide Web.

<a href="file.prg">Download Commodore Photo</a>

Anchor format to use for graphic or other files that the reader may wish to download.

<a href="photo.gif"><img src="photo.gif"
ALT="[photo of xyz]</a>

This anchor allows both graphic and text browsers equal opportunity to the graphic file.

<address> </address>

Designates the owner of the document.

<br>

Adds a line break. Text after this begins on the next line.

<dd>

Used before the definition of the word in a definition list.

<dl> </dl>

Beginning and ending tags for a definition list.

<dt>

Used before the defined word in a definition list.

<h1> </h1>

A first level "heading". These number from one to six.

<hr>

Horizontal Rule. Puts a horizontal line across the screen.

<img src=photo.gif>

Displays an in-line graphic for graphic browsers. Lynx users see "[IMAGE]".

<li>

Designating the text following as a new list item.

<ol> </ol>

First and last tags for an ordered (numbered) list.

<p>

Designates the end of a paragraph in HyperText. It adds one blank line after it.

<pre> </pre>

Preformatted text. Text between these tags is shown "as is".

<title> </title>

Tags to designate the title of the web page.

<ul> </ul>

First and last tags for an unordered list.

The text of this Web page is copyright ©1997 J&F Publishing. All rights reserved. No part of the article may be reproduced without permission from J&F Publishing.