Scribd Logo
Upload

Welcome to Scribd!

  • Unit 3 GC

    Uploaded by

    Dr. (Mrs.) P. Persis Glory (Asst. Prof. )
    4 views25 pages

    Original Title

    Unit 3 gc

    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 views25 pages

    Unit 3 GC

    Uploaded by

    Dr. (Mrs.) P. Persis Glory (Asst. Prof. )

    Copyright:

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

    Unit III

    ORDER AND UNORDERED LIST: LISTS, UNORDERED


    L I S T, H E A D I N G S I N A L I S T, O R D E R E D L I S T, N E S T E D L I S T .
    TA B L E H A N D L I N G : TA B L E S , TA B L E C R E AT I O N I N H T M L ,
    WIDTH OF THE TA B L E ’ S CELLS, CELL S PA N N I N G
    M U LT I P L E R O W S / C O L U M N S , C O L O R I N G C E L L S , C O L U M N
    S P E C I F I C AT I O N .
    List
    HTML lists allow web developers to group a set of related items in lists. HTML
    Lists are used to specify lists of information. All lists may contain one or more list elements. There are
    three different types of HTML lists:
    1.Ordered List or Numbered List (ol)
    2.Unordered List or Bulleted List (ul)
    3.Description List or Definition List (dl)

    An ordered HTML list: An unordered HTML list:


    1.First item •Item
    2.Second item •Item
    3.Third item •Item
    4.Fourth item •Item
    HTML Ordered List or Numbered List
    In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
    numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

    <ol>

    <li>Aries</li> Output

    <li>Bingo</li> 1.Aries
    2.Bingo
    <li>Leo</li> 3.Leo
    4.Oracle
    <li>Oracle</li>

    </ol>
    HTML Ordered List or Numbered List
    The HTML ol tag is used for ordered list. We can use ordered Type Description
    list to represent items either in numerical order format or Type "1" This is the default type. In this type, the
    alphabetical order format, or any format where an order is list items are numbered with numbers.
    emphasized. There can be different types of numbered list:
    Type "I" In this type, the list items are numbered
    •Numeric Number (1, 2, 3) with upper case roman numbers.
    •Capital Roman Number (I II III)
    •Small Romal Number (i ii iii) Type "i" In this type, the list items are numbered
    •Capital Alphabet (A B C) with lower case roman numbers.
    •Small Alphabet (a b c)
    Type "A" In this type, the list items are numbered
    with upper case letters.
    To represent different ordered lists, there are 5 types of
    Type "a" In this type, the list items are numbered
    attributes in <ol> tag. with lower case letters.
    <ol type="I"> Output: <ol type="A"> Output:
    <li>HTML</li> I.HTML <li>HTML</li> A.HTML
    <li>Java</li> II.Java <li>Java</li> B.Java
    <li>JavaScript</li> III.JavaScript <li>JavaScript</li> C.JavaScript
    <li>SQL</li> IV.SQL <li>SQL</li> D.SQL
    </ol> </ol>

    <ol type="i"> Output: <ol type="a"> Output:


    <li>HTML</li> i.HTML <li>HTML</li> a.HTML
    <li>Java</li> ii.Java <li>Java</li> b.Java
    <li>JavaScript</li> iii.JavaScript <li>JavaScript</li> c.JavaScript
    <li>SQL</li> iv.SQL <li>SQL</li> d.SQL
    </ol> </ol>
    reversed Attribute:
    This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use the reversed attribute with
    tag then it will numbered the list in descending order (7, 6, 5, 4......1).

    <ol reversed>
    Output:
    <li>HTML</li>
    4. HTML
    <li>Java</li>
    3. Java
    <li>JavaScript</li>
    2. JavaScript
    <li>SQL</li>
    1.SQL
    </ol>

    start attribute
    The start attribute is used with ol tag to specify from where to start the list items.
    <ol type="i" start="5"> : It will show Roman lower case value starting with "v".
    <ol type="i" start="5">
    <li>HTML</li> Output:
    <li>Java</li> v.HTML
    <li>JavaScript</li> vi.Java
    <li>SQL</li> vii.JavaScript
    </ol> viii.SQL
    HTML Unordered List or Bulleted List
    In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
    also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

    <ul>

    <li>Aries</li> Output
    <li>Bingo</li>
    •Aries
    <li>Leo</li> •Bingo
    •Leo
    <li>Oracle</li> •Oracle

    </ul>
    The type Attribute
    we can use type attribute for <ul> tag to specify the type of bullet you like.
    By default, it is a disc.
    Following are the possible options −

    <ul type = "square">


    <ul type = "disc">
    <ul type = "circle">
    Following is an example where we used <ul type = "square">

    <html>
    <head>
    <title>HTML Unordered List</title>
    </head>  Beetroot
     Ginger
    <body>
     Potato
    <ul type = "square">  Radish
    <li>Beetroot</li>
    <li>Ginger</li>
    <li>Potato</li>
    <li>Radish</li>
    </ul>
    </body>
    </html>
    Following is an example where we used <ul type = "disc">

    <html>
    <head>
    •Beetroot
    <title>HTML Unordered List</title> •Ginger
    </head> •Potato
    <body> •Radish

    <ul type = "disc">


    <li>Beetroot</li>
    <li>Ginger</li>
    <li>Potato</li>
    <li>Radish</li>
    </ul>
    </body> </html>
    Following is an example where we used <ul type = "circle">
    <html>
    <head>
    <title>HTML Unordered
    List</title>
    oBeetroot
    </head> oGinger
    <body> oPotato
    <ul type = "circle"> oRadish
    <li>Beetroot</li>
    <li>Ginger</li>
    <li>Potato</li>
    <li>Radish</li>
    </ul>
    </body>
    </html>
    HTML Description List or Definition List
    HTML Description list is also a list style which is supported by HTML and XHTML. It is also known
    as definition list where entries are listed like a dictionary or encyclopedia.

    The definition list is very appropriate when you want to present glossary, list of terms or other name-
    value list.

    The HTML definition list contains following three tags:

    1.<dl> tag defines the start of the list.

    2.<dt> tag defines a term.

    3.<dd> tag defines the term definition (description).


    Example
    <dl>

    <dt>Aries</dt> Output

    <dd>-One of the 12 horoscope sign.</dd> Aries


    -One of the 12 horoscope sign.
    <dt>Bingo</dt>
    Bingo
    <dd>-One of my evening snacks</dd> -One of my evening snacks
    Leo
    <dt>Leo</dt> -It is also an one of the 12 horoscope sign.
    Oracle
    <dd>-It is also an one of the 12 horoscope sign.</dd>
    -It is a multinational technology corporation.
    <dt>Oracle</dt>

    <dd>-It is a multinational technology corporation.</dd>

    </dl>
    HTML Nested List
    A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will
    called as nested list.

    <html> <li>Haryana <li>Maharashtra


    <head> <ul> <ul>
    <title>Nested list</title> <li>Chandigarh</li> <li>Mumbai</li>
    </head> </ul> </ul>
    <body> </li> </li>
    <p>List of Indian States with their capital</p> <li>Gujarat <li>Uttarpradesh
    <ol> <ul> <ul>
    <li>Delhi <li>Gandhinagar</li> <li>Lucknow</li></ul>
    <ul> </ul> </li>
    <li>New Delhi</li> </li> </ol>
    </ul> <li>Rajasthan </body>
    </li> <ul> </html>
    <li>Jaipur</li>
    </ul>
    </li>
    Output

    List of Indian States with their capital


    1.Delhi
    1. New Delhi
    2.Haryana
    1. Chandigarh
    3.Gujarat
    1. Gandhinagar
    4.Rajasthan
    1. Jaipur
    5.Maharashtra
    1. Mumbai
    6.Uttarpradesh
    1. Lucknow
    Table Handling: Tables, Table creation in HTML
    HTML table tag is used to display data in tabular form (row * column). There can be many columns
    in a row.

    We can create a table to display data in tabular form, using <table> element, with the help of <tr> ,
    <td>, and <th> elements.

    In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
    defined by <td> tags.
    HTML Table Tags

    Tag Description
    <table> It defines a table.
    <tr> It defines a row in a table.
    <th> It defines a header cell in a table.
    <td> It defines a cell in a table.
    <caption> It defines the table caption.
    <colgroup> It specifies a group of one or more columns in a table for formatting.

    <col> It is used with <colgroup> element to specify column properties for each column.

    <tbody> It is used to group the body content in a table.


    <thead> It is used to group the header content in a table.
    <tfooter> It is used to group the footer content in a table.
    Example

    <table>
    <tr> Company Contact Country
    <th>Company</th> TATA Maria Germany
    <th>Contact</th>
    <th>Country</th> Reliance Fransis Mexico
    </tr>
    <tr>
    <td>TATA </td>
    <td>Maria </td> Table Cells
    <td>Germany</td> Each table cell is defined by a <td> and a </td> tag.

    </tr>
    <tr> Table Rows
    Each table row starts with a <tr> and ends with a </tr> tag.
    <td>Reliance</td>
    <td>Fransis</td>
    <td>Mexico</td> Table Headers
    Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
    </tr> th stands for table header.
    </table>
    HTML | <table> border Attribute <html>

    <head>
    <title>
    HTML table border Attribute
    </title>
    </head>
    The HTML <table> border Attribute is used
    to specify the border of a table. It sets the <body>

    border around the table cells. <h2>HTML table border Attribute</h2>

    <table border="1">
    Syntax: <caption>Author Details</caption>
    <table border="1|0">
    <tr>
    <th>NAME</th>
    <th>AGE</th>
    Attribute Values: <th>BRANCH</th>
    •1: It sets the border around the table cells. </tr>
    <tr>
    •0: It removes (not set) the border around the <td>BITTU</td>
    <td>22</td>
    table cells. <td>CSE</td>
    </tr>
    <tr>
    <td>RAM</td>
    <td>21</td>
    <td>ECE</td>
    </tr>
    </table>
    </body>

    </html>
    HTML Table Padding & Spacing <html>

    <head>
    <title>
    HTML tables can adjust the padding inside HTML table cellpadding Attribute
    </title>
    the cells, and also the space between the </head>
    cells. <body>

    <h2>HTML table cellpadding Attribute</h2>

    <table border="1"
    cellpadding="15">
    <caption>Author Details</caption>

    <tr>
    <th>NAME</th>
    <th>AGE</th>
    <th>BRANCH</th>
    </tr>
    <tr>
    <td>BITTU</td>
    <td>22</td>
    <td>CSE</td>
    </tr>
    <tr>
    <td>RAM</td>
    <td>21</td>
    <td>ECE</td>
    </tr>
    </table>
    </body>
    <html>
    HTML Table Padding & Spacing
    <head>
    <title>
    The HTML <table> cellspacing Attribute is HTML table cellspacing Attribute
    </title>
    used to specify the space between the cells. The </head>

    cellspacing attribute is set in terms of pixels. <body>

    <h2>HTML table cellspacing Attribute</h2>


    Syntax:
    <table cellspacing="pixels"> <table border="1"
    cellspacing="15">
    Attribute Values: <caption>Author Details</caption>
    •pixels: It sets the space between the cells in
    <tr>
    terms of pixels. <th>NAME</th>
    <th>AGE</th>
    <th>BRANCH</th>
    </tr>
    <tr>
    <td>BITTU</td>
    <td>22</td>
    <td>CSE</td>
    </tr>
    <tr>
    <td>RAM</td>
    <td>21</td>
    <td>ECE</td>
    </tr>
    </table>
    </body>

    </html>
    Multiple rows/columns

    Colspan
    To make a cell span over multiple columns, use the colspan attribute:

    <table>
    <tr> Name Age
    <th colspan="2">Name</th>
    <th>Age</th> Jill Smith 43
    </tr> Eve Jackson 57
    <tr>
    <td>Jill</td> Cell that spans two columns
    <td>Smith</td> To make a cell span more than one column, use the colspan attribute.
    <td>43</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
    </tr>
    </table>
    Rowspan
    To make a cell span over multiple rows, use the rowspan attribute:

    <table>
    <tr> Cell that spans two rows
    <th>Name</th>
    To make a cell span more than one row,
    <td>Jill</td>
    </tr> use the rowspan attribute.
    <tr>
    <th rowspan="2">Phone</th> Name Jill
    <td>555-1234</td>
    555-1234
    </tr> Phone
    <tr> 555-8745
    <td>555-8745</td>
    </tr>
    </table>
    <html>
    Coloring cells
    <head>
    <title>
    HTML table bgcolor Attribute
    </title>
    </head>
    <body>
    <h2>HTML table bgcolor Attribute</h2>
    <table border="1"
    bgcolor="green">
    <caption>
    Author Details
    </caption>
    <tr>
    <th>NAME</th>
    <th>AGE</th>
    <th>BRANCH</th>
    </tr>
    <tr>
    <td>BITTU</td>
    <td>22</td>
    <td>CSE</td>
    </tr>
    <tr>
    <td>RAM</td>
    <td>21</td>
    <td>ECE</td>
    </tr>
    </table>
    </body>
    </html>
    Column Specification

    colspec
    The <colspec> element contains a column specification for a table, including assigning a column name and number,
    cell content alignment, and column width.
    It allows authors to group together attribute specifications for table columns

    Attribute Value Description


    align right Defines horizontal alignment, not supported in Html5.
    left
    center
    justify
    char

    char character Defines a character to use to align text on (use with align = "char"), not supported in Html5.

    span number Defines the number of columns the <col> should span, not supported in Html5.

    valign bottom Defines vertical alignment, not supported in Html5.


    middle
    top
    baseline

    width pixels or % Specifies a default width for each column spanned by the current col element, not supported in Html5 .

    You might also like