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

Web Technology 4415195036180593558

Post a Comment

emo-but-icon

item