Mad Irish . net

HTML Tutorial 03

30 November -0001
By: Justin
May 5, 2002

Ok, so now we've been able to produce a basic HTML page with some text on it. Lets explore some other ways we can display text. A list is a simple way to display ordered text on a page. There are two basic types of HTML lists: ordered and unordered. An ordered list is one that is delimited by numbers and letters, much like typical outline format. An unordered lists uses bullets to display text. Lets explore an ordered list first, say, of things to do today. The ordered list is delimited by two tags, a start and a finish tag, like this: 

<ol>

</ol>

And the list contains items that are marked as list items. For our first list we want to display the following on the page:

  1. Make coffee
  2. Read up on HTML
  3. Write up a simple page

To do this all we have to do is include the three items (without their numbering) as list items in an ordered list. Modify your HTML code to look like this: 

<html>
<head>
<title>List Page</title>
</head>

<body>

<ol>
<li>Make coffee</li>
<li>Read up on HTML</li>
<li>Write up a simple page</li>
</ol>

</body>
</html>

Save and refresh your page to view the results. If we want to further define our list we can do what is called 'nested' lists to include more detail. For instance, if we want our list to read: 

1.  Make coffee
   	a.  Get filter
   	b.  Fill filter with coffee and coffee maker with water
   	c.  Turn on coffee maker
2.  Read up on HTML
3.  Write up a simple page

We can nest an ordered list inside an ordered list. To do this modify your code so that it looks like this: 

<html>
<head>
<title>List Page</title>
</head>

<body>

<ol>
<li>Make coffee
   	<ol>
   	<li>Get filter
   	<li>Fill filter with coffee and coffee maker with water
   	<li>Turn on coffee maker
   	</ol>
<li>Read up on HTML
<li>Write up a simple page
</ol>

</body>
</html>

Save and refresh your page and you will see the results of a nested ordered list. You can nest as many lists as you want. You can also include hyperlinks (covered in Tutorial 2) or other HTML items in your lists. For instance, if we wanted to include a list of links under item number 2, we can nest another list like so: 

<html>
<head>
<title>List Page</title>
</head>

<body>

<ol>
<li>Make coffee
<ol>
<li>Get filter
<li>Fill filter with coffee and coffee maker with water
<li>Turn on coffee maker
</ol>
<li>Read up on HTML
<ol>
<li><a href="http://www.madirish.net/tech.php">Madirish.net</a>
<li><a href="http://www.webmonkey.com">Webmonkey</a>
</ol>
<li>Write up a simple page
</ol>

</body>
</html>

Save and refresh as normal to view the list with a nested list of links. You can use unordered lists in the same way, except instead of numbers and letters, an unordered list is demarcated by bullet points. To display an unordered list, simply use <ul> and </ul> instead of <ol> and </ol>, the line item tags are the same. So to make a simple unordered list, simply change your code to read: 

<html>
<head>
<title>List Page</title>
</head>

<body>

<ul>
<li>Make coffee
<li>Read up on HTML
<li>Write up a simple page
</ul>

</body>
</html>
By: Justin
May 5, 2002

Ok, so now we've been able to produce a basic HTML page with some text on it. Lets explore some other ways we can display text. A list is a simple way to display ordered text on a page. There are two basic types of HTML lists: ordered and unordered. An ordered list is one that is delimited by numbers and letters, much like typical outline format. An unordered lists uses bullets to display text. Lets explore an ordered list first, say, of things to do today. The ordered list is delimited by two tags, a start and a finish tag, like this: 

<ol>

</ol>

And the list contains items that are marked as list items. For our first list we want to display the following on the page:

  1. Make coffee
  2. Read up on HTML
  3. Write up a simple page

To do this all we have to do is include the three items (without their numbering) as list items in an ordered list. Modify your HTML code to look like this: 

<html>
<head>
<title>List Page</title>
</head>

<body>

<ol>
<li>Make coffee</li>
<li>Read up on HTML</li>
<li>Write up a simple page</li>
</ol>

</body>
</html>

Save and refresh your page to view the results. If we want to further define our list we can do what is called 'nested' lists to include more detail. For instance, if we want our list to read: 

1.  Make coffee
   	a.  Get filter
   	b.  Fill filter with coffee and coffee maker with water
   	c.  Turn on coffee maker
2.  Read up on HTML
3.  Write up a simple page

We can nest an ordered list inside an ordered list. To do this modify your code so that it looks like this: 

<html>
<head>
<title>List Page</title>
</head>

<body>

<ol>
<li>Make coffee
   	<ol>
   	<li>Get filter
   	<li>Fill filter with coffee and coffee maker with water
   	<li>Turn on coffee maker
   	</ol>
<li>Read up on HTML
<li>Write up a simple page
</ol>

</body>
</html>

Save and refresh your page and you will see the results of a nested ordered list. You can nest as many lists as you want. You can also include hyperlinks (covered in Tutorial 2) or other HTML items in your lists. For instance, if we wanted to include a list of links under item number 2, we can nest another list like so: 

<html>
<head>
<title>List Page</title>
</head>

<body>

<ol>
<li>Make coffee
<ol>
<li>Get filter
<li>Fill filter with coffee and coffee maker with water
<li>Turn on coffee maker
</ol>
<li>Read up on HTML
<ol>
<li><a href="http://www.madirish.net/tech.php">Madirish.net</a>
<li><a href="http://www.webmonkey.com">Webmonkey</a>
</ol>
<li>Write up a simple page
</ol>

</body>
</html>

Save and refresh as normal to view the list with a nested list of links. You can use unordered lists in the same way, except instead of numbers and letters, an unordered list is demarcated by bullet points. To display an unordered list, simply use <ul> and </ul> instead of <ol> and </ol>, the line item tags are the same. So to make a simple unordered list, simply change your code to read: 

<html>
<head>
<title>List Page</title>
</head>

<body>

<ul>
<li>Make coffee
<li>Read up on HTML
<li>Write up a simple page
</ul>

</body>
</html>

and your page will display:

  • Make coffee
  • Read up on HTML
  • Write up a simple page

Ok, so now we've discovered how to make simple lists on our page. Remember, you can nest as many lists as you want, and even nest unordered and ordered lists inside one another. Just make sure to check and ensure that you've completed all your tags :) Enjoy.

and your page will display: • Make coffee • Read up on HTML • Write up a simple page

Ok, so now we've discovered how to make simple lists on our page. Remember, you can nest as many lists as you want, and even nest unordered and ordered lists inside one another. Just make sure to check and ensure that you've completed all your tags :) Enjoy.

Tags