Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P11 ppt

Lists, Lists, and More Lists You can customize ordered lists in two main ways: how they're numbered and the number with which the list starts. HTML 3.2 provides the type attribute that can take one of five values to define which type of numbering to use on the list: ● "1" Specifies that standard Arabic numerals should be used to number the list (that is, 1, 2, 3, 4, and so on) ● "a" Specifies that lowercase letters should be used to number the list (that is, a, b, c, d, and so on) ● "A" Specifies that uppercase letters should be used to number the list (that is, A, B, C, D, and so on) ● "i" Specifies that lowercase Roman numerals should be used to number the list (that is, i, ii, iii, iv, and so on) ● "I" Specifies that uppercase Roman numerals should be used to number the list (that is, I, II, III, IV, and so on) You can specify types of numbering in the <ol> tag, as follows: <ol type="a">. By default, type="1" is assumed. Note The nice thing about web browsers is that they generally ignore attributes they don't understand. If a browser didn't support the type attribute of the <ol> tag, for example, it would simply ignore it when it's encountered. As an example, consider the following list: <p>The Days of the Week in French:</p> <ol> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> <li>Jeudi</li> <li>Vendredi</li> <li>Samedi</li> <li>Dimanche</li> </ol> If you were to add type="I" to the <ol> tag, as follows, it would appear in a browser as shown in Figure 4.5. Input <p>The Days of the Week in French:</p> <ol type="I"> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> <li>Jeudi</li> <li>Vendredi</li> file:///G|/1/0672328860/ch04lev1sec5.html (4 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists <li>Samedi</li> <li>Dimanche</li> </ol> Output Figure 4.5. An ordered list displayed using an alternative numbering style. You also can apply the type attribute to the <li> tag, effectively changing the numbering type in the middle of the list. When the type attribute is used in the <li> tag, it affects the item in question 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. For example, you can list the last six months of the year, and start numbering with the Roman numeral VII as follows. The results appear in Figure 4.6. Input <p>The Last Six Months of the Year (and the Beginning of the NextYear):</p> <ol type="I" start="7"> <li>July</li> <li>August</li> <li>September</li> <li>October</li> <li>November</li> <li>December</li> <li type="1">January</li> </ol> Output Figure 4.6. An ordered list with an alternative numbering style and starting file:///G|/1/0672328860/ch04lev1sec5.html (5 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists 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: <p>Cheesecake ingredients:</p> <ol type="I"> <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> Note In this section's examples, all the attribute values are enclosed in quotation marks. Most web browsers don't require you to use quotation marks this way, but XHTML 1.0 does. Unordered Lists In unordered lists, the elements can appear in any order. An unordered list looks just like an ordered list in HTML 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. file:///G|/1/0672328860/ch04lev1sec5.html (6 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists Browsers usually format unordered lists by inserting bullets or some other symbol; Lynx, a text browser, inserts an asterisk ( *). The following input and output example shows an unordered list. Figure 4.7 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> Output Figure 4.7. An unordered list. Customizing Unordered Lists As with ordered lists, unordered lists can be customized with HTML 3.2 attributes. (These are also deprecated in HTML 4.01.) By default, most browsers, including Netscape and Internet Explorer, use bullets to delineate entries on unordered lists. Text browsers such as Lynx generally opt for an asterisk. If you use the type attribute in the <ul> tag, some browsers can display other types of markers. According to the HTML 3.2 specification, the type attribute can take three possible values: ● "disc" A disc or bullet; this style is the default. ● "square" Obviously, a square rather than a disc. ● "circle" As compared with the disc, which most browsers render as a filled circle, this value should generate an unfilled circle. In the following input and output example, you see a comparison of these three types as rendered in a file:///G|/1/0672328860/ch04lev1sec5.html (7 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists browser (see Figure 4.8). Input <ul type="disc"> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Cassettes</li> </ul> <ul type="square"> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Cassettes</li> </ul> <ul type="circle"> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Cassettes</li> </ul> Output Figure 4.8. Unordered lists with different bullet types. Just as you can change the numbering scheme in the middle of an ordered list, you can change the type of bullet midstream in a list by using the type attribute in the <li> tag. Again, this attribute is deprecated in HTML 4.01. An alternative approach is to use style declarations to specify the bullet type for a list or list item. The property to set is list-style-type. To change the style from disc (the default) to square, you would use the following tag: <ol style="list-style-type: square"> </ol> file:///G|/1/0672328860/ch04lev1sec5.html (8 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists The list-style-type property is also used to control the numbering style used for ordered lists. The valid values are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none. If you set it to none, no bullet or numbering will be shown for the list. You can also alter this property for individual items in a list. For example, you could create a list like this: <ol style="list-style-type: circle"> <li style="list-style-type: square">One</li> <li style="list-style-type: disc">Two</li> <li>Three</li> </ol> There are a number of other properties associated with lists. The list-style-type property simply provides an alternative to the deprecated type attribute. With CSS, you can go much further. For example, using the white-space property, you can define how white space is handled when lists are rendered. By default, a line break follows every list item. You can change that to pre, which prints the text exactly as it is formatted in the source, or nowrap, which leaves out the line breaks. 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. I'll discuss images later in Lesson 7, "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 beginning of the text on the first line. If you prefer that they begin at the position of the bullet or list number, use the list-style- position property: <ul style="list-style-position: inside"> <li>Example</li> </ul> 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 property. You can specify three values for list-style: the list style type, the list style position, 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 at once. Here's an example: file:///G|/1/0672328860/ch04lev1sec5.html (9 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists <ul style="list-style: circle inside URL(/bullet.gif)"> <li>Example</li> </ul> Bear in mind that not all browsers support the manipulation of these propertiesin particular, older browsers almost certainly don't. Glossary Lists Glossary lists are slightly different from other lists. Each list item in a glossary list has two parts: ● A term ● The term's definition 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: <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 usually are formatted in browsers with the terms and definitions on separate 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: <dl> <dt>Macbeth</dt> <dd>I'll go no more. I am afraid to think of what I have done; look on't again I dare not.</dd> <dt>Lady Macbeth</dt> <dd>Infirm of purpose! Give me the daggers. The sleeping and the dead are as but pictures. 'Tis the eye if childhood that fears a painted devil. If he do bleed, I'll gild the faces if the grooms withal, for it must seem their guilt. (Exit. Knocking within)</dd> <dt>Macbeth</dt> <dd>Whence is that knocking? How is't wit me when every noise apalls me? What hands are here? Ha! They pluck out mine eyes! Will all Neptune's ocean wash this blood clean from file:///G|/1/0672328860/ch04lev1sec5.html (10 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists my hand? No. This my hand will rather the multitudinous seas incarnadine, making the green one red. (Enter Lady Macbeth)</dd> <dt>Lady Macbeth</dt> <dd>My hands are of your color, but I shame to wear a heart so white.</dd> </dl> The following input and output example shows how a glossary list is formatted in a browser (see Figure 4.9). 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> Output Figure 4.9. A glossary list. 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: file:///G|/1/0672328860/ch04lev1sec5.html (11 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists <ol> <ul> <li>WWW</li> <li>Organization</li> <li>Beginning HTML</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>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 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 4.10). Input <h1>Peppers</h1> <ul> <li>Bell</li> <li>Chile</li> <ul> <li>Serrano</li> <li>Jalapeno</li> <li>Habanero</li> <li>Anaheim</li> </ul> <li>Szechuan</li> <li>Cayenne</li> </ul> Output Figure 4.10. Nested lists. file:///G|/1/0672328860/ch04lev1sec5.html (12 von 13) [19.12.2006 13:48:34] Lists, Lists, and More Lists DO DON'T DO remember that you can change the numbering and bullet styles for lists to suit your preference. DON'T use the deprecated list types; use one of the other lists instead. DO feel free to nests lists to any extent that you like. 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. file:///G|/1/0672328860/ch04lev1sec5.html (13 von 13) [19.12.2006 13:48:34] . 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. of spring and fall.</dd> </dl> Glossary lists usually are formatted in browsers with the terms and definitions on separate lines, and the left margins of the definitions are indented. You. 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