1 / 12

HTML - Lists

HTML - Lists. The Complete Reference OMT II Mam Saima Gul. Modern HTML has three basic forms of lists: ordered lists (<OL>), unordered lists (<UL>), and definition lists (<DL>). Lists.

jackie
Download Presentation

HTML - Lists

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML - Lists The Complete Reference OMT II Mam SaimaGul

  2. Modern HTML has three basic forms of lists: ordered lists (<OL>), unordered lists (<UL>), and definition lists (<DL>). Lists

  3. ORDERED LISTS An ordered list, as enclosed by <OL> and </OL>, defines a list in which order matters. Ordering is typically rendered by a numbering scheme, using Arabic numbers, letters, or Roman numerals. • Ordered lists are suitable for creating simple outlines or step-by-step instructions, because the list items are numbered automatically by the browser. List items in ordered and other lists are defined by using the list item element, <LI>, which doesn’t require an end tag. List items are usually indented by the browser. Numbering starts from 1. • A generic ordered list looks like this: <OL> <LI>Item 1 <LI>Item 2 . . . <LI>Item n </OL> Ordered Lists

  4. The <OL> element has three basic attributes, none of which are required. These are COMPACT, START, and TYPE. • The COMPACT attribute requires no value. It simply suggests that the browser attempt to compact the list, to use less space onscreen. In reality, most browsers ignore the COMPACT attribute. • The TYPE attribute of <OL> can be set to ‘a’ for lowercase letters, ‘A’ for uppercase letters, ‘i’ for lowercase roman numerals, ‘I’ for uppercase Roman numerals, or ‘1’ for regular numerals. The numeral 1 is the default value. Each <LI> element may have a local TYPE attribute set to a, A, i, I, or 1. Once an <LI> element is set with a new type, it overrides the numbering style for the rest of the list, unless another <LI> sets the TYPE attribute. • The <OL> element also has a START attribute that takes a numeric value to begin the list numbering. Whether the TYPE attribute is a letter or a numeral, the START value must be a number. To start ordering from the letter j, you would use <OL TYPE=“a” START=“10”>, because j is the tenth letter. An <LI> element within an ordered list can override the current numbering with the VALUE attribute, which is also set to a numeric value. Numbering of the list should continue from the value set. Ordered Lists (Contd.)

  5. <HTML> <HEAD> <TITLE>Ordered List Example</TITLE> </HEAD> <BODY> <P>Ordered lists can be very simple.</P> <OL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </OL> <P>Ordered lists can have a variety of types.</P> <OL> <LI TYPE="a">Lowercase letters <LI TYPE="A">Uppercase letters <LI TYPE="i">Lowercase Roman numerals <LI TYPE="I">Uppercase Roman numerals <LI TYPE="1">Arabic numerals </OL> Ordered List Example

  6. <P>Ordered lists can start at different values and with different types.</P> <OL START="10" TYPE="a"> <LI>This should be j. <LI VALUE="3">This should be c. <OL> <LI>Lists can nest. <OL> <LI>Nesting depth is unlimited. </OL> </OL> </OL> </BODY> </HTML> Ordered List Example (Contd.)

  7. An unordered list, signified by <UL> and </UL>, is used for lists of items in which the ordering is not specific. This might be useful in a list of features and benefits for a product. A browser typically adds a bullet of some sort (a filled circle, a square, or an empty circle) for each item and indents the list. • Unordered lists can be nested. Each level of nesting indents the list further, and the bullet changes accordingly. Generally, a filled circle or solid round bullet is used on the first level of lists. • The ‘TYPE’ attribute can be used to set the bullet type for a list. The TYPE attribute may appear within the <UL> element and set the type for the whole list, or it may appear within each <LI>. • The allowed values for TYPE, as suggested by the default actions, are disc, circle, or square. Unordered Lists

  8. <HTML> <HEAD> <TITLE>Unordered List Example</TITLE> </HEAD> <BODY> <UL> <LI>Unordered lists <UL> <LI>can be nested. <UL> <LI>Bullet changes on nesting. </UL> </UL> </UL> Unordered List - Example

  9. <P>Bullets can be controlled with the TYPE attribute. Type can be set for the list as a whole or item by item.</P> <UL TYPE="square"> <LI>First item bullet shape set by UL <LI TYPE="disc">Disc item <LI TYPE="circle">Circle item <LI TYPE="square">Square item </UL> </BODY> </HTML> Unordered List - Example

  10. A definition list is a list of terms paired with associated definitions—in other words, a glossary. Definition lists are enclosed within <DL> and </DL> tags. Each term being defined is indicated by a <DT> element, which is derived from definition term. Each definition itself is defined by <DD>. Neither the <DT> nor the <DD> element requires a close tag. Definition Lists

  11. <HTML> <HEAD> <TITLE>Definition List Example</TITLE> </HEAD> <BODY> <H1 ALIGN="center">Definitions</H1> <DL> <DT>Gadget</DT> <DD>A useless device used in many HTML examples.</DD> <DT>Gizmo</DT> <DD>Another useless device used in a few HTML examples.</DD> </DL> </BODY> </HTML> Definition List - Example

  12. The End

More Related