My First Web Page - Step 3
We use the list to itemise a list of items.
You need to learn this right because this element is very useful and powerful. Later, we're going use the list for our navigation; be it horizontally or vertically.
Now you'll just code the simple ordered and unordered list.
Ordered list by default gives us the numbered list and unordered list with a dot. While all these can be customized, I shall not cover them for the time being.
Code a unordered list with <ul> </ul> and ordered list with <ol> </ol>
Let's start with the unordered list below Header 2:
<ul> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> </ul>
Repeat the same for Ordered list under Header 3:
<ol> <li>This is item one</li> <li>This is item two</li> <li>This is item three</li> </ol>
On your screen, this is what you should see:
This is Header 1
This is my first page.
This is Header 2
- This is the first item
- This is the second item
- This is the third item
This is Header 3
- This is item one
- This is item two
- This is item three
This is Header 4
This is Header 5
This is Header 6
Learning the List
As we could see from the above example, the unordered list comes with the bullet form while the ordered list with numbers.
Both the orderered and unordered list are configurable. We could have the ordered list in ABC, abc, i ii iii...
Learn this tag seriously. It's application is very wide.
When we nest the list, it can be very complicated.
Another thing to know: list is commonly used for both the horizontal (see header of this page ) and vertical navigation.
Repeat repeat and repeat
Again, if you didn't get it right, repeat until you do.
Enjoy the process. Every page you're going to build will be based on the success of each previous exercise.
As you correct your mistakes, you get better.
Even if there's no mistakes, there's no harm coding another page from scratch.
If you are very sure you could code the first 3 steps, let's go to step 4 of coding my first web page.