Numbered Lists

Numbered lists are surrounded by the

…

The

Try the following example:

This is an ordered list of steps for a nachos recipe with each list item a step in the set of procedures:

Ms. Wiley’s Awesome Nachos

1. Warm up Refried beans with chili powder and cumin.

2. Glop refried beans on tortilla chips.

3. Grate equal parts Jack and Cheddar cheese, spread on chips.

4. Chop one small onion finely, spread on chips.

5. Heat under broiler 2 minutes.

6. Add guacamole, sour cream, fresh chopped tomatoes, and cilantro.

7. Drizzle with hot green salsa.

8. Broil another  1 minute.

9. Nosh.

____________________________________________________________________________________________________________________________________________________________________________________________

Attributes are extra parts of HTML tags that contain options or other information about the tag itself. You can customize ordered lists in two main ways: by how they are numbered and what number the list starts at. The TYPE attribute can take one of five values to define what type of numbering to use on the list:

˙       ˙       “1”: Specifies that standard Arabic numerals should be used to number the list (i.e., 1, 2, 3, 4, 5, and so on)

˙       ˙       “a”: Specifies that lowercase letters should be used to number the list (i.e., a, b, c, d, e, and so on)

˙       ˙       “A”: Specifies that uppercase letters should be used to number the list (i.e., A, B, C, D, E, and so on)

˙       ˙       “i”:  Specifies that lowercase Roman numerals should be used to number the list (i.e., i, ii, iii, iv, v, and so on)

˙       ˙       “I”: Specifies that uppercase Roman numerals should be used to number the list (i.e., I, II, III, IV, V, and so on)

Try the following example:

Cheesecake ingredients:

1. Quark Cheese

2. Honey

3. Cocoa

4. Vanilla Extract

5. Flour

6. Eggs

7. Walnuts

8. Margerine

Using another attribute, START, you can specify what number or letter to start your list. The default starting point is 1, of course. Using START, you can change this number. For example,

would start the list at number 4, whereas
would start the numbering with c and move through the alphabet from there. Using the example above, you can start it numbering with the Roman numeral V as follows:

 

Cheesecake ingredients:

  START=5>
1. Quark Cheese

2. Honey

3. Cocoa

4. Vanilla Extract

5. Flour

6. Eggs

7. Walnuts

8. Margerine

Unordered Lists

In unordered lists, the elements can appear in any order. An unordered list looks just like an ordered list in HTML except that the list is indicated using

…
tags instead of OL. The elements of the list are separated by
3. , just as with ordered lists. Try this example:

   Lists in HTML

   • Ordered Lists

   • Unordered Lists

   • Menus

   • Directories

   • Glossary Lists

    

   In unordered lists, the items are bulleted or marked with some other symbol. They can also be customized. If you use the TYPE attribute in the

   tag can take three possible values:

   ˙       ˙       “disc”: A disc or bullet; this style is generally the default.

   ˙       ˙       “square”: Obviously produces a square instead of a disc.

   ˙       ˙       “circle”: As compared with the disc, this value should generate an unfilled circle on certain browsers.

    

   Try the following example:

   • DAT  -  Digital Audio Tapes

   • CD  -  Compact Discs

   • Cassettes

   • DAT  -  Digital Audio Tapes

   • CD  -  Compact Discs

   • Cassettes

   • DAT  -  Digital Audio Tapes

   • CD  -  Compact Discs

   • Cassettes

    

   Just as you can change the numbering pattern is the middle of an ordered list, you can change the type of bullet mid-stream in a list by using the TYPE attribute is the

   • tag.

     ___________________________________________________________________________________________________________________________________________________________________________________________________________________

     Glossary Lists

     Glossary list are slightly different from other lists. Each list item in the glossary list has two parts:

     ˙       ˙       A term

     ˙       ˙       The term’s definition

     Each part of the glossary list has its own tag:

     for the term (“definition term”), and
     for its definition (“definition definition”). 
     and
     are both one-sided tags, and they usually occur in pairs, although most browsers can handle single terms or definitions.  The entire glossary list is indicated by the tags

     . . .

     (“definition list”).

     Following is a glossary list example with a set of herbs and descriptions of how they grow:

     Basil

     Annual. Can grow four feet high; the scent of its tiny white flowers is heavenly

     Oregano

     Perennial. Sends out underground runners and is difficult to get rid of once established.

     Coriander

     Annual. Also called cilantro, coriander likes cooler weather of spring and fall.

      

     Glossary lists are usually formatted in browsers with the terms and definitions on separate lines, and the left margins of the definitions are indented.

      

     You don’t have to use the glossary lists for terms and definitions of course. You can use them anywhere that the same sort of list is needed. Here’s an example to try:

      

     Macbeth

     I’ll go no more. I am afraid to think of what I have done; look on’t again I dare not.

     Lady Macbeth

     Infirm of purpose! Give me the daggers. The sleeping and the dead are as but pictures. ‘Tis the eye if childhood that fears a painted devil. If he do bleed, I’ll guild the faces if the grooms withal, for it must seem their guilt. (Exit. Knocking within)

     Macbeth

     Whence is that knocking? How is’t wit me when every noise appalls me? What hands are here? Ha! They pluck out mine eyes! Will all Neptune’s ocean wash this blood clean from my hand? No. This my hand will rather the multitudinous seas incarnadine, making the green one red. (Enter Lady Macbeth)

     Lady Macbeth

     My hands are of your color, but I shame to wear a heart so white.

     Nesting Lists

     What happens if you put a list inside another list? Nesting lists is fine as far as HTML is concerned; just put the entire list structure inside another list as one of its elements. The nested list just becomes another element of the first list, and it is indented from the rest of the list. Lists like this work especially well for menu-like items, such as in table of contents or as outlines. Indenting nested lists in HTML code itself helps show their relationship to the final layout:

     Try this example:

     HTML ELEMENTS

         

         

     • WWW

           

     • Organization

           

     • Beginning HTML

           

                  

       • What HTML is

                    

       • How to Write HTML

                    

       • Doc structure

                    

       • Headings

                    

       • Paragraphs

                    

       • Comments

             

     • Links

     • More HTML

      

     The following exercise shows you how to create an HTML file that uses the tags that you’ve learned about in this lesson. It will give you a feel for what the tags look like when they’re displayed onscreen and for the sorts of typical mistakes you’re going to make. Following is an example that includes structure tage, a title, a couple of headings, and a paragraph or two. Let’s try it:

      

     Camembert Incorporated

     ”Many’s the long night I dreamed of cheese - - toasted, mostly.” - - Robert Louis Stevenson

     What We Do

     We make cheese. Lots of cheese; more than eight tons of cheese a year.

     Why We Do It

     We are paid an awful lot of money by people who like cheese. So we make more.

     Our Favorite Cheese

     • Brie

     • Havarti

     • Camembert

     • Mozzarella