In our previous article we learned to work with links and entities (or special characters) in HTML and how HTML handles white space. In this episode we will discuss how to use frames to create pages within the page and how to use lists.
Frames and Lists in HTML - The Unordered List (Page 5 of 6 )
The names ordered lists and unordered lists, to me, are misleading. Before you get up in arms and send me hate mail, I understand that the numerics in the ordered list are why it is called ordered. Still, I can put the data in any order I want in that list; it's the numerics preceding the data that are ordered. But you get my point. I hope.
Instead of numerics, unordered lists use bullets in front of the data. Their creation is very similar to that of ordered lists:
<html>
<body>
<h4>My Awesome Pasta Recipe:</h4>
<ul>
<li>Pasta</li>
<li>Goat Cheese</li>
<li>Roasted Red Peppers</li>
<li>Sun-dried Tomatoes</li>
<li>Chopped Eggplant</li>
<li>Mozzarella</li>
<li>Fresh Basil</li>
<li>Turkey Sausage (optional)</li>
<li>Grated Parmesan Cheese</li>
</ul>
</body>
</html>
As you can see, the only difference is the replacement of the <ol> tag with the <ul> tag. Also, just as there are different types of ordered lists, the same is true with our good buddy the unordered list:
<html>
<body>
<h4>To Create a Disc bulleted list:</h4>
<ul type="disc">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<h4>To Create a Circle bulleted list:</h4>
<ul type="circle">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<h4>To Create a Square bulleted list:</h4>
<ul type="square">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>
This displays:
To Create a Disc bulleted list:
A
B
C
To Create a Circle bulleted list:
A
B
C
To Create a Square bulleted list:
A
B
C
Note that there are other ways to display both types of lists, including custom bullets, but that is beyond the scope of this article.