Virginia's HTML—Text and Lists

©2005, Martin Rinehart html-intro-04.html

I said yesterday that we'd do lists today. But I remembered that we haven't even done basic text yet, so we'll do that first. It's easy.

Text Basics

The thing to remember is that HTML wraps text to fit into the browser window. Here's an example. The next box shows some HTML source text and the following box shows it scrunched into a tiny browser window.

This is a sentence that I typed into my HTML source file using my text editor.

Try resizing your browser window and watch the text wrap in the boxes.

Now lets get on to paragraphs. Here's a sample of how not to do it.

This is a poem.
About HTML.

Learn it now, and.
It will serve you well.

That's what I typed into my HTML file. But this is what it will look like when the browser wraps it.

This is a poem. About HTML. Learn it now, and. It will serve you well.

OK? So how did I make it look like a poem? I used two tags that don't have matching </TAG>s. They stand alone.

—break puts following text on a following line.
—paragraph starts a new paragraph (leaving space).

The poem-style version was really done this way.

This is a poem. 
About HTML.

Learn it now, and. 
It will serve you well.

So you have to remember as you type your content that paragraphs need to be separated with tags. Or, if you're like me, you happily forget the tags until you fire up the the page in your browser. Then you say, "Oh [explitive not appropriate for younger readers]" and go back and put the tags in.

Now to be thorough, I'll mention that there is a tag that uses a matching tag. You use it to force non-left alignment, this way.

This is a poem 
About HTML.
Learn it now, and. 
It will serve you well.

That comes out looking like this.

This is a poem
About HTML.

Learn it now, and.
It will serve you well.

Before you go on to lists, try adding some content to your virginia.html file. Use tags to separate your paragraphs. (Or forget the tags until you view your page in your browser. Then you can say, "Oh [explitive]" and go back and put the tags in.)

Unordered Lists

An unordered list is a bulleted list. (Ordered lists are numbered.) I use lots of them as they're easy and they communicate well. They use two tag sets.

<UL> </UL>—Unordered List begin and end.
<LI> </LI>—List Item begin and end.

You use as many <LI> </LI> pairs as you need between the <UL> and </UL> tags. Here's some sample HTML and its result.

Virginia cooks!
<UL>
 <LI>Coffee</LI>
 <LI>Popcorn</LI>
 <LI>Cookies</LI>
<UL>

Virginia cooks!

Coffee

Popcorn

Cookies

Note that you don't need a tag—the list separates itself from surrounding text. Also, the style of indenting the list items within the <UL> and </UL> tags doesn't mean anything to the browser, but it makes the HTML much easier to read (and to add new items at a later date).

You could have written it this way:

<UL><LI>Coffee</LI><LI>Popcorn</LI><LI>Cookies</LI></UL>

That would come out just the same in the browser, but it would be quite a mean trick to play on the person who comes along later wanting to update the list. That person might be you, so be kind to yourself.

Ordered Lists

When you want an ordered (numbered) list, simply change from <UL> and </UL> tags to <OL> and </OL> tags. Here's a sample.

Virginia cooks! In order of skill required, she makes:
<OL>
 <LI>Cookies</LI>
 <LI>Coffee</LI>
 <LI>Microwave Popcorn</LI>
</OL>

Virginia cooks! In order of skill required, she makes:

Cookies

Coffee

Microwave Popcorn

You might want different numbering. For that the <OL> tag supports the TYPE=? attribute. The default type is "1", for arabic numerals. Here are all the options.

<OL TYPE="1"> <OL TYPE="A"> <OL TYPE="a"> <OL TYPE="I"> <OL TYPE="i">

Cookies

Coffee

Microwave Popcorn

Cookies

Coffee

Microwave Popcorn

Cookies

Coffee

Microwave Popcorn

Cookies

Coffee

Microwave Popcorn

Cookies

Coffee

Microwave Popcorn

Lists in Lists

What can you put between <LI> and </LI> tags? So far, we've just had text, but you can put images, tables and other lists, too. Here's an example of nested lists. Note how the browser intelligently handles the bullets.

Virginia is:
<UL>
 <LI>A student at SUNY Albany</LI>
 <LI>An avid tennis player</LI>
 <LI>A great cook!
 <UL>
 <LI>Coffee</LI>
 <LI>Popcorn</LI>
 <LI>Cookies</LI>
 </UL>
 </LI>
<UL>

Virginia is:

A student at SUNY Albany

An avid tennis player

A great cook!

Coffee

Popcorn

Cookies

Now you've got text and lists added to your toolkit. Along with headings and color you should be able to produce a decent virginia.html file. Put one up at www.virginiarinehart.com and I'll explain how to expand it to a multi-page, hyperlinked website.