Alright now we’re going to have to organise a few things, like a shopping list. There
are two types of lists. They are the:
- Ordered List (numbers, alphabets, roman numerals)
- Unordered List (bullet points)
For an ordered list you would use the following tags = <ol> </ol>
For an un-ordered list you would use the following tags = <ul> </ul>
For example:
**********************************************************************
1 <?xml version = "1.0 encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title> List Types </title>
7 </head>
8 <body>
9 <h3>Here are some simple lists.</h3>
10 <ol>
11 <li>Get Ingredients</li>
12 <ul>
13 <li>Cheese</li>
14 <li>Bacon</li>
15 <li>Pasta</li>
16 <li>Pasta Sauce</li>
17 </ul>
18 <li>Cook Pasta</li>
19 <li>Grate Cheese</li>
20 <li> Cook Bacon</li>
21 <li>Cook Sauce</li>
22 <li>Mix it all together and eat it</li>
23 </ol>
24 </body>
25 </html>
************************************************************************
In the above example I included both unordered and ordered list types. But did you
notice what else I did? I also included a technique called Nested Lists. These
nested lists may be used to represent hierarchical relationships, like the list of
ingredients in the Get Ingredients step of the recipe above.
You may see that I started the entire list as an ordered list in Line 10 and finished it in
Line 23. In between you would see the <li> and </li> tags I have used. These denote
List Items. The list items are the words that show up such as in Line 21: <li>Cook
Sauce</li>. The words Cook Sauce would show up next to the number 5 as it is the
fifth list item in an ordered list.
If you want to go to the next hierarchical level of dot points or numbers then nest
inside themselves like this:
*********************************************************
1 <?xml version = "1.0 encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title> Ups and Downs </title>
7 </head>
8 <body>
9 <ul>
10 <li>BEGIN</li>
11 <ul>
12 <li>UP</li>
13 <ul>
14 <li>TOP</li>
15 </ul>
16 <li>DOWN</li>
17 </ul>
18 <li>END</li>
19 </ul>
20 </body>
21 </html>
**************************************************************
0 comments:
Post a Comment