EXPERIMENT-01
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Galgotias Institute of Technology - Departments</title>
<meta name="description" content="Institute website sample page displaying departmental
information." />
</head>
<body>
<!-- Header -->
<header>
<h1>Galgotias Institute of Technology</h1>
<p>Knowledge Park II, Greater Noida - 201310 (UP), India</p>
<nav aria-label="Main navigation">
<a href="#home">Home</a> |
<a href="#departments">Departments</a> |
<a href="#faculty">Faculty</a> |
<a href="#admissions">Admissions</a> |
<a href="#contact">Contact</a>
</nav>
<hr />
</header>
<!-- Hero / Intro -->
<main>
<section id="home" aria-labelledby="intro-heading">
<h2 id="intro-heading">Welcome</h2>
<p>
Welcome to the official sample page of Galgotias Institute of Technology.
This page shows departmental information for the institute as required in the Web Technology
Lab.
</p>
</section>
<!-- Departments -->
<section id="departments" aria-labelledby="dept-heading">
<h2 id="dept-heading">Departments</h2>
<!-- Department 1 -->
<article id="cse">
<h3>Computer Science & Engineering</h3>
<details>
<summary>Overview (click to expand)</summary>
<p><strong>Head of Department:</strong> Dr. Sneha Sharma</p>
<p><strong>Programs:</strong> [Link] (CSE), [Link] (CSE), Ph.D.</p>
<p><strong>Contact:</strong> cse-office@[Link] | +91-120-XXXXXXX</p>
<p>
The CSE department focuses on modern computing disciplines including algorithms,
software engineering, artificial intelligence, and data science. Laboratories include
Programming Lab, DBMS Lab, AI Lab and Networking Lab.
</p>
<p><strong>Key faculty:</strong> Prof. A. Kumar, Prof. M. Verma, Prof. R. Iyer</p>
</details>
</article>
<!-- Department 2 -->
<article id="ece">
<h3>Electronics & Communication Engineering</h3>
<details>
<summary>Overview (click to expand)</summary>
<p><strong>Head of Department:</strong> Dr. Ritu Singh</p>
<p><strong>Programs:</strong> [Link] (ECE), [Link] (VLSI), Ph.D.</p>
<p><strong>Contact:</strong> ece-office@[Link] | +91-120-YYYYYYY</p>
<p>
ECE covers circuit design, communication systems, embedded systems and signal processing.
Practical training is delivered in well-equipped electronics and communication labs.
</p>
<p><strong>Key faculty:</strong> Prof. S. Gupta, Prof. N. Rao</p>
</details>
</article>
<!-- Department 3 -->
<article id="mech">
<h3>Mechanical Engineering</h3>
<details>
<summary>Overview (click to expand)</summary>
<p><strong>Head of Department:</strong> Dr. P. Chawla</p>
<p><strong>Programs:</strong> [Link] (ME), [Link] (Thermal), Ph.D.</p>
<p><strong>Contact:</strong> mech-office@[Link] | +91-120-ZZZZZZZ</p>
<p>
Mechanical Engineering emphasizes design, manufacturing, thermodynamics, and robotics.
Workshops and CAD/CAE labs support student projects and research.
</p>
<p><strong>Key faculty:</strong> Prof. V. Roy, Prof. L. Mehta</p>
</details>
</article>
<!-- Department 4 -->
<article id="civil">
<h3>Civil Engineering</h3>
<details>
<summary>Overview (click to expand)</summary>
<p><strong>Head of Department:</strong> Dr. A. Bhatt</p>
<p><strong>Programs:</strong> [Link] (Civil), [Link] (Construction Management)</p>
<p><strong>Contact:</strong> civil-office@[Link] | +91-120-AAAAAAA</p>
<p>
Civil dept. focuses on structural engineering, environmental engineering, and surveying.
Fieldwork and material testing labs are part of the curriculum.
</p>
<p><strong>Key faculty:</strong> Prof. D. Saini, Prof. K. Jain</p>
</details>
</article>
<!-- Department 5 -->
<article id="it">
<h3>Information Technology</h3>
<details>
<summary>Overview (click to expand)</summary>
<p><strong>Head of Department:</strong> Dr. M. Kapoor</p>
<p><strong>Programs:</strong> [Link] (IT), [Link] (Information Security)</p>
<p><strong>Contact:</strong> it-office@[Link] | +91-120-BBBBBBB</p>
<p>
IT department emphasizes software systems, web technologies, cybersecurity and cloud
computing.
Students participate in hackathons and industry projects.
</p>
<p><strong>Key faculty:</strong> Prof. R. Sen, Prof. H. Patel</p>
</details>
</article>
<!-- Add more departments similarly as needed -->
<p>If you want more departments added (e.g. Chemical, Biotechnology, Management), tell me
and I'll extend the page.</p>
</section>
<!-- Faculty snapshot -->
<section id="faculty" aria-labelledby="faculty-heading">
<h2 id="faculty-heading">Faculty Snapshot</h2>
<table border="1" cellpadding="6" cellspacing="0" summary="Faculty table">
<thead>
<tr>
<th>Name</th>
<th>Department</th>
<th>Designation</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dr. Sneha Sharma</td>
<td>Computer Science</td>
<td>Professor & HoD</td>
<td>[Link]@[Link]</td>
</tr>
<tr>
<td>Dr. Ritu Singh</td>
<td>Electronics</td>
<td>Professor & HoD</td>
<td>[Link]@[Link]</td>
</tr>
<tr>
<td>Dr. P. Chawla</td>
<td>Mechanical</td>
<td>Professor & HoD</td>
<td>[Link]@[Link]</td>
</tr>
</tbody>
</table>
</section>
<!-- Admissions -->
<section id="admissions" aria-labelledby="admission-heading">
<h2 id="admission-heading">Admissions</h2>
<p>
For undergraduate admissions visit the Admissions Office or contact admissions@[Link].
Entrance and eligibility details will be posted on the main admissions portal.
</p>
</section>
<!-- Simple Contact Form (HTML only; no back-end) -->
<section id="contact" aria-labelledby="contact-heading">
<h2 id="contact-heading">Contact / Feedback</h2>
<p>Use the form below to send a message to the institute administration. (This is a client-side
form — server handling is required to actually receive messages.)</p>
<form action="#" method="post" aria-label="Contact form">
<label for="name">Full name:</label><br />
<input type="text" id="name" name="name" required placeholder="Your full name" /><br /><br
/>
<label for="email">Email:</label><br />
<input type="email" id="email" name="email" required placeholder="you@[Link]" /><br
/><br />
<label for="subject">Subject:</label><br />
<input type="text" id="subject" name="subject" required placeholder="Subject" /><br /><br />
<label for="message">Message:</label><br />
<textarea id="message" name="message" rows="5" required placeholder="Your message
here"></textarea><br /><br />
<input type="submit" value="Send Message" />
</form>
</section>
</main>
<!-- Footer -->
<footer>
<hr />
<p>
© <time datetime="2025">2025</time> Galgotias Institute of Technology.
Address: Knowledge Park II, Greater Noida, UP, India.
</p>
<p>
Phone: +91-120-XXXXXXX | Email: info@[Link]
</p>
</footer>
<!-- Optional small JS: confirm before submit (still no CSS) -->
<script>
(function () {
var form = [Link]('form');
if (!form) return;
[Link]('submit', function (e) {
// Basic client-side confirmation. Server handling required to actually send the message.
var name = [Link]('name').[Link]();
if (!name) {
alert('Please enter your name.');
[Link]();
return;
var confirmed = confirm('Submit the message to the institute?');
if (!confirmed) {
[Link]();
});
}());
</script>
</body>
</html>
EXPERIMENT -02
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Student Details Entry Form</title>
</head>
<body>
<h1>Galgotias College of Engineering & Technology</h1>
<p>1, Knowledge Park II, Greater Noida - 201 310 (UP) INDIA</p>
<h2>Student Details Entry Form</h2> <form>
<label for="name">Student Name:</label>
<input id="name" name="name" type="text" required><br><br><label for="dob">Date of
Birth:</label>
<input id="dob" name="dob" type="date" required><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<input type="radio" name="gender" value="Other"> Other<br><br>
<label for="email">Email:</label>
<input id="email" name="email" type="email"><br><br>
<label for="phone">Phone Number:</label>
<input id="phone" name="phone" type="tel" placeholder="1234567890"><br><br>
<label for="course">Course:</label>
<select id="course" name="course">
<option value="">-- Select Course --</option>
<option>[Link] - Computer Science</option>
<option>[Link] - Electronics</option>
<option>[Link] - Mechanical</option>
<option>BCA</option>
<option>MCA</option>
<option>[Link]</option>
</select><br><br>
<label>Hobbies:</label><br>
<input type="checkbox" name="hobby" value="Sports"> Sports<br>
<input type="checkbox" name="hobby" value="Music"> Music<br>
<input type="checkbox" name="hobby" value="Reading"> Reading<br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="40"></textarea><br><br>
<label for="profile">Upload Profile Picture:</label>
<input id="profile" name="profile" type="file"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
EXPERIMENT -03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Responsive Website</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>My Tech Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="main">
<h2>Your Favorite Products, Delivered to Your Doorstep</h2>
<p>Shop quality tech gadgets at unbeatable prices.</p>
<div class="products">
<div class="card">
<img src="[Link]" alt="Mouse 1">
<p>Wired Mouse</p>
</div>
<div class="card">
<img src="[Link]" alt="Mouse 2">
<p>Wireless Mouse</p>
</div>
<div class="card">
<img src="[Link]" alt="Earbuds">
<p>Bluetooth Earbuds</p>
</div>
</div>
</section>
<footer>
<p>© 2025 My Tech Store. All Rights Reserved.</p>
</footer>
</body>
</html>
{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: Arial, sans-serif;
header {
background-color: #222;
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
nav ul {
list-style: none;
display: flex;
nav ul li {
margin: 0 10px;
nav ul li a {
color: white;
text-decoration: none;
}
.main {
text-align: center;
padding: 30px;
.products {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
.card {
border: 1px solid #ddd;
margin: 10px;
padding: 15px;
width: 200px;
border-radius: 8px;
.card img {
width: 100%;
height: auto;
footer {
background-color: #222;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
@media (max-width: 768px) {
.products {
flex-direction: column;
align-items: center;
}
EXPERIMENT -04
<!DOCTYPE html>
<html>
<head>
<title>Login Form Validation</title>
<script>
function validateForm() {
let email = [Link]("email").value;
let password = [Link]("password").value;
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,}$/;
// Check if email is empty
if (email === "") {
alert("Please enter your email.");
return false;
// Check if email format is valid
if () {
alert("Please enter a valid email address.");
return false;
// Check if password is empty
if (password === "") {
alert("Please enter your password.");
return false;
// Check password length
if ([Link] < 6) {
alert("Password must be at least 6 characters long.");
return false;
// If all validations pass
alert("Login successful!");
return true;
</script>
</head>
<body>
<h2>Login Form</h2>
<form onsubmit="return validateForm()">
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
EXPERIMENT -05
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE students SYSTEM "[Link]">
<?xml-stylesheet type="text/css" href="[Link]"?>
<students>
<student>
<name>Riya Sharma</name>
<rollno>101</rollno>
<department>Computer Science</department>
<email>riya@[Link]</email>
</student>
<student>
<name>Arjun Mehta</name>
<rollno>102</rollno>
<department>Information Technology</department>
<email>arjun@[Link]</email>
</student>
<student>
<name>Neha Patel</name>
<rollno>103</rollno>
<department>Electronics</department>
<email>neha@[Link]</email>
</student>
</students>
students {
display: block;
font-family: Arial;
margin: 20px;
background-color: #f5f5f5;
padding: 10px;
student {
display: block;
margin-bottom: 15px;
border: 1px solid #ccc;
padding: 10px;
background-color: #ffffff;
name, rollno, department, email {
display: block;
margin: 3px 0;
name {
color: #0056b3;
font-weight: bold;
rollno {
color: #333;
}
department {
color: #007b7f;
email {
color: #cc0000;
DTD
<!ELEMENT students (student+)>
<!ELEMENT student (name, rollno, department, email)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT rollno (#PCDATA)>
<!ELEMENT department (#PCDATA)>
<!ELEMENT email (#PCDATA)>