DATE: EXP NO: PAGE NO:
AIM:
To WriteaHTMLprogram,toexplaintheworkingoftables.(usetags:<table>,<tr>,<th>,
<td>andattributes:border,rowspan,colspan)
PROGRAM:
<!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>
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
</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:
Working with Tables in HTML
Name Subjects
mathew Math Science
History Geography
Ramu
Math Physics
RESULT:
Hence the HTMLprogram,toexplaintheworkingoftables.(usetags:<table>,<tr>,<th>,
<td>andattributes:border,rowspan,colspan)was executed successfully.
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
AIM:
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 & also use cell spacing, cell padding,
border, rowspan, colspan etc.).
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Timetable</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
caption {
font-size: 1.5em;
margin: 10px;
}
</style>
</head>
<body>
<table cellspacing="10" cellpadding="10">
<caption>Weekly Class Timetable</caption>
<thead>
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
<tr>
<th>Day</th>
<th colspan="2">Morning Session</th>
<th colspan="2">Afternoon Session</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td rowspan="2">OS</td>
<td>ES</td>
<td rowspan="2">DBMS</td>
<td>FSD</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Java</td>
<td>Python</td>
</tr>
<tr>
<td>Wednesday</td>
<td>OS</td>
<td>ES</td>
<td>DBMS</td>
<td>FSD</td>
</tr>
<tr>
<td>Thursday</td>
<td>Java</td>
<td>Python</td>
<td>OS</td>
<td>ES</td>
</tr>
<tr>
<td>Friday</td>
<td>DBMS</td>
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
<td>FSD</td>
<td>Java</td>
<td>Python</td>
</tr>
<tr>
<td>Saturday</td>
<td colspan="2">Revision</td>
<td colspan="2">Project Work</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
RESULT:
Hence the HTML program, to explain the working of tables by preparing a timetable.
(Note: Use <caption> tag to set the caption to the table & also use cell spacing, cell
padding, border, rowspan, colspan etc.)was executed successfully.
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
AIM:
Write a HTML program, to explain the working of forms by designing Registration form.
(Note: Include text field, password field, number field, date of birth field, checkboxes,
radio buttons, list boxes using <select>&<option> tags, <text area> and two buttons ie:
submit and reset. Use tables to provide a better view).
PROGRAM:
<!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;
}
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
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>
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
<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>
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
</body>
</html>
OUTPUT:
RESULT:
Hence the HTML program, to explain the working of forms by designing Registration
form. (Note: Include text field, password field, number field, date of birth field,
checkboxes, radio buttons, list boxes using <select>&<option> tags, <text area> and two
buttons ie: submit and reset. Use tables to provide a better view)was executed
successfully.
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
AIM:
To Write a HTML program, to explain the working of frames, suchthat page is to be
divided into 3 parts oneither direction. (Note: first frameimage, second frameparagraph,
third frame ◻ hyperlink. And also make sure ofusing “no frame” attribute such that
frames to be fixed).
PROGRAM:
<!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.html:
</html>
<!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>
<h1>NATURE</h1>
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
<img src="C:\Users\S&P\OneDrive\文件\nature.jpeg" alt="nature Image"
width="30%">
</body>
</html>
Text .html:
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nature Frame</title>
</head>
<body>
<h2>The Beauty of Nature</h2>
<p>Nature is a magnificent tapestry of life, encompassing everything from towering
mountains and vast oceans to delicate flowers and lush forests. It provides us with
essential resources, including clean air, water, and food, while also offering a sanctuary
for countless species of plants and animals.</p>
<p>Spending time in nature has been shown to have numerous benefits for our
mental and physical well-being. Whether it's a walk in the park, a hike in the mountains,
or simply sitting by a river, being in natural surroundings can reduce stress, improve
mood, and enhance overall health.</p>
<p>Moreover, nature plays a crucial role in maintaining the balance of our ecosystem.
It is vital to protect and preserve our natural environments to ensure a sustainable
future for generations to come.</p>
</body>
</html>
Link.html:
<!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>
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
<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:
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
DATE: EXP NO: PAGE NO:
RESULT:
Hence the program to explain the working of frames, suchthat page is to be divided into
3 parts oneither direction. (Note: first frameimage, second frameparagraph, third frame
◻ hyperlink. And also make sure ofusing “no frame” attribute such that frames to be
fixed) was executed successfully.
FULL STACK DEVELOPMENT-1 CSE DEPARTMENT
