Creating a List in HTML

Transcript

Welcome back. Nice to see you.

In the last lesson you learn how to post images on your page. This lesson we are going to how to add a table of contents to our page and make it easier to navigate or use.

To do this we are going to introduce a new concept: Lists Are you ready?

Images can make your page far more interesting to users. But too many images can be distracting. Also, by adding images to my page, I now have to scroll up and down to see all of the stuff on it. 

The stuff you see on a page is called “content.” This includes pictures, text and whatever else you might see. If you have a lot of content on one page, it can be nice to add a table of contents, which is basically a list of links toward the top of your page that you can click.  When you click the link, it takes you to that specific section. This makes it easy for users to get to the part of your web page they want to see without scrolling,

To make a table of contents, you'll first need to learn about lists. There are two kinds, ordered lists and unordered lists.  In an ordered list, the order of the list items matter- like the results of  a race.   In an unordered list, the order doesn't matter - its like a grocery list, you can put things in any order on a grocery list and you'll still end up getting everything on the list.

On my pet site, I use an ordered list with a table of contents. You can see the numbers next to each list. I wanted to make it very clear that at Christie's Pet Post, the pets come first, and the people come second.

To make an ordered list, you start with a pair of OL tags, short for ordered list. Then to add items to the list you put LI tags inside of them. Li is short for list item. 

I put each list item on a new line, and tag them once to keep my code, organized. This makes it very clear that the list items are inside of the ol tags.  The <ol> tags are like a box for you to put your list items in.  As your HTML file gets bigger, it becomes more important to show which tags are inside of other tags. 

I also added an unordered list of people that my users can contact to the People section. Coding the unordered list tags is just like coding the ol tags, but you use <ul> instead.

You're very close to making your own table of contents. The next lesson, we'll add the finishing touches.

See you next lesson.