Week 2 Lab 1: Simple Hypertext Links

Step 1: Setup

1.1 Boot a computer and log in. If you're on a Macintosh, launch BBEdit and Netscape Navigator; on Windows machines, launch WordPad and Netscape.

1.2 Tile the windows as you learned to do last week: make the editor window longer than wide and the browser window wider than long, so there are overlap spaces to facilitate program switching.

1.3 In your text editor, save the current blank document as Scratch (no file extension necessary). If you're running Windows, save to the Desktop; on Macs, save to the Documents folder, which should be the default.

Step 2: Hunting and Gathering

2.1 Using the browser, locate six Web sites that you find interesting or noteworthy. You could use a search engine like www.google.com or you could check out www.metaspy.com, a service that lets you monitor other people's queries to a popular search engine(!).

2.2 For each interesting site you find, record in your Scratch file the complete URL along with a few words that name or describe this site. If you find copying long URLs tedious, use the copy-and-paste feature of your PC. Select over the contents of the browser's Location window, select Copy from the Edit menu, then switch to your editor and paste the copied text into your Scratch document.

2.3 Collect 6 interesting sites and their URLs.

Step 3: Building an Unordered List Page

3.1 If your editor is not the active program, make it so. Save the current Scratch file and open a new document by selecting New from the File menu.

3.2 Save the new blank document to Desktop or Documents as links1.htm. Set up the basic tags for a Web page: HTML container, HEAD container with TITLE container within it, and BODY container. (You may use any title you like for this document. Remember that BODY should have the attribute BGCOLOR="#FFFFFF".)

3.3 Within the BODY container of your page create an unordered list container (<UL></UL>) and set up three list items within it (using <LI>). Next to each list-item tag, enter the name or brief description of one of the Web sites you selected in Step 2. (We're only using half the URLs you gathered at this point; you'll use the other half for Step 4.)

3.4 Enclose each of the names or descriptions in an anchor container to make it an active link cue. For reference, the form of an anchor container for external links is:

<A HREF="http://[URL]">[cue material]</A>

Copy and paste the URLs from your Scratch file into the anchor tags.

Step 4: Building a Descriptive List Page

4.1 Switch back to your editor. Save the present page file as links2.htm. (We're about to build a second links page, but we'll use the first page as a shell in order to save steps.)

4.2 Select the entire unordered list container and delete it. In its place create a descriptive list container (<DL></DL>). Enter three <DT> tags, one for each of the remaining sites in your scratch list.

4.3 Enter a <DD> tag for each of your chosen sites. Next to these tags write a few words about the site.

4.4 Set up anchor containers around the site names (the material following the <DT> tags) so that each site name is a live link cue.

Step 5: Link the Listing Pages

5.1 Immediately following your descriptive list (i.e., after the </DL> tag), set up a paragraph container (<P></P>). Within this container set up an anchor tag and link cue establishing a link to the first list page, links1.htm. For reference, the form of the anchor container for a local link is:

<A HREF="pageName.htm">[cue material]</A>

5.2 In the editor, open the markup for links1.htm and add a link at the bottom of that page leading to links2.htm.

5.3 Return to the browser, load links1.htm, and test all the links you have built.