WEB DEVELOPMENT EXERCISE-2 LAB NAIDU.ppt

This lab exercise will enhance your web development skills. You'll apply concepts from previous lessons to build upon your foundation. Get ready to dive into practical exercises and coding challenges. This hands-on experience will solidify your understanding of web development principles. Let's continue building amazing things together!

1. EXERCISE-2
(Table, Creating forms)

2. HTML TABLE
HTML tables allow web developers to arrange data into rows
and columns.
Example:
<table>
 
 <tr>
 
   <th>Company</th>
 
   <th>Contact</th>
 
   <th>Country</th>
 
 </tr>
 
 <tr>
 
  <td>Alfreds Futterkiste</td>
 
   <td>Maria Anders</td>
 
   <td>Germany</td>
 
 </tr>
 
</table>

3. Properties:
Table Borders
Table Sizes
Table Headers
Table Colspan & Rowspan
Table Styling
Table Colgroup

4. Table Borders
Assignment-1

6. Table Sizes
HTML tables can have different sizes for each
column, row or the entire table.
Assignment-2

8. Table Headers
HTML tables can have headers for each column or row, or for many
columns/rows.
Table headers are defined with
 th elements. Each th element represents a table
cell.
Vertical Table Headers
To use the first column as table headers, define the first cell in each row as
a
 <th> element:
Assignment-3

9. Assignment-3

11. Table Padding & Spacing
HTML tables can adjust the padding inside the
cells, and also the space between the cells.
Assignment-4

13. Table Colspan & Rowspan
HTML tables can have cells that span over
multiple rows and/or columns.
To make a cell span over multiple columns, use
the colspan attribute:
Assignment-5

15. Table Styling
Assignment-6

17. Table Colgroup
The <colgroup> element is used to style specific
columns of a table.
Assignment-7

19. HTML
 Forms
An HTML form is used to collect user input. The user input is
most often sent to a server for processing.
The HTML
 <form> element is used to create an HTML form
for user input:
Syntax:
<form>
.
form elements
.
</form>

20. The
 <form> element is a container for different types of
input elements, such as: text fields, checkboxes, radio
buttons, submit buttons, etc.
The HTML
 <input> element is the most used form element.
An
 <input> element can be displayed in many ways,
depending on the
 type attribute.
1.text
2.radio
3.Checkbox
4.submit

21. <input type="text">
Displays a single-line text input field
Example:
<form>
 
 <label for="fname">First name:</label><br>
 
 <input type="text" id="fname" name="fname"><br>
 
 <label for="lname">Last name:</label><br>
 
 <input type="text" id="lname" name="lname">
</form>
N0te:The <label> tag defines a label for many form
elements.

22. Assignment-1

24. <input type="radio">
Radio buttons let a user select ONE of a limited
number of choices.
Assignment-2

26. <input type="checkbox">
Checkboxes let a user select ZERO or MORE options
of a limited number of choices.
Assignment-3

28. <input type="submit">
Defines a button for submitting the form data to a form-
handler.
The form-handler is typically a file on the server with a
script for processing input data.
The form-handler is specified in the form's
 action attribute.

29. Assignment-4

31. HTML - Frames
HTML frames are used to divide your browser
window into multiple sections where each section can load a
separate HTML document independently. A collection of
frames in the browser window is known as a frameset. The
window is divided into frames in a similar way the tables are
organized: into rows and columns.

32. Syntax
<frameset rows="50%,50%">
<frame name="top" src="link/to/frame1" />
<frame name="bottom" src="link/to/frame2" /> </frameset>