HTML Part-A Final
Uploaded by
Satyapramod GalagaliHTML Part-A Final
Uploaded by
Satyapramod Galagali1.
Design web pages for your college containing college name and Logo, departments list
using href, list tags.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shri. Sidramappa Basappa Mamadapur Arts, Commerce and Science College
</title>
<link rel="stylesheet" href="style.css"> <!-- Optional: Link to a CSS file for styling -->
</head>
<body bgcolor="yellow" >
<header>
<center><img src="college.jpg" hieght=5% width=5% alt="College Logo" id="logo" >
</center>
<h1 align=center> Shri. Sidramappa Basappa Mamadapur Arts, Commerce and Science College
</h1>
</header>
<h2>Departments</h2>
<ul>
<li> <a href="CS.html">Computer Science</a></li>
<li><a href="Physics.html">Physics</a></li>
<li><a href="Chemistry.html">Chemistry</a></li>
<li> <a href="Zoology.html">Zoology</a></li>
<li><a href="Botany.html">Botany</a></li>
<li><a href="Statistics.html">Statistics</a></li>
<li><a href="Commerce.html">Commerce</a></li>
<li><a href="Histroy.html">Histroy</a></li>
<li><a href="PolSci.html">Political Science</a></li>
<li><a href="Economics.html">Economics</a></li>
<li><a href="Kannada.html">Kannada</a></li>
<li><a href="English.html">English</a></li>
<li><a href="Hindi.html">Hindi</a></li>
</ul>
<h2>History of Our College</h2>
<p>In the year 1955 a few elites from Badami with a visionary zeal and spirit came together with
a common purpose of providing education to the needy, young one's of the educationally
backward area. They had firm belief that education is the only means to shape future citizens.
</p>
<p>
Shri Veer Pulakeshi Vidya Vardhak Samstha came into being in the year 1956 at Badami town
with the blessings of Shri Sadashiva Swamijee of Hangal - Shivayogamandir and Shri
Mrutunjaya Swamijee of Kireetamath Mudhol. Sri K.M.Pattanshetty served as the founder
Chairman of the institution, while Sri.R.V.Patil, Sri.C.G. Pattanad, Sri.B.A.Pattanashetty, Sri
S.B.Mamadapur, Sri B.M.Horakeri, Sri.N.N.Joshi, Sri.S.S.Deshapande and Sri.V.D.Pattepur,
rendered their service as Directors. These humanists worked tirelessly towards the establishment
and betterment of the institution.
</p>
<p>In the year 1956 Shri.Veer Pulakeshi High School made its beginning in a Maruti temple's
building, which later on shifted to its own building. SVPVV Samstha marched towards progress
and a Pre-University college bloomed.
</p>
<p>In the year 1982, the Chairman of SVPVV Samstha Sri G.S.Mamadapur and the Directors of
the Management Committee decided to open a Degree College to fulfill the demands of the
people of this area. They concentrated their efforts in this direction and succeeded. In the year,
1982 a Degree College started functioning at Badami under the name of Shri Veer Pulikeshi Arts
and Commerce College. During the academic year 1987-88 science faculty was introduced.
</p>
<p>The present Chairman Shri A.C.Pattanad, Vice-Chairman Shri.S.G.Karudagimath, Hon
Secretary Shri. Jayadev S Mamadapur along with Directors have been running the institution on
the path of progress with utmost dedication and enthusiasm. The institution's President Shri
R.S.Kalyanshetti (Rtd. I.P.S) is a man of vision and foresightedness who is after excellence and
quality in education. It is noteworthy to mention that the Samsthe is running 14 institutions
including a Rural Ayurvedic Medical College, Research center and Hospital. More than 6000
students are receiving their education in this institution.
</p>
<footer>
<p>© Shri. Sidramappa Basappa Mamadapur Arts, Commerce and Science College. All
rights reserved.</p>
</footer>
</body>
</html>
Output:
2. Create a class timetable using table tag.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #343a40;
}
table {
border-collapse: collapse;
margin: 20px auto;
background-color: #fff;
border: 2px solid #dee2e6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
th,
td {
border: 1px solid #dee2e6;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
color: #343a40;
}
.highlight {
background-color: #f8f9fa;
}
.special {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>TIME TABLE</h1>
<table>
<tr>
<th>Day/Period</th>
<th>I<br>07:45-08:35</th>
<th>II<br>08:35-09:25</th>
<th>III<br>09:25-10:15</th>
<th>10:15-10:30</th>
<th>IV<br>10:30-11:20</th>
<th>V<br>11:20-12:10</th>
<th>VI<br>12:10-01:00</th>
<th>VII<br>01:00-01:50</th>
</tr>
<tr>
<td class="highlight"><b>Monday</b></td>
<td>Eng</td>
<td>Mat</td>
<td>Comp.Science</td>
<td rowspan="6" class="special"><b>BREAK</b></td>
<td colspan="3" class="special">LAB</td>
<td>Phy</td>
</tr>
<tr>
<td class="highlight"><b>Tuesday</b></td>
<td colspan="3" class="special">LAB</td>
<td>Eng</td>
<td>Comp.Science</td>
<td>Mat</td>
<td class="special">SPORTS</td>
</tr>
<tr>
<td class="highlight"><b>Wednesday</b></td>
<td>Mat</td>
<td>Phy</td>
<td>Eng</td>
<td>Comp.Science</td>
<td colspan="3">LIBRARY</td>
</tr>
<tr>
<td class="highlight"><b>Thursday</b></td>
<td>Phy</td>
<td>Eng</td>
<td>Comp.Science</td>
<td colspan="3" class="special">LAB</td>
<td>Mat</td>
</tr>
<tr>
<td class="highlight"><b>Friday</b></td>
<td colspan="3" class="special">LAB</td>
<td>Mat</td>
<td>Comp.Science</td>
<td>Eng</td>
<td>Phy</td>
</tr>
<tr>
<td class="highlight"><b>Saturday</b></td>
<td>Eng</td>
<td>Comp.Science</td>
<td>Mat</td>
<td colspan="3">SEMINAR</td>
<td class="special">SPORTS</td>
</tr>
</table>
</body>
</html>
Output:
3. Write a HTML code to design Student registrations form for your college Admission
Program:
<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
<!-- Header Section-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Student Registration Form
</title>
</head>
<!--Body of the Webpage-->
<body bgcolor="orange">
<!--Start of Form-->
<div style="margin: auto;width: 50%;">
<marquee direction=left behavior=slide><h1>S.S.B.M. College, Badami</h1></marquee>
<form>
<h2>Student Registration Form</h2>
<p>Fill in this form to register</p>
<br>
<!--Input elemets for form-->
<label><b>First Name</b></label>
<input type="text" placeholder="Enter your first name" name="first_name" required>
<br>
<br>
<label><b>Last Name</b></label>
<input type="text" placeholder="Enter your last name" name="last_name" required>
<br>
<br>
<label><b>E-mail</b></label>
<input type="email" placeholder="Enter your e-mail" name="email" required>
<br>
<br>
<label><b>Date of Birth</b></label>
<input type="date" name="dob" required>
<br>
<br>
<label><b>Set Username</b></label>
<input type="text" placeholder="Set Username" name="username" required>
<br>
<br>
<label><b>Set Password</b></label>
<input type="password" placeholder="Set password" name="password" required>
<br>
<br>
<label><b>Gender</b></label><br>
<input type="radio" name="gender" value="Male">
<label for="Male">Male</label><br>
<input type="radio" name="gender" value="Female">
<label for="Female">Female</label><br>
<input type="radio" name="gender" value="Others">
<label for="Others">Others</label>
<br>
<br>
<label><b>Course :</b></label>
<select>
<option value="Course">Course</option>
<option value="CS">Computer Fundamentals</option>
<option value="AI">Artificial Intelligence</option>
<option value="ML">Machine Learning</option>
<option value="OOPS">Object Oriented Programming</option>
<option value="DBMS">Database Management System</option>
</select>
<br>
<br>
<input type="button" value="Register"/>
</form>
</div>
</body>
</html>
<!-- Html Document Ends-->
</form>
</body>
</html>
Output:
4. Design Web Pages with includes Multi-Media data (Image, Audio, Video, GIFs etc)
Program:
<html>
<audio controls>
<source src="birds.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>
<video controls="controls" preload="none" id="video1" width="320" height="240">
<source src="sunrise.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<img src="giphy.gif">
<img src="Lotus.jpg">
</html>
Output:
5. Create a web page using frame.
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="frame1.htm" />
<frame name="main" src="frame2.htm" />
<frame name="bottom" src="frame3.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
</head>
<body>
<h1>Welcome to Frame 1</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<h1>Welcome to Frame 2</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Frame 3</title>
</head>
<body>
<h1>Welcome to Frame 3</h1>
</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.
Program:
<!DOCTYPE HTML>
<html>
<head>
</head>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="" style="background:red"></frame>
<frame src="" style="background:green"></frame>
</frameset>
<frame src="" style="background:orange"></frame>
<frame src="" style="background:blue"></frame>
</frameset>
</html>
Output:
7. Write CSS code to Use Inline CSS to format your ID Card.
Program:
<html lang="en">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Times New Roman', Times, serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#03a9f4, #03a9f4 45%, #fff 45%, #fff 100%);
}
.card {
position: relative;
width: 300px;
height: 400px;
background: #fff;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(15px);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.img-bx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
transform: translateY(30px) scale(0.5);
transform-origin: top;
}
.img-bx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 30px;
}
.content .detail {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.content .detail h3 {
color: Darkblue;
font-size: 1.2em;
font-weight: bolder;
}
.content .detail h3 span {
font-size: 0.7em;
color: #03a9a4;
font-weight: bold;
}
.sci {
position: relative;
display: flex;
margin-top: 5px;
}
.sci li {
list-style: none;
margin: 4px;
}
.sci li a {
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: transparent;
font-size: 1.5em;
color: #444;
text-decoration: none;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: 0.5s;
}
.sci li a:hover {
background: #03a9f4;
color: #fff;
}
</style>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>card</title>
<link rel="stylesheet" href="./Profile-card.css" />
<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card">
<div class="img-bx">
<img src="sudeep.jpg" alt="img" />
</div>
<div class="content">
<div class="detail">
<br><br>
<img src="college.jpg" height=15% width=15%>
<h3>S.S.B.M. College, Badami<br /><span>Name: Sudeep</span></h3>
<h3>Class: BSc IV Sem<br /><span>Reg. No: U26ZM23S0060</span></h3>
</div>
</div>
</div>
</body>
</html>
Output:
8. Using HTML, CSS create display a text called ―Hello India !‖ on top of an image of
India- Map using an overlay.
Program:
<html>
<style>
div {
position: relative;
}
.text-overlay {
position: absolute;
top: 0;
left: 0;
padding: 1rem;
font-size: 2rem;
font-weight: 100;
color: white;
backdrop-filter: blur(8px) brightness(80%);
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using HTML, CSS create display a text on top of an image using an overlay</title>
</head>
<body>
<div>
<h3 class="text-overlay">Hello, India !</h3>
<img src="indialarge.gif" height=200 width=200></div>
</body>
</html>
Output:
