Assignment #3

Making Lists and Links

Unordered Lists

There are many occasions when you would like to display a list. The first type is an unordered list. The Computer Science electives Mr. Merlis offered in 2008 (yes, back in the dark ages) are displayed below: There are several things to notice in the source code. (View the source code!) First notice the formatting. Again this is the correct style for lists. Each entry is tabbed over. The white space that is before the list in the source code helps it to stand out. Each item in an unordered list is bulleted. If this list were ordered, the bullets would be replaced with numbers.

Ordered and Mixed Lists

An ordered list is numbered by default. It can have unordered (see below) or ordered sublists. It is possible to do outlines very nicely with lists.
  1. Programming for the Internet
  2. Computer Science Java 1
  3. Computer Science Java 2
  4. Computer Science C++ 1
  5. Computer Science C++ 2
  6. Advanced Placement Computer Science
If each course was described on a different page, the items in the list could be made into links. Look at the code to see how easy it is to do this. The "A" in the tag stands for anchor and the "href=" is its attribute for hypertext reference. Notice the different ways the files are linked. Some start with periods. Others start with a slash. Some start with "http"

Links are simpler when they are to other pages in the same folder. Like here: Assignment 2

Another way to use a link in a list is to move to another part of the same page. (Goes to the UNordered list section above.)

Notice that to create a link to another part of the same page, you need two things:
  1. The place you want 'to go' needs to be a TAG that is given an ID attribute.
  2. Your HREF must begin with a pound sign (#) and then have the name of the ID of the TAG to move to.


For the example above, the 'Unordered Lists' text is defined by this tag:

<h3 ID="unorlist">Unordered Lists</h3>

Notice the ID. I named it "unorlist" because it refers to the unordered list section.

You will then notice that the source code to link to it looks like this:

<a HREF="#unorlist">move to another part of the same page</a>

Notice the use of the pound sign (#) and then the ID of the tag from above.

Assignment 3