Index.
html
<!DOCTYPE html>
<html>
<head>
<title>My College Website</title>
<!-- External CSS -->
<link rel="stylesheet" href="[Link]">
<!-- Internal CSS -->
<style>
h2 {
color: darkgreen;
}
</style>
</head>
<body>
<header>
<h1>JSS Science & Technology University</h1>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">CSE</a>
<a href="[Link]">ECE</a>
<a href="[Link]">ME</a>
</nav>
</header>
<div>
<h2>About Our College</h2>
<p>
<b>JSS STU</b> is a reputed engineering college.
It offers <i>quality education</i> and <u>modern infrastructure</u>.
</p>
<!-- Inline CSS -->
<p style="color: red;">This line uses Inline CSS</p>
<img src="[Link]" width="300">
</div>
<div>
<h2>Departments Table</h2>
<table>
<tr>
<th>Department</th>
<th>Seats</th>
<th>Duration</th>
</tr>
<tr>
<td>CSE</td>
<td>120</td>
<td>4 Years</td>
</tr>
<tr>
<td>ECE</td>
<td>120</td>
<td>4 Years</td>
</tr>
<tr>
<td>ME</td>
<td>60</td>
<td>4 Years</td>
</tr>
</table>
</div>
<div>
<h2>Student Interaction</h2>
<button onclick="showAlert()">Show Alert</button>
<button onclick="askName()">Enter Name</button>
<button onclick="confirmAdmission()">Confirm Admission</button>
<p id="output"></p>
</div>
<script>
// Alert example
function showAlert() {
alert("Welcome to JSS Science & Technology University");
}
// Prompt + String + DOM
function askName() {
let name = prompt("Enter your name"); // String
[Link]("output").innerHTML =
"Hello Student: " + name;
}
// Confirm + Boolean
function confirmAdmission() {
let status = confirm("Do you want to apply for admission?");
if (status == true) {
[Link]("output").innerHTML =
"Admission process started.";
} else {
[Link]("output").innerHTML =
"Admission cancelled.";
}
}
// Date object
let today = new Date();
[Link]("Today's Date: " + today);
</script>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Member 1</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="nav">
<a href="[Link]">Home</a>
<a href="[Link]">Member 2</a>
<a href="[Link]">Member 3</a>
</div>
<div class="card">
<h2 style="color: green;">Member 1</h2> <!-- Inline CSS -->
<p>
Name: <b>Member One</b><br>
Role: <i>Web Developer</i>
</p>
<img src="[Link]" width="200">
</div>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Member 2</title>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<div class=”nav”>
<a href=”[Link]”>Home</a>
<a href=”[Link]”>Member 1</a>
<a href=”[Link]”>Member 3</a>
</div>
<div class=”card”>
<h2>Member 2</h2>
<p>
Name: <b>Member Two</b><br>
Role: <i>Designer</i>
</p>
</div>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Member 3</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="nav">
<a href="[Link]">Home</a>
<a href="[Link]">Member 1</a>
<a href="[Link]">Member 2</a>
</div>
<div class="card">
<h2>Member 3</h2>
<p>
Name: <b>Member Three</b><br>
Role: <i>Tester</i>
</p>
</div>
</body>
</html>
[Link]
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.nav {
background-color: #333;
padding: 10px;
}
.nav a {
color: white;
text-decoration: none;
margin: 10px;
}
.card {
background-color: white;
padding: 15px;
margin: 20px;
border-radius: 8px;
}