Lists, Lists, & Lists

Unordered

List

OrderedList

DefinitionList

Objectives

• Identify HTML codes for creating unordered, ordered, nested lists, and definition lists for a web page.

• Place different list types within your HTML document and view the changes within your web page.

• Build a list of items with indented text block definitions.

Types of lists and Tags

• There are 4 types of lists

–Ordered–Unordered–Nested–Definition

• Tags attributed to these lists

• List: <li>• Ordered: <ol>• Unorderd: <ul>

• Definition list: <dl>• Defined terms: <dt>• Definition: <dd>

Unordered and Ordered Lists

Unordered Lists

Items precededwith a bullet.

Ordered Lists

Items precededsequentially with

a numberedlist.

Unordered Lists

• Tags

<ul> . . </ul>• Most Widely used for the web

• Used to list any series of items that have no particular order (eg. List of site names)

• Avoid several lines of an unordered list – Attempt to summarize

Sample Web Page (unordered)

My Unordered List:• Item 1• Item 2• Item 3

HTML format for producing this

format:

<b>My Unordered List:</b>

<ul>

<li>Item 1<li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Unordered Lists

• Appear as a list of items with “bullets” or markers in the front. (Usually rounded bullets by default, but can change them.)

– The bullet marks will depend on the particular version of your web browser and the font specified for displaying normal WWW text.

Unordered List

TYPE=[ disc | square | circle ] (bullet style)

<ul type=“square”>

<li>…</li>

<li>…</li>

</ul>

Try it!

• Open your website in Notepad

• Create an unordered list of something that

is appropriate to your website.

• Place this BEFORE your ending body tag

or where applicable

• You must have at least 4 items

Ordered Lists

• Tags– <ol> . . </ol>

• Appear as a list of items with sequential numbers.

• Used to show steps, prioritize items, or create an outline

• Numbered by default (1, 2, 3,…)

Sample Web Page (ordered)

My Ordered List:

1. Item 1

2. Item 2

3. Item 3

HTML format for producing this format:

<b>My Ordered List:</b>

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

Using Type Attributes

Ordered List

TYPE=[ 1 | a | A | i | I ]

(numbering style)

<ol type=“1”>

<li>…</li>

<li>…</li>

</ol>

1.

• Can use Alpha, Numeric, or Roman Numerals

• A: A, B, C• a: a, b, c• I: I, II, III• i: i, ii, iii• 1: 1, 2, 3

– When using Alphabetical numbering, there is no standard as to what can be used for the 27th item on the list if using the English Alphabet. Unpredictable results can occur.

• Can reorder (eg. instead of using 1, you can start with 4)

Ordered List

• Changing the numbering from the default:

<ol start=“5”>

<li>…</li>

<li>…</li>

<li>…</li>

<li>…</li>

</ol>

• Will appear to be numbered “5, 6, 7, 8, …”

Try It!

• Create an ordered list of at least 4 items– Show me your list

You can use the same list as you did previously

• Then change the number to an “A” or “I”– Show me your list

• Then reorder the list (Starting at a different number, letter, etc.)

Nested Lists

• Used to add a list within a list• Ordered Lists and Unordered lists can

have different levels. – To display different levels of hierarchy

(subcategories)• Each will be indented appropriately by

your web browser.– Browsers will usually apply a different style to

the nested list. (example: Disc for main category and open circle for subcategory.)

Nested Lists

• Major concern will be to verify that each

list is properly terminated and the nesting

order is correct.

• You can also mix and match list types.

• Indentations matter (most of the time).

Example of an Unordered List with Sublevels of other listsNested Unordered List

• This is the first item.• This is the second item.

o This is the first subitem of the second item

And this is a subitem of a subitem

Getting lost yet?o This is the second subitem of

the second itemo This is the third subitem of the

second item• This is the third item

<b>Nested Unordered List</b><ul><li>This the first item </li><li>This is the second item. </li><ul><li>This is the first sub item of the second

item. </li><ul><li>And this is a sub item of a sub item </li><li>Getting lost yet? </li></ul><li>This is the second sub item of the

second item </li><li>This is the third sub item of the second

item </li></ul><li>This is the third item </li></ul>

Nested ListsMixing Together

Nested Unordered List

1. This is the first item.2. This is the second item.

o This is the first sub item of the second item

1. And this is a numbered sub item of a sub item

2. Another number sub item3. Getting lost yet?

o This is the second sub item of the second item

o This is the third sub item of the second item

4. This is the third item

<b>Nested Unordered List</b><ol><li>This the first item</li><li>This is the second item. </li><ul><li>This is the first sub item of the second

item. </li><ol><li>And this is a numbered sub item of a

sub item </li><li>Another number sub item </li><li>Getting lost yet? </li></ol><li>This is the second sub item of the

second item </li><li>This is the third sub item of the second

item </li></ul><li>This is the third item </li></ol>

Try It!

• Create a nested list using both number and bulleted subcategories– You must have at least 4 items as main

categories

You can use the same list as you did previously; however you must include subcategories!

Definition Lists

• Unlike the lists we have seen earlier, the definition list marks its entries not with a bullet…

but by its pattern of indentation.

Definition Lists

• Used to set text apart in the format of a glossary or dictionary.

• Items come in pairs– Element 1

• Term to be defined

– Element 2• The definition

• <dl>: definition list

• <dt>: defined terms

• <dd>: definition

Format for a Definition List Tag

<dl><dt>title 1</dt><dd>definition 1</dd><dt>title 2 </dt><dd>definition 2 </dd><dt>title 3 </dt><dd>definition 3 </dd></dl>

Title 1Definition 1

Title 2Definition 2

Title 3Definition 3

Try It!

• Create a definition list of at least 4 items including the “definition” for each that is relevant to your content

HTML to Produce Mineral Definition List

<dl>

<dt><b>Oxides</b></dt>

<dd>Combinations of metal ions with Oxygen, comprises the major ores extracted in mining operations.</dd>

<ul type=square>

<li>Hematite (iron ore) </li>

<li>Magnetite (iron ore, Magnetic mineral) </li>

<li>Corundum (gemstone, abrasive) </li>

</ul>

<dt><b>Sulfates</b></dt>

<dd>Metal ions combines with the Sulfate ion (SO4), atomic structure sometimes can allow bonding of water molecules. </dd>

<ul type=square>

<li>Gypsum (plaster) </li>

<li>Barite (drilling mud) </li>

</ul>

</dl>

What it looks like in the Browser