If this looks like too much bother, try our Lazy webmaster's instant homepage.

Introduction

Creating your own home page is not a difficult task. The fancier you want the page to appear, the more complex the task. We'll attempt to go over some of the basics that you will require to create your very own home page (or pages).

If you already how the basics of HTML and just want to install your pages on CUUG, you can skip to the Installation Guide.

A "page" is nothing more than a text file stored on an computer (typically connected to the internet). These files contain formatting that is refered to as HTML (HyperText Markup Language), in tech-speak, a "page" is called an HTML document.

Tools Required

To start with, you will need to be familiar with the use of a few unix tools and commands. None of these are overly complex, and additional documentation is typically available online via the "man" command. You should note that the various programs may operate with slight differences on the various machines available at the CUUG CRC. Now, here is the list of what you need:

  1. An idea! (You should have a general idea of what you want your home page to look like).
  2. A text editor. (The most popular choices are "vi" and "emacs", many others are available, just use your favorite).

Getting Started

There are actually two distinct steps that we must perform in making our home page. We have to create the HTML document that will be our page, and we have to then make that document available to the world via the World-Wide Web.

There is no definite order to this, so we'll start with the easiest of the two, which is making the page (even though it doesn't exist yet) available to the world. This will be specific to CUUG, and may be slightly different on other sites.

Creating the HTML Document

An HTML document contains two basic elements - text and HTML commands. HTML commands are actually text themselves, and are always enclosed in angle brackets "<>". We are not going to cover all the possible HTML commands that can be used in an HTML document, just the basics that you will require for making simple pages. This tutorial also follows my own "style guide" for what I consider the proper layout of an HTML document. If you want more complete information you can check out:
Google: Computers > Internet > WWW > Authoring > Tutorials
CSLA HTML Tutorials from the Internet
WebReference

It's time to create our file, so fire up the text editor you chose to use and we are ready to proceed. You can use any filename you like, but it has to end in ".html" to be used.

Many of the HTML commands we will be using contain some text that you choose, and this needs to be separated from the other text in the document. For this reason, some commands actually have a start and end command, any text that is placed between the two commands is then used for the command. Since we need a title for our page, we'll start with that.

To make a title, we place the text for the title, between the "<TITLE>" and "</TITLE>" HTML commands (Note: Without the quotes, of course). So, if we wanted our title to be "My Home Page", we would put the following in our file:

<TITLE>My Home Page</TITLE>
You will notice that the only difference between the "start" and "end" commands here is a forward slash "". This is true for all HTML commands that need two parts, so it is easy to remember.

In our sample, we have made the HTML commands upper case. This is not required, they can be in either upper case, lower case, or any mixture for that matter. I personally prefer to make them all upper case so that when I edit a document it is easy to make out the HTML commands and the actual text. You can do whatever you like best in your own documents.

We want to proper style in our document, and also want to make sure that it is properly handled as an HTML document. To do this, we break up our HTML document into two parts: the head (as in heading) and the body. Since our sample does not have a body yet, it looks like this:

<HTML><HEAD>
<TITLE>My Home Page</TITLE>
</HEAD><BODY>
</BODY>
We should also add what is sort of a "magic" for the program that eventually displays your document. This bit of magic will tell that program who created the document and how to contact you via email. There is no need to understand everything in this HTML command, you can simply insert it into your documents exactly as show, only changing your email address. Here is our sample again, with the "magic cookied" added.
<HTML><HEAD>
<TITLE>My Home Page</TITLE>
<link rev=made href="mailto:userid@cuug.ab.ca">
</HEAD><BODY>
</BODY>
Now we are ready to add the "guts" of our page to the document, we will place this on the lines between the <BODY> and </BODY> commands. The program that displays our document is called a browser (typically Mosaic or Lynx) and is responsible for formatting our document on the user's display. Since each user may have a display with different widths or page lengths, we don't make any assumptions in our document about those. Any text that we add will be formatted to suit the display of the user. A good example is this document itself! If you are in Mosaic, you can grab the corner of the display and change the size of the window. Mosaic will re-format all the paragraphs for the new size.

The most common item in a document is a link to another document, these are called anchors within the document itself. Each anchor contains two parts, the URL called the "href" (hypertext reference) and some clickable text the user will select to follow the link. Here is a sample of the HTML command to produce a link to the CUUG home page.

<A HREF="">CUUG Home Page</A>
In a document, this would appear like this:
CUUG Home Page
The text between the <A HREF="...> and the </A> is highlighted to show the user that they can follow the link. If we add some additional text to this, possibly a descriptive paragraph, we can see how the browser program formats everything up for us.
<HTML><HEAD>
<TITLE>My Home Page</TITLE>
<link rev=made href="mailto:userid@cuug.ab.ca">
</HEAD><BODY>
You can find out more about the Calgary Unix Users' Group
by visiting the
<A HREF="">CUUG Home Page</A>
anytime you like!
</BODY>
This is how it would appear in a document:

You can find out more about the Calgary Unix Users' Group by visiting the CUUG Home Page anytime you like!

You should notice that although we broke up the text in our document over several lines, that the browser put it all together into one nicely formatted paragraph for us. We do need to tell the browser when we are actually done a paragraph ans wish to start a new one. This is done with the <P> HTML command. Whenever this is encountered in a document, the browser will immediately start a new paragraph and will insert a blank line between paragraphs for us. Here's an example of this in action:

<HTML><HEAD>
<TITLE>My Home Page</TITLE>
</HEAD><BODY>
This is some text that will make up our first
paragraph.  It contains some silly nonsense
just to ensure that it will be long enough to
actually look like a paragraph rather than just
a single long line.<P>
This is some more text except that it will make
up our second paragraph.  It doesn't have to be
as long, but it won't hurt to try!<P>
</BODY>
This is how it would appear in a document:

This is some text that will make up our first paragraph. It contains some silly nonsense just to ensure that it will be long enough to actually look like a paragraph rather than just a single long line.

This is some more text except that it will make up our second paragraph. It doesn't have to be as long, but it won't hurt to try!

Special Characters

Some of you might be wondering about how you can actually get those angle brackets into a document since they indicate an HTML command. To do this we use what is refered to as a meta-sequence, which is basically just an HTML command for displaying special characters. The meta-sequence is not like other HTML commands in that it does not use the angle brackets itself. Instead, it used the ampersand "&" character, which also requires a meta-sequence to be displayed.

This might sound a bit complicated, but it really isn't. There is a different meta-sequence for each special character (and for some other special characters such as accented characters used in other languages). The meta-sequence consists of the meta-character followed by the "name" of the sequence, followed by a semi-colon ";". So, to display the angle brackets and our meta-character, we would use the following:

< is displayed with "&lt;"
> is displayed with "&gt;"
& is displayed with "&amp;"

Getting Fancy - Headings & Lists

The last bit is on making things a little fancier, or at least nicer looking on the surface. To do this, we add headings, and make use of lists. There are six levels of headings, and how they are displayed depends on the browser program being used (ie. Mosaic treats them differently than Lynx does). These are used in exactly the same manner as titles. The HTML commands are "<H1>","<H2>","<H3>","<H4>","<H5>", and "<H6>". These are ended with "</H1>" ... "</H6>" respectviely.

Probably the most commonly used features of HTML are lists. There are two types of lists, "unordered" and "ordered". The only difference is that one uses various bullets to mark each list item, and the other numbers them. To make a list we start with "<UL>" for an unordered list, and end with "</UL>". For an ordered list we use "<OL>" and "</OL>" respectively. To indicate each item in the list, we use "<LI>" followed by the text for the item. Unlike other HTML commands, the <LI> command does not need to be "ended". Here are some exaples of lists in action.

<HTML><HEAD>
<TITLE>My Home Page</TITLE>
</HEAD><BODY>

Unordered List
<UL>
<LI>Item one.
<LI>Item two.
<LI>Item three.
</UL>

<P>

Ordered List
<OL>
<LI>Item one.
<LI>Item two.
<LI>Item three.
</OL>

</BODY></HTML>
This is how it would appear in a document:

Unordered List

Ordered List

  1. Item one.
  2. Item two.
  3. Item three.

The text for each item in the list can contain links to other HTML documents. This is probably the most commonly used feature of HTML. In addition, you can nest lists, here is an example of nested lists.

<HTML><HEAD>
<TITLE>My Home Page</TITLE>
</HEAD><BODY>

<UL>
<LI>Item one - normal.
<LI>Item two - a nested list.
<UL>
<LI>Item two, choice one.
<LI>Item two, choice two.
</UL>
<LI>Item three - normal.
</UL>

</BODY></HTML>
This is how it would appear in a document:

Putting it all together

At this point you should have a page ready to go, and can proceed to the CUUG Installation Guide for instructions on making your pages accessible to the internet.