HTML tutorial part 2
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

HTML tutorial part 2 Tables Forms Frames PowerPoint PPT Presentation


  • 60 Views
  • Uploaded on
  • Presentation posted in: General

HTML tutorial part 2 Tables Forms Frames. Tables <TABLE> ALIGN{LEFT, RIGHT, CENTER} BGCOLOR{#COLORDEF} BORDER{1-N} CELLPADDING{1-N} CELLSPACING{1-N} WIDTH{1-N, %} <TR> BGCOLOR{#COLORDEF} ALIGN{LEFT, RIGHT, CENTER, JUSTIFY} VALIGN{TOP, BOTTOM, MIDDLE, BASELINE}.

Download Presentation

HTML tutorial part 2 Tables Forms Frames

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html tutorial part 2 tables forms frames

HTML tutorial part 2

  • Tables

  • Forms

  • Frames


Html tutorial part 2 tables forms frames

  • Tables

    • <TABLE>

      • ALIGN{LEFT, RIGHT, CENTER}

      • BGCOLOR{#COLORDEF}

      • BORDER{1-N}

      • CELLPADDING{1-N}

      • CELLSPACING{1-N}

      • WIDTH{1-N, %}

    • <TR>

      • BGCOLOR{#COLORDEF}

      • ALIGN{LEFT, RIGHT, CENTER, JUSTIFY}

      • VALIGN{TOP, BOTTOM, MIDDLE, BASELINE}


Html tutorial part 2 tables forms frames

  • Tables Continued…

    • <TD>

      • ALIGN{LEFT, RIGHT, CENTER, JUSTIFY}

      • VALIGN{TOP, MIDDLE, BOTTOM, BASELINE}

      • BGCOLOR{#COLORDEF}

      • COLSPAN{1-N}

      • ROWSPAN{1-N}

      • HEIGHT{1-N}

      • WIDTH{1-N}

    • <TH>


Html tutorial part 2 tables forms frames

  • Tables Continued…

    • Examples

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

<table border="1">

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>


Html tutorial part 2 tables forms frames

  • Tables Continued

    • Examples

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

<table border="1">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>


Html tutorial part 2 tables forms frames

  • Forms

    • <FORM></FORM>

      • ACTION{URL}

      • METHOD{GET, POST}

      • NAME{FORM_NAME}

<form action="form_action.asp“ method="get">

First name: <input type="text" name="fname" value="Mickey" />

<br />

Last name: <input type="text" name="lname" value="Mouse" />

<br />

<input type="submit" value="Submit" />

</form>


Html tutorial part 2 tables forms frames

  • Forms Continued…

    • <INPUT></INPUT>

      • NAME

      • TYPE{BUTTON, CHECKBOX, PASSWORD, RADIO, SUBMIT, TEXT}

      • ALIGN{LEFT, RIGHT, TOP, BOTTOM}

      • MAXLENGTH{1-N}

      • VALUE{TEXT ON BUTTON, VALUE FOR RADIO BUTTONS AND CHECKBOXES}

      • CHECKED

      • DISABLED

      • READONLY


Html tutorial part 2 tables forms frames

  • Forms Continued…

    • Examples (Input Type = Text/Password)

      <form>

      Username:

      <input type="text" name="user" size="20" />

      <br />

      Password:

      <input type="password" name="password" size="20" />

      </form>


Html tutorial part 2 tables forms frames

  • Forms Continued

    • Examples (Input Type = Checkbox)

      <form>

      I have a bike:

      <input type="checkbox" name="Bike" />

      <br />

      I have a car:

      <input type="checkbox" name="Car" />

      </form>


Html tutorial part 2 tables forms frames

  • Forms Continued…

    • Examples (Input Type = Radio)

      <form>

      Male:

      <input type="radio" name="Sex" value="male" checked="checked" />

      <br />

      Female:

      <input type="radio" name="Sex" value="female" />

      </form>


Html tutorial part 2 tables forms frames

  • Forms Continued…

    • Examples (Input Type = Button/Submit)

      <form>

      <input type="button" value="Hello world!" />

      </form>


Html tutorial part 2 tables forms frames

  • Forms Continued…

    • Examples (Working Form)

      <form name="input" action="form_action.asp" method="get">

      Full Name: <input type="text" name="FullName" value="Mickey" size="20" />

      <br />

      Student of Batch 2006: <input type="checkbox" name=“Student06" checked="checked" />

      <br />

      Male: <input type="radio" name="Sex" value="Male" checked="checked" />

      <br />

      Female: <input type="radio" name="Sex" value="Female" />

      <br />

      <input type="submit" value="Submit" />

      </form>


Html tutorial part 2 tables forms frames

  • Forms Continued…

    • <TEXTAREA></TEXTAREA>

      • COLS{1-N}

      • ROWS{1-N}

      • NAME{TEXTAREA_NAME}

      • DISABLED

      • READONLY


Html tutorial part 2 tables forms frames

  • Forms Continued…

    • Examples (Text Area)

      <textarea rows="10" cols="30">

      The cat was playing in the garden.

      </textarea>


Html tutorial part 2 tables forms frames

  • Frames

    • <FRAMESET></FRAMESET>

      • COLS{PIXELS, %, *}

      • ROWS{PIXELS, %, *}

    • <FRAME>

      • NAME{FRAME_NAME}

      • SRC{FRAME_SOURCE}

      • FRAMEBORDER{0,1}

      • MARGINHEIGHT{1-N}

      • MARGINWIDTH{1-N}

      • NORESIZE

      • SCROLLING{YES, NO, AUTO}


Html tutorial part 2 tables forms frames

  • Frames Continued…

    • Examples (Vertical Frames)

      <frameset cols="25%,50%,25%">

      <frame src="frame_a.htm" />

      <frame src="frame_b.htm" />

      <frame src="frame_c.htm" />

      </frameset>


Html tutorial part 2 tables forms frames

  • Frames Continued…

    • Examples (Horizontal Frames)

      <frameset rows="25%,50%,25%">

      <frame src="frame_a.htm" />

      <frame src="frame_b.htm" />

      <frame src="frame_c.htm" />

      </frameset>


Html tutorial part 2 tables forms frames

  • Frames Continued…

    • Examples (Mixed Frames)

      <frameset rows="50%,50%">

      <frame src="frame_a.htm" />

      <frameset cols="25%,75%">

      <frame src="frame_b.htm" />

      <frame src="frame_c.htm" />

      </frameset>

      </frameset>


Html tutorial part 2 tables forms frames

  • Frames Continued…

    • Examples (Non Frame Supporting Browsers)

      <frameset cols="25%,50%,25%">

      <frame src="frame_a.htm">

      <frame src="frame_b.htm">

      <frame src="frame_c.htm">

      <noframes>

      <body>Your browser does not handle frames!</body>

      </noframes>

      </frameset>


Html tutorial part 2 tables forms frames

  • Frames Continued…

    • Examples (Non-Resizable Frames)

      <frameset rows="50%,50%">

      <frame noresize="noresize" src="frame_a.htm" />

      <frameset cols="25%,75%">

      <frame noresize="noresize" src="frame_b.htm" />

      <frame noresize="noresize" src="frame_c.htm" />

      </frameset>

      </frameset>


Html tutorial part 2 tables forms frames

  • Frames Continued…

    • Examples (Navigation Frames)

Index.htm

<frameset cols="120,*">

<frame src=“Contents.htm" />

<frame src=“Page1.html" name="showframe" />

</frameset>

Contents.htm

<a href=“Page1.html” target=“showframe”> Link to Page 1 <a><br>

<a href=“Page2.html” target=“showframe”> Link to Page 2 <a><br>

<a href=“Page3.html” target=“showframe”> Link to Page 3 <a><br>


  • Login