Making lists really isn't that hard and all, and it's a very useful thing to know how to do. It's very customizable as well!
Numbered Lists
<ol>
<li>See? </li>
<li>Not so difficult! </li>
<li>Plus it's all nice and neat. </li>
</ol>
Using that code gives you the following:
- See?
- Not so difficult!
- Plus it's all nice and neat.
There are various ways to play around with the numbered lists coding. Say you would like to start off at a number other than onem then just use this version:
<ol start="5">
<li>See? </li>
<li>Not so difficult! </li>
<li>Plus it's all nice and neat. </li>
</ol>
The "5" can be changed to any mumber. Now, you can also get Roman Numerals by using this code:
<ol type="I">
<li>Olde fashioned</li>
<li>now </li>
<li>aren't we? </li>
</ol>
- Olde fashioned
- now
- aren't we?
Or you could do it alphabetically instead:
<ol type="A">
<li>Letters </li>
<li>instead of </li>
<li>numbers! </li>
</ol>
- Letters
- instead of
- numbers!
Bulleted Lists
<ul>
<li>No numbers or letters! </li>
<li>Just bullets. </li>
<li>Lovely, eh? </li>
</ul>
It will look like this:
- No numbers or letters!
- Just bullets.
- Lovely, eh?
Again, you can customize this is make it what you like! By adding
type="circle" to the
<ul> tag you can change the bullet's look.
<ul type="circle">
<li>No numbers or letters! </li>
<li>Just bullets. </li>
<li>Lovely, eh? </li>
</ul>
- No numbers or letters!
- Just bullets.
- Lovely, eh?
Or you can use squares instead of circles!
<ul type="square">
<li>No numbers or letters! </li>
<li>Just bullets. </li>
<li>Lovely, eh? </li>
</ul>
- No numbers or letters!
- Just bullets.
- Lovely, eh?
You can even use your own image! Just replace the
yourimageurl.gif with the URL of the image you want to use. (Just make sure it isn't too large, or things will get messy)
<ul style="list-style-image: url(
yourimageurl.gif)">
<li>No numbers or letters! </li>
<li>Just bullets. </li>
<li>Lovely, eh? </li>
</ul>
Here's an example using one of the bullets I made.
- No numbers or letters!
- Just bullets.
- Lovely, eh?
If you don't want to make your own, don't worry! Many sites offer them for free,
including mine. ;)
I hope this tutorial has helped you out! If you have any questions or know of something I'm missing, please let me know!
