Scribd Logo
Upload

Welcome to Scribd!

  • Web Engineering: (Lecture 3) by Tufail Khattak

    Uploaded by

    Muhammad Yasir Imam
    4 views15 pages

    Original Title

    lecture 3

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views15 pages

    Web Engineering: (Lecture 3) by Tufail Khattak

    Uploaded by

    Muhammad Yasir Imam

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    Web Engineering

    (Lecture 3)

    By
    Tufail Khattak
    Main Topic

     Lists
    HTML Lists
    There are three different types of HTML lists
    • Unordered Lists
    • Ordered Lists
    • Description Lists
    Unordered and Ordered lists are more common, and definition
    list is less common.
    Each list type utilizes its own unique list tag.
    HTML List Tags are
    Tag Description
    <ul> Defines an unordered list
    <ol> Defines an ordered list
    <li> Defines a list item
    <dl> Defines a description list
    <dt> Defines a term/name in a description list
    <dd> Defines a description of a term/name in a description list
    Unordered Lists
    Unordered Lists
    • An unordered list starts with the <ul> tag and ends with </ul>.
    • Each list item starts with the <li> tag and ends with </li>.
    • The list items <li> contained inside the <ul> tag will appears
    with a bullet preceding the text.
    • The default bullet type for most web browsers is a full disc
    (black circle),
    • but this can be adjusted using an attribute called type.
    Unordered Lists Example
    <html>
    <body>

    <h4>An Unordered List:</h4>


    <ul>
    <li>Eggs</li>
    <li>Cheese</li>
    <li>Milk</li>
    <li>Suger</li>
    </ul>
    </body>
    </html>
    Unordered Lists Cont.
    Unordered Lists (Type Attribute)

    <ul type="square"> <ul type="disc"> <ul type="circle">

    type="square" type="disc" type="circle"

     Eggs • Eggs o Eggs


     Cheese • Cheese o Cheese
     Milk • Milk o Milk
     Suger • Suger o Suger
    Unordered Lists Cont.
    <html>
    <body>

    <h4>Disc bullets list:</h4> <h4>Square bullets list:</h4>


    <ul type="disc"> <ul type="square">
    <li>Apples</li> <li>Apples</li>
    <li>Bananas</li> <li>Bananas</li>
    <li>pears</li>
    <li>pears</li>
    <li>Oranges</li>
    <li>Oranges</li> </ul>
    </ul>
    </body>
    <h4>Circle bullets list:</h4> </html>
    <ul type="circle">
    <li>Apples</li>
    <li>Bananas</li>
    <li>pears</li>
    <li>Oranges</li>
    </ul>
    Nested Unordered Lists
    <html> <html>
    <body> <body>
    <h4>A nested List:</h4>
    <h4>A nested List:</h4> <ul>
    <li>Coffee</li>
    <ul>
    <li>Tea
    <li>Coffee</li> <ul>
    <li>Tea <li>Black tea</li>
    <ul> <li>Green tea
    <li>Black tea</li> <ul>
    <li>Green tea</li> <li>China</li>
    </ul> <li>Africa</li>
    </li> </ul>
    <li>Milk</li> </li>
    </ul>
    </ul>
    </li>
    <li>Milk</li>
    </body> </ul>
    </html> </body>
    </html>
    Ordered Lists
    Unordered Lists

    • An ordered list starts with the <ol> tag and ends with </ol>.

    • Each list item starts with the <li> tag and ends with </li>.

    • The list items are marked with numbers instead bullets.

    • The default numbers can be changed to letters or Roman


    Numerals using a type attribute.
    Ordered Lists Example
    <html>
    <body>

    <h4>An Ordered List:</h4>


    <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    </body>
    </html>
    Ordered Lists Cont.
    Unordered Lists (Type Attribute)

    <ol type="a"> <ol type="A"> <ol type="i"> <ol type="I">


    Lower-Case Upper-Case
    Lower-Case Letters Upper-Case Letters
    Numerals Numerals
    a. Eggs A. Eggs i. Eggs I. Eggs
    b. Cheese B. Cheese ii. Cheese II. Cheese
    c. Milk C. Milk iii. Milk III. Milk
    Ordered Lists Cont.
    <html>
    <body>
    <h4>Roman numbers
    list:</h4>
    <h4>Numbered list:</h4>
    <ol> <ol type="I">
    <li>Apples</li> <li>Apples</li>
    <li>Bananas</li> <li>Bananas</li>
    <li>Lemons</li> <li>Lemons</li>
    <li>Oranges</li>
    <li>Oranges</li>
    </ol>
    </ol>
    <h4>Letters list:</h4>
    <ol type="A"> <h4>Lowercase Roman
    <li>Apples</li> numbers list:</h4>
    <li>Bananas</li> <ol type="i">
    <li>Lemons</li> <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
    </ol>
    <li>Lemons</li>
    <h4>Lowercase letters list:</h4> <li>Oranges</li>
    <ol type="a"> </ol>
    <li>Apples</li>
    <li>Bananas</li> </body>
    <li>Lemons</li>
    </html>
    <li>Oranges</li>
    </ol>
    Nested Ordered Lists
    <html>
    <body>

    <ol>
    <li>Tea
    <ul>
    <li>Green Tea</li>
    <li>Black tea</li>
    </ul>
    </li>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Cheese</li>
    </ol>

    </body>
    </html>
    Ordered Lists Start Attribute:
    The start attribute allows you to set a new starting digit for the
    ordered list element.

    <html> <html>
    <body> <body>
    <h4>Vegetables</h4> <h4>Vegetables</h4>

    <ol start="6" type="a" >


    <ol start="4" >
    <li>Tomato</li>
    <li>Tomato</li>
    <li>Potato</li>
    <li>Potato</li> <li>Cabbage</li>
    <li>Cabbage</li> </ol>
    </ol>
    </body>
    </body> </html>
    </html>
    Description Lists
    A description list is a list of terms/names, with a description of
    each term/name.
    The <dl> tag defines a description list.
    The <dl> tag is used in conjunction with
    <dt> (defines terms/names) and
    <dd> (describes each term/name):

    <html>
    <body>

    <dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
    </dl>

    </body>
    </html>

    You might also like