Lab 3: Simple Hypertext Links

Step 1: Setup

1.1 Launch your Web browser and text editor and tile the windows as you learned to do in Lab 1: make the editor window longer than wide and the browser window wider than long, so there are overlap spaces to facilitate switching between programs.

1.2 In your text editor, save the current blank document as Scratch. You do not need to add an extension to this file name because it's just a temporary parking place for information, not a Web page. If at all possible, save your work to the Desktop.

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 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 the <LI></LI> container). Within each list-item container, 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 will use the first page as a shell in order to save steps. So we begin by saving the first page under a new name.

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

4.3 Enter a <DD></DD> container 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 <DT></DT> containers so that each site name acts as 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.

This concludes Lab 3.