Program 1
Aim- write a html program for designing the institute website. Show
department information of your institute on the website
Program-
<!DOCTYPE html>
<html>
<head>
<title>Ajay Kumar Garg Engineering College</title>
</head>
<body>
<table border="2" width="100%" cellpadding="5">
<tr>
<td align="center" colspan="2">
<h1>Ajay Kumar Garg Engineering College</h1>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<h2 align="center">About</h2>
<p align="center">
Established in 1998, AKGEC is affiliated to AKTU, Lucknow.
It offers quality education in Engineering & Technology.
Approved by AICTE.
</p>
</td>
<td width="50%" valign="top">
<h2 align="center">Details</h2>
<ul>
<li>Location: Ghaziabad</li>
<li>Affiliated: AKTU</li>
<li>Approved: AICTE</li>
</ul>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<h2 align="center">Departments</h2>
<ol>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>ME</li>
</ol>
</td>
<td width="50%" valign="top" align="center">
<h2>Contact</h2>
AKGEC, 27th Km Stone,<br>
Delhi-Hapur Bypass, Ghaziabad<br>
Phone: +91-120-2762841<br>
<a href="[Link]
target="_blank">[Link]</a>
</td>
</tr>
</table>
</body>
</html>
Output-
Program 2
Aim- write a html program for designing an entry form for student details
Program-
<!DOCTYPE html>
<html>
<head>
<title>Student Entry Form</title>
</head>
<body>
<table border="2" width="60%" align="center" cellpadding="8">
<tr>
<td align="center" colspan="2">
<h2>Student Entry Form</h2>
</td>
</tr>
<tr>
<td align="right">Student Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td align="right">Roll Number:</td>
<td><input type="text" name="roll"></td>
</tr>
<tr>
<td align="right">Department:</td>
<td>
<select name="department">
<option>Computer Science</option>
<option>Information Technology</option>
<option>Electronics</option>
<option>Electrical</option>
<option>Mechanical</option>
<option>Civil</option>
</select>
</td>
</tr>
<tr>
<td align="right">Gender:</td>
<td>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</td>
</tr>
<tr>
<td align="right">Date of Birth:</td>
<td><input type="date" name="dob"></td>
</tr>
<tr>
<td align="right">Email:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td align="right">Phone:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td align="right">Address:</td>
<td><textarea name="address" rows="3"
cols="30"></textarea></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</body>
</html>
Output-
Program 3
Aim- develop a responsive website using css html. May be
blog/information/commercial website
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Simple Responsive Website</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 15px 20px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background: #444;
flex-wrap: wrap;
}
nav a {
color: #fff;
padding: 10px 15px;
text-decoration: none;
text-align: center;
}
nav a:hover {
background: #555;
}
.container {
padding: 20px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.content {
background: #f9f9f9;
padding: 15px;
border: 1px solid #ddd;
}
.sidebar {
background: #f1f1f1;
padding: 15px;
border: 1px solid #ddd;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
margin-top: 20px;
}
/* Responsive design */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<h1>My Simple Blog</h1>
<p>A responsive website template</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<div class="content">
<h2>Welcome to My Blog</h2>
<p>
This is a simple responsive website built using HTML and
CSS only.
You can use it for a personal blog, tutorial site, or
even a small business.
</p>
<p>
Resize the window to see how the layout adjusts for
mobile screens.
The sidebar will stack under the content when viewed on
smaller devices.
</p>
</di
<div class="sidebar">
<h3>Sidebar</h3>
<ul>
<li><a href="#">Latest Posts</a></li>
<li><a href="#">Popular Tutorials</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">External Links</a></li>
</ul>
</div>
OutPut
Program 4
Aim- write the programs using html and java script for validation of input
data
Program-
<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
<script>
function validateForm() {
// Get form values
var name = [Link]();
var email = [Link]();
var phone = [Link]();
var password = [Link]();
// Name check
if (name == "") {
alert("Name cannot be empty");
return false;
}
// Email check (basic pattern)
var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
if () {
alert("Please enter a valid email address");
return false;
}
// Phone check (10 digits only)
var phonePattern = /^[0-9]{10}$/;
if () {
alert("Phone number must be 10 digits");
return false;
}
// Password check
if ([Link] < 6) {
alert("Password must be at least 6 characters long");
return false;
}
// If all good
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h2 align="center">Student Registration Form</h2>
<form name="myForm" onsubmit="return validateForm()"
align="center">
<table border="1" align="center" cellpadding="8">
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output-
