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

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 t

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>

<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

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

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

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>

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:

<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

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:

<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.

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

list tags

DON'T use list tags to indent text on a page;

use Cascading Style Sheets