Embed Size (px)
Citation preview
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}
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>
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>
Tables Continued Examples
<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>
<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>
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>
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
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>
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>
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>
Forms Continued… Examples (Input Type =
Button/Submit)<form><input type="button" value="Hello world!" /></form>
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>
Forms Continued… <TEXTAREA></TEXTAREA>
COLS {1-N} ROWS {1-N} NAME {TEXTAREA_NAME} DISABLED READONLY
Forms Continued… Examples (Text Area)
<textarea rows="10" cols="30">The cat was playing in the garden.</textarea>
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}
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>
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>
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>
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>
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>
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>…
