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:

Goals

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:

http://www.willamette.edu/~YOU/NAME.html

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:

How is the strong tag displayed in your browser? How about just emphasis? Do they look different in different broswers?
What happens if you forget to close a tag such as for bold face or italics? What happens if your forget to close an "important" structural tag such as head, body or html?
What happens when you nest tags "improperly", so that (for example) one tag begins before the other one ends?
How can you put Unicode symbols into a page? Can you discover (with a web search) what named HTML character entities are available?

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:

http://www.willamette.edu/~YOU

(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):

Use a few different fonts and styles, including both "physical" and abstract ones.
Use HTML character entities to place at least 2 interesting Unicode symbols of your choice somewhere on your page. You can use this reference chart, but it's also fun to look for other characters in the Unicode BMP (just remember to either convert the code number to decimal or else use an "x" between the pound sign (#) and the number itself to indicate hex). (Try this link if the last one is down.) ☺ ♥ ☣
Use at least two hypertext links in your file: one of these should be a "mailto" link (read about it here).
Include a some sort of ordered or unordered list in your file (a table of contents, some favorite websites, names of all your pets, etc.).
Embed at least two images in your file; one of them should be a link to a picture on your H drive (say a thumbnail linked to a larger version of the same picture) and one should be an embedded reference to some external picture stored on another computer (e.g., from another web page).
Use comments somewhere in your page.
Use at least two colors in your page (either as background color, or in a table cell, for a horizontal rule, etc.).
Use a table somewhere in your file (e.g., to show your time schedule, or a list of music you like, etc.).

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