Scribd
Upload
13 views10 pages

Ex 2

The document outlines an experiment for creating a webpage using HTML that describes the Department of Computer Science and Engineering at Nutan College of Engineering and Research. It includes specifications for styling, layout, and content, such as changing background colors, inserting images with links, and applying various font styles. The provided source code demonstrates the implementation of these specifications, including sections for faculty profiles, department information, a data table, and a student information form.

Uploaded by

unknownthoughtastic
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
13 views10 pages

Ex 2

The document outlines an experiment for creating a webpage using HTML that describes the Department of Computer Science and Engineering at Nutan College of Engineering and Research. It includes specifications for styling, layout, and content, such as changing background colors, inserting images with links, and applying various font styles. The provided source code demonstrates the implementation of these specifications, including sections for faculty profiles, department information, a data table, and a student information form.

Uploaded by

unknownthoughtastic
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/ 10

PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Experiment No -02
Problem Statement : Create a webpage with HTML describing your department with the following
specifications:
a. Change the background color of the page. At the bottom, create a link to take the user to the top of the
page.
b. Insert an image and create a link such that clicking on the image takes the user to another page.
c. Also, apply font styling like italics, underline, and two other fonts to words you find appropriate. Also,
use header tags.

Source Code :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Department of Computer Science and Engineering</title>
<style>
/* Reset and base styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: #e6f7ff;
/* Changed background color */
color: #333;
}

/* Header styles */
header {
background-color: #1a365d;
color: white;
padding: 2rem 0;
PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

text-align: center;
}

.dept-title {
font-family: monospace;
font-size: 2rem;
margin-bottom: 1rem;
color: #4fd1c5;
}

/* Faculty profile section */


.faculty-profile {
background-color: white;
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}

.faculty-profile img {
border: 2px solid #1a365d;
border-radius: 8px;
margin-bottom: 1rem;
max-width: 100%;
height: auto;
cursor: pointer;
/* Added cursor pointer for clickable image */
transition: transform 0.3s ease;
}

.faculty-profile img:hover {
transform: scale(1.05);
/* Added hover effect */
}

.faculty-name {
font-family: 'Trebuchet MS', sans-serif;
font-size: 1.5rem;
margin-bottom: 1rem;
color: #2c5282;
}

/* Main content styles */


PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

.container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem;
}

.department-info {
font-family: 'Trebuchet MS', sans-serif;
margin-bottom: 2rem;
text-align: justify;
}

.department-info p {
margin-bottom: 1rem;
}

.highlight {
font-style: italic;
color: #2c5282;
}

.underline {
text-decoration: underline;
}

.special-font1 {
font-family: 'Georgia', serif;
font-weight: bold;
}

.special-font2 {
font-family: 'Lucida Sans', sans-serif;
color: #3182ce;
}

/* Table styles */
.data-table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.data-table th,
PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

.data-table td {
padding: 0.75rem;
border: 1px solid #e2e8f0;
text-align: center;
}

.data-table th {
background-color: #2c5282;
color: white;
font-weight: bold;
}

.data-table tr:nth-child(even) {
background-color: #ebf4ff;
}

/* Form styles */
.form-container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-top: 2rem;
}

.form-group {
margin-bottom: 1.5rem;
}

.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
color: #2c5282;
}

.radio-group {
margin-bottom: 0.5rem;
}

select {
width: 100%;
padding: 0.5rem;
border: 1px solid #cbd5e0;
border-radius: 4px;
PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

font-family: inherit;
}

/* Footer styles */
footer {
background-color: #1a365d;
color: white;
text-align: center;
padding: 1rem 0;
margin-top: 2rem;
}

.back-to-top {
display: inline-block;
background-color: #4fd1c5;
color: #1a365d;
padding: 0.5rem 1rem;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
margin: 1rem 0;
transition: background-color 0.3s;
}

.back-to-top:hover {
background-color: #38b2ac;
}

body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
background-color: #f8f8f8;
}

.container {
background: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: auto;
border-radius: 10px;
}

.college-image {
PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

max-width: 100%;
height: auto;
border-radius: 10px;
}

h1 {
color: #2c3e50;
margin-top: 20px;
}

p{
color: #555;
font-size: 16px;
line-height: 1.6;
}
</style>
</head>

<body id="top">
<header>
<h1 class="dept-title">DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING</h1>
</header>

<div class="container">
<!-- Faculty Profile Section -->
<section class="faculty-profile">
<!-- Added link around the image to another page -->
<a href="faculty-profile.html">
<img src="image.jpg" alt="Dr. Sanjeevkumar Angadi's Photo" height="200" width="200">
</a>
<h2 class="faculty-name">Dr. Sanjeevkumar Angadi</h2>
<p>Head of Department</p>
</section>

<!-- Department Information Section -->


<section class="department-info">
<p>Dr. Sanjeevkumar Angadi is our honourable Head of Department and they also teach <span
class="highlight">Software Engineering</span>. Computer Science and Engineering
Department are
active with several activities annular the year. The administration offers <span
class="underline">Graduate programs</span>. The Department has well highly experienced
and committed
faculties and well-developed laboratories; to accouter acceptance to cope up with the fast alteration
industry requirements. We accept analysis focus that allowances industry, affiliation, and the
environment.</p>
PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

<p>The department strives for the overall development of students by arranging <span
class="special-font1">industrial visits to reputed industries and research organizations</span>,
invited talks by eminent personalities and technocrats, organizing National & International
conferences,
seminars on recent developments. Being aware of social responsibilities, we inculcate the
entrepreneurship development activities, personality development activities.</p>

<p>We are bound to mold our students to become successful engineers in the field of computer
science,
entrepreneurs and future leaders with <span class="special-font2">knowledge, analytical skills,
creativity and ethics</span> to develop the innovative solution to challenging problems. Our
students find placement in top ranking industries and research organization.</p>

<p>Our faculty has extensive experience in research as well as teaching. Our strength is a reflection
of
their skills, innovation and drive.</p>
</section>

<!-- Table Section -->


<section>
<h2 style="color: #2c5282; margin-bottom: 1rem; font-family: 'Trebuchet MS', sans-
serif;">Department Class
and Lab Information</h2>
<table class="data-table">
<thead>
<tr>
<th>Year</th>
<th>Division</th>
<th>Classroom</th>
<th>Lab</th>
<th>List of faculty</th>
</tr>
</thead>
<tbody>
<tr>
<td>SECOND YEAR</td>
<td>B</td>
<td>214</td>
<td>209</td>
<td>20</td>
</tr>
<tr>
<td>THIRD YEAR</td>
<td>B</td>
PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

<td>215</td>
<td>210</td>
<td>23</td>
</tr>
<tr>
<td>FOURTH YEAR</td>
<td>B</td>
<td>216</td>
<td>211</td>
<td>21</td>
</tr>
</tbody>
</table>
</section>

<div class="container">
<img src="image.png" alt="Nutan College" class="college-image">
<h1>Nutan College Of Engineering and Research</h1>
<p>
NCER is part of Nutan Maharashtra Vidya Prasarak Mandal, which is a highly reputed educational
society
in Maharashtra
and is credited with starting national education schools in the Maval Region of Pune district over
100
years ago.
The great freedom fighter Lokmanya Bal Gangadhar Tilak was the founder member of the Mandal
and was the
Chairman
of its Governing Body for almost 17 years.
</p>
<p>
The late Hon. Vishnu G. Vijapurkar was the first Secretary of "Samarth Vidyalaya"—the first
national
school started by the Mandal.
He was imprisoned by the British authorities for his so-called anti-British activities.
Vishnu Ganesh Pingle was a vibrant student of Samarth Vidyalaya. He became a leader of the
Gadar Party
of Lala Hardayal
and was hanged by the British for his revolutionary activities when he was barely 26.
The Mandal and its schools have such rich heritage.
</p>
</div>

<!-- Form Section -->


<section class="form-container">
PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

<h2 style="color: #0f5ebf; margin-bottom: 1rem; font-family: 'Trebuchet MS', sans-serif;">Student


Information Form</h2>
<form>
<div class="form-group">
<label class="form-label">Gender:</label>
<div class="radio-group">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
</div>
<div class="radio-group">
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>

</div>

<div class="form-group">
<label class="form-label" for="branch">Select Branch:</label>
<select id="branch" name="branch">
<option>Select branch</option>
<option>CSE</option>
<option>ENTC</option>
<option>CSE AI</option>
</select>
</div>
</form>
</section>
</div>

<footer>
<p>&copy; 2025 Department of Computer Science and Engineering. All rights reserved.</p>
<a href="#top" class="back-to-top">Go to top</a>
</footer>
</body>

</html>
PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune


DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

You might also like