Dark Scarab - HTML 008

PDF

To make bulleted or numbered lists in HTML you could type up all the text using <br /> tags and a bunch of • (which is the coding to make bullets). However, rather than doing that you can use HTML lists. In HTML there are three types of lists. There are ordered lists (numbered) and then there are unordered lists (bulleted) and there are definition lists. You can also make lists that are not numbered or bulleted.

Let's do an ordered list first. To create an ordered list, you use the tags <ol></ol>. Now in order to put items on this ordered list we must use new tags, <li></li>. These are called list items. For this tutorial we will just put text into the <li> tags but you can put almost anything you want between these tags.


		<html>

		<head>

			<title>My Web Page</title>

		</head>

		<body>

		<ol>

		<li>Wake Up</li>

		<li>Eat Breakfast</li>

		<li>Go to work</li>

		<li>Work...</li>

		</ol>

		</body>

		</html>

If you open this up in your browser you should see that the list looks something like this:

Wake Up
Eat Breakfast
Go to work
Work...

Also you are not limited to numbers in your ordered list. To change the type of ordered list you can use the type=”” attribute. In the type attribute you can enter 1, A, a, I, or I. Below is what they mean:

1 = Numbers
A = Capitol Letters
a = Lowercase letters
I = Capitol Roman Numerals
I = Lowercase Roman Numerals

Another type of list is the unordered list. Instead of using the <ol></ol> tags you would use the <ul></ul> tags. If you just change those tags you should get something like this:

Wake Up
Eat Breakfast
Go to work
Work...

There are also a few type settings you can use for unordered lists as well. You can use discs, squares, or circles. Circles are usually the default. You can see the types below.

type=”disc”
type=”square”
type=”circle”

Once again, lists are not just limited to this. You can also put lists in lists. The coding below shows a few different ways you can use lists:


		<ol>

	<li>Wake Up</li>

	<li>Eat Breakfast

	    <ol type=”a”>

	        <li>Pour Cereal</li>

	        <li>Pour Milk</li>

	        <li>Eat</li>

	    </ol>

	</li>

	<li>Go to work</li>

	<li>Work

	    <ul type=”square”>

	        <li>Do Presentation</li>

	        <li>Finish Project</li>

	    </ul>

	</li>

	</ol>

Here you can see our original ordered list. Under the 'Eat Breakfast' item there is another ordered list inside of it using lowercase letters rather than the default numbers. Also under 'Work' there is an unordered list using squares rather than the default circles. And these are just some of the ways you can make lists. And don't worry, you can put an infinate about of lists within lists with different styles for each of them.

Now we are still not done with lists. There is also another type of list called a definition list. Instead of using <ol></ol> or <ul></ul> you would use <dl></dl>. In this case, however, we do not use the <li></li> tags. Instead we use the <dt></dt> and <dd></dd> tags. The 'dt' tags is the definition term and the 'dd' is the actual definition. Here is an example:


        <dl>

        <dt>Mammals</dt>

        <dd>Animals with Fur.</dd>

        <dt>Fish</dt>

        <dd>Animals in the sea.</dd>

        </dl>

If you look at this in your browser you should see that the <dd> tags will indent the text within it. This is basically all definition lists do. The above should look something like this:

Mammals: Animals with Fur.
Fish: Animals in the sea.

Those are the basics to lists. As I stated before you can put almost anything within your lists. If you want to use images you can do that as well. Just put the image in the place of the text, or even with the text. If you want to put a table within your lists you are free to do so. It is all up to you, all you have to do it imagine it a try it.