Lesson 7: HTML Lists

	HTML Lists

Introduction

There are quite a few ways to implement a list in HTML. But the whole issue is not complicated. You just need to know a few flags.

There are two primary styles of lists in HTML: ordered and unordered.

Ordered Lists

An ordered list provides a list of items as 1, 2, 3, etc; A, B, C, etc; I,II, III, etc; or a, b, c, etc. By default, when creating an ordered list, the browser assumes the 1, 2, 3 style. Of course, you can change the list style to another style as listed above. You are also allowed to list items inside of already listed items, creating an outline.

To create an ordered list, start the list with the <ol> tag, then provide each item of the list on its own line or paragraph, each item starting with the <li> and ending with the </li> tags.
There is no rule asking you to list each item on its own line or paragraph, you can put all items on the same line by just start each with a <li> and ending with a </li> tag. But it is suggested that each item start on its own line or paragraph for easy readability.
At the end of the list, you close it with the </ol> tag.

If you want to create a new list inside of an item of the parent list, start the new one with its own <ol> tag. Then list each one of its items inside of its own <li> and </li> tags. Close any child list with its own </ol> tag. As you can create a child list inside of an item of a parent's list, you can also create a "grand-child" list inside of an item of a child list.

Unordered Lists

An unordered list is a list that doesn't present any preset policy, except that it is just a a group of items, each on its own line.

You initialize an unordered list with the <ul> tag. Then, each line of the list starts with the <li> tag; closing this tag is optional. Remember to close the list with the </ul> tag.
Once again, you can create a new list inside of an item of the parent list.

Indentation

In the area of programming, there is such a thing called indentation, and it is also important here. Since we know that most tag have an opening and a closing, and the opening and the closing are usually not on the same line, to keep track of their evolution on the file, you should put the opening and the closing tags on the same distance from the left border of the window: that is indentation.

Here is an example:

1 <html>
2 <head>
3 <title>HTML Tutorial</title>
4 </head>
5 <body>
6 <tag1>
7 <tag2>Displayed Items on tag2
8 </tag2>
9 </tag1>
10 </body>
11 </html>

As you can see, when indenting tags, you track the beginning of one and then remember to close. If a certain line of text or paragraph is not too long, its beginning and closing tags could be on the same line. The indentation of tags will also be very important when we learn to use tables.

For this tutorial, the <html>, <head>, <title>, and <body> tags will not be indented, they will always be on the most left margin of the window.

Practical Learning: HTML Lists

For this exercise, start your text editor and type the following:

<html>
<head>
<title>HTML List Styles</title>
</head>
<body>

Here are a few countries
<ul>
  <li>Cameroon
  <li>U.S.A.
  <li>Bangla Desh
  <li>Germany
  <li>El Salvador
</ul>

</body>
</html>

Save the file as list1.htm in C:\htmltutorial
On the desktop, double-click the My Documents icon to open it.
Double-click list1 to open it in the browser.

For harmony reason (I mean to make our lives easier), from now on, we will close all our <li> tags.
We have already mentioned that you can create a new list inside of an item of an existing list. The new list has its own <ul> tag and its bullet are distinct from those of the parent list.
To see how it works, change the list section as follows:

<ul> <li>Cameroon</li> <li>U.S.A.</li> <ul> <li>Maryland</li> <li>Ohio</li> <li>Florida</li> </ul> <li>Bangla Desh</li> <li>Germany</li> <ul> <li>Bavaria</li> <li>Brandenburg</li> </ul> <li>El Salvador</li> </ul>

Save this file as list2.htm in My Documents.
Preview the List2.htm file in the browser and come back to your text editor.

As a last example in this small series, let's see how you can create a grand-child list inside of a child item of a parent item list. Change the listing of the file as follows:

<ul> <li>Cameroon</li> <li>U.S.A.</li> <ul> <li>Maryland <ul> <li>Silver Spring</li> <li>Baltimore</li> </ul> </li> <li>Ohio</li> <li>Florida <ul> <li>Orlando</li> </ul> </li> </ul> <li>Bangla Desh</li> <li>Germany</li> <ul> <li>Bavaria</li> <li>Brandenburg</li> </ul> <li>El Salvador</li> </ul>

Save the file as list3.htm
Preview the file in the browser
Come back to your text editor.
Now that we have learned how to create an unordered list, we will switch to the variations of an ordered list.
On the main menu of your text editor, click File -> New to create a new file.

In the empty file, type:

<html> <head> <title>Music Collection</title> </head> <body> Some music albums and their genres: <ol> <li>Rock</li> <li>Salsa</li> <li>New Age</li> <li>indian Jazz</li> <li>Soukous</li> </ol> </body> </html>

Save the file as musiccollection1a.htm in the C:\My Documents folder
Preview the file in the browser
Come back to your text editor.

Now we will see how to create a list inside of an item of the parent list. Change the list section of the above listing as follows:

<ol> <li>Rock <ol> <li>Sandra</li> <li>Taylor Dayne</li> </ol> </li> <li>Salsa</li> <li>New Age <ol> <li>Jean Michel Jarre</li> <li>Yanni</li> </ol> </li> <li>indian Jazz</li> <li>Soukous</li> </ol>

Save the file as musiccollection2a.htm
Preview the file in the browser and come back to your text editor.
One of the options you have is to change the way the ordered list displays its headers. As you have seen, by default, the browser organizes items as 1, 2, 3, etc. To change that, inside of the <ol> tag, specify the type attribute as a or A or I or I.
To see an example, open the musiccollection1a.htm file that you created earlier.

Change the content as follows:

<html> <head> <title>Music Collection - New Style</title> </head> <body> Some music albums and their genres: <ol type="A"> <li>Rock</li> <li>Salsa</li> <li>New Age</li> <li>indian Jazz</li> <li>Soukous</li> </ol> </body> </html>

Save the file as musiccollection1b.htm
Preview the file in the browser
Come back to your text editor.
In your text editor, open the musiccollection2a.htm you created earlier.

Change its list section as follows:

<ol type="I"> <li>Rock</li> <ol type="a"> <li>Sandra</li> <li>Taylor Dayne <ol> <li>Tell It To My Heart</li> <li>Naked Without You</li> <li>Can't Fight Fate</li> </lo> </li> </ol> <li>Salsa</li> <li>New Age <ol type="A"> <li>Jean Michel Jarre</li> <li>Yanni</li> </ol> </li> <li>indian Jazz <ol type="i"> <li>Ali Akbar Khan</li> <li>Ustad Ali Akbar Khan</li> </ol> </li> <li>Soukous</li> </ol>

Save the file as musiccollection2b.htm
Preview it in the browser and come back to your text editor.

HTML also allows you to mix style. You can start a list as ordered, then create children lists as unordered and vice versa.
To see an example, in your text editor, create a new file and type:

<html> <head> <title>Software Products</title> </head> <body> <b>Software companies and their products</b> <ul> <li>Microsoft <ol type="A"> <li>Operating Systems <ol> <li>Windows 3.X</li> <li>Windows 9X</li> <li>Windows NT</li> </ol> </li> <li>Office Applications <ol> <li>Word</li> <li>PowerPoint</li> </ol> </li> </ol> </li> <li>AutoDesk <ol type="I"> <li>Subsidiaries <ul> <li>Kinetix <ol type="a"> <li>3D Studio Viz</li> <li>3D Studio Max</li> </ol> </li> </ul> </li> <li>Graphics Applications <ul> <li>AutoCad</li> </ul> </li> </ol> </li> </ul> </body> </html>

Save the file as softcomp.htm in C:\htmltutorial
Preview it in the browser


Previous	Copyright � 2000-2007 FunctionX, Inc.	Next