HTML Boot Camp: Formatted Lists 4/23/2017 HTML Boot Camp Chapter 7 Formatted Lists Kirkwood Continuing Education © Copyright 2015, Fred McClurg All Rights Reserved Introduction to Web Programming

Unordered List: <ul> tag HTML Boot Camp: Formatted Lists 4/23/2017 Unordered List: <ul> tag Description: When the order of items is not important, an unordered list is ideal. The items in an unordered list are prefixed with a bullet character. Example: <ul> <li> Heffalumps <li> Woozles </ul> Chapter 07 > Unordered List Introduction to Web Programming

<ul> tag list style type HTML Boot Camp: Formatted Lists 4/23/2017 <ul> tag list style type Description: The list style type can be specified. Example: <ul style="list-style-type: disc"> <li> Heffalumps <li> Woozles </ul> <ul style="list-style-type: circle"> <ul style="list-style-type: square"> <ul style="list-style-type: none"> Chapter 07 > Unordered List Style Introduction to Web Programming

<ul> tag “list-style-type” HTML Boot Camp: Formatted Lists 4/23/2017 <ul> tag “list-style-type” Description: The default bullet list- style-type can be set. Type Description Example disc Bullet symbol  circle Hollow bullet  square Filled square  none No symbol Introduction to Web Programming

Nesting Unordered List HTML Boot Camp: Formatted Lists 4/23/2017 Nesting Unordered List Description: Unordered lists can be nested. This results in auto indentation and a change in bullets. Example: <ul> <li> Josephine Rabbit <li> Flopsy </li> <li> Mopsy </li> <li> Cotton-tail </li> <li> Peter </li> </ul> </li> Chapter 07 > Nested Unordered List Introduction to Web Programming

Horizontal Unordered List HTML Boot Camp: Formatted Lists 4/23/2017 Horizontal Unordered List Description: The vertical arrangement of an unordered list can be changed to a horizontal style. Example: <style> ul#menu li { display: inline; } </style> <ul id="menu"> <li> <a href="#">Flopsy</a> </li> <li> <a href="#">Mopsy</a> </li> <li> <a href="#">Cotton-tail</a> </li> <li> <a href="#">Peter</a> </li> </ul> Chapter 07 > Horizontal Unordered List Introduction to Web Programming

Ordered List: <ol> tag HTML Boot Camp: Formatted Lists 4/23/2017 Ordered List: <ol> tag Description: When the order of items is important, an ordered list is ideal. Ordered list items are enumerated with a prefixed number, character, or Roman numeral. Example: <ol> <li> Lions <li> Tigers <li> Bears </ol> Chapter 07 > Ordered List Introduction to Web Programming

HTML Boot Camp: Formatted Lists 4/23/2017 Nesting Ordered Lists Description: Ordered lists can be nested. This results in auto indentation. Example: <ol> <li> Josephine Rabbit </li> <li> Flopsy </li> <li> Mopsy </li> <li> Cotton-tail </li> <li> Peter </li> </ol> Introduction to Web Programming

<ol> tag “type” attribute HTML Boot Camp: Formatted Lists 4/23/2017 <ol> tag “type” attribute Description: The ordered list can be used to layout a nested outline. Type Description Example A Capital letters A, B, C a Lower case letters a, b, c I Capital Roman I, II, III i Lower case Roman i, ii, iii 1 Arabic numerals 1, 2, 3 Introduction to Web Programming

Definition List: <dl> tag HTML Boot Camp: Formatted Lists 4/23/2017 Definition List: <dl> tag Description: Suitable for those situations that require a format similar to a dictionary where there is a word or phrase that is followed by a definition or explanation Example: <dl> <dt> doe </dt> <dd> A deer, a female deer </dd> <dt> ray </dt> <dd> A drop of golden sun </dd> </dl> Introduction to Web Programming