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.
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.
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:firstname.lastname@example.org"> </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 PageThe 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:email@example.com"> </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!
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:
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:
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: