Difference between revisions of "User:Rewood/Making Nested Lists in HTML"

From WolfTech
Jump to navigation Jump to search
 
 
Line 1: Line 1:
On ocassion, you will be called upon to include an outline for a web page. An outline will consist of a series of ordered lists.On ocassion, you will be called upon to include an outline for a web page. An outline will consist of a series of ordered lists. To review ordered lists: Ordered Lists  
+
On ocassion, you will be called upon to include an outline for a web page. An outline will consist of a series of ordered lists.
 +
 
 +
To review ordered lists:  
 +
 
 +
Ordered Lists  
 +
 
 
Ordered lists (sometimes called numbered lists) work the same as unordered lists with two exceptions. Instead of a UL tag use an OL tag. And LI tags produce numbers instead of bullets. The tags used are:  
 
Ordered lists (sometimes called numbered lists) work the same as unordered lists with two exceptions. Instead of a UL tag use an OL tag. And LI tags produce numbers instead of bullets. The tags used are:  
- start the ordered list  
+
* start the ordered list  
- indicate a new list item, produces a bullet  
+
* indicate a new list item, produces a bullet  
- ends the ordered list Syntax:  
+
* ends the ordered list Syntax:  
...
+
 
The attributes that can be applied to either the OL tag or the LI tags are: TYPE Defines the type of number style to be used. Values: A - Defines the numbering characters as capital letters. a - Defines the numbering characters as lowercase letters. I - Defines the numbering characters as capital Roman numerals. i - Defines the numbering characters as lowercase Roman numerals. 1 - Defines the numbering characters as numbers (default).  
+
The attributes that can be applied to either the OL tag or the LI tags are:  
...
+
 
 +
TYPE Defines the type of number style to be used.  
 +
Values:  
 +
*A - Defines the numbering characters as capital letters.  
 +
*a - Defines the numbering characters as lowercase letters.  
 +
*I - Defines the numbering characters as capital Roman numerals.  
 +
*i - Defines the numbering characters as lowercase Roman numerals.  
 +
*1 - Defines the numbering characters as numbers (default).  
 +
 
 
OR  
 
OR  
Nested Lists Converting an outline into a nested list requires using the appropriate  
+
 
with the correct type attribute. It is best done just like peeling an onion, i.e. one layer at a time. In an outline like this: Selected Locations in North Carolina. I. Northeast A. Currituck 1. Moyock 2. Barco B. Martin 1. Robersonville 2. Jamesville II. North Central A. Caswell 1. Purley 2. Hightowers B. Orange 1. Cedar Grove 2. Hillsborough III. Northwest A. Ashe 1. Lansing 2. West Jefferson B. Guilford 1. Monticello 2. Osceola IV. West A. Avery 1. Cranberry 2. Plumtree B. Clay 1. Brasstown 2. Shooting Creek V. Southwest A. Catawba 1. Maiden 2. Startown B. Polk 1. Mill Spring 2. Tryon VI. South Central A. Anson 1. Peachland 2. Lilesville B. Harnett 1. Chalybeate Springs 2. Bunnlevel VII. Southeast A. Carteret 1. Bettie 2. Sealevel B. Sampson 1. Turkey 2. Tomahawk As you note in the table above the type attribute to use to produce capital Roman numerals is "I".
+
Nested Lists  
would start the list. Use the outer layer first, replacing each Roman number with an  
+
 
thus: Selected Locations in North Carolina.  
+
Converting an outline into a nested list requires using the appropriate tags with the correct type attribute. It is best done just like peeling an onion, i.e. one layer at a time.  
Northeast A. Currituck 1. Moyock 2. Barco B. Martin 1. Robersonville 2. Jamesville
+
 
North Central A. Caswell 1. Purley 2. Hightowers B. Orange 1. Cedar Grove 2. Hillsborough
+
Use the outer layer first, replacing each Roman number with an  
Northwest A. Ashe 1. Lansing 2. West Jefferson B. Guilford 1. Monticello 2. Osceola
+
the first tag.
West A. Avery 1. Cranberry 2. Plumtree B. Clay 1. Brasstown 2. Shooting Creek
+
 
Southwest A. Catawba 1. Maiden 2. Startown B. Polk 1. Mill Spring 2. Tryon
+
*First do the roman Numerals
South Central A. Anson 1. Peachland 2. Lilesville B. Harnett 1. Chalybeate Springs 2. Bunnlevel
+
*then the capital letters
Southeast A. Carteret 1. Bettie 2. Sealevel B. Sampson 1. Turkey 2. Tomahawk
+
*then the numbers
The output would be: Selected Locations in North Carolina. 1. Northeast A. Currituck 1. Moyock 2. Barco B. Martin 1. Robersonville 2. Jamesville 2. North Central A. Caswell 1. Purley 2. Hightowers B. Orange 1. Cedar Grove 2. Hillsborough 3. Northwest A. Ashe 1. Lansing 2. West Jefferson B. Guilford 1. Monticello 2. Osceola 4. West A. Avery 1. Cranberry 2. Plumtree B. Clay 1. Brasstown 2. Shooting Creek 5. Southwest A. Catawba 1. Maiden 2. Startown B. Polk 1. Mill Spring 2. Tryon 6. South Central A. Anson 1. Peachland 2. Lilesville B. Harnett 1. Chalybeate Springs 2. Bunnlevel 7. Southeast A. Carteret 1. Bettie 2. Sealevel B. Sampson 1. Turkey 2. Tomahawk The next step would be to peel another layer off and go to the parts of the outline with the capital letters. This would make each set of A. and B. list items under an ol with the type attribute of type=A Thus: Selected Locations in North Carolina.
+
*...
Northeast
+
By: Bruce A. Emmons, Area Specialized Agent, Information Management
Currituck 1. Moyock 2. Barco
 
Martin 1. Robersonville 2. Jamesville
 
North Central
 
Caswell 1. Purley 2. Hightowers
 
Orange 1. Cedar Grove 2. Hillsborough
 
Northwest
 
Ashe 1. Lansing 2. West Jefferson
 
Guilford 1. Monticello 2. Osceola
 
West
 
Avery 1. Cranberry 2. Plumtree
 
Clay 1. Brasstown 2. Shooting Creek
 
Southwest
 
Catawba 1. Maiden 2. Startown
 
Polk 1. Mill Spring 2. Tryon
 
South Central
 
Anson 1. Peachland 2. Lilesville
 
Harnett 1. Chalybeate Springs 2. Bunnlevel
 
Southeast
 
Carteret 1. Bettie 2. Sealevel
 
Sampson 1. Turkey 2. Tomahawk
 
Would produce: Selected Locations in North Carolina. 1. Northeast 1. Currituck 1. Moyock 2. Barco 2. Martin 1. Robersonville 2. Jamesville 2. North Central 1. Caswell 1. Purley 2. Hightowers 2. Orange 1. Cedar Grove 2. Hillsborough 3. Northwest 1. Ashe 1. Lansing 2. West Jefferson 2. Guilford 1. Monticello 2. Osceola 4. West 1. Avery 1. Cranberry 2. Plumtree 2. Clay 1. Brasstown 2. Shooting Creek 5. Southwest 1. Catawba 1. Maiden 2. Startown 2. Polk 1. Mill Spring 2. Tryon 6. South Central 1. Anson 1. Peachland 2. Lilesville 2. Harnett 1. Chalybeate Springs 2. Bunnlevel 7. Southeast 1. Carteret 1. Bettie 2. Sealevel 2. Sampson 1. Turkey 2. Tomahawk The next step would be to peel the last layer off and go to the parts of the outline with the numbers. This would make each set of 1. and 2. list items under an ol. remember, the default type for ol is numbers. Don't forget to turn off each of the inner lists with the /ol command Thus: Selected Locations in North Carolina.  
 
Northeast
 
Currituck
 
Moyock
 
Barco
 
Martin
 
Robersonville
 
Jamesville
 
North Central
 
Caswell
 
Purley
 
Hightowers
 
Orange
 
Cedar Grove
 
Hillsborough
 
Northwest
 
Ashe
 
Lansing
 
West Jefferson
 
Guilford
 
Monticello
 
Osceola
 
West
 
Avery
 
Cranberry
 
Plumtree
 
Clay
 
Brasstown
 
Shooting Creek
 
Southwest
 
Catawba
 
Maiden
 
Startown
 
Polk
 
Mill Spring
 
Tryon
 
South Central
 
Anson
 
Peachland
 
Lilesville
 
Harnett
 
Chalybeate Springs
 
Bunnlevel
 
Southeast
 
Carteret
 
Bettie
 
Sealevel
 
Sampson
 
Turkey
 
Tomahawk
 
Would produce this final product: Selected Locations in North Carolina. 1. Northeast 1. Currituck 1. Moyock 2. Barco 2. Martin 1. Robersonville 2. Jamesville 2. North Central 1. Caswell 1. Purley 2. Hightowers 2. Orange 1. Cedar Grove 2. Hillsborough 3. Northwest 1. Ashe 1. Lansing 2. West Jefferson 2. Guilford 1. Monticello 2. Osceola 4. West 1. Avery 1. Cranberry 2. Plumtree 2. Clay 1. Brasstown 2. Shooting Creek 5. Southwest 1. Catawba 1. Maiden 2. Startown 2. Polk 1. Mill Spring 2. Tryon 6. South Central 1. Anson 1. Peachland 2. Lilesville 2. Harnett 1. Chalybeate Springs 2. Bunnlevel 7. Southeast 1. Carteret 1. Bettie 2. Sealevel 2. Sampson 1. Turkey 2. Tomahawk The key to nested lists is to start at the outer edge and work in, just like "peeling an onion". If you start from the top and work down, it is very easy to get off track and confused. By: Bruce A. Emmons, Area Specialized Agent, Information Management
 

Latest revision as of 11:21, 28 March 2006

On ocassion, you will be called upon to include an outline for a web page. An outline will consist of a series of ordered lists.

To review ordered lists:

Ordered Lists

Ordered lists (sometimes called numbered lists) work the same as unordered lists with two exceptions. Instead of a UL tag use an OL tag. And LI tags produce numbers instead of bullets. The tags used are:

  • start the ordered list
  • indicate a new list item, produces a bullet
  • ends the ordered list Syntax:

The attributes that can be applied to either the OL tag or the LI tags are:

TYPE Defines the type of number style to be used. Values:

  • A - Defines the numbering characters as capital letters.
  • a - Defines the numbering characters as lowercase letters.
  • I - Defines the numbering characters as capital Roman numerals.
  • i - Defines the numbering characters as lowercase Roman numerals.
  • 1 - Defines the numbering characters as numbers (default).

OR

Nested Lists

Converting an outline into a nested list requires using the appropriate tags with the correct type attribute. It is best done just like peeling an onion, i.e. one layer at a time.

Use the outer layer first, replacing each Roman number with an the first tag.

  • First do the roman Numerals
  • then the capital letters
  • then the numbers
  • ...

By: Bruce A. Emmons, Area Specialized Agent, Information Management