Scribd Logo
Upload

Welcome to Scribd!

  • Htmlslide 1

    Uploaded by

    Govardhan Reghuram
    3 views21 pages

    Original Title

    htmlslide1

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views21 pages

    Htmlslide 1

    Uploaded by

    Govardhan Reghuram

    Copyright:

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

    HTML

    Definition List, Email ,Audio,Video and Table tag


    Definition List

    Definition list is the list of items with a description of each


    item. We use <dl> tag for definition list, <dt> for definition
    term, and <dd> for definition description. For example,

    <dl> Output:
    <dt>Coffee</dt> Coffee
    <dd>Black hot drink</dd> Black hot drink
    <dt>Milk</dt> Milk
    <dd>White cold drink</dd> White cold drink
    </dl>
    HTML Email Tag
    HTML <a> tag provides us an option to specify an
    email address to send an email. While using <a> tag as
    an email tag, we will use mailto: email address along
    with href attribute.
    Syntax
    <a href =“mailto: abc@example.com > Send email
    </a>
    Media Tags: Audio and Video
     HTML 5 has introduced two new multimedia tags, AUDIO and VIDEO,
    for displaying the audio and video streams on a Web page

     We can play the multimedia files, which are stored in our local
    computer, on the Web page by specifying their location. The src
    attribute is used to specify the multimedia file to play it on the Web
    page.

     If browser does not support AUDIO and VIDEO tags, then the text are
    displayed on the Web page
    HTML <audio> tag
     HTML <audio> tag is used to play an audio file in HTML.
     Example
    <audio controls>
    <source src=“songs.ogg” type=“audio/ogg”>
    <source src=“songs.mp3” type=“audio/mpeg”>
    <source src=“songs.wav” type=“audio/wav”>
    Your browser does not support the audio tag
    </audio>
    Attributes of AUDIO tag
    Attribute Description

    autoplay Plays the audio file as soon as the Web


    page loads
    controls Displays the controls on the Web page,
    such as play and pause buttons

    loop Replay the audio file

    preload Specifies whether the audio file is


    preloaded on the Web page or not
    src Provides the location of the audio file to
    play
    HTML <video> tag
     HTML <video> tag is used to show a video in HTML.
     Example
    <video width=“320” height=“240” autoplay>
    <source src=“songs.ogg” type=“video/ogg”>
    <source src=“songs.mp4” type=“video/mp4”>
    Your browser does not support the video tag
    </video>
    Attributes of VIDEO tag
    Attribute Description
    Audio Controls the default state of the video’s audio channel
    Autoplay Plays the audio file as soon as the Web page loads
    Controls Displays the controls on a Web page, such as play and pause buttons

    Height Specifies the height of the VIDEO tag


    Loop Replay the video file
    Preload Specifies whether the video file is preloaded on the Web page or not

    Poster Provides an image to be displayed when the video file is not available

    Src Provides the location of the video file to play


    Width Specifies the width of the VIDEO tag
    Tables
     Tables are used to display data in Tabular format, containing rows and columns,
    on the screen. The <table> tag defines an HTML table. A simple HTML table
    consists of the table element and one or more tr, th, and td elements.
     The tr element defines a table row, the th element defines a table header, and the
    td element defines a table cell.
     A more complex HTML table may also include caption, col, colgroup, thead,
    tfoot, and tbody elements.
     The table element can contain the following:
     <CAPTION>: It is used to specify the caption (Label) for the table. The
    CAPTION element, by default is center-aligned at the top of the Table. It’s
    ALIGN attribute that takes value left, right, center can be used to align the
    caption. The <CAPTION> tag should appear inside <TABLE>.

     <TR>: Table row, is to specify the row in the table. It holds <TH> Table
    Heading and <TD> Table Data.
     <TH>: Table Header, is used for giving Heading to Table. By default header
    elements contents are in bold font and center-aligned.
     <TD>: Table Data, within the row you create columns by <TD> tag. The
    Table data can consist of lists, images, forms and other element. The TD is a true
    container that can hold other HTML elements, even more tables.
     Example: A simple HTML table, containing <HTML>
    two columns and two rows:
    <HTML>
    <HEAD>
    <TITLE> A SIMPLE TABLE IN HTML </TITLE>
    </HEAD>
    <BODY>
    <TABLE BORDER="1">
    <TR>
    <TH>MONTH</TH>
    <TH>SAVINGS</TH>
    </TR>
    <TR>
    <TD>JANUARY</TD>
    <TD>$100</TD>
    </TR>
    </TABLE>
    </BODY>
    OUTPUT
    Attributes of <TABLE> tag

     BORDER: used to draw borders around all the Table cells. By default,
    tables are shown without borders i.e. BORDER=0. The size of border
    can set by assigning an integer value. For example BORDER=3, gives
    table a three pixel border.
     ALIGN: used to align a table relative to windows border. It can set to
    left, right or center.
     CELLSPACING: used to set the space between the cells in a table. It
    takes value in pixel.
     CELLPADDING: used to set the space between the cell data and cell
    wall in a table. It takes value in pixel.
     WIDTH: used to set the width of the table, as either an absolute
    width in pixels, or a percentage of the document width. For
    example: WIDTH=<width in pixel or percent>

     BGCOLOR: set the background color of the table. For example:


    BGCOLOR=red

     BORDERCOLOR: sets the color of the border of the table. For


    example: BORDERCOLOR=BLUE
    Cellpadding and Cellspacing Attributes
     There are two attributes called cellpadding and cellspacing
    which we will use to adjust the white space in your table
    cells.
     The cellspacing attribute defines the width of the border.
     The cellpadding represents the distance between cell
    borders and the content within a cell.
    <!DOCTYPE html> </tr>
    <html> <tr>
    <head> <td>Ramesh Raman</td>
    <title>HTML Table <td>5000</td>
    Cellpadding</title> </tr>
    </head> <tr>
    <body> <td>Shabbir Hussein</td>
    <table border="1" <td>7000</td>
    cellpadding="5" cellspacing="5">
    </tr>
    <tr>
    </table>
    <th>Name</th>
    </body>
    <th>Salary</th>
    </html>
    Output
    Colspan and Rowspan Attributes
     We will use colspan attribute if we want to merge two or more
    columns into a single column.

     Similar way we will use rowspan if we want to merge two or


    more rows.
    <!DOCTYPE html> <td>Row 1 Cell 2</td>
    <html> <td>Row 1 Cell 3</td>
    <head>
    <title>HTML Table Colspan/Rowspan</title> </tr>
    </head> <tr>
    <body> <td>Row 2 Cell 2</td>
    <table border="1"> <td>Row 2 Cell 3</td>
    <tr> </tr>
    <th>Column 1</th> <tr>
    <th>Column 2</th> <td colspan="3">Row 3 Cell 1</td>
    <th>Column 3</th> </tr>
    </tr> </table>
    <tr> </body>
    <td rowspan="2">Row 1 Cell 1</td> </html>
    Output

    You might also like