FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media

 Creating tables:
› creating simple table,
› specifying the size of the table,
› specifying the width of the column,
› merging table cells,
› using tables for page layout,
 formatting tables:
› applying table borders,
› applying background and foreground fills,
› changing cell padding,
› spacing and alignment,
 creating user forms:
› creating basic form,
› using check boxes and option buttons,
› creating lists, additional input types in HTML5,
 Incorporating sound and video:
› audio and video in HTML5,
› HTML multimedia basics,
› embedding video clips,
› incorporating audio on web page

 The <table> tag defines an HTML table.
 An 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.

 A simple HTML table, containing two columns and two rows:
<html>
<head>
<title>Table Demo</title>
</head>
<body background="planets.jpg">
<table BORDER="1" bgcolor="red">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</table>

 A simple HTML table, containing two columns and two rows:
<html>
<head>
</head>
<body background="planets.jpg">
<table BORDER="1" bgcolor="red“ width=“500” height=“300”>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</table>

<html>
<head>
</head>
<body>
<table BORDER="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>

<html>
<head>
<title>Table Page Layout</title>
</head>
<body>
<table cols="2" WIDTH=100% BORDER="0">
<tr>
<td width="20%" bgcolor="Yellow">
Left Coloumn<br>
<a href="navbar.html"> Click Me </a><br></td>
<td width="80%" valign="top" bgcolor="black">
Right Coloumn<br>
<h1 style="color:red">Importance of Education in Society </h1>
<p style="color:white">
Education, if looked at beyond its conventional boundaries, forms the very essence of all our actions.
What we do is what we know and have learned, either through instructions or through observation and
assimilation. </p>
</td>
</tr>
</table>
</body>
</html>

 here are different types of form controls that
you can use to collect data using HTML
form:
› Text Input Controls.
› Checkboxes Controls.
› Radio Box Controls.
› Select Box Controls.
› File Select boxes.
› Clickable Buttons.
› Submit and Reset Button.

The HTML <form> element defines a form that is used to collect user input

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
<input type="submit" value="Submit">
</form>

The <input> Element
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio">
Defines a radio button (for selecting
one of many choices)
<input type="submit">
Defines a submit button (for submitting
the form)
The <input> element can be displayed in several ways,
depending on the type attribute.
Here are some examples:

<html>
<head>
<title>User Form</title>
</head>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
</form>
</body>
</html>

 The action attribute defines the action to be performed
when the form is submitted.
 Normally, the form data is sent to a web page on the
server when the user clicks on the submit button.
 In the example the form data is sent to a page on the
server called "action_page.php". This page contains a
server-side script that handles the form data:
 <form action="action_page.php">

 <input type="radio"> defines a radio button.
 Radio buttons let a user select ONE of a
limited number of choices
<form>
<input type="radio" name="gender" value="male" checked>
Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

 <input type="submit"> defines a button for
submitting the form data to a form-handler.
 The form-handler is typically a server page with
a script for processing input data.
 The form-handler is specified in the form's
action attribute
 <input type="submit" value="Submit">

 The <fieldset> element is used to group related data in a form.
 The <legend> element defines a caption for the <fieldset>
element.
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
</fieldset>
</form>

FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media

FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media

Similar to FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media (20)

More from Arti Parab Academics

More from Arti Parab Academics (20)

Recently uploaded

Recently uploaded (20)

FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media