Combining Web Design with Original Art
HTML Lists
Lists are handy to bring some order to information on your website. Also, lists can be useful in developing the navigation features on your website. An unordered list is just that: a list of things in no particular order. This is defined by <li> and </li> tags in between <ul> and </ul> tags. Add an unordered list to your web page by copying the code below and pasting it below your table code.
| <br /> <h4>This is an unordered list</h4>> <ul type=circle> <li>First on the list</li> <li>Second on the list</li> <li>Third on the list</li> <li>and so on</li> </ul> |
The result is a vertical list of bulleted information, see Example. On both Internet Explorer and Firefox browsers the bullets are represented by black discs. You can change these to square or circle bullets by adding in-line code to the ul tag, like this <ul type=circle>. Give it a go and see what happens.
You may have noticed <br /> in the code above. This forms a break in your web page, creating some nice whitespace between elements.
An Ordered List defines information in order of importance or sequence. Instead of bullets, ordered lists are numbered. This is defined by <li> and </li> tags in between <ol> and </ol> tags. Add an ordered list to your web page by copying the code below and pasting it below your unordered list code.
| <br /> <h4>This is an ordered list</h4> <ol> <li>First on the list</li> <li>Second on the list</li> <li>Third on the list</li> <li>and so on</li> </ol> |
The result is a vertical list of numbered information, see Example. You can change the style of numbering by <ol type="A"> for capital letters; <ol type="a"> for small letters; <ol type="I"> for Roman numerals; and <ol type="i"> for lower case Roman numerals. If your list numbering is to follow on from a previous list, you can add the start number for the second list thus, <ol start=5 type="A">. In this case the ordered list would start with the letter E. Give it a go and see what happens!
Nested Lists create sub bullets within ordered and unordered lists. The sub bullets will be displayed as if tabbed on your word processor. Add a nested list to your web page by copying the code below and pasting it below your ordered list code.
| <br /> <h4>This is a nested unordered list</h4> <ul type=disc> <li>First on the list</li> <ul> <li>This is a sub bullet</li> <li>This is another sub bullet</li> </ul> <li>Second on the list</li> <ul> <li>This is a sub bullet</li> <li>This is another sub bullet</li> </ul> <li>Third on the list</li> <li>and so on</li> </ul> |
The result is a vertical list of bulleted information, with sub bullets that expand on that information, see Example.