Experiment 2: HTML Tables, Forms, and Frames
- Write a HTML program, to explain the working of tables. (use tags: <table>, <tr>, <th>, <td> and attributes border, row span, colspan)
- Write a HTML program, to explain the working of tables by preparing a timetable. (Note: Use <caption> tag to set the caption to the table and also use cell spacing, cell padding, border, row span, colspan, etc.).
- Write a HTML program, to explain the working of forms by designing Registration form (Note: Include text field, password filed, number field, date of birth field, checkboxes, radio buttons, list boxes using <select> and <option> tags, <textarea> and two buttons ie: submit and reset. Use tables to provide a better view).
- Write a HTML program, to explain the working of frames, such that page is to be divided into 3 parts on either direction. (Note: first frame image, second frame paragraph, third frame hyperlink. And also make sure of using “no frame” attribute such that frames to be fixed).
1. Write a HTML program, to explain the working of tables.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a HTML file named table_example.html.
Step 2: Locate the HTML file in File Explorer.
Step 3: Open the HTML file in a Web Browser.
SOURCE CODE
table_example.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tables</title>
<style>
h1 {
text-align: center;
}
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>Working with Tables in HTML</h1>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Subjects</th>
</tr>
<tr>
<td>Arjun</td>
<td>Math</td>
<td>Science</td>
</tr>
<tr>
<td rowspan="2">Ram</td>
<td>History</td>
<td>Geography</td>
</tr>
<tr>
<td>Math</td>
<td>Physics</td>
</tr>
</table>
</body>
</html>OUTPUT
2. Write a HTML program, to explain the working of tables by preparing a timetable.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a HTML file named timetable.html.
Step 2: Locate the HTML file in File Explorer.
Step 3: Open the HTML file in a Web Browser.
SOURCE CODE
timetable.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timetable</title>
<style>
h1 {
text-align: center
}
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
caption {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>HTML Table Example: Timetable</h1>
<table cellspacing="5" cellpadding="10" border="1">
<caption>Class Timetable</caption>
<tr>
<th rowspan="2">Day</th>
<th colspan="2">Morning</th>
<th colspan="2">Afternoon</th>
</tr>
<tr>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>1:00 - 2:00</th>
<th>2:00 - 3:00</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Biology</td>
<td>History</td>
<td>Geography</td>
<td>Computer Science</td>
</tr>
<tr>
<td rowspan="2">Wednesday</td>
<td colspan="2">Lab Session</td>
<td>Economics</td>
<td>Physical Education</td>
</tr>
<tr>
<td>Free</td>
<td>Workshop</td>
<td>Art</td>
<td>Music</td>
</tr>
</table>
</body>
</html>OUTPUT
3. Write a HTML program, to explain the working of forms by designing a Registration form.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a HTML file named registration_form.html.
Step 2: Locate the HTML file in File Explorer.
Step 3: Open the HTML file in a Web Browser.
SOURCE CODE
registration_form.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
input, select, textarea {
padding: 5px;
margin: 5px 0;
}
button {
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form action="#" method="post">
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th colspan="2">Registration Details</th>
</tr>
<tr>
<td>Full Name:</td>
<td><input type="text" name="full_name" placeholder="Enter your name" required></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" placeholder="Enter password" required></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" name="age" placeholder="Enter your age" required></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date" name="dob" required></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="Male" required> Male
<input type="radio" name="gender" value="Female" required> Female
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" name="hobbies" value="Reading"> Reading
<input type="checkbox" name="hobbies" value="Traveling"> Traveling
<input type="checkbox" name="hobbies" value="Sports"> Sports
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country" required>
<option value="" disabled selected>Select Country</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="address" rows="4" placeholder="Enter your address" required></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</td>
</tr>
</table>
</form>
</body>
</html>OUTPUT
4. Write a HTML program, to explain the working of frames, such that page is to be divided into 3 parts on either direction.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a HTML file named frames_example.html and three additional HTML files (image_frame.html, text_frame.html, and link_frame.html).
Step 2: Place the necessary content in the respective files.
Step 3: Locate the HTML file frames_example.html in File Explorer.
Step 4: Open the HTML file frames_example.html in a Web Browser.
SOURCE CODE
frames_example.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames Example</title>
</head>
<frameset cols="33%, 33%, 34%">
<frame src="image_frame.html" name="frame1">
<frame src="text_frame.html" name="frame2">
<frame src="link_frame.html" name="frame3">
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>image_frame.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Frame</title>
</head>
<body>
<img src="https://via.placeholder.com/300" alt="Sample Image" width="100%">
</body>
</html>text_frame.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Frame</title>
</head>
<body>
<p>This is an example paragraph to demonstrate the second frame, which is meant for text content. Frames can be used to organize content on a webpage in distinct sections.</p>
</body>
</html>link_frame.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Frame</title>
</head>
<body>
<h3>Useful Links</h3>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
<li><a href="https://www.github.com" target="_blank">GitHub</a></li>
</ul>
</body>
</html>OUTPUT
