If you're like me you like to keep things organized. Lists can help us do that very nicely on our pages. There are three different types of lists you will learn here:
The list you see above is called the Unordered list. This is a list of several items, listed in any order, which are indented by a bullet. Your bullet style is done by default, you do not have to have a special graphic to get the dot. However, you may use your own bullets, I will show you how later.
The Unordered List tags are <UL> and </UL>. Easy! UL for Unordered List. We have a beginning and ending tag that will surround our list.
One more tag...our List Item tag is <LI>. This tag is used inside the unordered list tags (above) for EACH item you want to list.
OK...let's try this out. Let's begin with our codes on our document. This is how we will list them...
For every list item <LI> above we will list our items. You can have as few or as many items as you want. Just keep adding the LI line for every item you wish to list. Make sure you have an introductory line in front of your list telling everyone what you are listing.
Let's add this to our page, but fill in your favorites.
Some of my favorite foods are:
Another thing we can do is make Nested Lists, lists inside each other. Let's try setting it up first...notice the new sets of lists are indented. You can do this on your HTML document too, it makes it easier to see where the lines start. You only need to indent them three or four spaces.
Now, let's fill that in...
Some of my favorite foods are:
<UL>
See how with the Pizza line I added more List Items, <LI>, again you can add as many as needed. Also note that there are two closing </UL> tags at the bottom. The first one closes out the list indented, the second one closes out the whole list, so they are both correct. It is very important to keep track of the codes when doing the lists.
This is how the list will really look, notice the second item indented has a different bullet:
Some of my favorite foods are:
Add something about each of your favorite foods. You might want to try setting up the codes first and then filling in the lines.
Suppose you want to create a list, but you need the numbers to show up, mainly because you want your list in a special order. This is called the Ordered List and the codes to use are <OL> and </OL>. Again your default on your computer will just add the numbers in for you. Cool!
Let's practice...
The lessons are:
And this is what it will look like:
The lessons are:
Yes, you can combine unordered and ordered lists. I can add numbers to my pizza items above by just changing the unordered list code <UL> </UL> to the ordered list code <OL> </OL>...like this:
Some of my favorite foods are:
Add an ordered list to your page. Use mine or get creative and make one of your own. If you would like to try combining and nesting lists, go for it!
Definition lists display lists which contain a term with its definition. The definition tags do not have bullets with them like the other two tags. It also does not use the Line Item tag <LI>. The two main tags we will use are <DL> and </DL>.
Inside those tags will be our Definition Term tags <DT> and </DT>. This is where we will list the word we are defining.
After the definition tags, but before the closing Definition List tag </DL> will be the corresponding definition tags, they are <DD> and </DD>. This tag will always follow immediately after the DT tags above.
Ok...let's try this out...it's not really all that confusing. Let's set up our tags:
<DL>
Now let's try to insert some terms with definitions...
This is what the above code will look like...
Add a definition list to your page. Use mine or get creative and make one of your own.
Please use the email link below if you have any questions about your lesson.
<UL>
<LI>
<LI>
<LI>
</UL>
<UL>
<LI>Chicken and Dumplings
<LI>Hot Chicken Wings
<LI>Pizza
</UL>
<UL>
<LI>
<UL>
<LI>
</UL>
<LI>
<UL>
<LI>
</UL>
<LI>
<UL>
<LI>
</UL>
</UL>
<LI> Chicken and Dumplings
<UL>
<LI> A recipe from my great-grandmother
</UL>
<LI> Chicken Wings
<UL>
<LI> We are from Western New York
</UL>
<LI> Pizza, some of my favorite toppings are:
<UL>
<LI> Mushrooms
<LI> Pepperoni
<LI> Olives
</UL>
</UL>
<OL>
<LI> What you need to get started
<LI> Glossary
<LI> The beginning codes
</OL>
<DT> </DT>
<DD> </DD>
<DT> </DT>
<DD> </DD>
<DT> </DT>
<DD> </DD>
</DL>
<DL>
<DT>HTML</DT>
<DD>HyperText Machine Language</DD>
<DT>Angel Brackets</DT>
<DD>Two characters we use around all of our codes.</DD>
<DT>Browser</DT>
<DD>The program that allows you to view information on the web.</DD>
</DL>
