Creating A Web Course Homepage

Documents used on the web are created using something called HTML. When you create a course homepage you will need to know a few basic HyperText Markup Language (HTML) tags.

The Title and Other Starting Information

To start any web page you will need a few basic tags at the top of your document.

<HTML>

This tag goes at the beginning of the document and declares this to be an HTML document. Next, the HEAD tag is used to define some header information about this document.

<HEAD>

The most important tag goes here. The TITLE tag is used by many search tools on the internet. Because of this, you should try to make your title very informative - but brief. For example:

<TITLE>Creation of Web Course Homepages 101, UW </TITLE>

Notice the starting title tag <TITLE> is followed by a title and then finishes with a closing title tag </TITLE>. All closing HTML tags are the same as the opening tag with the exception of the /.

Next comes the closing HEAD tag.

</HEAD>

This is followed by the opening BODY tag.

<BODY>

After the BODY tag comes the real content of the page, the reason for its being.

The Headings

You will need to use heading tags on your course homepage. These tags start with an opening tag, then the name of the course, and finally the closing tag. For example:

<H1>Web Homepages 101</H1>

Heading levels can go from 1-6. Level 1 headings are major headings while level 6 headings are minor headings.

The List

You often want to list items on a menu on a web page. This can be done by using the Unordered List tag.

<H2>Relevant Course Material</H2>
<UL>
<LI>HTML Documentation
<LI>More Documentation
<LI>Finding Things with Yahoo
</UL>

The list starts with the <UL> tag and each item in the list starts with a <LI> tag. The list is finished with a closing</UL> tag. This list starts with a second level heading but that is not a requirement.

The Link

What the web has become famous for is the ability to "link" to other documents. For example, in the list above there was a list item "HTML Documentation". You can link to another site on the web that has HTML Documenation by using a link tag.

<H2>Relevant Course Material</H2>
<UL>
<LI><A HREF="http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/htmlindex.html">HTML Documentation</A>
<LI><A HREF="myfile.html">More Documentation</A>
<LI><A HREF="http://www.yahoo.com/">Finding Things with Yahoo</A>
</UL>

The tag starts off with <A HREF= and is followed by the name of the file, enclosed in quotes, and ends with a > . Then comes the text of our list item, HTML Documentation. This text will appear in blue, or purple, which is a signal to the viewer that this item is "linked" to something else. The finishing tag </A> ends the linked text. A few words are in order about the name of the file. Often when you want to link to another file on the web you simple copy the URL from that page and paste, or type, it into your document. URLs may start with http: when they are web files or gopher: if they are gopher files. When it is a local file of your own that you are linking to, as in the second list item, then only the name of the file will be placed inside the quotes.

The Image

Images can be used to get your point across or just to dress up your page. If you already have an image you can include it in your document with the IMG tag. For example, If you wanted to put the UW crest at the top of your page you could do that by including the following tag in your document.

<IMG SRC="http://www.uwaterloo.ca/images/uwcrest.gif" alt="University of Waterloo -- Waterloo, Ontario, Canada">

The <IMG starts the tag and the SRC= followed by the name of the file in quotes defines where the file can be found. The alt= part of the tag is not necessary but is recommended. The text contained between the quotes of the alt tag is displayed on non-graphic devices.

The Big Finish

To finish off your web page there are a few recommended things that should be at the bottom of all of your files. You should give the name of the maintainer of the page, the addresses of that person, the e-mail address and the date the document was last updated. You will also need to use the ending BODY and HTML tags.

You will notice that a <P> tag is used to produce a space and a <BR> is used to go to a new line. HTML viewers will ignore blank lines and more than one blank space in a row. You cannot use multiple <P> or <BR> tags in a row because they also will be ignored.

<P>
Maintained by Joe Cool<a href=mailto:jcool@snoopy.uwaterloo.ca>jcool@snoopy.uwaterloo.ca</a><BR>
Lasted Updated: December, 1995
<P>
<ADDRESS>Joe Cool<BR>
Department of External Affairs<BR>
University of Waterloo<BR>
Waterloo, ON N2L 3G1<BR>
Canada<BR>
</ADDRESS>
</BODY>
</HTML>

A Word About The Mailto Tag

Although the mailto tag is used in this example it should be noted that it is only used at present by the Netscape viewer. Please make sure you give the e-mail address in words as well as with the mailto tag as in the example.

Putting It All Together

<HTML>
<HEAD>
<TITLE>Creation of Web Course Homepages 101, UW</TITLE>
</HEAD>
<BODY>
<IMG SRC="http://www.uwaterloo.ca/images/uwcrest.gif" alt="University of Waterloo -- Waterloo, Ontario, Canada">
<H1>Web Hompages 101</H1>

<P>
Maintained by Joe Cool<a href=mailto:jcool@snoopy.uwaterloo.ca>jcool@snoopy.uwaterloo.ca</a><BR>
Lasted Updated: December, 1995
<P>
<ADDRESS>Joe Cool<BR>
Department of Cob Webs<BR>
University of Waterloo<BR>
Waterloo, ON N2L 3G1<BR>
Canada<BR>
</ADDRESS>
</BODY>
</HTML>

And, it should look something like this!

Computing Services Course Material Go to the Computing Services Courses page.

UW Home Page Go to the University of Waterloo home page.

Maintained by marj@dcs1.uwaterloo.ca, December, 1995

Marjorie Kohli
Department of Computing Services
University of Waterloo
Waterloo, ON N2L 3G1
Canada
(519)885-1211 Ext. 2014