To MelsGraphics.com Html 201-Tables Lessons Html 101 Lessons Html 301 Lessons CSS Lessons Html 201-Frames Lessons Html 201-Forms Lessons
HOME     HTML301 INTRO      LESSON 1     LESSON 2     LESSON 3

Un oh,ine makin a mess!!

                 ~Welcome to My Homework Pages~


Image of books HTML 301 Lesson One  page 1 of 4 >                                               
LISTS
In HTML there are 3 types of lists.

  1. The Unordered List (with bullets)
  2. Ordered List (with numbers)
  3. and the third is a Definition List

   
Sample of Unordered List:

  • unordered
  • list is noted
  • for its'
  • bullets
To WebTech University


Sample of Ordered List

  1. Ordered
  2. List is noted
  3. for being
  4. numbered

The UNORDERED LIST
The unordered list (as seen above) is noted for the bullets. Tags for an Unordered List are:

<ul> ( indicating an unordered list)
<li> the first list item </li>
<li> the next item </li>
</ul> ( ending the li's)


The ORDERED LIST
The Ordered List (as above) is constructed exactly the same way, except you use the <ol>.....</ol> tag.

(indicating the start of an ordered list)
<li> the first item </li>
<li> the second item </li>
</ol> (the end of the list)

See the logic; ul for Unordered List, and ol for Ordered List. eeekks I hope she dont't find me

MORE CHOICES FOR THE ORDERED LIST
The standard numbers are the default for an ordered list, but you have several other choices.....

Can of Paint
Alphabetical - lower case
<ol type="a">
  1. lower case alphabetical
  2. second list item
Alphabetical - upper case
<ol type="A">
  1. Upper Case Alphabetical
  2. second list item
Roman Numerals - lower case
<ol type="i">
  1. Lower Case Roman
  2. second list item
Roman Numerals - upper case
<ol type="I">
  1. Upper Case Roman
  2. second list item

The list items in an ordered list are automatically numbered by the browser - insert an item into the list and
the numbers will adjust. There is one trick you can use apart from specifying the number/letter type. You
can tell the list where to start, or what number a list item should be.
Dripping paint, What a mess!!

  1. This list starts at number 5
  2. and the next item follows on from there
  3. or does it?
  4. but this one does.

How did I do that? Quite simple, just tell it. Look at the HTML I used for that list:

<ol start="5">
<li>This list starts at number 5</li>
<li>and the next item follows on from there</li>
<li value="10">or does it?</li>
<li>but this one does.</li>
</ol>

See how I told it where to start, and then where I told it to make a list item the number 10?

Next page.

~ Learning Can be Fun ~

Html 201-Tables Lessons Html 101 Lessons WebTech University Html 201-Frames Lessons Html 201-Forms Lessons