Creating A List

I have been creating Recipe Lists for my website and have been using two different types of lists: Ordered and Unordered.

To create an Unordered List:

You will use the tag <ul> (for unordered list) to start the list

You will use the <li> tag for each item in the list

 

The following list is an example of an Unordered List:

You will need the following ingredients for “Sweet Green Juice”

  • 2 cups Kale
  • 2 cups Parsley
  • 3 cups Romaine
  • 1 Cucumber
  • 3 Celery Stalk
  •  1 Apple

To Create this list on your website you would need to do the following:

<ul>

<li>2 cups Kale</li>

<li>2 cups Parsley</li>

<li>3 cups Romaine</li>

<li>1 Cucumber</li>

<li>3 Celery Stalk</li>

<li>1 Apple</li>

</ul>

 

To create an Ordered List:

You will use the tag <ol> (for ordered list) to start the list

You will use the <li> tag for each item in the list

 

The following list is an example of an Ordered List:

Follow these steps to make your “Sweet Green Juice”

  1. Wash all ingredients
  2. Cut the cucumber, celery and apple into small pieces
  3. Put all ingredients into Nutribullet Cup
  4. Blend for 45 seconds
  5. Blend and enjoy!Blend and enjoy!

To Create this list on your website you would need to do the following:

<ol>

<li>Wash all ingredients</li>

<li>Cut the cucumber, celery and apple into small pieces</li>

<li>Put all ingredients into Nutribullet Cup</li>

<li>Blend for 45 seconds</li>

<li>Drink and enjoy!</li>

</ol>

That is how you create an Ordered and Unordered list using HTML!

Advertisements

~ by adz122013 on February 18, 2013.

2 Responses to “Creating A List”

  1. I feel like your post was very well written and I liked that you showed what was an unordered and ordered list, but I feel like explaining how to add an ordered list is too simple, and could be easily figured out.

  2. I appreciated your attention to detail, and appropriate simplicity, however I feel that you could have made this post more provocative if you were play around with the list tag a little more. Perhaps by showing us the final product on your website, we could have gotten a better understanding of how your lists appeared when not in html format. I agree that your post was well written and could have been easily found elsewhere, however you could have easily avoided this by incorporating CSS styling as a way to “spice up” a simple list tag.

    Sarah Cinski

Comments are closed.

 
%d bloggers like this: