eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
Ordered Lists  
  • Ordered lists allow you to create lists with various bullet styles which reflect the level of hierarchy.

  • The basic ordered list involves three tags

  • The <OL> tag is used to open a list. The <LI> tag is used to signify a list element, and the </OL> tag is used to end a list.

  • For example, the following code could be used to create a list:

<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<B>Food</B>

<OL>
<LI>Vegetables

<OL>
<LI>Broccoli
<LI>Carrot
<LI>Pea
</OL>

<LI>Meat

<OL>

<LI>Chicken
<LI>Beef
<LI>Pork
</OL>

</OL>
</BODY>
</HTML>

  • The previous code would produce the following HTML list. Notice that the bullets are numbered according to their level in the hierarchy:

Food
  1. Vegetables
    1. Broccoli
    2. Carrot
    3. Pea
  2. Meat
    1. Chicken
    2. Beef
    3. Pork
Modifying the Bullet
  • You can modify the look of the bullets by using the TYPE or START attributes in the <OL> tag.

  • The TYPE attribute supports the following values: A, a, I, i, or 1.

  • The START attribute specifies at what point to start counting from.

  • Below is some code that demonstrates the usage of the TYPE and START attributes.
<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<B>Food</B>

<OL TYPE = "A">
<LI>Vegetables

<OL TYPE = "a">
<LI>Broccoli
<LI>Carrot
<LI>Pea
</OL>


<LI>Meat

<OL TYPE = "a" START = "2">

<LI>Chicken
<LI>Beef
<LI>Pork
</OL>

</OL>
</BODY>
</HTML>
  • The previous code would appear as follows:

Food
  1. Vegetables
    1. Broccoli
    2. Carrot
    3. Pea
  2. Meat
    1. Chicken
    2. Beef
    3. Pork

  • Notice that in this circumstance, the case of the TYPE argument matters.

Previous Page | Next Page