Scribd Logo
Upload

Welcome to Scribd!

  • Lesson 6

    Uploaded by

    umairiqbal786
    18 views27 pages
    Learning HTML 2

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Learning HTML 2

    Copyright:

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

    Lesson 6

    Uploaded by

    umairiqbal786
    Learning HTML 2

    Copyright:

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

    Lesson 6

    Links in HTML
    <HTML>
    <BODY>
    <H1>Computer Science</H1>
    Welcome to <A HREF=http://www.vu.edu>Virtual
    University</A> in Pakistan
    </BODY>
    <HTML>
    Mailto Link

    <A HREF=mailto:vtv@hotmail.com> email


    address</A>
    Changing Colors in a Page
    • <BODY bgcolor=“Green” text=“white”
    link=“red”>
    • ‘bgcolor’ refers to a six digit code based on
    hexadecimal numbers, e,g, #00FF00
    (Green)
    _ _ _ _ _ _
    Red Green Blue
    • <BODY background=“filename”>
    – ‘filename’ refers to the image file name in .gif
    or .jpg etc. format
    <HTML>
    <BODY bgcolor=yellow text=red link=blue >
    <H1>Computer Science</H1>
    Welcome to <A HREF=http://www.vu.edu>Virtual
    University</A> in
    Pakistan
    </BODY>
    <HTML>
    Title and Meta Tags
    <html>
    <head>
    <title>Introduction to e-commerce</title>
    <Meta name=“description” content=“E-commerce is a newly
    emerging field that uses internet as a medium of
    communication”>
    <Meta name=“keyword” content=“e-commerce, internet, medium,
    communication”>
    </head>
    <body>
    Page goes here
    </body>
    </html>
    Basic tags
    • Tables use following basic tag:
    – <Table>
    – </Table>
    • <TR> (table row tag) and </TR> are used to
    create/add a row
    • <TD> (table data tag) and </TD> are used to
    divide a row into number of columns to create
    cells
    • <TH> (table header tag) and </TH> labels
    each column as a heading
    • <caption>Caption of the table</caption>
    A basic 2 row, 2 column table
    <HTML><BODY><Table Border=1>
    <TR>
    <TD>Cell1</TD>
    <TD>Cell2</TD> Cell 1 Cell 2
    </TR>
    <TR>
    <TD>Cell3</TD> Cell 3 Cell 4
    <TD>Cell4</TD>
    </TR>
    </Table></BODY></HTML>
    A slightly different table
    <Table Border=1>
    <TR>
    <TD colspan=2>Cell1</TD>
    </TR>
    <TR> Cell 1
    <TD>Cell2</TD>
    <TD>Cell3</TD>
    </TR> Cell 2 Cell 3

    </Table>
    Try coding…
    Try to code the following table design:

    Cell 2

    Cell 1

    Cell 3
    Example - COLSPAN
    <HTML>
    <HEAD>
    <TITLE> Example - COLSPAN </TITLE>
    </HEAD>
    <BODY>
    <TABLE BORDER="1” align=center>
    <CAPTION>Spanning the text</CAPTION>
    <TR>
    <TD COLSPAN="2">This line is extended to two columns</TD>
    <TD>This does not</TD>
    </TR>
    <TR>
    <TD>First Column</TD>
    <TD>Second Column</TD>
    <TD>Third Column</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
    Example - ROWSPAN
    <HTML>
    <HEAD>
    <TITLE>Spanning Text</TITLE>
    </HEAD>
    <BODY>
    <TABLE BORDER="1">
    <CAPTION>Example - ROWSPAN</CAPTION>
    <TR>
    <TD ROWSPAN="2">This line is stretched to two rows</TD>
    <TD>First Row</TD>
    </TR>
    <TR>
    <TD>Second Row</TD>
    </TR>
    <TR>
    <TD>This does not</TD>
    <TD>Third Row</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
    Table tag attributes
    – Border - <table border=“5”>
    – Width - <table width=“75%>
    – Height - <table height=“100%”>
    – Cellpadding - <table cellpadding=“10”>
    – Cellspacing - <table cellspacing=“5”>
    – Color - <table bgcolor=“#cccccc”> or
    <table background=“tablebg.gif”>
    Attributes for <td> tag

    – Width - <td width=“50%”>


    – Align - <td align=“center”>
    – Valign- <td valign=“top”>
    Example - Margin
    <HTML>
    <HEAD>
    <TITLE>A Page with a Left-Hand Margin</TITLE>
    </HEAD>
    <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0"
    MARGINHEIGHT="0">
    <TABLE HEIGHT="100%">
    <TR>
    <TD BACKGROUND=“image2.gif" WIDTH="100">&nbsp;</TD>
    <TD VALIGN="TOP">
    This section contains the contents of your web page.
    </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
    Forms
    • A form is a web page populated with text boxes, drop-
    down lists and commands buttons to get information
    from the user -<form> and </form>
    • <Form action=http://www.forms.com Method=post>
    • Types
    – Submit/Reset button
    – Text boxes
    – Text area
    – Check boxes
    – Radio buttons
    – Lists
    Example -Submit
    <HTML>
    <HEAD>
    <TITLE>Submit Button</TITLE>
    </HEAD>
    <BODY>
    <H3>An example of Submit button:</H3>
    <FORM ACTION="http://www.vu.edu/test.asp" METHOD="POST">
    <INPUT TYPE="SUBMIT" VALUE=Send!>
    </FORM>
    </BODY>
    </HTML>
    Example – Text Box & Text
    <HTML>
    Area
    <HEAD>
    <TITLE>Text Area Example</TITLE>
    </HEAD>
    <BODY>
    <H3>Today's Burning Question</H3>
    <FORM ACTION="http://www.gov.pk/scritps/test.asp" METHOD="POST">
    First Name: <INPUT TYPE="TEXT" NAME="First">
    <P>
    Last Name: <INPUT TYPE="TEXT" NAME="Last">
    <P>
    Today's <I>Burning Question</I>: <B>How to make Pakistan a developed country?</B>
    <P>
    Please enter your answer in the text area below:
    <BR>
    <TEXTAREA NAME="Answer" ROWS="10" COLS="60">
    </TEXTAREA>
    <P>
    <INPUT TYPE="SUBMIT" VALUE="I Know!">
    <INPUT TYPE="RESET">
    </FORM>
    </BODY>
    </HTML>

    You might also like