HTML Lesson #2
© D. Weinberger and D. Thiébaut

HTML Lesson #2

Creating ordered lists

Lists in HTML are created with--you will have guessed--tags! The first tag, <OL> is used to create Ordered Lists, where each item in the list is prefixed with a <LI> tag (for List Item).

Here is an example:

Recipe for crêpes à la Dominique <OL> <LI>One and a half cup of flour <LI>Two eggs <LI>1 half teaspoon of salt <LI>1 half teaspoon of baking soda <LI>Two cups of light beer <LI>1 tablespoon of sugar <LI>1 teaspoon of vanilla extract <LI>1 tablespoon of melted butter </OL>

The result is this:

Recipe for crêpes à la Dominique One and a half cup of flour Two eggs 1 half teaspoon of salt 1 half teaspoon of baking soda Two cups of light beer 1 tablespoon of sugar 1 teaspoon of vanilla extract 1 tablespoon of melted butter

Unordered Lists

You could also create a bulleted list by replacing the <OL> tags with <UL> tags, for Unordered List.

Here is the code for a bulleted list:

Chocolate brings to mind marvelous gratification: <UL> <LI>Children... relish it <LI>Lovers... share it <LI>Chocoholics... stash it <LI>Stock brokers... dabble in it <LI>Wealthy people... lavish in it <LI>Pregnant women... crave it <LI>Designers... market it <LI>Women... need it <LI>Sensualists... indulge in it <LI>Pagans... worship it <LI>Hedonists... enjoy it <LI>Everyone... eats it </UL> <P> Elaine Sherman<BR> 20th-century American writer

The result is this:

Chocolate brings to mind marvelous gratification: Children... relish it Lovers... share it Chocoholics... stash it Stock brokers... dabble in it Wealthy people... lavish in it Pregnant women... crave it Designers... market it Women... need it Sensualists... indulge in it Pagans... worship it Hedonists... enjoy it Everyone... eats it Elaine Sherman 20th-century American writer

Your turn!

It is now your turn to create (or modify) a page so that it contains both an ordered, and an unordered list.

You can either modify the page you created yesterday, or start one from scratch. I will assume the latter. Follow these simple steps that will create a new html file in your public_html directory:

        % cd
        % cd public_html  
        % cp webpageskel.htm  listdemo.htm
        % chmod  a+r  *
        % emacs  listdemo.htm

The third command copies the skeleton file into a new file called listdemo.htm. The fourth command makes the new file public. The last one starts the editor.

Create the following ordered list:

Main steps of the scientific process: make observations ask questions form hypotheses, models, theories design prototypes test theories communicate results

Instead of saving your file and terminating emacs, you can use a new command: C-X C-S. It saves the file but does not terminate emacs. It is a good way to keep working on the file while view its new version with the navigator. Does it look the way you want? If you want to add vertical space between the items of the list, you can prefix each <LI> tag with a <P> tag.

Now, in the same page, create the following unordered list:

Oral presentation Written reports Web pages

Once it looks the way you want, combine the two lists, as follows:

Main steps of the scientific process: make observations ask questions form hypotheses, models, theories design prototypes test theories communicate results: Oral presentation Written reports Web pages

Miscellaneous

If you want to make a word appear in bold, simply put <B> tags around it, as shown here: <B>words in bold</B>. Identically, you can make characters appear in italics form by using the <I> tag: <I>this sentence is in italics</I>.