Explain about Different Lists Available in HTML .

One of the most effective ways of structuring a website (or) its content is to use lists. A list represents group items of same type. HTML provides three types of lists each has a different use

­­® 1. Ordered list (or) Numbered list

­® 2. Unordered list (or) Bullited list

® 3. Definition list

Ordered List:

It represents a group of items to be organized in structured way. i.e., ordered list has a number in front of each item. Different numbering schemes can be specified depending upon reference. To create ordered list we can use < ol > tag. It contains both beginning and end tags. All the items in an ordered list must be enclosed within < li >­ and < /li >.

Syntax: < ol >
               < li > -----< /li >
               < li > -----< /li >
              

Eg: < html >
       < head >
           < title > ordered list < /title >
       </head >
       <body>
            <h1> Fruits </h1 >
            < ol >
            < li > Apple </li>
            < li > Banana </ li >
            < li > Grapes < /li>
            < li > Orange < /li >
            < li > Cherry < /li >
            </ol >
       </body>
            </html>

OutPut:

ordered list


      

Attributes:

Type attribute: It changes the appearance of ordered lists with these values 1/A/a/I/i. Default value is 1, 2, 3……,
Syntax: < ol type = “ A” >----- </ol >



Start attribute: It starts the ordered list with a number other than ‘l’. This is only for numbers.
Syntax:< ol start = “ 5” > ------ < /ol >

2. Unordered List:

In unordered list items are not organized in specific manner. Unordered list has a bullet in front of each list item. In type attribute of unordered list we have the values circle & square. The default value of unordered list is ‘disc ( ס)’

Syntax: < ul type = “ square “ > ------ < /ul>
                < ul >
                            < li >-----------</li>
                            < li > ----------< /li >
                   < /ul >

Eg: < html >
      < head >
          < title > unordered list < / title >
      < / head >
      < body >
            < h1 > vegetables < /h1 >
            < ul >
            < li > Potato </li>
            < li > Sweet potato < /li >
            < li > Carrot </li >
            </ul >
      </body >
  < /html >

OutPut:

unordered list



Definition Lists:

In definition list it is not a list of items like above lists. It organizes a list of definition term’s and their explanations in pair.

Definition list starts with ‘<dl>’ and ends with ‘</dl>’.

In <dl> tag we insert definition terms using ‘&lt;dt&gt;’ tag and ‘&lt;/dt&gt;’ is optional, and write description using ‘<dd>’ tag.

In definition list each item takes a new line and each description takes new line without using ‘<br>’ tag.

Eg: < html >
       < head >
          < title > Definition list </title >
       < /head >
       < body > bgcolour = “ violet” >
          < h1 > Definitions </h1>
          < dl >
          < dt > HTML
          < dd > HTML stands for hyper text
             Markup language, used to design web pages. It was developed by ‘Tim Berne’s Lee in 1980.HTML is not programming language it is simply a web designing language.
            < dt > XML
           < dd >   XML stands for extensible markup language. It is used to store data. It can be used in different ways. The power of XML comes from allowing the designee to specify their own tags to meet their needs.
             < dt > Java script
            < dd > Java script is the most popular scripting language over internet.  useful to create DHTML undefinedDynamic HTML) pages and client side valitations.
            < /dl >
       < /body>
    < /html >


Related

Internationalization

Internationalization  shortly called  as  I18N. where  18 represents the  no  of  letters  in  internationalization word  except I  and  ...

Explain Rollover Buttons?

The  most  common  usage  of  dynamic  HTML  is  the image roll over. . The technique  is   used  to  give  visual&n...

Explain Data Validation in DHTML ?

DHTML :  Dynamic  HTML Validation   is  simply  the  process  of  ensuring  that  some  data  might be  correct  &n...

Post a Comment

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

item