Lists

There comes a time in most web page development where each webmaster wants to show the viewer a list of items. This could be anything from products at a store to little Johnny's card collection and how rich he thinks he will get with each. In this assignment you will learn how to list items to your viewer so that they can easily pick out each item.

At the end of this assignment you should be able to...

• INSTRODUCTION
• (1) Create a list of items
• (2) Define how the list is shown
• (3) Understand lists within lists

Okay, you are now ready to put a list of items on your web page. The first thing you must instruct the browser is that you want to start and end a list.

Hint: Always start and end your sections of code before you place the information, this will avoid future headaches. For instance, when using the bold command '<b>' you should type: <b></b> and then fill in what you want bolded between the commands. This simple rule will save you hours of debugging later when your page becomes 100's of lines and you can't remember where you start and end your commands (especially commands like <table> and the list commands I am about to teach you).

And now..."drum roll please"! The list commands:

---

There are two commands used to create lists in HTML. The first is the <ul> (unordered), and the second is the <ol> (ordered) command.

<ul>: The <ul> command is used when you want to display a list of items with no particular number/lettering before each item. For example, if I wanted to list all the socks that my dryer has stolen from me and placed in the black hole I could do the following:

Socks that are M.I.A. due to my dryer: half ankle white sock striped full length sock world's softest sock (I miss this one the most) wife's sock with fuzzy thing on it (this one I don't mind losing)

Code Used <b>Socks that are M.I.A. due to my dryer:</b> <ul> <li> half ankle white sock <li> striped full length sock <li> world's softest sock (I miss this one the most) <li> wife's sock with fuzzy thing on it (this one I don't mind losing) </ul>

Note: The <li> command is one of the exceptions where you do not need an ending command. Notice how I did not place any </li> commands?

Now it's time to work. Access your page 3 and put the code for a basic page. Title the page in a manner that you will be showing a list of items about your animal. In the code of the page, place a list about your animal that deals with things it likes with a minimum of 5 items. I don't want numbers/letters in front of each item, just the little black dot. I wouldn't go beyond 10 items unless you really want to do a lot of work?

For an example, see my page 3.

Notice how I did not have any <br> commands in my list? The <li> (list item) command automatically breaks to the next line and places the • before the item you want listed. You may have also noticed that the list is indented a little to the right? The command <ul> or <ol> will automatically indent your list to the right. When you end the list command with a </ul> or </ol> command, the browser will automatically move back to the left.

<ol>: The <ol> command is used when you want to display a list of items with numbers/letters before each item. For example, if I wanted to list what I would buy if I found a dollar bill on the street in order of what I would most likely buy, I could do the following:

Items I would buy with a Free dollar bill: candy bar soda pop sock (to replace one my dryer stole) pay off $1's worth of a credit card bill

Code Used <b>Items I would buy with a Free dollar bill:</b> <ol> <li> candy bar <li> soda pop <li> sock (to replace one my dryer stole) <li> pay off $1's worth of a credit card bill </ol>

More work! Access your page 3 and add code so that you have another list beneath your first list, this time listing items your animal dislikes. This time I want each item to have a number in front of it.

For an example, see my updated page 3.

Since the <ol> command allows the list to be numbered or lettered, you can specify how you want the browser to list the items. This is done by giving the <ol> command an attribute called type. For example, I am going to do the same list above but have the browser use lettering instead of numbers for the items:

Items I would buy with a Free dollar bill: candy bar soda pop sock (to replace one my dryer stole) pay off $1's worth of a credit card bill

Code Used <b>Items I would buy with a Free dollar bill:</b> <ol type="A"> <li> candy bar <li> soda pop <li> sock (to replace one my dryer stole) <li> pay off $1's worth of a credit card bill </ol>

There are 5 types of listings you can accomplish in the <ol> command by using the type attribute:
• type="A", will list items using uppercase letters
• type="a", will list items using lowercase letters
• type="I", will list items using uppercase roman numerals
• type="i", will list items using lowercase roman numerals
• type="1", will list items using numbers (default)

As you may have noticed, the <ol> command defaults to numbers, unless you specify a different format for the listing. When a command has a default, it means the command will automatically do something a particular way unless you specifically instruct it to do it another way. Another example of this is the <font> command. The <font> command defaults to the color black unless you enter an attribute for a color like: <font color="blue">

More work? Yep, that's right. Access your page 3 and add code so that you have another list beneath your second list, this time listing other animals your animal would not get along with. This time I want each item to have a lowercase letter in front of it.

For an example, see my updated page 3.

There are (2) great advantages to using either the <ul> or the <ol>.

The first is that when you add or remove items from the list (and you will), the browser will handle the numbering/lettering for the items. This saves a lot of time when you have large lists and decided to add/remove something from that list. In the old days of word processors/typewriters, if you created a list with 100 ways to tickle a frog and later decided item #36 should be removed because some old people were offended by the notion of using a feather brush on a frog, you would have to go to each item after #36 and renumber them. But with HTML, you can just simply remove the line with the feather brush, and the next time someone views your page the items will all numbered correctly.

The second is that you can included lists within lists and the browser will handle making the items/lists look proper within each other. For example, lets say I wanted a list of animals and beneath each animal I wanted to list some of their traits:

Animals and something about them: frog green as green can be loves to jump hyena no manners laughs way to much blue bellied snort blast needs to cut down on the blueberries won't win any beauty contest

Code Used <b>Animals and something about them:</b> <ul> <li> frog <ul> <li> green as green can be <li> loves to jump </ul> <li> hyena <ul> <li> no manners <li> laughs way to much </ul> <li> blue bellied snort blast <ul> <li> needs to cut down on the blueberries <li> won't win any beauty contest </ul> </ul>

The last bit of work in this assignment....yeahh! Access your page 3 and add code so that all the following happens: Place a list under your 2nd and 3rd items in the first list that give 2 reasons why your animal likes those particular items Place a list under your 1st and 4th items in the second list that give 2 reasons why your animal dislikes those particular items Lastly, place a list in any of the items listed in the third list describing 2 reasons why that animal would not get along with your animal For professionalism and making moving around easier on your viewer, you should place a link on your page 3 to your page 1 and page 2. The links should be something like "My Animal's Home Page" and "An Advertisement On My Animal". Of course you should use your own words and flair for creativity.

For an example, see my updated page 3.

TIP: When doing a list like <ul>, note that you can place information inside the list without using the <li> command. That information will still be indented inside the list but will not automatically break or place a black dot/number/letter next to the information. Like on my Page 3, notice how I was able to put the word Reasons inside the list as a title but without using the <li> command? Once I used the <li> command, it automatically went to the next line and placed a black dot/number/letter.