Creating Lists

Course Outline


Use lists to display numbered steps, bulleted items, or terms and their definitions.

About Lists

Using HTML tags, you can display items as three types of lists:

bulletunordered
  1. ordered
    definition

Unordered List (<ul>)

bulletIn an unordered list each item is preceded by a bullet.
bulletYou can define the type of bullet you want to use.
bulletThe unordered list displays items in an indented, vertical column.
bulletIf you have lists within lists the browser will display a different type of bullet at each level.
 

To create an Unordered list in FrontPage:
  1. Place the insertion point where you want to create a list.
  2. On the Format menu, click Bullets and Numbering.
  3. Click the Plain Bullets tab, click the box with the bullets you want to use, and then click OK.
    Note   If you are using a theme, the Plain Bullets tab will be unavailable.
  4. Type the text you want to add next to the bullet, and then press ENTER.
  5. When you have typed the last item, press ENTER twice to end the list.
     

A unordered list uses three tags:
bulletThe list begins with the <ul> tag.
bulletEach item in the list is marked with the list item tag, <li>.
bulletThe list ends with an off unordered list tag, </ul>.
 
For example, this HTML: Displays like this in a web browser:
There are nine planets:
<br>
<ul>
<li>Mercury
<li>Venus
<li>Earth
<li>Mars
<li>Jupiter
<li>Saturn
<li>Uranus
<li>Neptune
<li>Pluto
</ul>

There are nine planets:

bulletMercury
bulletVenus
bulletEarth
bulletMars
bulletJupiter
bulletSaturn
bulletUranus
bulletNeptune
bulletPluto

Back to Top of Page

Ordered List (<ol>)

  1. In an ordered list each item is preceded by either a number or a letter.
  2. The ordered list displays items in an indented, vertical column.
    1. If you have lists within lists the browser will display a different type of number or letter at each level.
  3. In the browser, an ordered list has spacing above and below it.
     
To create an Ordered list in FrontPage:
  1. Position the insertion point where you want to create a list.
  2. On the Format menu, click Bullets and Numbering, and then click the Numbers tab.
  3. Click the box with the style of numbers or letters you want to use, and then click OK.
  4. Type the text you want to add next to the bullet, and then press ENTER.
  5. When you have typed the last item, press ENTER twice to end the list.

An ordered list uses three tags:
  1. The list begins with the <ol> tag.
  2. Each item in the list is marked with the list item tag, <li>.
  3. The list ends with an off ordered list tag, </ol>.
For example, this code: Displays like this in a web browser:
There are nine planets:
<br>
<ol>
<li>Mercury
<li>Venus
<li>Earth
<li>Mars
<li>Jupiter
<li>Saturn
<li>Uranus
<li>Neptune
<li>Pluto
</ol>

There are nine planets:

  1. Mercury
  2. Venus
  3. Earth
  4. Mars
  5. Jupiter
  6. Saturn
  7. Uranus
  8. Neptune
  9. Pluto

The ordered list has two attributes:

  1. The type attribute lets you specify whether to use numbers or letters in your ordered list. The default value is Arabic numerals.
    1. <ul type=I> produces a numerical list with roman numerals.
    1. <ul type=A> produces a alphabetical list with capital letters.
    1. <ul type=1> produces a numerical list with Arabic numerals. This is also the default value.
    1. <ul type=a> produces a alphabetical list with lowercase letters.
    1. <ul type=i> produces a numerical list with small roman numerals.

  2. The start attribute lets you start the ordered list at a specific number. For example:
    <ol start=15>
    <li>Rose
    <li>Chrome
    <li>Tangerine    		 Starts the list with the number 15:
    1. Rose
    2. Chrome
    3. Tangerine

Back to Top of Page

Definition List (<dl>)

In a definition list you specify a term and its definition.
The term appears bold and the definition is indented.
 

To create a Definition list in FrontPage:

  1. In Page view, position the insertion point where you want to create a Definition list.
  2. In the Style box , click Defined Term.
  3. Type the first term in the list, and then press ENTER.
    The next line is automatically formatted with the Definition style.
  4. Type the term definition.
  5. Press ENTER to continue to the next term.
    The next line is automatically formatted with the Defined Term style.
  6. Repeat steps 3 through 4 for each term and definition.
  7. To end the list, press ENTER twice.

     
A definition list uses four tags.
  1. The list begins with the <dl> tag.
  2. Each definition term in the list is marked with the definition term tag, <dt>.
  3. Each indented definition in the list is marked with a definition tag, <dd>.
  4. The list ends with an off definition list tag, </dl>.
     
For example, this code: Displays like this in a web browser:
There are nine planets:
<br>
<dl>
<dt>Mercury
<dd>The closest planet to the sun.
<dt>Venus
<dd>The mysterious planet, shrouded in clouds.
<dt>Earth
<dd>Our little blue orb.
<dt>Mars
<dd>The red planet. Was there ever life there?
<dt>Jupiter
<dd>The biggest planet with many moons.
<dt>Saturn
<dd>The planet best-know for its beautiful rings.
<dt>Uranus
<dd>Uranus has rings too -- nine of them, but you can't see them from Earth.
<dt>Neptune
<dd>This planet is 17 times bigger than Earth and has a 17 hour day.
<dt>Pluto
<dd>At the end of our solar system, this planet is distant and cold.
</dl>		   There are nine planets:
Mercury
The closest planet to the sun.
Venus
The mysterious planet, shrouded in clouds.
Earth
Our little blue orb.
Mars
The red planet. Was there ever life there?
Jupiter
The biggest planet with many moons.
Saturn
The planet best-know for its beautiful rings.
Uranus
Uranus has rings too -- nine of them, but you can't see them from Earth.
Neptune
This planet is 17 times bigger than Earth and has a 17 hour day.
Pluto
At the end of our solar system, this one is distant and cold.

 

Back to Top of Page

Course Outline

Nancy Bryant