Fundamentals of Computer Science 1 (CS151 2003S)

Laboratory: Writing Hypertexts for the World Wide Web

Goal: In this laboratory, you will learn HTML, the Hypertext Markup Language used for the World Wide Web. HTML is a language for describing the components of a Web pages and the links between those pages. HTML can be read by humans (more or less) and computers. To learn HTML, you will develop a few Web pages and make links between those pages.

Note: You will not be turning anything in for this lab; the goal is the experience, rather than the notes on the experience. Hence, when I ask you to think about a question or to note something, you may do so in your notebook or by discussing it with a neighbor.

Getting Started

There are a number of ways that people create Web pages and put them on the World Wide Web. Some people write raw HTML, doing all the markup by hand. Others use visual editors that let them compose documents as they would in Microsoft Word or other word processor. Visual editors handle the HTML behind the scenes as it were. In this class, you will write HTML directly because I consider it important for you to understand what's really happening in a Web page. Don't worry: it's not too hard.

While the work you do today will take advantage of particular features of the MathLAN system, you will find that you can prepare Web pages in your favorite word processor or text editor (e.g., SimpleText on Macintosh, Notepad on Windows).

Your First Page

You'll begin by writing a short (one paragraph) autobiography. Make a copy of the accompanying template, which is available online at URL You should save the template as bio.html in your home directory (the default folder).

Once you've saved the file, try loading it in Mozilla. You can do this by the following insanely complicated sequence:

You are now ready to edit the page. Start gedit (click on the footprint in the panel, select Programs, select Applications, and then select gedit. You can also open a terminal window and type gedit.

Select Open from the File menu and select the bio.html file. gedit should then open the file.

Don't worry if you need help with these steps. It took me a little while to get them right, and our computers are not all configured correctly.

You may notice a lot of stuff surrounded by angle brackets, such as <body>. Ignore that stuff for now.

You are now ready to consider two related parts of an HTML document.

You may note that the first occurrence of XXX was surrounded by <title> and </title> while the second was surrounded by <h1> and </h1>. The title is the title of the document, and typically appears in the title bar of the window and in bookmark and history lists. The h1 is a level one heading, which typically appears wherever you put it on the page, but larger and bold. As you may have noted, the two need not be the same. Your document can have only one title, but as many level-one headings as you'd like.

Now you're ready to fill in the rest of your one-page biography. Enter the day, month, and year that you were born, as well as the city, state and country. Then write one paragraph about yourself in the designated area. Yes, the paragraph can be short.

Putting the Page on the Web

You may have noted that the URL (uniform resource locator) you've been using for your page is a little bit different than the URLs you've seen for other pages. In particular, the URL for your page begins with file, while the typical URL begins with http. That's because you've been accessing a local page. It's now time to put the page on the Web.

You should quit gedit before installing the page.

Most Web servers require that you put your Web pages in particular folders. In the MathLAN, the folder for your Web pages is called public_html. (Yes, you need to use that capitalization and the underscore.)

When you create Web pages in the future, you should only need to put them in your HTML directory and share them.

You are now ready to load your biography from the Web. In Mozilla, select Open Page... from the File menu and type in

You should substitute your account (e.g., rebelsky) for youraccount. You need to include the tilde. If you can't view the page, let me know. Verify that your colleagues (those on the computers around you) can also open your page.

More About HTML

As the first experiments may have suggested, HTML files consist of a text surrounded by a lot of tags: things in angle brackets. You typically precede text by a start tag and follow text by a corresponding end tag (end tags have a slash after the less-than sign). Look at the rest of the file, and list the tags that you see. What do you think each tag does?

Write down an answer to this question in your notes.

Look at a few other Web pages (for example, you might look around the course web). Are there other things that you see on pages? List as many things as you can.

Write down an answer to this question in your notes.

Horizontal Rules

One convenient thing that many people add to Web pages is the so-called horizontal rule, which is given by the <hr> tag. A rule is used to separate portions of the page. Before the section that says By Your Name Here, add an <hr> tag and reload the page.

Next, change the tag to read

<hr width="50%">

Reload the page and see what effect this change has.

You've just added a parameter to the tag. Parameters allow you to customize further certain aspects of your page. We'll leave other aspects for later.


It is likely that you'll be using HTML to write some (but not all) of your papers. Hence, you'll also need to deal with some of the particulars that are expected in academic papers. For example, you will eventually need to include block quotations: quotations that are indented and set off from the surrounding text. In HTML, you use the blockquote tag for block quotations (and yes, you do need an ending tag).

Write HTML to add something like the following to your biography,

I've just started taking computer science. I'm a little bit worried that my instructor, Sam Rebelsky, is somewhat insane. He's told me that

I'm very glad to have XXX in this class. Because of his/her ability to give instructions for making peanut butter and jelly sandwiches, I'm sure that she/he will figure out how to develop elegant solutions in Scheme.

I am, of course, very glad to have all of you in this class, so your aren't claiming much that isn't true (I'm not sure what you think about my sanity).

If you have difficulty coming up with the correct HTML, please let me know.

Blank Space

One of the most frustrating aspects of working with HTML is that it never seems to line things up quite the way that you want them. In discussion today, you'll learn why. One thing that you should note is that HTML effectively ignores multiple blank spaces. That is, two blank spaces (or blank lines) is the same to HTML and Netscape as one or one hundred.

Try adding and deleting space from your page. For example, replace

<h1>Biography of XXX</h1>


<h1>Biography     of


Do the changes have any effect?

Write an answer in your notes.


You may have noticed a table of courses that uses <table>, <tr>, <th>, and <td> tags.

What do you think will happen if you remove the table tag? Try it and see. Then put it back.

What do you think will happen if you remove a td tag? Try it and see. Then put it back.

Try removing a few other tags in the section and determine the effect.

When you're done, add your classes.

You may want to record your observations in your notes.

Making Links

As you may have noted, we've missed a key aspect of hypertext: links. In HTML, each document contains its own links. (In class, we'll talk about other ways of thinking about links.) You create links with the link anchor tag, which is written

<a href="...">text for the link</a>

There are three kinds of links in HTML

We'll play with general and relative links as we create a new home page for you. We'll leave internal links to another day (or to your own explorations).

General Links

Relative Links

You've just created a general link. Now let us turn to relative links. Suppose you wanted to let people who have loaded your home page also view your biography. You'd like to create a link to bio.html. But there's a good chance that when you move your home page (yes, that's right, most people end up moving their home page at some point), you'd also move bio.html. Hence, rather than giving a full URL that you'd have to change, you'd rather write just use the bio.html file that's associated with this page. You can do this by giving just the name of the file (without the whole http stuff). For example,

<p>Feel free to read <a href="bio.html">my biography</a>.</p>

Create a link to your biography and verify that it works.

Checking Your HTML

Unlike natural language, which is fairly mutable, HTML has a quite formal syntax. Unfortunately, not all Web authors adhere to the formal requirements. (I'll admit that I sometimes screw up, too.) Fortunately, most browsers are fairly nice about dealing with common errors.

I'd like you to try hard to write correct HTML. You can always check whether a page uses correct HTML by entering its URL at Please check whether the two pages you've just created are valid.


As you know, there is more to a typical HTML page than just text. Most pages (although not my pages) contain some images. How do you add images to your pages? With the legendary IMG tag. Typically, an IMG tag has the following form:

<img src="..."

The src is like a link: it gives a URL or a relative file name for an image file. If you wanted to use the basic Grinnell College logo, you might write

<img src=""
     alt="Grinnell College">


You're done. Quit all open applications and then log out from the computer.



Wednesday, 25 August 1999 [Samuel A. Rebelsky]

Saturday, 28 August 1999 [Samuel A. Rebelsky]

Monday, 30 August 1999 [Samuel A. Rebelsky]

Monday, 28 August 2000 [Samuel A. Rebelsky]

Wednesday, 24 January 2001 [Samuel A. Rebelsky]

Monday, 2 September 2002 [Samuel A. Rebelsky]

Tuesday, 3 September 2002 [Samuel A. Rebelsky]

Wednesday, 22 January 2003 [Samuel A. Rebelsky]


Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Tue May 6 09:28:48 2003.
The source to the document was last modified on Wed Jan 22 11:51:04 2003.
This document may be found at

You may wish to validate this document's HTML ; Valid CSS! ; Check with Bobby

Samuel A. Rebelsky,