Computer Science Illuminated, Third Edition: Goin

Computer Science Illuminated, Third Edition

Lab #7

Lists

7.1 Ordered Lists

Like with any document, you may find a reason to create an ordered list of items as part of your web page. Fortunately, you can do this in HTML just as you can with a conventional word processing program. Ordered lists consist of a group of one or more indented items, preceded by some type of label. For example, you can create lists and use each of the following as the label item for your list (note that the following is itself an HTML ordered list):

Arabic numerals (such as 1, 2, 3...)
Uppercase letters (such as A, B, C...)
Lowercase letters (such as a, b, c...)
Uppercase Roman numerals (such as I, II, III...)
Lowercase Roman numerals (such as i, ii, iii...)

The syntax for ordered lists is a follows:

<ol start="value" type="1|a|A|I|i">
 <li>first item</li>
 <li>second item</li>
 ... repeat list item tags (<li>) as needed...
</ol>

The optional start attribute is used to define the starting label value for the list. It accepts an integer (whole number) as its value regardless of the type of list labels that are being created. If no starting value is specified, the list labels begin at 1 in whichever format is indicated by the type attribute.

The optional type attribute allows you to define a list's label types. The possible values are the number 1 (one), or the letters 'a' (lowercase a), 'A' (uppercase a), 'i' (lowercase i), or 'I' (uppercase i). The default value is 1, producing a numbered list.

Within the starting and ending tags of the list, you can place one or more list item tags (<li>) which are used to indicate each of the items in the list. The starting and ending list item tags surround each list item, which can be any other HTML text, including links, formatting and other lists (see Section 7.4 for a discussion of nested lists).

We will add lists to our web pages by editing the main page for our store and creating two different types of ordered lists. The first will use uppercase letters, and the second will use with lowercase Roman numerals. The HTML below shows our edited version of the page, and a Figure 1 follows the source code with a screen capture of the results.

<html>
<head>
<title>Pete's Pet Store</title>
</head>
<body>
<center><img src="storeLogo.gif"></center>
<hr width="75%">
Welcome to Pete's Pet Store! Located in the heart of the old city, we specialize in unique and unusual products for your cherished friend. Pete's Pets started in 1975 with just products for cats, however in 1990 we expanded our location and opened up our canine department.

We feature on-site grooming for your pet, and also obedience and training classes for both cats and dogs.

We're currently working to expand our on-line presence with this store, so please bear with us. Below, you can find a link to our current offerings via the Internet. We ship anywhere in the continental United States, Europe and Canada!

<hr width="75%">
<center>Our products</center>
<ol type="A">
<li><a tabindex="5" href="catLounger.html">Cat Window Lounger</a> - A rest area for your feline which mounts on the sill of a window.</li>

<li><a tabindex="4" href="catnipToy.html">Deluxe Catnip Toy</a> - Our own special blend of catnip grown on the roof of our store in a delightful soft playtoy!</li>

<li><a tabindex="3" href="litterScoop.html">Cat Litter Scooper</a> - Our most popular item! No home should be without one!</li>
</ol>

<hr width="75%">
<center>Our Favorite Links</center>
<ol type="i">
<li><a tabindex="2" href="http://www.petswelcome.com">PetsWelcome.com</a> - A pet/travel resource to help you find pet friendly accommodations.</li>

<li><a tabindex="1" target="_blank" href="http://www.petdental.com">PetDental.com</a> - Information about caring for your pet's teeth and gums.</li>
</ol>
<hr>
Pete's Pet Store
© 2002
</body>
</html>

Figure 1: Applying two ordered lists to the front page of our site.

Lab Activity #1:

Add three ordered lists to your web pages. Be sure that each has a different label type and that at least one of the lists starts its numbering with the value of 5.

Note: The HTML 4.0 standard has deprecated the start and type attributes in favor of placing formatting information in Cascading Style Sheets. However, as most browsers continue to support the use of this attribute, we will continue to use it until we cover CSS in Lab 11.

7.2 Unordered Lists

HTML provides us with the capability of creating unordered lists in addition to the ordered lists we created in Section 7.1. The syntax of an unordered list is quite simple, and very similar to ordered lists:

<ul type="disc|circle|square">
 <li>first item</li>
 <li>second item</li>
 ... repeat list item tags (<li>) as needed...
</ul>

Unordered lists will produce list items with a graphical figure or shape as their labels. Providing a disc value for the type attribute should result in the rendering of a small filled circle as the label (this is the suggested rendering, some browsers may substitute this symbol with another). Using a circle value should result in the outline of a small circle (unfilled), and the use of the square value should produce the outline of a small square (unfilled).

In the example below, we have changed the type of list of Our Favorite Links from ordered to unordered, and applied a circle type to the list. The resulting changes are reflected in Figure 3.

<ul type="circle">
<li><a tabindex="2" href="http://www.petswelcome.com">PetsWelcome.com</a> - A pet/travel resource to help you find pet friendly accommodations.</li>

<li><a tabindex="1" target="_blank" href="http://www.petdental.com">PetDental.com</a> - Information about caring for your pet's teeth and gums.</li>
</ul>

Figure 2: Changing an ordered list to an unordered list with circle labels.

Lab Activity #2:

Modify one of the lists you inserted into your web pages to be an ordered list. Try experimenting with the various label types.

Does your browser render the labels as expected?

Note: The HTML 4.0 standard has deprecated the type attribute in favor of placing formatting information in Cascading Style Sheets. However, as most browsers continue to support the use of this attribute, we will continue to use it until we cover CSS.

7.3 Definition Lists

Another type of HTML list is a definition list, which is used to list a series of terms (words or phrases) and their corresponding definitions. Most browsers will render the terms of a different list on the left margin, with their corresponding definitions indented on the following line and somewhat indented. For example, the following is a definition list of commonly used HTML terms:

tag: A sequence of control commands used to inform to the web browser displaying the HTML page as to how the contents of the tag should be displayed.

attribute: A variable within an HTML tag which is used to specify additional formatting information related to the display of the tag in which it resides.

HTML file: An electronic document containing both content and display information. HTML files provide web browsers with instructions on how their content is to be displayed when the document is viewed.

The syntax of a definition list is as follows:

<dl>
 <dt>term</dt>
 <dd>definition</dd>

 ...repeat <dt> and <dd> tags as needed...
</dl>

Here, the <dl> and </dl> tags define the boundaries of the definition list, the <dt> and </dt> tags define a definition term, and the <dd></dd> tags define a term's definition. Term and definition tags do not necessarily need to be directly paired with each other. In fact, you can list several terms and then have one or more corresponding definitions for those terms. For example, the following HTML

<dl>
 <dt>alpha</dt>
 <dt>beta</dt>
 <dt>gamma</dt>
 <dd>My favorite greek letters</dd>

 <dt>phi</dt>
 <dt>zeta</dt>
 <dd>My least favorite greek letters</dd>
</dl>

produces this result:

alpha
beta
gamma: My favorite greek letters
phi
zeta: My least favorite greek letters

In our e-store example, we will use an HTML definition list to redesign how the listing of our products on the main page of our web site is displayed. Each product will become a term (by using the <dt> tags) and each description will become a definition (by using the <dd> tags). In doing so we shall modify the list and it will no longer be ordered.

The source code of our changes is provided below, and Figure 3 displays the new appearance of our products list.

<center>Our products</center>
<dl>
<dt><a tabindex="5" href="catLounger.html">Cat Window Lounger</a></dt>
<dd>A rest area for your feline which mounts on the sill of a window.</dd>

<dt><a tabindex="4" href="catnipToy.html">Deluxe Catnip Toy</a></dt>
<dd>Our own special blend of catnip grown on the roof of our store in a delightful soft playtoy!</dd>

<dt><a tabindex="3" href="litterScoop.html">Cat Litter Scooper</a></dt>
<dd>Our most popular item! No home should be without one!</dd>
</dl>

Figure 3: Creating a definition list.

Lab Activity #3:

Add a definition list to your web pages. Include no less than 7 terms and 5 definitions to the list that you create.

7.4 Nested Lists

Our final topic on HTML lists is the notion of nesting lists within each other. We can achieve nesting because each list is a entity unto itself. That is, a single HTML list has a distinct starting and ending point. With this being the case, we can embed (nest) one list as part of another by making the inner list a list item of the outer list.

For example, given the two lists shown below,

<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>

<ul>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ol>

we can take the list on the left and embed it as part of the list on the right by making it an item in the list on the right. Thus, we can do the following:

<ul>
<li>Alpha</li>
<li>Beta</li>
<li>Sublist
 <ol>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 </ol>
</li>
<li>Gamma</li>
</ol>

producing the following results:

Alpha
Beta
Sublist
1. One
2. Two
3. Three
Gamma

Notice that we embedded the entire list containing the values One, Two, and Three into the Alpha, Beta, Gamma list by adding an additional list item tag and providing the entry with a value (Sublist). There are many combinations you can produce by nesting lists of the same type or of different types (as we did above).

Lab Activity #4:

Create a new list on your web site which utilizes a nested list that details each of the classes you are taking.

For each class listed (the outer list), provide the list of deliverables (inner list) for the class (mid-term test, final exam, homeworks, etc.) If possible, try adding a third nested list!

About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN: 0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis.