An Algorithmic and Social Introduction to Computer Science (CSC-105 2000S)


Writing Hypertexts for the World-Wide Web

Goal: In this laboratory, you will learn more about HTML, the Hypertext Markup Langauge 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.

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. You should save the template as template.html in your home directory (the default folder). In Netscape, you can make a copy by

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

You are now ready to edit the page. Start dtpad (click on the computer in the control panel at the bottom of the screen; then type dtpad at the % prompt). In dtpad, select ``Open...'' from the ``File'' menu. Click on template.html and DTPAD should open the file.

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 occurence 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 page. Enter whatever you'd like.

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.

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.)

You are now ready to load your file from the Web. In Netscape, select ``Open Page...'' from the ``File'' menu and type in

http://www.math.grin.edu/~youraccount/template.html

If it doesn't work correctly, let me know. Verify that your colleagues 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?


 
 
 

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 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.

Quotations

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).

Add something like the following to your page.

One of my favorite thinkers, Dodgson, said

'Twas brillig and the slithy toves did gyre and gimble in the wabe. All mimsy were the borogoves and the mome wraths outgrabe. "Beware the Jabberwock my son, the jaws that bite the claws that catch. Beware the jubjub bird and shun the frumious bandersnatch."

I take many of my lessons in life from that great statement.

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>A Page for XXX</H1>

with

<H1>A
Page                       for



XXX
</H1>

Do the changes have any effect?

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 http://validator.w3.org. Please check whether the two pages you've just created are valid.

Images

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="..."
     ALT="...">

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 mating slugs with ``About Grinnell'' from the old Grinnell home page, you might write

<IMG SRC="http://www.grinnell.edu/www/images/buttons/about.gif"
     ALT="Oh boy! Slugs!">

You can see something similar in a sample document.

Done

You're done. Quit all open applications and then exit from the HP. If it looks like you're way ahead of everyone else, feel free to surf the Web for awhile, or just wander off for a few minutes.

History

Wednesday, 25 August 1999

Saturday, 28 August 1999

Monday, 30 August 1999

Wednesday, 26 January 2000


Disclaimer Often, these pages were created "on the fly" with little, if any, proofreading. Any or all of the information on the pages may be incorrect. Please contact me if you notice errors.

This page may be found at http://www.math.grin.edu/~rebelsky/Courses/CS105/2000S/Labs/html.html

Source text last modified Wed Jan 26 09:28:41 2000.

This page generated on Wed Jan 26 09:26:12 2000 by Siteweaver. Validate this page's HTML.

Contact our webmaster at rebelsky@grinnell.edu