Lists and Numbering
Written by Jen

Apart from doing lists manually like 1. First Statement<br>2. Second Statement etc. you can also make bullet points to list your details. These are great when you're listing a bunch of links, requirements for various applications or just when you feel like listing down a bunch of steps for anything.

Ordered Lists
To make numbered lists, just use the following code:

<ol>
<li> First Statement
<li> Second Statement
<li> Third Statement
<li> Fourth Statement
</ol>

This will give you something that looks like this:

  1. First Statement
  2. Second Statement
  3. Third Statement
  4. Fourth Statement
You must remember to close off your <ol> tag otherwise the rest of your text will be indented and in line with the last list you had.

When your page is split up, ie. you need a paragraph in between lists to explain something important, you can resume your list again. For example, I stopped at the 2rd list and want to resume from the 4th list, I would use the following:

<ol start="4">
<li> Fourth Statement
<li> Fifth Statement
<li> Sixth Statement
<li> Seventh Statement
</ol>

Which looks like:

  1. Fourth Statement
  2. Fifth Statement
  3. Sixth Statement
  4. Seventh Statement
Or if you don't want numbers but want roman numerals instead, use the following:

<ol type="I">
<li> First Statement
<li> Second Statement
<li> Third Statement
<li> Fourth Statement
</ol>

Or maybe place it in alphabetical order? This is good for quizzes and stuff.

<ol type="A">
<li> First Statement
<li> Second Statement
<li> Third Statement
<li> Fourth Statement
</ol>

Unordered Lists
A normal unordered list just uses the following code:

<ul>
<li> First Statement
<li> Second Statement
<li> Third Statement
<li> Fourth Statement
</ul>

And it looks like this:

You can make the bullet points into circles or squares by using the following codes (either one):

<ul type="circle">
<li> First Statement
<li> Second Statement
<li> Third Statement
<li> Fourth Statement
</ul>

<ul type="square">
<li> First Statement
<li> Second Statement
<li> Third Statement
<li> Fourth Statement
</ul>

This is the extent that HTML will change your lists. If you want to make bullet points into various images, you can use the following code:

<ul style="list-style-image: url('your_file.gif')">
<li>First</li>
<li>Seond</li>
<li>Third</li>
<li>Fourth</li>
</ul>

Do note that your lists will need to be closed and that your bullet point images will need to be small in order to remain a proper bullet point.

Combinations
You can put ordered lists and unordered lists together like so:

  1. Introduction
  2. Conclusion
These are great for page anchors on a really long page and can be achieved by adding the unordered list into an ordered list tag.