Help:Wiki University HTML-- Lists

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

LISTS - TWO KINDS

Lists.jpg
  • 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:

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>


  • NOTICE the opening and closing tag for an unordered list is <ul> and </ul>
  • NOTICE the opening and closing tag for each item in the unordered list is <li> and </li>

The Unordered list will look like this when it is saved:

  • Item one
  • Item two
  • Item three
  • NOTICE each item is on a separate line.
  • NOTICE each item has a "bullet" in front of it.

Here's how HTML coding for unordered lists compares in coding with Wikitext:

HTML Wikitext

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>


*Item one
*Item two
*Item three

ORDERED LIST

Order lists are created in HTML with the following code:

<ol>
<li>Item one</li>
<li>Item two</li>
<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 <li> and </li>

The ordered list will look like this when it is saved:

  1. Item one
  2. Item two
  3. Item three
  • NOTICE each item is on a separate line.
  • NOTICE each item has a number in front of it.

Here's how HTML coding for ordered lists compares in coding with Wikitext:

HTML Wikitext

<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>


#Item one
#Item two
#Item three

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?

Choose.jpg
  • 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 . . . . .

Tests.gif
Exercises
  • 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.


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

Navigation menu