WEB DESIGN TUTORIAL 6::: CREATING BULLETED AND NUMBERED LISTS

The tag for a numbered list is <ol>, which stands for ordered list. For a bulleted list, the tag is <ul>, which stands for unordered list. Each numbered or bulleted item within the list is tagged <li>, for list item. You start the list with the opening <ol> or <ul> tag, enclose each list item with <li> and </li> tags, and then end the list with the closing </ol> or </ul> tag. Here’s the numbered list from the previous example, this time using the proper tags:

<ol>

<li>Click in the Login box</li>

<li>Type <b>premium</b></li>

<li>Click in the Password box</li>

<li>Type <b>customer</b></li>

</ol>

OUTPUT

 

A bulleted list works the same way, except you use <ul> tags. Here’s an example:

<ul>

<li>Bring in the mail</li>

<li>Take out the trash</li>

<li>Feed the dogs</li>

<li>Stop the newspaper delivery</li>

</ul>

This produces a basic bullet list on a Web page.

output

 

NESTING LISTS

You can nest lists within one another. In the following example, we have a bulleted list

embedded within a numbered list. Notice how this nested list was constructed. The bulleted

sublist (the <ul> tag) is placed within one of the <li> tags within the numbered

<ol> list.

<ol>

<li>Thursday: Do Algebra homework</li>

<li>Friday: Housesit for neighbors:

<ul><li>Bring in the mail</li>

<li>Take out the trash</li>

<li>Feed the dogs</li>

<li>Stop the newspaper delivery</li></ul></li>

<li>Saturday: Wash car</li>

</ol>

On a Web page, it would look like this.

output 

 

Share on Google Plus

About Unknown