User:Rewood/Making Nested Lists in HTML

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 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 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". would start the list. Use the outer layer first, replacing each Roman number with an thus: Selected Locations in North Carolina. 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 Northwest A. Ashe 1. Lansing 2. West Jefferson B. Guilford 1. Monticello 2. Osceola 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 South Central A. Anson 1. Peachland 2. Lilesville B. Harnett 1. Chalybeate Springs 2. Bunnlevel Southeast A. Carteret 1. Bettie 2. Sealevel B. Sampson 1. Turkey 2. Tomahawk 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 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