Home arrow HTML arrow Page 4 - Frames and Lists in HTML
HTML

Frames and Lists in HTML


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.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
January 23, 2008
TABLE OF CONTENTS:
  1. · Frames and Lists in HTML
  2. · Setting a Frame in the Horizontal Position
  3. · Displaying Frame with the Iframe
  4. · Lists in HTML
  5. · The Unordered List
  6. · Working with Nested Lists

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Frames and Lists in HTML - Lists in HTML
(Page 4 of 6 )

There are three types of lists in HTML: the ordered list, the unordered list, and the definition list. They allow you to create bulleted and numbered lists of data in HTML.

The Ordered List

The ordered list creates lists of data with a numeric value in front of it. It uses the <ol> tag to begin the list, and the <li> tag for each item in the list, like so:


<html>

<body>


<h4>My Awesome Pasta Recipe:</h4>

<ol>

<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>

</ol>


</body>

</html>

The result of this code would be:

My Awesome Pasta Recipe:

  1. Pasta

  2. Goat Cheese

  3. Roasted Red Peppers

  4. Sun-dried Tomatoes

  5. Chopped Eggplant

  6. Mozzarella

  7. Fresh Basil

  8. Turkey Sausage (optional)

  9. Grated Parmesan Cheese

And the result of that dish would be a very satisfied stomach (you can sub Chorizo for the hot turkey sausage to kick it up a notch. BLAM!)

You can of course create other types of ordered lists, such as the ways indicated by this extensive code:


<html>

<body>


<h3>To Create a Numbered list:</h3>

<ol>

<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>

</ol>


<h3>To Create a Letters list:</h3>

<ol type="A">

<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>

</ol>


<h3>To Create a Lowercase letters list:</h3>

<ol type="a">

<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>

</ol>


<h3>To Create a Roman numerals list:</h3>

<ol type="I">

<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>

</ol>


<h3>To Create a Lowercase Roman numerals list:</h3>

<ol type="i">

<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>

</ol>


</body>

</html>


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials