Drifting Designs Tutorials > > Coding > > HTML > > Unordered Lists
Basic Unordered List
Different Bullets
Images as Bullets
Basic Ordered List
This tutorial will teach you how to create an unordered list. An unordered list is one that is bulleted by bullets or images, rather than numbers or letters, as an ordered list is.
Below is a sample unordered list. This is a list of common names of trees, in celebration for Earth Day tomorrow. =)
- American holly
- Baldcypress
- Cottonwood
- Douglas-fir
To make your own unordered list, use the following code -
Explanation:
"<ul>" stands for "unordered list". The "<li>"s tell what is supposed to be listed. Replace the tree names with whatever you want. Remember that the list can be extended to however long you want. Just keep adding the "<li>" lines.
Different Bullets
The default bullet is, for Internet Explorer, a round black circle, where as for Mozilla Firefox, it's a black diamond. You can choose different bullets, such as transparent circles, squares, or images.
To change the bullet, where it says "<ul>" in the above code, replace that with the following -
This will produce a list bulleted by simple circles, like the one below.
- American holly
- Baldcypress
- Cottonwood
- Douglas-fir
Want square bullets? Use the following code -
which will produce -
- American holly
- Baldcypress
- Cottonwood
- Douglas-fir
Images as Bullets
Want an image as a bullet? Sure! Just replace "<ul>" with -
For example, the list belwo is bulleted with this image -
- American holly
- Baldcypress
- Cottonwood
- Douglas-fir
|
