lists, lists, & lists unordered list ordered list definition list
TRANSCRIPT
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