XHTML 1

Lists

N100

Building a Simple Web Page

XHTML 2

Creating Lists

• Lists are a very important tool in proper Web page authoring because they provide a way of logically ordering a series of words or numbers

• They also provide a simple, yet effective design technique for making it easier for Web site visitors to locate information

• You can add lists to a Web page; unordered lists, and ordered lists

XHTML 3

Creating Lists

XHTML 4

Unordered Lists

• An unordered list is a series of bulleted items

• To define the items you want to appear in the bulleted list, you nest <li> elements within a <ul> element

XHTML 5

Unordered ListsTo create an ordered list, you will use this code:<ul>

<li>The Flash</li>

<li>The Green Lantern</li>

<li>The Spectre</li>

<li>The Hawkman</li>

<li>Dr. Fate</li>

<li>The Hour-Man</li>

<li>The Sandman</li>

<li>The Atom</li>

<li>Johnny Thunder</li>

</ul>

XHTML 6

Unordered ListsYour unordered list will look like this:

•The Flash•The Green Lantern•The Spectre•The Hawkman•Dr. Fate•The Hour-Man•The Sandman•The Atom•Johnny Thunder

XHTML 7

Unordered Lists as it appears on the Web

XHTML 8

Ordered Lists

• An ordered list is a series of numbered items

• To define the items you want to appear in the numbered list, you nest <li> elements within an <ol> element

XHTML 9

Ordered ListsTo create an ordered list, you will use this code:

<ol>

<li>Sean Connery</li>

<li>George Lazenby</li>

<li>Roger Moore</li>

<li>Timothy Dalton</li>

<li>Pierce Brosnan</li>

</ol>

XHTML 10

Ordered ListsThis what an ordered list will look like,

• Sean Connery• George Lazenby• Roger Moore• Timothy Dalton• Pierce Brosnan

XHTML 11

Ordered Lists as it appears on the Web