FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media
Download as PPTX, PDF0 likes197 views
The document provides guidance on creating and formatting HTML tables and user forms. It covers the basic structure of tables, including the use of elements like <tr>, <th>, and <td>, as well as examples of simple and complex tables. Additionally, it explains form controls, their attributes, and how to submit user input through forms using various HTML elements.
FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media
- 2. 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
- 3. 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.
- 4. 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>
- 5. 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“ width=“500” height=“300”> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </table>
- 6. <html> <head> <title>Table Demo</title> </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>
- 7. <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>
- 8. 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.
- 9. The HTML <form> element defines a form that is used to collect user input
- 10. <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> <input type="submit" value="Submit"> </form>
- 11. 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:
- 12. <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> <input type="submit" value="Submit"> </form> </body> </html>
- 13. 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">
- 14. <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>
- 15. <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">
- 16. 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> <input type="submit" value="Submit"> </fieldset> </form>