Tự học HTML và CSS trong 1 giờ - part 12 doc

The days of the week in French Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche FIGURE 5.2 An ordered list displayed using an alternative numbering style.. December January 5 FIG

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

FIGURE 5.2

An ordered list

displayed using

an alternative

numbering style.

You can also use the list-style-typeproperty or the typeattribute 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

thestartattribute, 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 cand move through the alphabet from there

The value for the startattribute 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

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

<li>December</li>

<li style=”list-style-type: lower-roman”>January</li>

</ol>

5

FIGURE 5.3

An ordered list

with an alternative

numbering style

and starting

number.

As with the typeattribute, you can change the value of an entry’s number at any point in

a list You do so by using the valueattribute in the <li>tag Assigning a valuein 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 Eggsusing the valueattribute, 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 (*)

The following input and output example shows an unordered list Figure 5.4 shows the

results in a browser

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

FIGURE 5.4

An unordered list.

Customizing Unordered Lists

As with ordered lists, unordered lists can be customized using the typeattribute or the

list-style-typeproperty 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-typeand for the typeattribute 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):

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

5

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

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-positionproperty:

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

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

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):

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

5

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

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

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):

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

5

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.

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

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.

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

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

5