untitled
viviti
 HTML Amigo HomeHome
 HTML
   Introduction to HTML
   Using Notepad
   General Form
   Meta Tags
   Text Formatting
   Lists
     Unordered Lists
     Ordered Lists
     Definition Lists
   FTP
   Links
   Tables
   Images/Multimedia
   Frames
   Forms
   Style Sheets
   Javascript
   Web Hosting
   Special Characters
   Glossary
 Help Forums
   HTML Help Forum
Fast connection
   HTML Help Forum
Slow connection
 Extra (Important) Stuff
   Comments
   Link To Us
   Web Tools
   Resources
   The Poll Page


Unordered Lists

      Lists are used everywhere on the web. This list is an unordered list meaning that the order of this list is unimportant.

The < UL> Tag

      The < UL> tag basically tells the browser, "Buddy I've got an unordered list coming so listen up." We open up the unordered list like this:

< UL>

</UL>

      All that does however, is say that we have an unordered list. Lists are made up of what? Items. We place the items that make up the list in between the < UL> and </UL> tags.

< UL>
< LI>List Item</LI>
< LI>List Item</LI>
< LI>List Item</LI>
</UL>

Of course you can add in as many items as you like.

The Code

So all together the general look of the unordered list looks like this:

< UL>
< LI>List Item</LI>
< LI>List Item</LI>
< LI>List Item</LI>
</UL>

Let's take a look at the code of a real list:


The Result

I need to buy:

  • Pants
  • Shirts
  • Socks

The TYPE Property

      The TYPE property can be inlcude in the opening tag (< UL>). Each value that TYPE equals gives a different bullet style for that list. All just a matter of personal preference and taste.

< UL type = "sqaure">
Bullets are square
< UL type = "circle">
Bullets are open circles
< UL type = "disc">
Bullets are filled circles
  • Pants
  • Shirts
  • Socks
  • Pants
  • Shirts
  • Socks
  • Pants
  • Shirts
  • Socks
Rate Tutorial:
12345
Rated: 0 out of 5
Votes: 0
Free Email Forms from Bravenet.com

Pretty cool, eh? Well, that's it for unordered lists. Try making some on your own for practise. If you are ready then let's learn how Ordered Lists work.



© HTML Amigo 2005


Web Hosting · Blog · Guestbooks · Message Forums · Mailing Lists
Easiest Website Builder ever! · Build your own toolbar · Free Talking Character · Email Marketing
powered by a free webtools company bravenet.com