Scribd Logo
Upload

Welcome to Scribd!

  • Lists HTML

    Uploaded by

    Sourabh Bhandari
    30 views5 pages
    This document contains the tutorial on creating lists in html.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the tutorial on creating lists in html.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    30 views5 pages

    Lists HTML

    Uploaded by

    Sourabh Bhandari
    This document contains the tutorial on creating lists in html.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    LISTS

    If you have used any word processor like MS Office then you are probably aware of list
    of items. The HTML provides you with the rich set of tools to create formatted lists. You
    can create plain, numbered, bulleted lists or list of definitions.

    Creating ordered and unordered Lists


    An ordered lists is used when the sequence of list items is important. You can create
    ordered list by using <ol> tag (ordered list) and <li> tag (list items). The basic syntax of
    creating ordered lists is as :

    <ol>
    <li>List item1</li>
    <li>List item2</li>
    <li>List item3</li>
    </ol>

    Let us demonstrate the ordered lists with a code below :

    <html>
    <head>
    <title>Ordered list</title>
    </head>
    <body>
    <h1>Instructions to use the shampoo</h1>
    <ol>
    <li>Apply shampoo to wet hair</li>
    <li>Massage it gently into the hair and scalp</li>
    <li>Rinse it well now</li>
    </ol>
    </body>
    </html>

    By default the Arabic numeral like 1,2,3.. will appear in the list. You can modify the
    style of list items by defining the type attribute of <ol> tag. The following table will
    make it more clear :

    Code List type


    <ol type=”A”> It creates an uppercase alphabetical list.

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <ol type=”a”> It creates an lowercase alphabetical list.
    <ol type=”I”> It creates an uppercase Roman numeral list.
    <ol type=”i”> It creates an lowercase Roman numeral list.
    <ol type=”1”> It creates an Arabic numeral list.

    The following table will describe the list of attributes for <ol> (ordered list) tag :

    Attribute class, compact, dir, id, lang,


    onClick, onDblClick, onKeyDown,
    onKeyPress, onKeyUp, onMouseDown,
    onMouseMove, onMouseOut, onMouseOver,
    onMouseUp, start, style, title, type.

    An unordered list is used when the sequence order is not important like a shopping list.
    You can create ordered list by using <ul> tag (unordered list) and <li> tag (list items).
    The basic syntax of creating unordered lists is as :

    <ol>
    <li>List item1</li>
    <li>List item2</li>
    <li>List item3</li>
    </ol>

    Let us demonstrate the unordered lists with a code below :

    <html>
    <head>
    <title>Unordered list</title>
    </head>
    <body>
    <h1>Shopping list</h1>
    <ul>
    <li>Fruits</li>
    <li>pickle</li>
    <li>juices</li>
    <li>clothes</li>
    </ul>
    </body>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    </html>

    By default the bullets will appear in the list. You can modify the style of list items by
    defining the type attribute of <ul> tag. The following table will make it more clear :

    Code List type


    <ul type=”square”> It creates square bullets.
    <ul type=”circle”> It creates circular bullets.
    <ul type=”disc”> It creates disc bullets.

    The following table will describe the list of attributes for <ul> (ordered list) tag :

    Attribute class, compact, dir, id, lang,


    onClick, onDblClick, onKeyDown,
    onKeyPress, onKeyUp, onMouseDown,
    onMouseMove, onMouseOut, onMouseOver,
    onMouseUp, style, title, type.

    Nested Lists
    You can insert one type of list into another. This is called nesting of lists. The nested lists
    can be ordered as well as unordered. You can insert ordered or unordered list in an
    existing list. You can insert as many as lists into an existing list. The existing list is
    called parent list and nested list is called child list. Let us demonstrate the nested list
    below :

    <html>
    <head>
    <title>Nested Lists</title>
    </head>
    <body>
    <h1>Diffrentiation of software application</h1>
    <ul>
    The application can be of three types :
    <li>Desktop application.
    <ul type="square">
    These are written in following languages :
    <li>Java</li>
    <li>C++</li>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <li>VB.NET</li>
    </ul>
    </li>
    <li>Web application
    <ul type="circle">
    These are written in following languages :
    <li>J2EE</li>
    <li>CGI</li>
    <li>ASP.NET</li>
    <li>PHP</li>
    </ul>
    </li>
    <li>Mobile application
    <ul type="disc">
    These are written in following languages :
    <li>J2ME</li>
    <li>M language</li>
    <li>Andriod programming</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>

    Definitions Lists
    The definition lists are ideal way to present glossaries or phrases with longer
    descriptions. The definition list consists of two parts : term and definition. The definition
    list is created by three tags : <dl>, <dt>, <dd>. The syntax of definition list is :

    <dl>
    <dt>Term 1<dt>
    <dd>Definition for term 1</dd>
    <dt>Term 2<dt>
    <dd>Definition for term 2</dd>
    </dl>

    Let us demonstrate the definition lists with the code below :

    <html>
    <head>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <title>Definition lists</title>
    </head>
    <body>
    <dl>
    <dt>Java</dt>
    <dd>Java is high level programming language designed by Sun
    microsystem. It has three parts : J2SE, J2EE, J2ME.</dd>

    <dt>PHP</dt>
    <dd>It was original named as personal home page. later on it was changed
    to Hypertext preprocessor. It is basically used in web development.</dd>
    </dl>
    </body>
    </html>

    The following table shows the attributes supported by <dl> tag :

    Attribute class, compact, dir, id, lang,


    onClick, onDblClick, onKeyDown,
    onKeyPress, onKeyUp, onMouseDown,
    onMouseMove, onMouseOut, onMouseOver,
    onMouseUp, style, title, type.

    The following table shows the attributes supported by <dt> tag :

    Attribute class, dir, id, lang, onClick,


    onDblClick, onKeyDown, onKeyPress,
    onKeyUp, onMouseDown, onMouseMove,
    onMouseOut, onMouseOver, onMouseUp,
    style, title.

    The following table shows the attributes supported by <dd> tag :

    Attribute class, dir, id, lang, onClick,


    onDblClick, onKeyDown, onKeyPress,
    onKeyUp, onMouseDown, onMouseMove,
    onMouseOut, onMouseOver, onMouseUp,
    style, title.

    © Copyright Sourabh Bhandari http://sourabhandari.in

    You might also like