Lab 1 -- An Introduction to HTML
Most weeks, the lab work for this course will be divided into two parts. The first part will consist of a carefully guided activity intended to familiarize you with the practical application of HTML or Java techniques discussed in class. The exercises required for the first portion of each lab will be designed so that almost all students will complete them during the 75 minutes of the scheduled lab period. The second part will involve a more open-ended project intended to further refine the skills developed in the first part. The second portion of each lab assignment will usually require additional time outside of the scheduled lab period.
You will be given printed copies for the instructions to follow for each lab's "Part I". The details of the second part of each lab will not be included in these handouts. Instead, you can find them in the "labs" section of the course web page.
Work performed outside the scheduled lab periods may be done on any appropriate computer. We will provide access to the software used in labs through the campus network. However, we will only provide Macintosh versions of this software. This will probably make it necessary for you to use a Macintosh when completing any of the labs that involve Java. HTML editors, on the other hand, are relatively easy to find and you are welcome to use the software and machine of your choice for these assignments. Having said all this, we do encourage you to consider using the machines in our lab in Bronfman. In the evenings, this lab will be staffed by teaching assistants who may assist you with your work. A schedule of the TA consulting hours can be found on the CS department web site.
For students who have labs on Thursday, laboratory work will be due at 11PM on the Monday following your lab period. Those in Friday's labs must complete their work by 11PM on the following Tuesday. You do not actually need to turn anything in. We will simply access your work through the network once the time at which it is due passes.
If you have questions about the instructions for either part of this lab, you are encouraged to ask them through the discussion area for this lab in the course discussion forum. You may be lucky and find that your question has already been asked and answered.
In addition to a basic knowledge of HTML, publishing information on the web requires familiarity with the software necessary to edit HTML files and make them accessible to the server software that will distribute them to remote sites. In the first portion of this week's lab, we will lead you step-by-step through the construction of a very simple web page. This will provide you with the chance to become familiar with the software we will be using to edit HTML throughout the course.
In recognition of the status of the cow as the Williams mascot, most of the computers operated by the CS department are named after breeds of cattle. Our Unix file server is named "bull.cs.williams.edu". Our web server can access files stored in folders on the "bull" file server.
You can connect to "bull" in several ways. For our purposes, the most useful approach will be to connect to "bull" as if it were an Apple Macintosh file server. This will enable you to edit the files that describe your web page as if they were local to your Macintosh while simultaneously making them accessible to the world through our web server.
We have created accounts on our server for each of you. Your user identifier will be identical to that you use when logging into colrain or connecting to a Netware file server. You should have received your password somehow. If not ask your lab instructor or TA for assistance.
Connecting to the "bull" Appleshare file server is simple (particularly if you have used other campus file servers such as "Greylock" or "Hector").
At this point, a new dialog box should appear on your screen.
Now, the machine will present you with a list of all the folders on "bull" that you may access. There should be just one and its name should be "www". Double click on this name or click "OK" to complete your connection.
After these steps are completed, a little icon looking something like a collection of smaller icons resting on a tray should appear on your Mac's screen. The name found under the icon will be "www".
The software we will be using to edit HTML files is named PageSpinner. It is a shareware product which we have licensed for use in our lab.
One does not actually need special software to create HTML files. They are just text files. They can be created with any word processing program that provides a "SAVE AS TEXT" option (Microsoft Word, for example). PageSpinner, however, makes one's life a bit easier by providing some special features to aid the HTML author.
If you are reading these instructions through Netscape Navigator, things will get a bit tricky in a moment. When you start PageSpinner, it will create a window that will obscure the Navigator window you are currently reading. At the upper right corner of the Mac screen, you will see a little icon representing the currently active application. If you depress the mouse on this icon, a menu will pop up listing all the running applications. Selecting an application will make it the active application. So, after PageSpinner starts up, you can return to Navigator by selecting its name from this menu. Later, you can get back to PageSpinner by selecting PageSpinner's name from the same menu.
To start PageSpinner simply:
PageSpinner opens up a new window containing the skeleton of HTML needed for any web page. Note the tags that delimit the HEAD and BODY of the file. In the HEAD section the TITLE tag is used to give this page the title "Untitled".
Using the mouse and keyboard as you would with any word processor, edit this text to replace "Untitled" with something more useful like
(Of course, use your name instead of Herb's even though I'll use his name in examples throughout the rest of this writeup.)Herb Gritz's Home Page
Now, we can save this almost empty file into your "www" folder on "CS bull" to create your first web page. Do this by saving the untitled file as "index.html".
Congratulations! You now have a home page on the web!
Within the PageSpinner window, your new home page doesn't look at all like a web page. To turn all the < and > signs into a page we need to view your new page with a web brower. Of course, don't expect your page to look much like a web page when we use a browser. All you should see is a blank page with the title you typed in displayed in the window's title bar.
Things get a bit tricky here again if you are actually reading these instructions using Navigator. You could make a new browser window to see your page in using the "New Web Browser" item in the Navigator "File" menu and then flip back and forth between this window and the new one. Alternately, you can just let your window replace these instructions for a moment and then press the Navigator's "Back" button to return to them after you have had a chance to appreciate your home page.
PageSpinner has a feature designed to make it easy to view your page with a browser. There is a button in the PageSpinner toolbar that looks a bit like the Netscape icon.
If you look carefully, you will notice that the "N" usually found in the Netscape icon has been replaced by an "M" (which is appropriate since this button can be configured to launch either Netscape Navigator or Microsoft's Internet Explorer).
You should be aware of one aspect of how PageSpinner uses Navigator to preview your page when you click on the preview button. When viewing a page, Netscape displays the URL for the page in the "Location" bar near the top of the browser window. If you look at the location displayed in your browser it will probably look something like
file:///www/index.html
Note that this URL starts with "file" rather than the "http" prefix used in the URLs we have discussed in class. A URL starting with "file" instructs the browser to read the file directly from the disk of the machine on which the browser is running. The network isn't used at all! This is a perfectly reasonable way to preview a file. You should be aware, however, that sometimes the results of accessing an HTML file as a "file" are different from accessing the same file through the network using a URL that starts with "http". While you can view your pages using a "file" URL, everyone else (including the graders) will need to access your pages through the network using an "http" style URL. As a result, at the end of each lab you should view your pages using an "http" URL to make sure they work as you expect.
As practice, we can view you incomplete page using an "http" URL now.
with the "99jrs" part replaced by your login identifier.http://www.cs.williams.edu/~99jrs/index.html
As I indicated above, the only sign of success to look for in this step is that your title should appear in the title bar of an otherwise empty Navigator window.
The next step is to put some information in your page. At this point, let's just add a heading identifying the page and a bit of text introducing yourself. Something like "Herb Gritz's Home Page" would be fine for the heading (feel free to be more creative). For the text, I'd ask you to write just a few sentences. Be sure to mention that you are a Williams College student (we will use this text for a link later). Don't mention that you are taking CS 105 (we will put that in a separate section later).
You could insert the header and paragraph by simply typing the HTML tags and text required in the BODY of the "index.html" file. If you want to proceed that way, go ahead. In the detailed instructions below, however, I will lead you through the process of adding these elements using PageSpinner's menus. I'd suggest trying both approaches at some point during the lab and deciding which you prefer as the course goes on.
To insert the header and paragraph:
What makes the Web fun, of course, is links. Right now your page doesn't have any. A nice easy one to add is to take the reference to Williams College I suggested you include above and make it a link that will take a visitor to the college's web page.
To make this link:
After you click the button, a dialog box should appear.
Before proceeding, examine the HTML <A HREF...> tag inserted by PageSpinner to make sure it is consistent with your knowledge of HTML.
Now, view your page using Navigator as described above and try the link. Again, if anything isn't quite right, go back to PageSpinner and edit the text to correct the problem.
A single page does not a web site make. So, we should add another page and provide a link to enable visitors to get from your home page to the new page. The page I have in mind will be a page that will serve as an index to the pages you create for labs in this course.
The new page will be created much like the first one.
The final step in this part of the lab will be to make a link from your home page to the CS 105 assignments page you just created.
At this point, I'll give you less detailed instructions since you should be getting the hang of this.
At this point, you should probably spend a little time enriching the simple home page you have created to make sure you are comfortable with the software. Add a paragraph about your philosophy of life, your dog, or whatever.
Also, as we have left it, your "labs" page suffers from one flaw found in many web pages. It doesn't provide any way to contact the owner. Add some information about yourself and/or a link back to your home page.
You don't have to turn in anything for this lab. The graders will access your work through the web server.
The "open-ended" portion of this week's lab is intended both to let you practice the skills developed in Part I and to help you begin to examine the "art" of creating hypertext. The ability to include links in a document gives an author new freedom. Text need no longer be linear. Instead, it can be intentionally written to allow different readers to take different paths through the work. Unfortunately, few people have the experience to know how to exploit these possibilities.
What I would like you to do is take a "substantial" piece of text and present it in hypertext as a collection of interlinked web pages. In doing so, you should think about how to use the features of HTML you have learned to make the material presented as easily accessible to the reader as possible. At a minimum, your work should demonstrate your ability to use the HTML features covered in class and lab: paragraphs, headers and links.
When you are finished, be sure to include a link from your "cs105labs" page to the hyper-document you have produced.
I will give you three suggestions for sources of text that you may turn into hypertext. If you wish to pursue something else, please contact me so that I can verify that your project will be acceptable before proceeding.
Make sure to take the size of the catalog material for the department you choose into account. Linguistics and Sociology would be a bit too small. English would be too big. Spanish or Theatre are just about right.
If you have questions about the instructions for this part of this lab, you are again encouraged to ask them through the discussion area for this lab in the course discussion forum.