My First Web Page - Step 3

The Lists

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

  1. This is item one
  2. This is item two
  3. 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.

CODING
HTML and CSS
How To Make A HTML Web Page?
My first web page
step 1 the first sentence
myfirstpage1. html
 
step 2 the headings
myfirstpage2. html
 
step 3 the bullet lists
myfirstpage3.html
 
step 4 Emphasis - bold and italics
myfirstpage4.html
 
step 5 Lorem Ipsum
myfirstpage5.html
 
step 6 Definition List
myfirstpage6.html

The Easiest Way to Create a Website. Weebly.com


eskay ng

by eskay ng