Computing Problems 3: HTML

Assigned: Thursday, January 29, 1998
Due: Tuesday, February 3, 1998

Summary. In this assignment, you will be creating hypertext documents. Along the way, you will learn how to use the editor on our workstations and to "publish" HTML documents.

Intent. This assignment is intended to give you experience writing and thinking about hypertext and in using our computers.

1. Prepare for Web Service

For better or for worse, whenever we work on the computer we tend to generate a large number of files. To organize our files, we often put them in folders or directories. Our HP workstations use a much less visual means of creating and manipulating these directories. In particular, you'll need to create a terminal window (using the thing that looks like a computer on the program bar) and type various commands into that window.

To create a new directory, type
% mkdir directory
(fill in the name of the directory; don't type the percent sign).

To start working in a new directory, type
% cd directory

To return to your home directory (the place in which you started working), type
% cd ~
You can find the tilde in the upper left hand corner of the keyboard.

To begin this assignment, you'll need to make a public_html directory, put a sample HTML file in that directory, and view the file.

In particular,

1. Create a directory called public_html with
   % mkdir public_html
   Use that exact name, including the underscore.
2. Switch to that directory using
   % cd public_html
3. Copy my sample HTML file to that directory using
   % cp /home/rebelsky/Examples/index.html index.html
   This says "copy the file named index.html from rebelsky's Examples directory to a file named index.html in the current directory.

Because these computers employ an overly-ambitious protection system, the default is that neither your folders nor your files are readable. You'll need to share them with the share command, as well as a related useful command in computerese. The next three commands assume that you've already switched to your public_html directory.

1. Allow others to view your public_html directory with
   % share .
   You'll only need to type this once.
2. Allow the machine to connect to your public_html directory with
   % chmod uo_x ..
   You'll only need to type this once (I hope).
3. Allow others to view your index.html file with
   % share index.html
   You'll need to do this for every file you create.

You should now be able to view that page as http://www.math.grin.edu/~youruserid/index.html

2. Logically Annotating Texts

Pick a web document (the sample page you created above might be a good start) and print it out. You can save paper by printing it in "two-up" format (two smaller pages side-by-side on a normal page) if you enter the following command in Netscape's "Print" dialog box:
/u2/rebelsky/bin/psnup -2 | lp

Circle the various components of the page and indicate the role or roles that they play in the document. For example, you might mark "title", "paragraph", "section title", or "program code".

3. Physically Annotating Texts

Print another copy of the same web document. Circle the pieces of text the look different and attempt to describe a few of them in terms of their appearance. You need not describe all the text on the page. However, you should attempt to describe as much of the text as you can. For example, "sans-serif font, approximately 12 point, aligned one inch from the left margin, left justified, ...".

4. Update a page

At this point, you'll need to learn how to use our standard editor, which is known as emacs. I will admit that I do not use emacs, but the editor I use is unusable by anyone except computing geeks and those who've spent weeks learning it.

Click on the pencil icon on your tool bar. After waiting a few minutes, you'll observe that a new application appears on your desktop. If you've used an editor on any computer, this should seem somewhat familiar to you.

Click on the Open icon. After a little while, you'll see a window that allows you to select files. In the left-hand side of the window you'll see a list of directories (probably only one). In the right-hand side of the window, you'll see a list of files in the current directory. To switch to a directory, click on the directory name with the middle mouse button. To select a file, click on the file name with the middle mouse button. You should select the index.html file.

Read through the HTML, observing the various tags and making changes to customize your page. Don't spend too long customizing the page right now; your goals are to work on learning some HTML and on using the editor.

5. Build a Problem-Resolution Web

The hypertext nature of HTML makes it particularly attractive for reflecting on problem solving, as you can make documents that reflect different approaches to the same problem. Pick one or more problems that you've worked on recently and build a series of pages that guide the reader through various strategies for solving the problem. For example, in the first beans game you could list

• play a sample game;
• consider possible "two-round" scenarios (i.e., how many beans can we take after two rounds);
• consider all alternatives in a sample (probably smaller) game;
• work with a smaller game and build your way up;
• ...

Try to use some of the keywords in building the web. For example, if you hit a Stuck point, you might list sample questions to ask and provide separate links for each alternative.

Try to include at least ten pages in your web. You may work in groups of up to size four on this web, and need turn in only one web for the group (make sure to include all of your names).