CS 130 Lab #7: Representing basic hypertexts

Note: you will likely need to refer to some of these HTML tag reference pages while working on this lab:

  1. An award-winning introduction to HTML

  2. A W3C-sponsored introduction to HTML

  3. W3School's HTML 4.01 tag reference

  4. HTML Dog's HTML tag reference

  5. WebMonkey's HTML "cheat sheet"


The purpose of this lab is to explore the underlying encodings which make hypertext documents visible and useful to people through browsers. HTML (the hypertext markup language) represents the early and current (widely-used) state of web technology: we will use this as a basis for studying XML and XSLT in a later lab (these two are part of the technological future of the "semantic web").

There are two main parts to the lab, one which asks you to do some small experiments with HTML and the other which asks you (in a more open-ended fashion) to create a small home page for yourself.

Note that different browsers (FireFox, Internet Explorer, Netscape, etc.) may display things differently, from each other or from how the book claims they will look. This is normal and to be expected: in fact, it helps to emphasize our main points, which are about the relationships between physical represntation and abstract structure.

Some notes on files and editors

You will want to work in a text editor such as NotePad or Wordpad in order to create your HTML file (these are available in Windows under the Utilities or Word processors sub-headings of the Programs menu via Start). You will probably also want to keep a browser window open to display what the rendered HTML code looks like.

You should always remember to both save your text file (in the text editor window) and then refresh your browser window before you expect to see changes.

In order to make your web page and experiments accessible from anywhere on the web, you should save your files in the "public_html" folder on your "H" drive (the one with your login name on it). If you don't have a "public_html" folder, just create it with the "new folder" button on the top level of your "H" drive. (You must spell it all in lowercase and with the underscore between words! You should also remember to save your file with the ".html" extension.) These should be enough to make your page visible on the web from the URL:

where "YOU" is replaced by your login name and "NAME" is replaced by the name of your file. If you still have trouble viewing your page, it could be due to issues with the file permissions (I'll add instructions about this later if it is a problem in lab).

If you want to edit your home page on your home (or dorm) computer, you'll need access to your "H" drive from there. You may already have this set up, but if not, check out the WITS instruction page on how to do this:

mapping your H drive

One other thing you should watch for: save your file as a plain text document, replace the ".txt" extension at the end of the file name with a ".html" extension. If you see something like the picture below, it's probably because your file got saved with the Rich Text Format (RTF) style.]

Some experiments with HTML

For this section, you should try these short experiments with HTML code and how it is displayed and be ready to demonstrate the results for your demo.

Here are some things you can try:

Creating your own home page with HTML

For this section, you should create a little sample page for yourself in HTML. If you store it as the file "index.html" in your "public_html" folder, you should be able to access it by just typing this URL:
(In other words, this becomes the default page used when someone comes just to your login name at Willamette's web site.)

Although you are welcome to dress up your home page any way you want (and of course to modify it to taste after your demo is over), I would like to see you use at least the following HTML features somewhere in the page (you will find details on most of these features in your textbook):

Please have your experimental results and your page ready to demo by the end of lab on Friday 14 April .