CPSCI 107: Applications, Implications, and Issues

Lab 3

January 27, 2006

Anchors

At the end of class Wednesday, we used an anchor tag to set a hyperlink in your warp. Today, we'll look more closely at anchor tags, hyperlinks, and navagating through a website. Here's what we'll be discussing:

• anchor tags
  • the href attribute (creating a source anchor)
  • using the id attribute (creating a destination anchor)
  • using the title attribute
• relative vs. absolute URLs
• using relative URLs in anchor tags
• linking to documents, linking to specific parts of documents

Practice

Open your favorite web browser to your homepage on warp. Then log in to 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 (&)).

A destination anchor

1. First, we'll set a destination anchor in the paragraph occurring before the list. Use “links” as the value of the id attribute of this anchor.
2. Now we need a hyperlink to jump to this destination. Insert a new paragraph at the top of your file:
       <p>
       Go to <a href="#links">my list of hyperlinks</a>.
       </p>
3. If you refresh your homepage in your web browser, this link will work (try it), but it probably doesn't appear to do anything (your current homepage is so small that there's no room to jump). So let's add some stuff to jump over. Put down an opening and closing paragraph tag after your “go to” paragraph, and then open your browser comparison homework file in emacs and grab a paragraph from it (use ESC-w to copy text after you've marked it). Switch buffers to your homepage, move the cursor to in between your new opening and closing paragraph tags, and yank it. Then copy this new paragraph, tags and all, and yank it three times (so that you now have four copies of this paragraph in your document).
4. Refresh your homepage in the web browser. If necessary, resize the browser window so that when the top of the page is visible, you can't see the list of hyperlinks any more. Then click on the “go to” hyperlink and see what it does.

Relative and Absolute URLs

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

1. First, we'll 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 lab3.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. (We'll do this together and I'll point out how emacs can help you write good HTML.)

   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 friday.html in each directory. Assuming that your working directory is public_html, you can do this by issuing the command:
       cp lab3.html sub1/friday.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 friday.html in sub1.

   Now, edit the file friday.html in your sub1 directory. Add an anchor tag to the first list item. The content of the anchor should read
       Go to my favorite links
   and the href attribute of the anchor should be an absolute reference to the list of hyperlinks on 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.

Don't proceed any further until you're sure that these pages are correct and the hyperlinks on them work correctly.

Labwork

Work at your own speed to do the following tasks. You may leave when you're sure everything is correct (or, you can start the homework, below).

1. Edit the file friday.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.

   Add an anchor tag to the second list item. The content of the anchor should read
       Go to subdirectory 1
   and the href attribute of the anchor should be a relative reference to the file friday.html in your sub1 directory.

2. Edit the file friday.html in your sub1 directory. Add an anchor tag to the second list item. The content of the anchor should read
       Go to subdirectory 2
   and the href attribute of the anchor should be a relative reference to the file friday.html in your sub2 directory.
3. Edit your homepage. Add a new list item containing an anchor tag to the list of hyperlinks. The content of the anchor should read
       Look at subdirectory 2
   and the href attribute of the anchor should be a relative reference to the file friday.html in sub2.

Check your work by taking each link on each page, and making sure it takes you to the correct place.

Homework 2

This homework assignment is now due at the beginning of class on Wednesday, February 1.

If you are having trouble, Nadine Amsel will be available in the computer lab at the Ferry building from 7:00-10:00 p.m. on Sunday evening.

I want you to read chapter 3 in Duckett in connection with this assignment. Read it first if you're not really clear on what we did in class today; 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, answer exercises 2 and 3 at the end of the chapter.)

1. Create a directory named subsub2 in your sub2 directory. Set its permissions so that it can be accessed by the web server.
2. Use your lab3.html template to create a file named homework2.html in subsub2. Edit this file, entering the text
       This is a subdirectory of subdirectory 2
   as the contents of both the title and h1 tags. Before proceeding, type the URL of this file into a web browser and make sure that it's visible on the web; proofread its content and HTML.
3. Edit the list contained in homework2.html as follows:
   • turn it into an ordered list
   • include a hyperlink to each of the following, in this order:
     1. a relative reference to your homepage
     2. a relative reference to the list of hyperlinks on your homepage
     3. a relative reference to friday.html in the parent directory
     4. a relative reference to friday.html in the sub1 directory

     The contents of each anchor tag should be clearly descriptive of the link (use text similar to what you used in today's labwork).

   Test all your hyperlinks before proceeding.

4. Edit the list of links on each page of your website to contain a hyperlink to homework2.html. The contents of these anchor tags should read
       Look at the subdirectory of subdirectory 2
   and test all these hyperlinks.
5. When you've completed all the above tasks, send me your URL on warp by entering it into the message field of this contact form. Please make sure it's accurate—it's how I'm going to find your website to grade your homework. (The best way to do this is to open a browser to your warp homepage and then use the copy-and-paste feature of Windows—that way, you avoid any typographical errors.)

[ Return to the CPSCI 107 homepage ]