Scribd
Upload
2 views

HTML Programs Unit 2

The document contains multiple HTML programs demonstrating various concepts including tables, forms, and frames. It includes examples of a student marks table, a weekly timetable, a registration form with various input types, and a frameset layout. Each program is structured with appropriate HTML tags and attributes to illustrate the functionality effectively.

Uploaded by

manepallijayapravallika3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Programs Unit 2

The document contains multiple HTML programs demonstrating various concepts including tables, forms, and frames. It includes examples of a student marks table, a weekly timetable, a registration form with various input types, and a frameset layout. Each program is structured with appropriate HTML tags and attributes to illustrate the functionality effectively.

Uploaded by

manepallijayapravallika3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

1. Write a HTML program, to explain the working of tables.

(use tags: <table>, <tr>, <th><td> and


attributes: 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 Table Example</title>

</head>

<body>

<h2>Student Marks Table</h2>

<table border="1">

<tr>

<th rowspan="2">Student Name</th>

<th colspan="3">Subjects</th>

</tr>

<tr>

<th>Math</th>

<th>Science</th>

<th>English</th>

</tr>

<tr>

<td>John</td>

<td>85</td>

<td>90</td>

<td>88</td>

</tr>

<tr>

<td>Mary</td>

<td>78</td>
<td>82</td>

<td>91</td>

</tr>

<tr>

<td>David</td>

<td colspan="3">Absent</td>

</tr>

</table>

</body>

</html>

2) 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>

</head>

<body>

<h2>College Weekly Timetable</h2>

<table border="1" cellspacing="5" cellpadding="10">

<caption><b>Weekly Class Timetable</b></caption>

<tr>

<th rowspan="2">Day</th>

<th colspan="5">Subjects</th>

</tr>

<tr>
<th>9:00 - 10:00</th>

<th>10:00 - 11:00</th>

<th>11:00 - 12:00</th>

<th>12:00 - 1:00</th>

<th>2:00 - 3:00</th>

</tr>

<tr>

<td>Monday</td>

<td>Math</td>

<td>Physics</td>

<td>Chemistry</td>

<td rowspan="5">Lunch Break</td>

<td>English</td>

</tr>

<tr>

<td>Tuesday</td>

<td>Biology</td>

<td>Math</td>

<td>Physics</td>

<td>Computer Science</td>

</tr>

<tr>

<td>Wednesday</td>

<td>Chemistry</td>

<td>English</td>

<td>Math</td>

<td>Physics</td>

</tr>

<tr>

<td>Thursday</td>

<td>Physics</td>
<td>Chemistry</td>

<td>Biology</td>

<td>Math</td>

</tr>

<tr>

<td>Friday</td>

<td>English</td>

<td>Computer Science</td>

<td>Physics</td>

<td>Chemistry</td>

</tr>

</table>

</body>

</html>

3) Write a HTML program, to explain the working of forms by designing Paristration form. /Note:
Include text feld, password field, number field, date of birth field, checkboxes, radio buttons, list
boxes using sselectrocoptions tapy, etext arens and two buttons le subrit 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>

</head>

<body>

<h2>Student Registration Form</h2>


<form action="#" method="post">

<table border="1" cellspacing="5" cellpadding="10">

<caption><b>Fill in Your Details</b></caption>

<tr>

<td><label for="name">Full Name:</label></td>

<td><input type="text" id="name" name="name" required></td>

</tr>

<tr>

<td><label for="email">Email:</label></td>

<td><input type="email" id="email" name="email" required></td>

</tr>

<tr>

<td><label for="password">Password:</label></td>

<td><input type="password" id="password" name="password" required></td>

</tr>

<tr>

<td><label for="phone">Phone Number:</label></td>

<td><input type="number" id="phone" name="phone" required></td>

</tr>

<tr>

<td><label for="dob">Date of Birth:</label></td>

<td><input type="date" id="dob" name="dob" required></td>

</tr>

<tr>

<td>Gender:</td>
<td>

<input type="radio" id="male" name="gender" value="Male">

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="Female">

<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="Other">

<label for="other">Other</label>

</td>

</tr>

<tr>

<td>Hobbies:</td>

<td>

<input type="checkbox" id="reading" name="hobbies" value="Reading">

<label for="reading">Reading</label>

<input type="checkbox" id="sports" name="hobbies" value="Sports">

<label for="sports">Sports</label>

<input type="checkbox" id="music" name="hobbies" value="Music">

<label for="music">Music</label>

</td>

</tr>

<tr>

<td><label for="course">Select Course:</label></td>

<td>

<select id="course" name="course">

<option value="btech">B.Tech</option>
<option value="mtech">M.Tech</option>

<option value="mba">MBA</option>

<option value="bba">BBA</option>

</select>

</td>

</tr>

<tr>

<td><label for="address">Address:</label></td>

<td><textarea id="address" name="address" rows="4" cols="30"></textarea></td>

</tr>

<tr>

<td colspan="2" align="center">

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</td>

</tr>

</table>

</form>

</body>

</html>

4) 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 second frame paragraph. third frame 0 hyperlink. And
also make sure you using "no frame" attribute such that frames to be fixed).

HTML Code using Frameset (Divided Vertically)

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Frameset Example</title>

</head>

<frameset cols="33%, 34%, 33%">

<frame src="frame1.html" name="frame1">

<frame src="frame2.html" name="frame2">

<frame src="frame3.html" name="frame3">

<noframes>

<body>

<p>Your browser does not support frames. Please upgrade your browser.</p>

</body>

</noframes>

</frameset>

</html>

frame1.html (First Frame: Displays a Paragraph)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>First Frame</title>

</head>

<body>

<h2>Welcome to the First Frame</h2>

<p>This is a paragraph inside the first frame, explaining the working of frames.</p>

</body>

</html>

frame2.html (Second Frame: Displays Another Paragraph)

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<title>Second Frame</title>

</head>

<body>

<h2>Second Frame</h2>

<p>This frame also contains some content explaining how frames work.</p>

</body>

</html>

frame3.html (Third Frame: Contains a Hyperlink)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Third Frame</title>

</head>

<body>

<h2>Third Frame</h2>

<p>Click the link below to visit an external page.</p>

<a href="https://www.example.com" target="_blank">Go to Example.com</a>

</body>

</html>

You might also like