CPSCI 105: Explorations in Computer Science

Lab 4

February 1, 2007

Before doing anything on warp today, we're going to discuss:

• tags
• content
• elements
• attributes
• hyperlinks
• relative vs. absolute URLs

Hyperlinks

After we've discussed the above, open your favorite web browser to your homepage on warp. Then log in on warp, go to your public_html directory, and open the file index.html in emacs in a new window (i.e., end the command to bash with an ampersand (&)).

Edit your homepage so that the content of the list item in the unordered list is now a hyperlink that will take the reader to the class homepage. Open your edited homepage in a browser, proofread your work, and test the hyperlink. If you have any problems, ask for help.

Labwork

I'll do most of the following on the screen. Be sure to ask if you have any questions. If you're confident in what you're doing, you can go ahead and work at your own pace. Otherwise, follow along.

Relative and Absolute URLs

Now you're going to create some HTML files and subdirectories so you can practice setting anchors and using relative and absolute URLs.

1. First, create a skeleton HTML file to use as a template for all the other files we'll be creating today. So fire up emacs and create a file in your public_html directory named lab4.html. It should be a well-formed HTML document containing empty tags for title and h1 in appropriate places. Additionally, it should contain an empty three-item unordered list.

   The template should also contain an address section. Fill this in, however, with your name as author and today's date as the “last modified” date.

2. Now we need some subdirectories to work with. In your public_html directory, create two directories named sub1 and sub2. Set their permissions so that they can be accessed by the web server.
3. These directories need some contents. Copy your template into each of the subdirectories, giving it the name thursday.html in each directory. Assuming that your working directory is public_html, you can do this by issuing the command:
       cp lab4.html sub1/thursday.html
   and issuing a suitably modified command to put a file into sub2.
4. Now edit each of the files: enter the text
       This is subdirectory #
   as the contents of both the title and h1 tags (replacing the # with either 1 or 2, as appropriate).
5. Set the permissions so that both of these files are world-readable. Then open a web browser and look at these files over the web. Proofread them for both HTML (is everything there?) and their content (i.e., does each file correctly indicate the subdirectory in which it's located?). Make any necessary corrections. Feel free to raise your hand if you need help.
6. Now, let's write some anchors.

   Edit the list of hyperlinks on your homepage, adding another list item to the list that's already there. This list item will contain an anchor tag. The content of the anchor should read
       Look at subdirectory 1
   and the href attribute of the anchor should be a relative reference to the file thursday.html in sub1.

   Do the same thing for subdirectory 2, again using a relative reference to the file thursday.html in sub2.

   Now, edit the file thursday.html in your sub1 directory. Add an anchor tag to the first list item. The content of the anchor should read
       Go to my homepage
   and the href attribute of the anchor should be an absolute reference to your homepage.

   Finally, edit the file thursday.html in your sub2 directory. Add an anchor tag to the first list item. The content of the anchor should read
       Go to my homepage
   and the href attribute of the anchor should be a relative reference to your homepage.

7. Open your homepage in a web browser. (If you have a browser already open to your homepage, refresh the browser window so that the most recent version of the file is displayed.) Proofread the page to make sure your HTML is ok. Then take the link to subdirectory 1 and proofread that page. Take the link back to your homepage to make sure it works. Do the same for subdirectory 2.

Homework 3

This assignment is due at the beginning of class on Tuesday, February 6.

If you are having trouble, computer science TAs are available in Burke 005 on Thursday, Sunday, and Monday evenings. (Check the CAVE schedule.)

You should read chapter 3 in Duckett in connection with this assignment. Read it first if you're not really clear on what we did in lab; if you've been following along just fine, read it as a summary and wrap-up of the topic after you do the homework. (As part of your reading, in your notebook answer exercises 2 and 3 at the end of the chapter.)

The Homework Assignment: Make sure you did everything correctly in this Lab assignment.

[ Return to the CPSCI 105-01 homepage ]