List Styles

You've already seen how to use font tags and paragraph tags. HTML also contains tags to format bulleted and numbered lists. A bulleted list is an unordered list, one where the physical order of the items is unimportant. Therefore, in HTML, you use a <ul> tag, which stands for unordered list, to create a bulleted list. You place a <li> (list item) tag around each item in the list:

<ul>Things To Do

<li>Go to the grocery store</li> <li>Pick up the dog from the vet</li> <li>Get a new computer</li> </ul>

You create a numbered list when the order of the items in the list is significant. In HTML, you use <ol>, or ordered list. You still use <li> tags for the list items, just as in an unordered list.

<ol><b>Things to do--in order</b> <li>Go to the grocery store</li> <li>Pick up the dog from the vet</li> <li>Shop for a new computer</li> </ol>

Figure 2.3 shows how these two list types appear in the browser.

fifc CiM r„ rMlH fuJl rfct

* - J .' 'J - -I J ..

Uc In ] r.ij>. jij-ct-a Zi K-

jj ¡ji< .rJii ■

Uaordertrt) Lid


Uaordertrt) Lid

+ ■f-'T' '■¡■■pfr-iiit.* vyr ' v'H I-VJ1WÜ ' Thi-Jrr

Oi iftnil Llil

Ihrjq lDit> El wpiwii

i Vi'-plTiffT " nprJr

Figure 2.3: List styles (ch2-2.htm)

You can nest lists one inside another. The browser indents subordinate lists one level beyond the containing list tag indent level (see Figure 2.4):

<ol><b>Things to do--in order</b> <li>Go to the grocery store</li> <li>Pick up the dog from the vet</li> <ul><b>Remember these items</b> <li>Buy a new dog-tag</li>

<li>Ask for new flea powder prescription</li> </ul>

<li>Shop for a new computer</li> </ol>

Figure 2.4: Nested lists (ch2-3.htm)

You can use several other text-formatting styles for special purposes. You'll find a complete list in Appendix A, "Quick HTML Reference." But a few are worth mentioning here.

As you've seen, the browser ignores line breaks. You can force a line break within a paragraph with the <br> (break) tag. For example, look at Listing 2.2 in your browser (and see Figure 2.5). The first paragraph doesn't contain any line breaks, whereas the second paragraph contains a line break at the end of each line. The first paragraph resizes if you shrink the browser window. The second paragraph resizes the lines as well, but it always keeps the explicit line breaks intact.

Listing 2.2: Explicit Line Breaks (ch2-4.htm)

<title>Explicit Line Breaks</title>

<h1>Explicit Line Breaks</h1>

<p>This paragraph doesn't contain any line breaks. The browser inserts the line breaks when it renders the file on-screen. The browser will readjust the line breaks if you resize the browser window.</p>

<p>This paragraph <i>does</i> contain line breaks.<br> The browser breaks the lines at the &lt;br&gt; tags.<br> when it renders the file on-screen.

The browser will <i>not</i> readjust the line breaks<br>

if you resize the browser window.</p>

Figure 2.5: Explicit line breaks (ch2-4.htm)

I'll end this formatting section with two short notes. First, many excellent HTML editors perform much of the tedious, low-level formatting for you, and I've seen many sites that use their advanced formatting features to great effect. However, until you're completely comfortable with basic HTML, you should avoid these advanced editors. The problem is that they do so much for you. The idea in this book is for you to understand HTML to the point where you are comfortable writing it with nothing more than a simple text editor. Therefore, I advise you to actually use a simple text editor until you're absolutely sure that you can edit any HTML that the advanced editors may insert.

Second, it's tempting to try to defeat the browser's default rendering of text, but you should avoid that temptation, again, until you have mastered the default renderings. I assure you that you can create very attractive and functional pages with nothing more than the default HTML commands. The more advanced HTML editors may actually inhibit your learning. You can specify the placement of text and images down to the pixel level in these editors. Keep in mind that they accomplish this absolute placement not through HTML commands, but instead with Cascading Style Sheets or embedded styles—both of which I'll cover briefly later in this chapter.

Was this article helpful?

0 0

Post a comment