Lists
advertisement
Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize information in their day-to-day lives. Type of Lists Plain-Text Lists Ordered Lists Unordered Lists Lists of Lists (Nesting) Definition Lists Menu List (Considered Obsolete) Directory Lists (Considered Obsolete) Plain-Text Lists The <BR> tag can be used to “force” lists. <HTML> <HEAD> <TITLE>Lists 1 </TITLE> </HEAD> <BODY> The following shows a forced way to build a Christmas list: <BR> 1. Partridge in a pear tree<BR> 2. French Hens<BR> 3. Calling Birds <BR> </BODY> </HTML> Ordered Lists - <OL> Two HTML tags are involved with the ordered list: Order-list container <OL>. . .</OL> List-item container <LI> (Browser will automatically close it when it finds another <LI>. By default the lists will use Arabic numerals starting with 1. Ordered List Example: <HTML> <HEAD> <TITLE>Lists 2 </TITLE> </HEAD> <BODY> The following shows a efficient way to build a Christmas list: <OL> <LI>Partridge in a pear tree <LI>French Hens <LI>Calling Birds </OL> </BODY> </HTML> Ordered List - Attributes <OL START=n> - Used to have a list start at some number other than one. <HTML> <HEAD> <TITLE>Lists 3 </TITLE> </HEAD> <BODY> The following shows a efficient way to build a Christmas list: <OL> <LI>Partridge in a pear tree <LI>French Hens <LI>Calling Birds </OL> I forgot the next three items. <OL START=7> <LI>Rings </OL> </BODY> </HTML> TYPE Attribute <OL TYPE=x> Changes the style of the numbers or letters of the list elements. Type Generated Style Examples A Uppercase letters A, B, C, D a Lowercase letters a, b, c, d, I Uppercase Roman numerals I. II. III. IV. i Lowercase Roman numerals i. ii. Iii. iv. 1 Arabic numerals (default) 1, 2, 3, 4 <OL> TYPE Attribute Example <HTML> <HEAD> <TITLE>Lists 4 </TITLE> </HEAD> <BODY> The following shows a efficient way to build a Christmas list: <OL TYPE=I> <LI>Partridge in a pear tree <LI>French Hens <LI>Calling Birds </OL> I forgot the next three items. <OL TYPE=i START=7> <LI>Rings </OL> </BODY> </HTML> List-Item Tag - <LI> Can contain almost anything if it defines an element of an ordered or unordered list. Universal container - used for all of the different types of lists except definition lists. List-Item Tag (Continued) What it generates depends on the type of list. Ordered list - list element is preceded by a number or letter. Unordered list - list element is preceded by one of the different bullet types. List-Item - TYPE Attribute Much like the TYPE attribute of the <OL> container. TYPE attribute used with . . . <OL> - specifies style of the number for the whole list. <LI> specifies style for a single list item. <LI> - TYPE Attribute Example <HTML> <HEAD> <TITLE>List 5</TITLE> </HEAD> <BODY> The following list shows each type of list item, and describes what it is. <OL> <LI TYPE=A>This element is of type A <LI TYPE=a>This element is of type a <LI TYPE=I>This element is of type I <LI TYPE=i>And element is of type i </OL> </BODY> </HTML> List-Item - VALUE Attribute Example: VALUE=1 Specifies a starting value (also style) that will serve as the new base number for the rest of the item in the list. Used only within a list only. (Use START at the start of a list). Unordered List - <UL> Also called a bulleted list. Similar to the ordered list - except bullets are used rather than numbers. Possible to change the shape of the bullets by using the TYPE option. (Netscape only) COMPACT compresses line spacing between the list items. (Most browsers ignore) Unordered List - <UL> Example <HTML> <HEAD> <TITLE>Unordered Lists</TITLE> </HEAD> <BODY> The following books usually appear on the bookshelf of Web Weavers: <UL> <LI>How to Explain Obtuse Ideas to Anyone <LI>Excellent Paper Airplanes Vol.4 <LI>Excellent HTML </UL> In addition, the heard core will also have a book about knots available. </BODY> </HTML> Nesting (List of Lists) Builds structures that convey complex relationships. Netscape will indent the list within a list to increase readability. Three types of nesting: Combined Ordered and Unordered Lists Nested Unordered Lists Nested Ordered Lists Nesting (Combined Lists) Example <HTML><HEAD> <TITLE>Nesting</TITLE> </HEAD> <BODY> When packing a briefcase, be sure to: <OL> <LI>Pack the Lap Top. <UL> <LI>Get the power cord. <LI>Find the box of disks. </UL> <LI>Check the Day Timer. <UL> <LI>Check for the right month. <LI>Check for the right year. </UL> </OL> </BODY></HTML> Nesting (Unordered Lists) <HTML> <HEAD> <TITLE>Nesting Unordered</TITLE> </HEAD> <BODY> When packing a briefcase, be sure to: <UL> <LI>Pack the Lap Top. <UL> <LI>Get the power cord. <LI>Find the box of disks. <UL> <LI>Get homework disk. <LI>Get sample disk. </UL> <LI>Check the PCMCIA cards </UL> <LI>Check the Day Timer. <UL> <LI>Check for the right month. <LI>Check for the right year. </UL> </UL> </BODY> </HTML> Nesting (Ordered Lists) <HTML> <HEAD> <TITLE>Nesting Ordered</TITLE> </HEAD> <BODY> When packing a briefcase, be sure to: <OL> <LI>Pack the Lap Top. <OL> <LI>Get the power cord. <LI>Find the box of disks. <OL> <LI>Get homework disk. <LI>Get sample disk. </OL> <LI>Check the PCMCIA cards </OL> <LI>Check the Day Timer. <OL> <LI>Check for the right month. <LI>Check for the right year. </OL> </OL> </BODY> </HTML> Nesting (Ordered Lists) <HTML><HEAD> <TITLE>Nesting Ordered 2</TITLE> </HEAD> <BODY> When packing a briefcase, be sure to: <OL TYPE="I"> <LI>Pack the Lap Top. <OL TYPE="A"> <LI>Get the power cord. <LI>Find the box of disks. <OL TYPE="1"> <LI>Get homework disk. <LI>Get sample disk. </OL> <LI>Check the PCMCIA cards </OL> <LI>Check the Day Timer. <OL TYPE="A"> <LI>Check for the right month. <LI>Check for the right year. </OL> </OL></BODY></HTML> Readability Long files of HTML code are hard to read. Ways to make the file easier to read: A couple of blank line around structural parts (lists, etc.) A tab or two in front of subordinate items to show relationships. Place logical part of HTML code on separate lines. Readability <HTML><HEAD> <TITLE>Nesting Ordered 2</TITLE> </HEAD> <BODY> When packing a briefcase, be sure to: <OL TYPE="I"> <LI>Pack the Lap Top. <OL TYPE="A"> <LI>Get the power cord. <LI>Find the box of disks. <OL TYPE="1"> <LI>Get homework disk. <LI>Get sample disk. </OL> <LI>Check the PCMCIA cards </OL> <LI>Check the Day Timer. <OL TYPE="A"> <LI>Check for the right month. <LI>Check for the right year. </OL> </OL> </BODY></HTML> <HTML><HEAD><TITLE>Nesting Ordered 2</TITLE></HEAD><BODY>When packing a briefcase, be sure to:<OL TYPE="I"><LI>Pack the Lap Top. <OL TYPE="A"> <LI>Get the power cord.<LI>Find the box of disks. <OL TYPE="1"> <LI>Get homework disk. <LI>Get sample disk. </OL> <LI>Check the PCMCIA cards </OL><LI>Check the Day Timer. <OL TYPE="A"> <LI>Check for the right month. <LI>Check for the right year. </OL></OL></BODY></HTML> Both will produce the same nested lists. Definition Lists Presents data formatted like a glossary or dictionary. Ideal format to present lists of words or concepts and their meaning. Common tags <DL>. . .</DL> Definition list <DT> Define term <DD> Define definition The End
