PART A
1.Design web pages for your college containing college name and Logo, departments list
using href, list tags.
<!DOCTYPE html>
<html>
<head>
<title>K.L.E. Society's Shri Kadasiddheshwar Arts College</title>
</head>
<body bgcolor="silver">
<h1>K.L.E. Society's Shri Kadasiddheshwar Arts College & H.S.Kotambri Science
Institute</h1>
<!-- College Logo using href tag -->
<a href = " " height="400" width="100">College Logo</a>
<h2>Department List</h2>
<ul>
<li>Physics</li>
<li>Chemistry</li>
<li>Mathematics</li>
<li>Biology</li>
<li>Computer Science</li>
</ul>
<h2>Steps to Apply for Admission</h2>
<ol>
<li>Visit the college website</li>
<li>Fill out the application form</li>
<li>Upload required documents</li>
<li>Pay the application fee</li>
<li>Submit and wait for confirmation</li>
</ol>
<h2>Common College Terms</h2>
<dl>
<dt>Semester</dt>
<dd>An academic term that divides the year into two parts.</dd>
<dt>Credit Hours</dt>
<dd>The number of hours a student spends in class per week.</dd>
<dt>GPA</dt>
<dd>Grade Point Average, a measure of a student’s academic performance.</dd>
</dl>
</body>
</html>
2.Create a class timetable using table tag.
<html>
<head>
<title>Class Timetable</title>
<style>
table{width:100%;border:1px solid black;}
th, td{border: 1px solid black;padding: 8px;text-align: center;}
</style>
</head>
<body>
<h2>Class Timetable</h2>
<table>
<tr>
<th>Day</th>
<th>10.00-11.00</th>
<th>11.00-12.00</th>
<th>12.00-1.00</th>
<th>1.00-2.00</th>
<th>3.00-4.00</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Lunch</td>
<td>Computer Science</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Physics</td>
<td>Maths</td>
<td>Computer Science</td>
<td>Lunch</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Computer Science</td>
<td>Lunch</td>
<td>Maths</td>
</tr>
<tr>
<td>Thursday</td>
<td>Maths</td>
<td>Computer Science</td>
<td>Physics</td>
<td>Lunch</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Friday</td>
<td>Chemistry</td>
<td>Computer Science</td>
<td>Maths</td>
<td>Lunch</td>
<td>Physics</td>
</tr>
<tr>
<td>Saturday</td>
<td>Maths</td>
<td>Computer Science</td>
<td>Physics</td>
<td>Lunch</td>
<td>Chemistry</td>
</tr>
</table>
</body>
</html>
3.Write a HTML code to design Student registrations form for your college Admission.
<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
<style>
body {
background-color: Lightskyblue;
text-align: center;
font-family: 'Times New Roman', Times, serif;
#confirmation
display: none; /* Hide confirmation initially */
font-size: 20px;
font-weight: bold;
color: green;
margin-top: 20px;
</style>
</head>
<body>
<h2>College Admission - Student Registration</h2>
<!-- Registration Form -->
<form id="registrationForm">
<fieldset>
<legend><b>Personal Details</b></legend>
<label>Firstname:</label>
<input type="text" name="firstname" size="15" required><br><br>
<label>Middlename:</label>
<input type="text" name="middlename" size="15"><br><br>
<label>Lastname:</label>
<input type="text" name="lastname" size="15" required><br><br>
<label>Course:</label>
<select name="course" required>
<option value="">Select Course</option>
<option value="BCA">BCA</option>
<option value="BSc">B.Sc</option>
<option value="BBA">BBA</option>
<option value="BCom">B.Com</option>
</select><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="Male" required> Male <br>
<input type="radio" name="gender" value="Female"> Female <br>
<input type="radio" name="gender" value="Other"> Other <br><br>
<label>Phone:</label>
<input type="text" name="country_code" value="+91" size="2" readonly>
<input type="text" name="phone" size="10" required><br><br>
<label>Address:</label><br>
<textarea name="address" cols="50" rows="4" required></textarea><br><br>
<label>Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label>Password:</label>
<input type="password" id="pass" name="pass" required><br><br>
<label>Re-type Password:</label>
<input type="password" id="repass" name="repass" required><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<!-- Confirmation Message -->
<!--<div id="confirmation">
Form has been submitted successfully!
</div>
<script>
document.getElementById("registrationForm").onsubmit = function(event) {
event.preventDefault(); // Prevent form from reloading the page
document.getElementById("registrationForm").style.display = "none"; // Hide form
document.getElementById("confirmation").style.display = "block"; // Show
confirmation
};
</script>
</body>
</html>
4.Design Web Pages with includes Multi-Media data (Image, Audio, Video, GIFs etc).
<!DOCTYPE html>
<html>
<head>
<title>Simple Multimedia Web Page</title>
</head>
<body>
<h1>Welcome to My Simple Multimedia Web Page</h1>
<h2>Image Example</h2>
<img src="C:\Users\vijay\OneDrive\Desktop\kle-logo.gif" alt="Sample Image">
<h2>Audio Example</h2>
<audio controls>
<source src="C:\Users\vijay\OneDrive\Desktop\sample-6s.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h2>Video Example</h2>
<video controls>
<source src="C:\Users\vijay\OneDrive\Desktop\file_example_MP4_480_1_5MG.mp4"
type="video/mp4">
Your browser does not support the video element.
</video>
<h2>GIF Example</h2>
<img src="C:\Users\vijay\OneDrive\Desktop\SampleGIFImage_40kbmb.gif" alt="Funny
GIF">
</body>
</html>
5.Create a web page using frame.
#main.html
#Note: Run main.html file to execute frame
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example with Columns</title>
</head>
<frameset cols="33%, 33%, 34%">
<frame src="program5frame1.html">
<frame src="program5frame2.html">
<frame src="program5frame3.html">
</frameset>
</html>
# program5frame1
<!DOCTYPE html>
<html>
<body bgcolor="red"
<h3>frame 2</h3>
<p> This content is in frame 2 </p>
</body>
</html>
# program5frame2
<!DOCTYPE html>
<html>
<body bgcolor="red"
<h3>frame 2</h3>
<p> This content is in frame 2 </p>
</body>
</html>
# program5frame3
<!DOCTYPE html>
<html>
<body bgcolor="skyblue"
<h3>frame 3</h3>
<p> This content is in frame 3</p>
</body>
</html>
