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>
</dl>
</body>
</html>
Output:
//After Clicking College Logo
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>Maths</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>
Output:
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>
<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>
<!--<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>
Output:
//After Clicking Submit Button
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="doremon.jpg" width="300" height="400" alt="Sample Image">
<h2>Audio Example</h2>
<audio controls>
<source src="song.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h2>Video Example</h2>
<video width="1000" height="550" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<h2>GIF Example</h2>
<img src="GIFs.gif" alt="Funny GIF">
<img src="GIF.gif" alt="Funny GIF">
</body>
</html>
Output:
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>
Output:
6. Write code in HTML to develop a webpage having two frames that divide the
webpage into two equal rows and then divide the row into equal columns fill each frame
with a different background color.
<!DOCTYPE html>
<html>
<head>
<title>Two Frames with Equal Coluumns</title>
<style>
.container
{
display: flex;
flex-direction: column;
height:100vh;
}
.frame
{
display: flex;
flex:1;
}
.column
{
flex: 1;
padding: 20px;
box-sizing:border-box;
text-align:center;
font-size: 20px;
font-weight: bold;
}
.frame1
{
background-color:lightblue;
}
.frame2
{
background-color: lightgreen;
}
.column{
border:2px solid white;
}
</style>
</head>
<body>
<div class="container">
<div class="frame frame1">
<div class="column">Column 1 (Frame1)></div>
<div class="column">Column 2(Frame1)</div>
</div>
<div class="frame frame2">
<div class="column">Column 1 (Frame2)></div>
<div class="column">Column 2(Frame2)</div>
</div>
</div>
</body>
</html>
Output:
7.Write CSS code to Use Inline CSS to format your ID Card.
<!DOCTYPE html>
<html>
<head>
<title>Student ID Card</title>
<style>
*{
padding: 0;
margin: 0;
}
.card
width: 300px;
background-color: lightyellow;
margin: 20px auto;
padding: 50px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(177,12,12,0.1);
text-align: center;
.passs
border: solid black;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="card">
<img class="pass" style="height: 90px; width: 90px;"
src="KLE_logo.jpg" alt ="KLE Logo">
<h2 style="color: red;">K.L.E SOCIETY'S</h2>
<h3 style="color: darkblue;">Shri Kadasiddeshwar Arts College & H S Kotambari
Science Institute</h3>
<img class="pass" style="height: 140px; width: 100px;"
src="Nobita.jpg" alt="passport size photo">
<h1 style="color: blue;">Nobita</h1>
<p style="color: red;">Course: B.Sc I/II/III Year</p>
<h3 style="color: blue;">Validity:Nov 2022 to 2025</h3>
</div>
</body>
</html>
Output:
8.Using HTML, CSS create display a text called—Hello India! On top of an image of
India map using overlay.
<html>
<head>
<title>overlap</title>
<style>
*{
margin: 0;padding: 0;
.overlap{
text-align: center;
margin-top: 40px;
.overlap h1{
position: absolute;
font-size: 120px;
color: blue;
top: 20%;
left: 22%;
}
</style>
<body>
<div class="overlap">
<img src="India.jpg" alt="map">
<h1>Hello India!</h1>
</div>
</body>
</head>
</html>
Output:
