CPSCI 105: Explorations in Computer Science

Lab 5

February 6, 2007

Today's class will be a mixture of lecture and lab. We'll begin with some hands-on computer work, so log in on warp right away.

Here's what we'll be working on:

1. Your bash resource configuration file
2. Your emacs configuration file
3. Anchors
4. A destination anchor
5. Homework 4

Your bash resource configuration file

I've noticed that not everyone's .bashrc file is correct. The easiest way to fix this is to do the following, which I'd like you to do right now:

1. Make sure that you're in your home directory (not your public_html directory). Open your .bashrc file in emacs.
2. Right-click on the the following hyperlink and open it in a new browser window (that way you'll still be able to read these instructions): sample .bashrc file.
3. Go to your emacs and look at your .bashrc file. What I want you to do is to eliminate all the changes you made to the file during Lab 2 on January 25. It should be easy to do this because the changes should begin with a line reading:

   # modified on 1-25-07

   and end with a line reading:

   # end of 1-25-07 customization

   If you're not sure which lines need to be removed, be sure to ask me before you delete anything.

4. Go to the browser window containing the sample .bashrc file. Copy all the contents of the file and then go back to your emacs window and paste them at the end of your .bashrc file. Then modify the bash comments so that ‘Your Name’ is replaced by your actual name, and both occurrences of ‘Today's Date’ are replaced by today's date (6 February 2007).
5. Save the file and exit emacs.
6. The changes you made won't affect your current bash shell. So open a new shell by typing the following command at the bash prompt:

   xterm

   Do the rest of your work in today's lab from this new shell instance.

Your emacs configuration file

Just as we did with bash, we can modify the way emacs works by putting commands into a special file that emacs always reads from your home directory each time you start emacs. These commands are written in a special programming language called “emacs-Lisp”. As you'll see, this language is a bit cumbersome, so I'm not going to ask you to type it in.

1. Make sure that you're still in your home directory (again, not your public_html directory!). Open your .emacs file in emacs.
2. Right-click on the the following hyperlink and open it in a new browser window (that way you'll still be able to read these instructions): sample .emacs file.
3. Copy all the contents of the sample file and then go back to your emacs window and paste them at the end of your .emacs file.
4. Next, search the file for the string ‘!!your-name!!’ (without the quotes). The first occurrence will be inside an emacs-Lisp comment; you can delete that entire line. Replace the next occurrence (in an emacs-Lisp function) with your actual name.
5. Save the file and exit emacs.
6. Now we'll test to see if you modified your .emacs file correctly. Make your public_html directory the working directory. Open your homepage (you should know what its filename is) in emacs. Go to the address element, which should already contain your name. Delete anything else other than your name. Type in the following HTML after your name:

   <br>

   Position the cursor after what you just typed into the buffer and issue the emacs command Ctrl-space. Then issue the command Ctrl-c followed by t. Some HTML comments will magically appear in the buffer. Save the file. When emacs asks you if you want to update your timestamp, answer in the affirmative by typing y.

7. Go to the browser window containing the sample .emacs file and open up your warp homepage.
8. Go back to the emacs window where you're editing your homepage. After the current level-1 heading but before the list, add a new level-2 heading with the content About Me. After this heading, type a brief paragraph (2-3 sentences) saying something about you. (I don't care what you write as long as it's neither obscene nor libelous). Use appropriate HTML to mark up your paragraph.
9. After the new level-2 heading but before the list, add a new level-2 heading with the content Links. After this new heading but before the list, add a one-sentence paragraph stating “Here are some excellent hyperlinks.” Use appropriate HTML to mark up this paragraph.
10. Save your file. Refresh the browser window containing your homepage and make sure all the modifications you made appear correctly (i.e., headings should look like headings, paragraphs should look like normal text, etc.).

Anchors

We'll now discuss some more interesting aspects of hyperlinks. Here's what we'll be talking about (some of this will be review):

• 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

Don't start working on the next part of the lab until I ask you to.

A destination anchor

Work at your own speed to do the following tasks. Feel free to ask a question if you run into any problems. You may leave when you're sure everything is correct (or, you can start the homework, below).

1. First, we'll set a destination anchor in the paragraph occurring before the list. (This is the paragraph that reads, “Here are some excellent hyperlinks.”) Use “links” as the value of the id attribute of this anchor. Put the anchor element immediately after the opening paragraph tag, and don't give it any content. So this paragraph should now look like this:
   
       <p>
       <a id="links"></a>Here are some excellent hyperlinks.
       </p>
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 resize the browser window by making it more narrow and less tall so that when the top of the page is visible in the browser, you can't see the list of hyperlinks any more. Then click on the “go to” hyperlink and see what it does.
4. Look over your notes to review the difference between a source anchor and a destination anchor, and make sure you understand the differences in the anchor elements in the two paragraphs we've modified in this part of the lab (i.e., (1) and (2), above). In particular, you should memorize the attribute names and understand which one requires a pound sign (#) and which one doesn't.

Homework 4

This homework assignment is due at the beginning of class on Thursday, February 8.

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 lab4.html template to create a file named homework4.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 homework4.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. an absolute reference to the list of hyperlinks on your homepage
     3. a relative reference to thursday.html in the parent directory
     4. a relative reference to thursday.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 all of the other pages in your website (there are only four of them) to contain a hyperlink containing a relative reference to homework4.html. The contents of these anchor tags should read
       Look at the subdirectory of subdirectory 2
   Test all these hyperlinks.

[ Return to the CPSCI 105-01 homepage ]