Scribd
Upload
12 views13 pages

fsd2p

The document contains multiple HTML programs aimed at demonstrating various web development concepts, including tables, forms, and frames. Each section outlines the aim, provides the HTML code, and concludes with a statement confirming successful execution. Key features include the use of specific HTML tags and attributes to enhance functionality and presentation.

Uploaded by

Praveena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views13 pages

fsd2p

The document contains multiple HTML programs aimed at demonstrating various web development concepts, including tables, forms, and frames. Each section outlines the aim, provides the HTML code, and concludes with a statement confirming successful execution. Key features include the use of specific HTML tags and attributes to enhance functionality and presentation.

Uploaded by

Praveena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like