The address for this web page is: http://fishcaro.crosswinds.net/day_8_lists.htm
On to the next lesson! Back to the COURSE SYLLABUS

8. LISTS

Today's lessons has TWO index cards (four sides).

INDEX CARDS #8:

INTRODUCTION TO LISTS (8a)

What types of lists are available in HTML? There are three types of lists:

UNORDERED (bulleted) LISTS
ORDERED (numbered) LISTS
DEFINITION LISTS

What is an UNORDERED (bulleted) LIST? An unordered list is used for a collection of related items, where the order that the items are listed is unimportant. The required structure is illustrated below: "UL" stands for "Unordered List" and "LI" stands for "List Item" (or "LIst"). Typically, list items are displayed indented, with a bullet preceding each item. (See the example in the previous question.)

<UL> 
   <LI> Each individual item gets its own "LI" tag.</LI>
   <LI> Don't omit the closing tag!</LI>
</UL>

CHANGING THE BULLET SHAPE (8b)

Can I change the bullet shape? If you don't specify the bullet shape, then it's determined by the browser. The "disc" is the usual default: that is, if you don't specify a different shape, then you'll get the disc. You can also get a "square" or a "circle":

the disc
the square
the circle

Use the TYPE attribute within the <UL> tag to change the shape for ALL the list items: <UL TYPE=square> Or, use the TYPE attribute within a <LI> tag to change the shape for a particular list item: <LI TYPE=circle> The value for the attribute (disc, square, circle) MUST be all lowercase.

ORDERED LISTS (8c)

What is an ORDERED (numbered) LIST? An ordered list is used when the order that the items are listed is important. The structure is the same as for unordered lists, except that you use "OL" (for "Ordered List") instead of "UL."
Can I change the "numbering" scheme? Use the TYPE attribute to change the "numbering" scheme: <OL TYPE=?> (I've used an ordered list below.)

TYPE=1 (numbers) is the default
TYPE=A gives uppercase letters
TYPE=a gives lowercase letters
TYPE=I gives uppercase roman letters
TYPE=i gives lowercase roman letters

Can I change the starting "number" in the list?



<OL START=23> 

     <LI> Sure!  Use the START attribute inside the "OL" tag.</LI>

     <LI> Here, the first item would be 23.</LI>

</OL>

DEFINITION LISTS (8d)

What is a DEFINITION LIST? A definition list consists of term/definition pairs, as in a glossary. The structure is shown below. Here, "DL" is for "Definition List"; "DT" is for "Definition Term"; "DD" is (maybe?) for "Definition Definition."



<DL>

    <DT> Term #1</DT>

    <DD> Definition for Term #1</DD>

    <DT> Term #2</DT>

    <DD> Definition for Term #2</DD>

</DL>

 The output would look like this:

   Term #1
  
 Definition for Term #1
  
 Term #2
  
 Definition for Term #2

Use   <DL COMPACT>   to make it more
compact.

Printable version of Index Card 8a

Printable version of Index Card 8b

Printable version of Index Card 8c

Printable version of Index Card 8d

WORKSHEET #8:

(W8.1) Continue with the tutorial located at: http://www.cwru.edu/help/introHTML/toc.html (link is no longer valid) Please read Chapter 4 (LISTS) and take the quiz at the end of Chapter 4. There is an interactive part to the quiz; make sure you don't miss it!

ASSIGNMENT #8:

(A8.1) Read pages 118–122 (up to "Layout Techniques with HTML") in the Weasel Book.
(A8.2) Create a file called test_list.htm that looks like this:
```
<UL> 
   <LI> Item #1</LI>
   <LI> Item #2</LI>
   <LI> Item #3</LI>
</UL>  
```
View the results. Then, do the following:
- (A8.3) Change all the bullets to squares.
- (A8.4) Change all the bullets to circles.
- (A8.5) Make Item #1 a disc; Item #2 a square; Item #3 a circle.
- (A8.6) Make the list an ordered list.
- (A8.7) Start the numbering at 100 rather than 1.
- (A8.8) Use lowercase roman numerals instead of numbers; begin with 1.
- (A8.9) Start the roman numerals at 5 instead of 1.

(A8.10) Change your test_list.htm file to look like this:

<DL> 
   <DT> ASCII files</DT>
   <DD> Files that are comprised of alphanumeric characters.
        Some FTP programs refer to ASCII files as "text" files.</DD>
   <DT> FTP</DT>
   <DD> File Transfer Protocol; a protocol for moving files over the
        Internet from one computer to another.  FTP is a client/server
        system: one machine must be running an FTP server, the other an
        FTP client.</DD>
</DL>

Then, do the following:

(A8.11) View it using both INTERNET EXPLORER and NETSCAPE NAVIGATOR.
(A8.12) Make it more compact, by using: <DL COMPACT>
View it again using both INTERNET EXPLORER and NETSCAPE NAVIGATOR. What happens? (Look carefully!)

(A8.13) Create an appropriate list on your homepage. Insert a comment to yourself before the list that reminds you how the list construction works. (For example, you might need to remind yourself what "UL" and "DT" stand for.) Your homepage will end up being a wonderful example of all the HTML stuff that you're learning; load it with comments so that it will be more useful to you months from now!