Help:Wiki University HTML-- Lists





<< Previous Chapter Next Chapter >>

LISTS - TWO KINDS

 * Unordered Lists, in which items are listed in no particular order and are not numbered.
 * Ordered Lists, in which items are numbered for various reasons.

UNORDERED LIST
Unordered lists are created in HTML with the following code:   Item one Item two Item three  The Unordered list will look like this when it is saved:  Item one Item two Item three</li> </ul>
 * NOTICE the opening and closing tag for an unordered list is  and </ul>
 * NOTICE the opening and closing tag for each item in the unordered list is  and </li>

Here's how HTML coding for unordered lists compares in coding with Wikitext:
 * NOTICE each item is on a separate line.
 * NOTICE each item has a "bullet" in front of it.

ORDERED LIST
Order lists are created in HTML with the following code: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"> <ol> Item one</li> Item two</li> Item three</li> </ol> The ordered list will look like this when it is saved: <ol> Item one</li> Item two</li> Item three</li> </ol>
 * NOTICE the opening and closing tag for an unordered list is <ol> and </ol>
 * NOTICE the opening and closing tag for each item in the unordered list is  and </li>

Here's how HTML coding for ordered lists compares in coding with Wikitext:
 * NOTICE each item is on a separate line.
 * NOTICE each item has a number in front of it.

FINAL PRODUCTS LOOK THE SAME

 * The lists look exactly the same whether you code with HTML or Wikitext.
 * Wikitext coding looks much simpler than HTML, so why use HTML?

HTML or WIKITEXT?

 * Because HTML coding uses tags, you have the ability to change the look of the list.
 * With Wikitext, you have to take what it gives you.
 * If the look of Wikitext is ok, then use it.
 * If you want to change the bullet points, size of the font, color of the text, etc, you have to use HTML.
 * In short, HTML coding gives you more options and abilities to change the look of the material in the lists.

TRY THESE OUT . . . ..


<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; border-radius:5px;"> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises <div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers
 * Using HTML practice creating unordered lists, in your sandbox use the following items: Birth Certificates, Land Records, Probate Records, Census, and Vital Records.
 * Using HTML practice creating ordered list, in your sandbox use the following items: World, North American, United States of America, State of Missouri, Jackson County, and Independence.

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"> Quick Quiz
 * If you have a cooking recipe, which list would you use to show the steps?
 * A. Ordered List
 * B. Unordered List


 * If you were listing your favorite foods in order of preference, which lists would you use?
 * A. Ordered List
 * B. Unordered List


 * If you were listing the contents of your pockets, which list would you use?
 * A. Ordered List
 * B. Unordered List

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<< Previous Chapter Next Chapter >>