Lists, Lists, & Lists Unordered List Ordered List Definition List

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: Ordered: Unorderd: Definition list: Defined terms: Definition:

Unordered and Ordered Lists Unordered Lists Items preceded with a bullet. Ordered Lists Items preceded sequentially with a numbered list.

Unordered Lists Tags.. 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: My Unordered List: Item 1 Item 2 Item 3

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) …

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 –.. 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: My Ordered List: Item 1 Item 2 Item 3

Using Type Attributes Ordered List TYPE=[ 1 | a | A | i | I ] (numbering style) … 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 27 th 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: … 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 lists Nested Unordered List This is the first item. This is the second item. oThis is the first subitem of the second item And this is a subitem of a subitem Getting lost yet? oThis is the second subitem of the second item oThis is the third subitem of the second item This is the third item Nested Unordered List This the first item This is the second item. This is the first sub item of the second item. And this is a sub item of a sub item Getting lost yet? This is the second sub item of the second item This is the third sub item of the second item This is the third item

Nested Lists Mixing Together Nested Unordered List 1.This is the first item. 2.This is the second item. oThis 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 item 3.Getting lost yet? oThis is the second sub item of the second item oThis is the third sub item of the second item 4.This is the third item Nested Unordered List This the first item This is the second item. This is the first sub item of the second item. And this is a numbered sub item of a sub item Another number sub item Getting lost yet? This is the second sub item of the second item This is the third sub item of the second item This is the third item

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 : definition list : defined terms : definition

Format for a Definition List Tag title 1 definition 1 title 2 definition 2 title 3 definition 3 Title 1 Definition 1 Title 2 Definition 2 Title 3 Definition 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 Oxides Combinations of metal ions with Oxygen, comprises the major ores extracted in mining operations. Hematite (iron ore) Magnetite (iron ore, Magnetic mineral) Corundum (gemstone, abrasive) Sulfates Metal ions combines with the Sulfate ion (SO4), atomic structure sometimes can allow bonding of water molecules. Gypsum (plaster) Barite (drilling mud)

What it looks like in the Browser