Lesson 6. Basic list types for your page.

list logo


ratty looking student tapping away on a computer Make a bullet list.
Make a numbered list.
Make a list of definitions.
Make a list within another list.
Write the Code.

Lists are a part of our daily life. We make Xmas lists of 'desired prezzies' when we are kids (and adults), grocery lists when we need food and mental lists of things we plan to do. I bet you even made a list of 'New Year's resolutions' for this wonderful new millennium. Creating lists on your page neatens your text a tad and makes for easier reading. Let's go ahead and learn to make some of the simplest types.


picture of a list with a quill pen Make a bullet list.

First, type a pair of UL tags : <UL> </UL>
UL=Unnumbered list

Between the 2 UL tags, add <LI> followed by the items in your list. (LI=list)

<UL>
<LI>1st list thingy.
</UL>
 <UL>
<LI>1st list thingy.
<LI>2nd list thingy.
</UL>
 <UL>
<LI>1st list thingy.
<LI>2nd list thingy.
<LI>3rd list thingy.
</UL>

My birthday list : (For June 2nd, hint! hint!)
<UL>
<LI>Yummy Tim Tams. (Hard to find in Japan.)
<LI>A birthday greeting from sexy singer, 'Marc Anthony'.
<LI>A Luis Vargas 'bachata' CD.
<LI>A pair of size 10 shoes to dance salsa in.
<LI>A short, flippy dress.
<LI>A handsome 'salsa' partner with puppy dog eyes???
</UL>

Will look like this on your page :

My birthday list : (For June 2nd, hint! hint!)

  • Yummy Tim Tams. (Hard to find in Japan.)
  • A birthday greeting from sexy singer, 'Marc Anthony'.
  • A Luis Vargas 'bachata' CD.
  • A pair of size 10 shoes to dance salsa in.
  • A short, flippy dress.
  • A handsome 'salsa' partner with puppy dog eyes???
Note : You can add as many <LI> as you want. I only put in 6 because I did'nt want to look too greedy. My 'mental birthday list' is a lot, lot longer.

picture of a list with a quill pen Make a numbered list.

To make a numbered list is almost identical to making a bullet list. The only difference is that your LI tags go between a pair of OL tags and not UL tags. (OL=Ordered List.)

<OL>
<LI>1st list thingy.
</OL>
 <OL>
<LI>1st list thingy.
<LI>2nd list thingy.
</OL>
 <OL>
<LI>1st list thingy.
<LI>1st list thingy.
<LI>3rd list thingy.
</OL>

Here is another example of one of my many lists.

My (condensed) list of New Year's Resolutions and wants.
<OL>
<LI>I will eat as many Tim Tams as I like and not feel guilty.
<LI>I'll try and get to America to see a 'Marc Anthony' concert.
<LI>I'll learn how to dance tango and samba well.
<LI>I'll stop bashing my computer when it doesn't do what I want.
<LI>I'll call my mother in Australia more from Japan.
<LI>I'll find a handsome 'salsa' partner with puppy dog eyes.
</OL>

Will look like this on your page :

My (condensed) list of New Year's Resolutions and wants.

  1. I'll eat as many Tim Tams as I like and not feel guilty.
  2. I'll try and get to America to see a 'Marc Anthony' concert.
  3. I'll learn how to dance tango and samba well.
  4. I'll stop bashing my computer when it doesn't do what I want.
  5. I'll call my mother in Australia more from Japan.
  6. I'll find a handsome 'salsa' partner with puppy dog eyes.

Note : You can add as many <LI> as you want, and when you add or remove lines to your list, they will automatically be given the 'right number'.


picture of a list with a quill pen Make a list of definitions.

This kind of list is very convenient as it allows you to make a list of topics or terms, each followed by an indented paragraph.

  • First, you need to have a pair of DL tags. <DL></DL> (DL=Definition List)
  • Next, inbetween your pair of DL tags, you need to type <DT> followed by your first topic or term. (DT=Definition Term)
  • Immediately following your DT tag is the <DD> tag. With this tag you write whatever text you like that you want to come under the topic or term you wrote. (DD=Definition Data)

<DL>
<DT>1st term.
<DD>Text to follow 1st term.
</DL>
 <DL>
<DT>1st term.
<DD>text.
<DT>2nd term.
<DD>text.
</DL>
 <DL>
<DT>1st term.
<DD>text.
<DT>2nd term.
<DD>text.
<DT>3rd term.
<DD>text.
</DL>

Wanna see the code for another of my 'happening lists'?

<DL>
<DT>HTML
<DD>Stands for Hypertext Markup Language - Computer codes used to make Web pages and publish information on the Internet.
<DT>Internet
<DD>A cooperative message forwarding system that connects computer networks worldwide. Originated from ARPA Net (U.S. Defense Department experimental network), BITNET and USENET. Not to be confused with the World Wide Web. (WWW)
<DT>WWW
<DD>Stands for World Wide Web - A set of connected computer sites publishing information via the Internet using http. (Hypertext Transfer Protocol). It's only one of several forms of communication that take place on the Internet.
<DT>HTTP
<DD>Stands for Hypertext Transfer Protocol - One way of publishing information on the Internet. (Information is published as hypertext in HTML format)
</DL>

Will look like this on your page :

HTML
Stands for Hypertext Markup Language - Computer codes used to make Web pages and publish information on the Internet.
Internet
A cooperative message forwarding system that connects computer networks worldwide. Originated from ARPA Net (U.S. Defense Department experimental network), BITNET and USENET. Not to be confused with the World Wide Web. (WWW)
WWW
Stands for World Wide Web - A set of connected computer sites publishing information via the Internet using http. (Hypertext Transfer Protocol). It's only one of several forms of communication that take place on the Internet.
HTTP
Stands for Hypertext Transfer Protocol - One way of publishing information on the Internet. (Information is published as hypertext in HTML format)
Pretty cool looking and easy to do 'eh?

picture of a list with a quill pen Nested Lists / Lists within lists.

Another interesting way to present information is make a list within a list. (nesting lists)
If you can't remember what nesting means, nip back to lesson 2 for a quick refresher.

Have a look at an example of a 'bullet' or 'unordered' list of my favorite types of music.
It has 2 'numbered / ordered' lists of specific songs I like 'nested' inside it.

Music to 'shake your booty' to.

  • salsa
    1. "Bailamos" by Enrique Iglesias - Cool son of good ol' Julio.
    2. "Vuelvo a nacer" by Frankie Ruiz
    3. "Volvere" by Dark Latin Groove (DLG) - Group of very 'with it' latinos.
    4. "Que habia sido de mi" by Victor Manuel -Voice as smooth as silk
    5. Any salsa by Marc Anthony!!!! - My perfect man!!!!

  • Merengue (Pronounced Me /as in men/ - ren - gay )
    1. "Candella" by Projecto Uno - Very hip-hoppish
    2. "Tu sonrisa" by Elvis Crespo - I get all tingly with this one
    3. "Salome" by Chayanne - Shake your booty with this one!
    4. Any merengue by Marc Anthony!!! - He's engaged. Waaaah!

Ok! Now, before I show you the HTML code for the above nested lists, I want you to try and figure out the code yourself. Just sit down and have a think and when you're ready click here!


Write the Code! hard-working baldy scribbling out this html problem

Look at the following 'nested' lists of my 'hollywood faves' and write out its HTML code.

Some really 'yummy' actors.

  1. Daniel Day-Lewis.
    • My Left Foot
    • My Beautiful Laundrette
    • In the Name of the Father
    • The Last of the Mohicans
    • The Crucible

  2. Antonio Banderas.
    • The Mambo Kings
    • Interview With a Vampire
    • Desperado
    • Evita
    • The Mask of Zorro

  3. Andy Garcia.
    • When a Man Loves a Woman
    • Steal Big Steal Little
    • Blood of the Poet
    • Just the Ticket
    • Just to be Together

  4. Marc Anthony. (Yes, he acts too!)
    • Hackers
    • Big Night
    • The Substitute
    • Bringing out the Dead
    • The Capeman (Paul Simon's Musical)

Have you written out the HTML code for the above list yet??? No fibbing please! Ok,I trust you. Go and check the code.

Top of page.
Back to lesson 5. hand pointing left hand pointing up hand pointing rightGo to the next lesson.

jumping kangaroo Back to index page.

picture of heartThank you for visiting this page
Click to peruse our SpinNet Homepage.
COPYRIGHT
Page created by Kimberly Rigby. / For any comments or questions, click here!