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
Unordered Lists  
  • Unordered lists allow you to create lists with various bullet styles. However, those bullets are images, and thus, do not reflect the level of hierarchy except visually.

  • The basic unordered list involves three tags

  • The <UL> tag is used to open a list. The <LI> tag is used to signify a list element, and the </UL> 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>

<UL>
<LI>Vegetables

<UL>
<LI>Broccoli
<LI>Carrot
<LI>Pea
</UL>

<LI>Meat

<UL>
<LI>Chicken
<LI>Beef
<LI>Pork
</UL>

</UL>
</BODY>
</HTML>

  • The previous code would produce the following HTML list:

Food
  • Vegetables
    • Broccoli
    • Carrot
    • Pea
  • Meat
    • Chicken
    • Beef
    • Pork
Modifying the Bullet
  • You can modify the look of the bullets by using the TYPE attribute in the <UL> tag.

  • The TYPE attribute supports the following VALUES: CIRCLE, DISC, or SQUARE

  • Below is some code that demonstrates the usage of the TYPE attribute.
<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<B>Food</B>
<UL TYPE = "SQUARE">
<LI>Vegetables
<UL TYPE = "DISC">
<LI>Broccoli
<LI>Carrot
<LI>Pea
</UL>
<LI>Meat
<UL>
<LI>Chicken
<LI>Beef
<LI>Pork
</UL>
</UL>
</BODY>
</HTML>
  • The previous code would appear as follows:

Food
  • Vegetables
    • Broccoli
    • Carrot
    • Pea
  • Meat
    • Chicken
    • Beef
    • Pork

Note that you cannot use the TYPE parameter in IE 4+

Previous Page | Next Page