ptg Input ▼ <h1>The days of the week in French</h1> <ol style=”list-style-type: upper-roman”> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> <li>Jeudi</li> <li>Vendredi</li> <li>Samedi</li> <li>Dimanche</li> </ol> 86 LESSON 5: Organizing Information with Lists Output . FIGURE 5.2 An ordered list displayed using an alternative numbering style. You can also use the list-style-type property or the type attribute with the <li> tag, changing the numbering type in the middle of the list. When the numbering style is changed in an <li> tag, it affects that item and all entries following it in the list. Using the start attribute, you can specify the number or letter with which to start your list. The default starting point is 1, of course. You can change this number by using start. <ol start=“4”>, for example, would start the list at number 4, whereas <ol type=“a” start=“3”> would start the numbering with c and move through the alphabet from there. The value for the start attribute should always be a decimal number, regardless of the numbering style being used. For example, you can list the last 6 months of the year and start numbering with the Roman numeral VII. The results appear in Figure 5.3. Input ▼ <p>The Last Six Months of the Year (and the Beginning of the Next Year):</p> <ol style=”list-style-type: upper-roman” start=“7”> <li>July</li> <li>August</li> <li>September</li> <li>October</li> <li>November</li> Download from www.wowebook.com ptg <li>December</li> <li style=”list-style-type: lower-roman”>January</li> </ol> Unordered Lists 87 5 Output . FIGURE 5.3 An ordered list with an alternative numbering style and starting number. As with the type attribute, you can change the value of an entry’s number at any point in a list. You do so by using the value attribute in the <li> tag. Assigning a value in an <li> tag restarts numbering in the list starting with the affected entry. Suppose that you wanted the last three items in a list of ingredients to be 10, 11, and 12 rather than 6, 7, and 8. You can reset the numbering at Eggs using the value attribute, as follows: <h1>Cheesecake Ingredients</h1> <ol> <li>Quark Cheese</li> <li>Honey</li> <li>Cocoa</li> <li>Vanilla Extract</li> <li>Flour</li> <li value=“10”>Eggs</li> <li>Walnuts</li> <li>Margarine</li> </ol> Unordered Lists Unordered lists are often referred to as bulleted lists. Instead of being numbered, each element in the list has the same marker. The markup to create an unordered list looks just like an ordered list except that the list is created by using <ul> </ul> tags rather than ol. The elements of the list are placed within <li> tags, just as with ordered lists. Browsers usually mark each item in unordered lists using bullets or some other symbol; Lynx, a text browser, inserts an asterisk (*). Download from www.wowebook.com ptg The following input and output example shows an unordered list. Figure 5.4 shows the results in a browser. Input ▼ <p>Things I like to do in the morning:</p> <ul> <li>Drink a cup of coffee</li> <li>Watch the sunrise</li> <li>Listen to the birds sing</li> <li>Hear the wind rustling through the trees</li> <li>Curse the construction noises for spoiling the peaceful mood</li> </ul> 88 LESSON 5: Organizing Information with Lists Output . FIGURE 5.4 An unordered list. Customizing Unordered Lists As with ordered lists, unordered lists can be customized using the type attribute or the list-style-type property. By default, most browser use solid bullets to mark entries in unordered lists. Text browsers such as Lynx generally opt for an asterisk. The other bullet styles are as follows: n “disc”—A disc or bullet; this style is the default. n “square”—Obviously, a square rather than a disc. n “circle”—As compared with the disc, which most browsers render as a filled cir- cle, this value should generate an unfilled circle. In this case, the values for list-style-type and for the type attribute are the same. In the following input and output example, you see a comparison of these three types as rendered in a browser (see Figure 5.5): Download from www.wowebook.com ptg Input ▼ <ul style=“list-style-type: disc”> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Cassettes</li> </ul> <ul style=“list-style-type: square”> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Cassettes</li> </ul> <ul style=“list-style-type: circle”> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Cassettes</li> </ul> Unordered Lists 89 5 Output . FIGURE 5.5 Unordered lists with different bullet types. If you don’t like any of the bullet styles used in unordered lists, you can substitute an image of your own choosing in place of them. To do so, use the list-style-image property. By setting this property, you can use an image of your choosing for the bullets in your list. Here’s an example: <ul style=“list-style-image: url(/bullet.gif)”> <li>Example</li> </ul> Don’t worry much about what this all means right now. Images are discussed in Lesson 9, “Adding Images, Color, and Backgrounds.” Right now, all you need to know is that the URL in parentheses should point to the image you want to use. As you’ve seen in the screenshots so far, when items are formatted in a list and the list item spans more than one line, the lines of text that follow the first are aligned with the Download from www.wowebook.com ptg beginning of the text on the first line. If you prefer that they begin at the position of the bullet or list number, as shown in Figure 5.6, use the list-style-position property: <ul style=”list-style-position: inside;”> <li>Always use Pillsbury’s Best Flour.</li> <li>Sift flour twice before adding to cakes or breakfast cakes.</li> <li>Make all measurements level by using edge of knife to lightly scrape off from top of cup or spoon until material is even with the edges.</li> <li>Use same sized cups or spoons in measuring for the same recipe.</li> <li>Before starting to make recipe, read through carefully, then put on table all the materials and tools needed in making that particular recipe.</li> </ul> 90 LESSON 5: Organizing Information with Lists FIGURE 5.6 How the list- style-position property affects the layout of lists. The default value is outside, and the only alternative is inside. Finally, if you want to modify several list-related properties at once, you can simply use the list-style prop- erty. You can specify three values for list-style: the list style type, the list style posi- tion, and the URL of the image to be used as the bullet style. This property is just a shortcut for use if you want to manipulate several of the list-related properties simultane- ously. Here’s an example: <ul style=“list-style: circle inside URL(/bullet.gif)”> <li>Example</li> </ul> Glossary Lists Glossary lists are slightly different from other lists. Each list item in a glossary list has two parts: n A term n The term’s definition Download from www.wowebook.com ptg Each part of the glossary list has its own tag: <dt> for the term (definition term) and <dd> for its definition (definition definition). <dt> and <dd> usually occur in pairs, although most browsers can handle single terms or definitions. The entire glossary list is indicated by the tags <dl> </dl> (definition list). The following is a glossary list example with a set of herbs and descriptions of how they grow (see Figure 5.7): Input ▼ <dl> <dt>Basil</dt> <dd>Annual. Can grow four feet high; the scent of its tiny white flowers is heavenly</dd> <dt>Oregano</dt> <dd>Perennial. Sends out underground runners and is difficult to get rid of once established.</dd> <dt>Coriander</dt> <dd>Annual. Also called cilantro, coriander likes cooler weather of spring and fall.</dd> </dl> Glossary Lists 91 5 Output . FIGURE 5.7 A glossary list. Glossary lists usually are formatted in browsers with the terms and definitions on sepa- rate lines, and the left margins of the definitions are indented. You don’t have to use glossary lists for terms and definitions, of course. You can use them anywhere that the same sort of list is needed. Here’s an example involving a list of frequently asked questions: <dl> <dt> <dt>What is the WHATWG?</dt> <dd>The Web Hypertext Application Technology Working Group (WHATWG) is a growing Download from www.wowebook.com ptg community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.</dd> <dt>What is the WHATWG working on?</dt> <dd>The WHATWG’s main focus is HTML5. The WHATWG also works on Web Workers and occasionally specifications outside WHATWG space are discussed on the WHATWG mailing list and forwarded when appropriate.</dd> <dt>How can I get involved?</dt> <dd>There are lots of ways you can get involved, take a look and see What you can do!</dd> <dt>Is participation free?</dt> <dd>Yes, everyone can contribute. There are no memberships fees involved, it’s an open process. You may easily subscribe to the WHATWG mailing lists. You may also join the the W3C’s new HTMLWG by going through the slightly longer applica- tion process.</dd> </dl> Nesting Lists What happens if you put a list inside another list? Nesting lists is fine as far as HTML is concerned; just put the entire list structure inside another list as one of its elements. The nested list just becomes another element of the first list, and it’s indented from the rest of the list. Lists like this work especially well for menu-like entities in which you want to show hierarchy (for example, in tables of contents) or as outlines. Indenting nested lists in HTML code itself helps show their relationship to the final layout: <ol> <li>WWW</li> <li>Organization</li> <li>Beginning HTML</li> <li> <ul> <li>What HTML is</li> <li>How to Write HTML</li> <li>Doc structure</li> <li>Headings</li> <li>Paragraphs</li> <li>Comments</li> </ul> </li> <li>Links</li> <li>More HTML</li> </ol> Many browsers format nested ordered lists and nested unordered lists differently from their enclosing lists. They might, for example, use a symbol other than a bullet for a nested list, or number the inner list with letters (a, b, c) rather than numbers. Don’t 92 LESSON 5: Organizing Information with Lists Download from www.wowebook.com ptg assume that this will be the case, however, and refer back to “section 8, subsection b” in your text because you can’t determine what the exact formatting will be in the final output. If you do need to be sure which symbols or numbering scheme will be used for a list, specify a style using CSS. The following input and output example shows a nested list and how it appears in a browser (see Figure 5.8): Input ▼ <h1>Peppers</h1> <ul> <li>Bell</li> <li>Chile</li> <li> <ul> <li>Serrano</li> <li>Jalapeno</li> <li>Habanero</li> <li>Anaheim</li> </ul> </li> <li>Szechuan</li> <li>Cayenne</li> Nesting Lists 93 5 Output . FIGURE 5.8 Nested lists. Do remember that you can change the numbering and bullet styles for lists to suit your preference. Do feel free to nest lists to any extent that you like. Don’t use the deprecated list types; use one of the other lists instead. Don’t number or format lists yourself; use the list tags. Don’t use list tags to indent text on a page; use Cascading Style Sheets. DO DON’T Download from www.wowebook.com ptg Other Uses for Lists Lists have moved a long way past simple bullets. As it turns out, lists are useful when designing web pages because of the structure they provide. Semantically speaking, there are many common elements of web design that naturally lend themselves to list-like structures. Here are some advanced examples of how lists are used that combine a num- ber of concepts that will be introduced throughout the book. Many websites have lots of navigation links to present, and to keep from cluttering up the page, they use nested pull-down menus similar to those used in desktop applications. In this lesson, you’ve already seen that you can create nested lists in HTML. You can put your navigation links in such lists and then use CSS to radically change their appearance so that rather than looking like other lists, they instead look and behave like menus. There’s an example of such menus in Figure 5.9. 94 LESSON 5: Organizing Information with Lists FIGURE 5.9 Pull-down naviga- tion menus implemented using lists. Using a combination of JavaScript and CSS, you can turn a standard HTML list into a sortable user interface element for a web application. You can see an example in Figure 5.10. FIGURE 5.10 A sortable list. Download from www.wowebook.com ptg You’ll see other uses of lists in later lessons. With the introduction of CSS, lists became one of the fundamental building blocks of web pages. Summary In this brief lesson, you got a look at HTML lists. Lists are a core structural element for presenting content on web pages and can be used for everything from the list of steps in a process to a table of contents to a structured navigation system for a website. They come in three varieties: ordered lists, which are numbered; unordered lists, which by default are presented bullets; definition lists, which are presented as a series of terms and the definitions associated with them. Not only are there CSS properties specifically associated with lists, but lists can also be styled using properties that apply to any block level element, like lists and list items. The full list of HTML tags discussed in this lesson is shown in Table 5.2, and the CSS properties are shown in Table 5.3. TABLE 5.2 HTML Tags from Lesson 5 Tag Attribute Use <ol> </ol> An ordered (numbered) list. Each of the items in the list begins with <li>. type Specifies the numbering scheme to use in the list. This attribute is deprecated in HTML 4.01. start Specifies at which number to start the list. This attribute is deprecated in HTML 4.01. <ul> </ul> An unordered (bulleted or otherwise marked) list. Each of the items in the list begins with <li>. type Specifies the bulleting scheme to use in the list. This attribute is deprecated in HTML 4.01. <li> </li> Individual list items in ordered, unordered, menu, or directory lists. The closing tag is optional in HTML, but is required in XHTML 1.0. type Resets the numbering or bulleting scheme from the current list element. Applies only to <ul> and <ol> lists. This attribute is depre- cated in HTML 4.01. Summary 95 5 Download from www.wowebook.com . of ingredients to be 10 , 11 , and 12 rather than 6, 7, and 8. You can reset the numbering at Eggs using the value attribute, as follows: <h1>Cheesecake Ingredients</h1> <ol> <li>Quark. style=“list-style-type: disc”> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Cassettes</li> </ul> <ul style=“list-style-type:. ptg Input ▼ <h1>The days of the week in French</h1> <ol style=”list-style-type: upper-roman”> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> <li>Jeudi</li> <li>Vendredi</li> <li>Samedi</li> <li>Dimanche</li> </ol> 86 LESSON