0% found this document useful (0 votes)

13 views75 pages

Web Tech File

The document is a practical file for a Web Technologies course at Guru Tegh Bahadur Institute of Technology, detailing various HTML experiments. It includes code examples for creating web pages with different features such as lists, frames, and forms, along with styles using CSS. Each experiment is aimed at teaching specific web development skills, culminating in a registration form and a college webpage design.

Uploaded by

shruti.11072003

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

13 views75 pages

Web Tech File

Uploaded by

shruti.11072003

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 75

Guru Tegh Bahadur Institute of Technology

(Affiliated to Guru Gobind Singh Indraprastha University, Dwarka, New Delhi)

Department of Computer Science & Engineering

PRACTICAL FILE
WEB TECHNOLOGIES
(PAPER CODE: CIE-356P)

Submitted to: Submitted by:

Ms. Amanpreet Kaur Prabhsurat Singh
10613202722
CSE
INDEX
Experiment 1

Aim:- Write a program to display basic html font, background

colour, image

File:- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Experiment</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: darkblue;
}
p{
font-size: 18px;
}
</style>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<p>This is a simple HTML page with a background color and custom font.</p>

</body>
</html>
Experiment 2

Aim:- Write a program to print an ordered and unordered list

File :- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered and Unordered List</title>
</head>
<body>

<h2>Ordered List</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Dates</li>
<li>Grapes</li>
</ol>

<h2>Unordered List</h2>
<ul>
<li>Car</li>
<li>Bike</li>
<li>Bus</li>
<li>Train</li>
<li>Airplane</li>
</ul>

</body>
</html>
Experiment 3

Aim:- Write html code to develop a web page having two

frames that divide the webpage into two equal rows and then
divide the rows into two equal columns and fill each frame with
the different background color.

File:- index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
<div class="box box1">Frame 1</div>
<div class="box box2">Frame 2</div>
<div class="box box3">Frame 3</div>
<div class="box box4">Frame 4</div>
</div>

</body>
</html>

File:- styles.css

body, html {
height: 100%;
margin: 0;
}

.container {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;
height: 100vh;
}

.box {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
color: white;
}

.box1 { background-color: red; }

.box2 { background-color: blue; }
.box3 { background-color: green; }
.box4 { background-color: yellow; color: black; }
Experiment 4

Aim:- Design web pages for your college containing a

description of the courses, departments , faculties, library etc
using href and list tags.
File:- index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>My College</title>
</head>
<body>

<h1>Welcome to My College</h1>
<div class=”navbar”>
<a href=”courses.html”>Courses</a>
<a href=”departments.html”>Departments</a>
<a href=”faculty.html”>Faculty</a>
<a href=”library.html”>Library</a>
<a href=”contact.html”>Contact Us</a>
</div>

<div class=”container”>
<p>Explore our academic offerings, faculty, library, and more.</p>
</div>

</body>
</html>

File:- courses.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Courses</title>
</head>
<body>

<h1>Courses Offered</h1>

<div class="container">
<ul class="content-list">
<li>Bachelor of Science (B.Sc.)</li>
<li>Bachelor of Technology (B.Tech.) in Computer Science</li>
<li>Bachelor of Technology (B.Tech.) in Information Technology</li>
<li>Bachelor of Technology (B.Tech.) in Machine Learning</li>
<li>Bachelor of Technology (B.Tech.) in Data Science</li>
</ul>
</div>

</body>
</html>

File:- departments.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departments</title>
</head>
<body>

<h1>Departments</h1>

<li>Computer Science</li>
<li>Applied Science</li>
<li>Information Technology</li>
<li>Electrical Engineering</li>
<li>English</li>
</ul>
</div>

</body>
</html>

File:- faculty.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty</title>
</head>
<body>

<h1>Our Faculty</h1>

<div class="container">
<ul class="content-list">
<li>Dr. John Doe (Computer Science)</li>
<li>Prof. Alice Smith (Mathematics)</li>
<li>Dr. Robert Brown (Applied Science)</li>
<li>Dr. Emily White (Data Science)</li>
</ul>
</div>

</body>
</html>
File:- library.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
</head>
<body>

<h1>Library</h1>

<div class="container">
<p>Our library has thousands of books, journals, and research papers.</p>
<h2>Library Sections</h2>
<ul class="content-list">
<li>Reference Books</li>
<li>Journals</li>
<li>Research Papers</li>
<li>Digital Library</li>
</ul>
</div>

</body>
</html>

File:- contact.html

<div class="container">
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> +123 456 7890</p>
<p><strong>Address:</strong>G-3, Rajouri Gardens, New Delhi</p>
</div>

</body>
</html>
Experiment 5

Aim:- Design a registration form.

File:- index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
<h2>Registration Form</h2>
<form action="#" method="post">

<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>

<div class="form-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" required>
</div>

<div class="form-group">
<label>Gender</label>
<div class="gender">
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female" required>

<label for="female">Female</label>
</div>
</div>

<button type="submit">Register</button>
</form>
</div>

</body>
</html>

File:- styles.css

body {
font-family: Arial, sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}

h2 {
margin-bottom: 15px;
color: #333;
}

.form-group {
margin-bottom: 15px;
text-align: left;
}

label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}

.gender {
display: flex;
gap: 10px;
align-items: center;
}

input[type="radio"] {
margin-right: 5px;
}

button {
width: 100%;
padding: 10px;
border: none;
background: #28a745;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #218838;
}
Experiment 6

Aim:- Design web page for your hometown within attractive

background colour ,text colour, an image ,font etc ( use internal CSS).

File:- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Delhi</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f1e5;
color: #333;
text-align: center;
margin: 0;
padding: 0;
}

h1 {
color: #b22222;
font-size: 42px;
margin-top: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

p{
font-size: 18px;
width: 80%;
margin: 0 auto;
line-height: 1.6;
}

img {
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

footer {
background-color: #b22222;
color: white;
padding: 10px;
margin-top: 20px;
font-size: 16px;
}
</style>
</head>
<body>

<h1>Welcome to Delhi - The Heart of India</h1>

<p>
Delhi, the capital of India, is a city that blends history and modernity. From the majestic Red
Fort and Qutub Minar to bustling markets like Chandni Chowk, Delhi offers a rich cultural
experience.
It is known for its diverse cuisine, vibrant festivals, and architectural marvels.
</p>

<p>
Whether you explore the Mughal heritage of Old Delhi or the cosmopolitan charm of
Connaught Place, this city never fails to impress!
</p>

<footer>
© 2025 Explore Delhi | Designed with ❤️
</footer>

</body>
</html>
Experiment 7

Use external, internal and inline CSS to format college webpage

that you created.
1. External CSS

File:- index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My College</title>
</head>
<body>

<h1>Welcome to My College</h1>

<div class="navbar">
<a href="courses.html">Courses</a>
<a href="departments.html">Departments</a>
<a href="faculty.html">Faculty</a>
<a href="library.html">Library</a>
<a href="contact.html">Contact Us</a>
</div>

<div class="container">
<p>Explore our academic offerings, faculty, library, and more.</p>
</div>

</body>
</html>

File:- courses.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Courses</title>
</head>
<body>

<h1>Courses Offered</h1>

</body>
</html>

File:- departments.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departments</title>
</head>
<body>

<h1>Departments</h1>

<div class="navbar">
<a href="index.html">Home</a>
</div>
<div class="container">
<ul class="content-list">
<li>Computer Science</li>

<li>Applied Science</li>
<li>Information Technology</li>
<li>Electrical Engineering</li>
<li>English</li>
</ul>
</div>

</body>
</html>

File:- faculty.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty</title>
</head>
<body>

<h1>Our Faculty</h1>

</body>
</html>

File:- library.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
</head>
<body>

<h1>Library</h1>

</body>
</html>

File:- contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
</head>
<body>

<h1>Contact Us</h1>

<div class="container">
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> +123 456 7890</p>
<p><strong>Address:</strong>G-3, Rajouri Gardens, New Delhi</p>
</div>
</body>
</html>

File:- styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

h1 {
background-color: #004080;
color: white;
padding: 15px;
text-align: center;
margin: 0;
}

h2 {
color: #004080;
}

.navbar {
text-align: center;
background-color: #004080;
padding: 10px 0;
}

.navbar a {
text-decoration: none;
color: white;
font-weight: bold;
padding: 10px 15px;
display: inline-block;
}

.navbar a:hover {
background-color: #0059b3;
border-radius: 5px;
}

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

ul.content-list {
list-style-type: square;
padding-left: 20px;
}

ul.content-list li {
margin-bottom: 10px;
}

.back-link {
display: block;
text-align: center;
margin-top: 20px;
font-weight: bold;
}

.back-link a {
text-decoration: none;
color: #004080;
}

.back-link a:hover {
color: #0059b3;
text-decoration: underline;
}
2. Inline CSS

File:- index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My College</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h1>Welcome to My College</h1>
<div style="margin-bottom: 20px;">
<a href="courses.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Courses</a>
<a href="departments.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Departments</a>
<a href="faculty.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Faculty</a>
<a href="library.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Library</a>
<a href="contact.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Contact Us</a>
</div>
<div style="padding: 20px; border: 1px solid #ddd;">
<p>Explore our academic offerings, faculty, library, and more.</p>
</div>
</body>
</html>

File:- courses.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h1>Courses Offered</h1>
<div style="margin-bottom: 20px;">
<a href="index.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Home</a>
</div>
<div style="padding: 20px; border: 1px solid #ddd;">
<ul style="list-style-type: square;">
<li>Bachelor of Science (B.Sc.)</li>
<li>Bachelor of Commerce (B.Com.)</li>
<li>Bachelor of Arts (B.A.)</li>
<li>Bachelor of Technology (B.Tech.)</li>
<li>Master of Science (M.Sc.)</li>
</ul>
</div>
</body>
</html>

File:- departments.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departments</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h1>Departments</h1>
<div style="margin-bottom: 20px;">
<a href="index.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Home</a>
</div>
<div style="padding: 20px; border: 1px solid #ddd;">
<ul style="list-style-type: square;">
<li>Computer Science</li>
<li>Physics</li>
<li>Mathematics</li>
<li>Biology</li>
<li>English</li>
</ul>
</div>
</body>
</html>

File:- faculty.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h1>Our Faculty</h1>
<div style="margin-bottom: 20px;">
<a href="index.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Home</a>
</div>
<div style="padding: 20px; border: 1px solid #ddd;">
<ul style="list-style-type: square;">
<li>Dr. John Doe (Computer Science)</li>
<li>Prof. Alice Smith (Mathematics)</li>
<li>Dr. Robert Brown (Physics)</li>
<li>Dr. Emily White (Biology)</li>
</ul>
</div>
</body>
</html>

File:- library.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h1>Library</h1>
<div style="margin-bottom: 20px;">
<a href="index.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Home</a>
</div>
<div style="padding: 20px; border: 1px solid #ddd;">
<p>Our library has thousands of books, journals, and research papers.</p>
<h2>Library Sections</h2>
<ul style="list-style-type: square;">
<li>Reference Books</li>
<li>Journals</li>
<li>Research Papers</li>
<li>Digital Library</li>
</ul>
</div>
</body>
</html>

File:- contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h1>Contact Us</h1>
<div style="margin-bottom: 20px;">
<a href="index.html" style="text-decoration: none; margin-right: 10px; color:
blue;">Home</a>
</div>
<div style="padding: 20px; border: 1px solid #ddd;">
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> +123 456 7890</p>
<p><strong>Address:</strong> 123 College Road, City, Country</p>
</div>
</body>
</html>
3. Internal CSS

File:- index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My College</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.navbar { margin-bottom: 20px; }
.navbar a { text-decoration: none; margin-right: 10px; color: blue; }
.container { padding: 20px; border: 1px solid #ddd; }
</style>
</head>
<body>
<h1>Welcome to My College</h1>
<div class="navbar">
<a href="courses.html">Courses</a>
<a href="departments.html">Departments</a>
<a href="faculty.html">Faculty</a>
<a href="library.html">Library</a>
<a href="contact.html">Contact Us</a>
</div>
<div class="container">
<p>Explore our academic offerings, faculty, library, and more.</p>
</div>
</body>
</html>

File:- courses.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.navbar { margin-bottom: 20px; }
.navbar a { text-decoration: none; margin-right: 10px; color: blue; }
.container { padding: 20px; border: 1px solid #ddd; }
.content-list { list-style-type: square; }
</style>
</head>
<body>
<h1>Courses Offered</h1>
<div class="navbar">
<a href="index.html">Home</a>
</div>
<div class="container">
<ul class="content-list">
<li>Bachelor of Science (B.Sc.)</li>
<li>Bachelor of Commerce (B.Com.)</li>
<li>Bachelor of Arts (B.A.)</li>
<li>Bachelor of Technology (B.Tech.)</li>
<li>Master of Science (M.Sc.)</li>
</ul>
</div>
</body>
</html>

File:- departments.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departments</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.navbar { margin-bottom: 20px; }
.navbar a { text-decoration: none; margin-right: 10px; color: blue; }
.container { padding: 20px; border: 1px solid #ddd; }
.content-list { list-style-type: square; }
</style>
</head>
<body>
<h1>Departments</h1>
<div class="navbar">
<a href="index.html">Home</a>
</div>
<div class="container">
<ul class="content-list">
<li>Computer Science</li>
<li>Physics</li>
<li>Mathematics</li>
<li>Biology</li>
<li>English</li>
</ul>
</div>
</body>
</html>

File:- faculty.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.navbar { margin-bottom: 20px; }
.navbar a { text-decoration: none; margin-right: 10px; color: blue; }
.container { padding: 20px; border: 1px solid #ddd; }
.content-list { list-style-type: square; }
</style>
</head>
<body>
<h1>Our Faculty</h1>
<div class="navbar">
<a href="index.html">Home</a>
</div>
<div class="container">
<ul class="content-list">
<li>Dr. John Doe (Computer Science)</li>
<li>Prof. Alice Smith (Mathematics)</li>
<li>Dr. Robert Brown (Physics)</li>
<li>Dr. Emily White (Biology)</li>
</ul>
</div>
</body>
</html>

File:- library.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.navbar { margin-bottom: 20px; }
.navbar a { text-decoration: none; margin-right: 10px; color: blue; }
.container { padding: 20px; border: 1px solid #ddd; }
.content-list { list-style-type: square; }
</style>
</head>
<body>
<h1>Library</h1>
<div class="navbar">
<a href="index.html">Home</a>
</div>
<div class="container">
<p>Our library has thousands of books, journals, and research papers.</p>
<h2>Library Sections</h2>
<ul class="content-list">
<li>Reference Books</li>
<li>Journals</li>
<li>Research Papers</li>
<li>Digital Library</li>
</ul>
</div>
</body>
</html>
File:- contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.navbar { margin-bottom: 20px; }
.navbar a { text-decoration: none; margin-right: 10px; color: blue; }
.container { padding: 20px; border: 1px solid #ddd; }
</style>
</head>
<body>
<h1>Contact Us</h1>
<div class="navbar">
<a href="index.html">Home</a>
</div>
<div class="container">
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> +123 456 7890</p>
<p><strong>Address:</strong> 123 College Road, City, Country</p>
</div>
</body>
</html>
Experiment 8

Aim:- Create HTML page with JavaScript which takes integer

number as input and tells weather the number is odd or even.
File:- index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd or Even Checker</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input, button {
margin-top: 10px;
padding: 8px;
font-size: 16px;
}
</style>
</head>
<body>

<h2>Odd or Even Number Checker</h2>

<input type="number" id="numberInput" placeholder="Enter an integer">
<button onclick="checkOddEven()">Check</button>
<p id="result"></p>

if (num === "") {

result.innerHTML = "Please enter a number.";
return;
}

num = parseInt(num);

if (isNaN(num)) {
result.innerHTML = "Invalid input! Please enter an integer.";
} else {
result.innerHTML = (num % 2 === 0) ? num + " is Even" : num + " is Odd";
}
}
</script>

</body>
</html>
Experiment 9

Aim:- Create HTML page that contains form with field

name,email, mobile number ,gender ,
Favourite colour and a button. Now write a JavaScript code to
combine and display the information in textbox when the
button is clicked and implement validation.
File:- index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Information Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
padding: 20px;
background: white;
box-shadow: 0px 0px 10px gray;
border-radius: 5px;
}
label {
font-weight: bold;
}
input, select, button {
width: 100%;
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;

}
button {
background-color: blue;
color: white;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
.error {
color: red;
font-size: 12px;
}
</style>
</head>
<body>

<div class="container">
<h2>User Information Form</h2>

<label for="email">Email:</label>
<input type="email" id="email">
<span class="error" id="emailError"></span>

<label for="mobile">Mobile Number:</label>

<label>Gender:</label>
<select id="gender">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<span class="error" id="genderError"></span>
<label for="color">Favorite Colour:</label>
<input type="text" id="color">
<span class="error" id="colorError"></span>

<button onclick="displayInfo()">Submit</button>

<h3>Collected Information:</h3>
<textarea id="output" rows="5" readonly></textarea>
</div>

let nameError = document.getElementById("nameError");

let emailError = document.getElementById("emailError");
let mobileError = document.getElementById("mobileError");
let genderError = document.getElementById("genderError");
let colorError = document.getElementById("colorError");

nameError.innerHTML = "";
emailError.innerHTML = "";
mobileError.innerHTML = "";
genderError.innerHTML = "";
colorError.innerHTML = "";

let isValid = true;

if (name === "") {

nameError.innerHTML = "Name is required.";
isValid = false;
}
if (email === "" || !email.includes("@") || !email.includes(".")) {
emailError.innerHTML = "Valid email is required.";
isValid = false;
}
if (mobile === "" || isNaN(mobile) || mobile.length !== 10) {
mobileError.innerHTML = "Valid 10-digit mobile number is required.";
isValid = false;
}
if (gender === "") {
genderError.innerHTML = "Please select gender.";
isValid = false;
}
if (color === "") {
colorError.innerHTML = "Favorite color is required.";
isValid = false;
}

if (isValid) {
let info = `Name: ${name}\nEmail: ${email}\nMobile: ${mobile}\nGender: ${gender}\
nFavorite Color: ${color}`;
document.getElementById("output").value = info;
}
}
</script>

</body>
</html>
Experiment 10

Create an XML file to store student formation like enrollment

number, name, mobile number ,email ID.
File:- students.xml

<?xml version="1.0" encoding="UTF-8"?>

<Students>
<Student>
<EnrollmentNumber>2024001</EnrollmentNumber>
<Name>John Doe</Name>
<MobileNumber>+1234567890</MobileNumber>
<EmailID>[email protected]</EmailID>
</Student>
<Student>
<EnrollmentNumber>2024002</EnrollmentNumber>
<Name>Jane Smith</Name>
<MobileNumber>+0987654321</MobileNumber>
<EmailID>[email protected]</EmailID>
</Student>
</Students>
Experiment 11

Write a program to make time table using DHTML.

File:- index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Time Table</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
background: #fff;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
input, select, button {
padding: 10px;
margin: 5px;
}
.btn {
background: #28a745;
color: white;
border: none;
cursor: pointer;

.btn:hover {
background: #218838;
}
</style>
</head>
<body>

<h2>Dynamic Time Table Generator</h2>

<label>Day:</label>
<select id="day">
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>

<label>Subject:</label>
<input type="text" id="subject" placeholder="Enter Subject">

<button class="btn" onclick="addEntry()">Add Entry</button>

<table id="timetable">
<tr>
<th>Day</th>
<th>Time</th>
<th>Subject</th>
<th>Action</th>
</tr>
</table>

if (time === "" || subject === "") {

alert("Please enter all details.");
return;
}

let table = document.getElementById("timetable");

let row = table.insertRow(-1);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
let cell4 = row.insertCell(3);

cell1.innerHTML = day;
cell2.innerHTML = time;
cell3.innerHTML = subject;
cell4.innerHTML = '<button class="btn" onclick="removeRow(this)">Remove</button>';
}

function removeRow(btn) {
let row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>

</body>
</html>
Experiment 12

a. Create GTBIT website using PHP.

b. Store this data using MYSQL.
File:- index.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "gtbit_db";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GTBIT - Guru Tegh Bahadur Institute of Technology</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="logo">Guru Tegh Bahadur Institute of Technology</h1>
<p class="tagline">Shaping Tomorrow's Technology Leaders</p>
</header>

<div class="container">
<section id="departments">
<h2>Our Departments</h2>
<div class="cards-container">
<?php
$dept_query = "SELECT * FROM departments";
$dept_result = $conn->query($dept_query);
while ($row = $dept_result->fetch_assoc()) {

echo "<div class='card'><div class='card-title'>{$row['name']}</div></div>";

}
?>
</div>
</section>

<section id="courses">
<h2>Academic Programs</h2>
<div class="cards-container">
<?php
$course_query = "SELECT courses.name, departments.name AS department FROM
courses
JOIN departments ON courses.department_id = departments.id";
$course_result = $conn->query($course_query);
while ($row = $course_result->fetch_assoc()) {
echo "<div class='card'><div class='card-title'>{$row['name']}</div><div class='card-
info'>Department: {$row['department']}</div></div>";
}
?>
</div>
</section>

<section id="faculty">
<h2>Our Distinguished Faculty</h2>
<div class="cards-container">
<?php
$faculty_query = "SELECT faculty.name, faculty.designation, departments.name AS
department FROM faculty
JOIN departments ON faculty.department_id = departments.id";
$faculty_result = $conn->query($faculty_query);
while ($row = $faculty_result->fetch_assoc()) {
echo "<div class='faculty-card'><div class='faculty-info'><div class='faculty-
name'>{$row['name']}</div><div class='faculty-title'>{$row['designation']}
({$row['department']})</div></div></div>";
}
?>
</div>
</section>
<section id="contact">
<h2>Get In Touch</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {

$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];

$stmt = $conn->prepare("INSERT INTO contacts (name, email, message) VALUES

(?, ?, ?)");
$stmt->bind_param("sss", $name, $email, $message);
if ($stmt->execute()) {
echo "<div class='success-message'><strong>Success!</strong> Your message has
been sent successfully!</div>";
}
$stmt->close();
}
?>

<div class="contact-form">
<form action="" method="POST">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject">
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</section>
</div>
<footer>
<div class="container">
<div class="footer-content">

<h3>Guru Tegh Bahadur Institute of Technology</h3>

<p>G-3 Block, Rajouri Garden, New Delhi - 110064</p>
<div class="social-links">
<a href="#">f</a>
<a href="#">t</a>
<a href="#">i</a>
<a href="#">in</a>
</div>
<div class="copyright">© 2025 GTBIT. All rights reserved.</div>
</div>
</div>
</footer>

<?php $conn->close(); ?>

</body>
</html>

File:- styles.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
color: #333;
line-height: 1.6;
}

header {
background: linear-gradient(to right, #1a2a6c, #2a5298, #4e7ac7);
color: white;
padding: 2rem 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.logo {
font-size: 2.5rem;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.tagline {
font-style: italic;
font-weight: 300;
position: relative;
z-index: 1;
}

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

section {
background-color: white;
border-radius: 8px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

section:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
h2 {
color: #1a2a6c;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e4e8eb;
position: relative;
}

h2::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 60px;
height: 2px;
background-color: #4e7ac7;
}

.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}

.card {
background-color: #f9f9f9;
border-radius: 8px;
padding: 1.5rem;
transition: all 0.3s ease;
border-left: 4px solid #1a2a6c;
}

.card:hover {
background-color: #f0f4f8;
transform: translateY(-5px);
}

.card-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: #1a2a6c;
}

.card-info {
color: #666;
font-size: 0.9rem;
}

.faculty-card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faculty-img {
height: 100px;
background-color: #e4e8eb;
display: flex;
align-items: center;
justify-content: center;
color: #1a2a6c;
font-size: 2rem;
}

.faculty-info {
padding: 1rem;
background-color: white;
}

.faculty-name {
font-weight: 600;
margin-bottom: 0.25rem;
}

.faculty-title {
color: #666;
font-style: italic;
font-size: 0.9rem;
}

.contact-form {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.success-message {
background-color: rgba(39, 174, 96, 0.1);
border-left: 4px solid #27ae60;
color: #27ae60;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 4px;
}

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

label {
display: block;
margin-bottom: 0.5rem;
color: #555;
font-weight: 500;
}

input, textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
transition: border-color 0.3s ease;
font-size: 1rem;
}

input:focus, textarea:focus {
border-color: #4e7ac7;
outline: none;
box-shadow: 0 0 0 3px rgba(78, 122, 199, 0.1);
}

button {
background: linear-gradient(to right, #1a2a6c, #4e7ac7);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
}

button:hover {
background: linear-gradient(to right, #152354, #3b67b3);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

footer {
background-color: #1a2a6c;
color: white;
padding: 2rem 0;
text-align: center;
margin-top: 2rem;
}

.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}

.social-links {
margin: 1rem 0;
}

.social-links a {
color: white;
margin: 0 0.5rem;
text-decoration: none;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}

.social-links a:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}

.copyright {
margin-top: 1rem;
font-size: 0.9rem;
opacity: 0.8;
}

@media (max-width: 768px) {

.cards-container {
grid-template-columns: 1fr;
}

header {
padding: 1.5rem 0;
}

.logo {
font-size: 2rem;
}

.container {
padding: 1rem;
}
}

File:- schema.sql

CREATE DATABASE gtbit_db;

USE gtbit_db;

CREATE TABLE departments (

id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL
);

CREATE TABLE courses (

id INT AUTO_INCREMENT PRIMARY KEY,
department_id INT,
name VARCHAR(255) NOT NULL,
FOREIGN KEY (department_id) REFERENCES departments(id) ON DELETE CASCADE
);

CREATE TABLE faculty (

id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
department_id INT,
designation VARCHAR(255),
FOREIGN KEY (department_id) REFERENCES departments(id) ON DELETE CASCADE
);

CREATE TABLE contacts (

id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
message TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Oracle Forms Developer Tutorial
No ratings yet
Oracle Forms Developer Tutorial
49 pages
Web Project
No ratings yet
Web Project
51 pages
Experiment 1
No ratings yet
Experiment 1
20 pages
Web Technology Lab Assignment 1
No ratings yet
Web Technology Lab Assignment 1
14 pages
Web Programming Lab Manual
No ratings yet
Web Programming Lab Manual
21 pages
Web Record
No ratings yet
Web Record
44 pages
LAB Manual Frontend
No ratings yet
LAB Manual Frontend
32 pages
Ganesh UI Lab
No ratings yet
Ganesh UI Lab
11 pages
Experiment 1
No ratings yet
Experiment 1
11 pages
Rinku Lab File
No ratings yet
Rinku Lab File
70 pages
Web Technology Lab
No ratings yet
Web Technology Lab
11 pages
Akash Web File (Final) - 1
No ratings yet
Akash Web File (Final) - 1
65 pages
Modified Web Designing Experiments
No ratings yet
Modified Web Designing Experiments
12 pages
Preeti Kumari 22SCSE1012771 Sec-37 (P2)
No ratings yet
Preeti Kumari 22SCSE1012771 Sec-37 (P2)
40 pages
Website Css
No ratings yet
Website Css
31 pages
Front End Development Assignment 1-20 Q
No ratings yet
Front End Development Assignment 1-20 Q
15 pages
Webdev Merged
No ratings yet
Webdev Merged
29 pages
Web Technology P1 PDF
No ratings yet
Web Technology P1 PDF
40 pages
Web Tech Lab 667
No ratings yet
Web Tech Lab 667
19 pages
Tables: Program:: Doctype HTML Head Style
No ratings yet
Tables: Program:: Doctype HTML Head Style
12 pages
WT Practical File
No ratings yet
WT Practical File
26 pages
Web Development
No ratings yet
Web Development
28 pages
Web Technology Journal Part A-2
No ratings yet
Web Technology Journal Part A-2
23 pages
Web Developement Updated
No ratings yet
Web Developement Updated
41 pages
Webtech Final
No ratings yet
Webtech Final
26 pages
Untitled Document
No ratings yet
Untitled Document
30 pages
HTML Programs
No ratings yet
HTML Programs
7 pages
WT LabFile
No ratings yet
WT LabFile
47 pages
Frontend File
No ratings yet
Frontend File
27 pages
Webtechnology
No ratings yet
Webtechnology
29 pages
Lab 4
No ratings yet
Lab 4
40 pages
23hcs4142 Rohan Singh
No ratings yet
23hcs4142 Rohan Singh
27 pages
Web Technology Lab File Vaibhav PDF
No ratings yet
Web Technology Lab File Vaibhav PDF
51 pages
Web Technology
No ratings yet
Web Technology
23 pages
Exp 1,2
No ratings yet
Exp 1,2
23 pages
Web Tech Lab File
No ratings yet
Web Tech Lab File
19 pages
Finnal Webdfile
No ratings yet
Finnal Webdfile
42 pages
HTML
No ratings yet
HTML
28 pages
My Document-3
No ratings yet
My Document-3
19 pages
WT Practical 1 To 5
No ratings yet
WT Practical 1 To 5
18 pages
Untitled Document
No ratings yet
Untitled Document
38 pages
CMT-CS Course Outline
No ratings yet
CMT-CS Course Outline
9 pages
WD File
No ratings yet
WD File
42 pages
Lab Manual - CSE4001 - IandWP - LTP - BL2023241000186 - D21+D22+D23+D24 - Dr. Nancy Kumari - 100504
No ratings yet
Lab Manual - CSE4001 - IandWP - LTP - BL2023241000186 - D21+D22+D23+D24 - Dr. Nancy Kumari - 100504
36 pages
Adl Exp1,2
No ratings yet
Adl Exp1,2
5 pages
Experimentes
No ratings yet
Experimentes
59 pages
Web Practicals 1
No ratings yet
Web Practicals 1
23 pages
All 1 To 5
No ratings yet
All 1 To 5
40 pages
WEB DEVELOPMENT File
No ratings yet
WEB DEVELOPMENT File
8 pages
LALIT - Practical File Web Designing
No ratings yet
LALIT - Practical File Web Designing
28 pages
Web Tech
No ratings yet
Web Tech
55 pages
RAHUL - Practical File Web Designing (2
No ratings yet
RAHUL - Practical File Web Designing (2
28 pages
Web Designing File
No ratings yet
Web Designing File
50 pages
Web Technology 1
No ratings yet
Web Technology 1
16 pages
HTML
No ratings yet
HTML
25 pages
Week 1
No ratings yet
Week 1
26 pages
Web Technology Lab Manual
No ratings yet
Web Technology Lab Manual
27 pages
Final
No ratings yet
Final
13 pages
WT File
No ratings yet
WT File
27 pages
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
From Everand
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
Thomas Curley
No ratings yet
Words Matter
From Everand
Words Matter
Robert Byrum
No ratings yet
Notes On Database Management System
No ratings yet
Notes On Database Management System
24 pages
Alt Final
No ratings yet
Alt Final
14 pages
Part 1
No ratings yet
Part 1
13 pages
HW 4
No ratings yet
HW 4
2 pages
Paint Shop Management System Project Report
No ratings yet
Paint Shop Management System Project Report
61 pages
1
No ratings yet
1
5 pages
Ex - No. 3 Aircraft Database
No ratings yet
Ex - No. 3 Aircraft Database
8 pages
Laporan Project Mandiri Sistem Basis Data
No ratings yet
Laporan Project Mandiri Sistem Basis Data
26 pages
IT3306 - 02 - Database Constraints and Triggers
No ratings yet
IT3306 - 02 - Database Constraints and Triggers
77 pages
Chapter 4 LAU
No ratings yet
Chapter 4 LAU
73 pages
Module 4 Entity Relationship Diagramming: ISMG6080 Zhiping Walter
No ratings yet
Module 4 Entity Relationship Diagramming: ISMG6080 Zhiping Walter
80 pages
Technical Training v7 Exercises
No ratings yet
Technical Training v7 Exercises
36 pages
New Lab1
No ratings yet
New Lab1
95 pages
Practical On RDBMS
No ratings yet
Practical On RDBMS
58 pages
DBMS PPT Impt
No ratings yet
DBMS PPT Impt
76 pages
402 InformationTechnology Class X Sample Paper 1 AnswerKey
No ratings yet
402 InformationTechnology Class X Sample Paper 1 AnswerKey
5 pages
SQL Notes by Apna College
No ratings yet
SQL Notes by Apna College
29 pages
Data Base System Notes
No ratings yet
Data Base System Notes
76 pages
Systems Analysis and Design - Workshop 9 Questions
No ratings yet
Systems Analysis and Design - Workshop 9 Questions
3 pages
D.A.V Public School Sec-14 Faridabad Class X Preboard1 Set 2 Subject:Information Technology M.M: 50 Time:2 Hours
No ratings yet
D.A.V Public School Sec-14 Faridabad Class X Preboard1 Set 2 Subject:Information Technology M.M: 50 Time:2 Hours
7 pages
Student Support Material For All Students - Class - XII - IP - 0
No ratings yet
Student Support Material For All Students - Class - XII - IP - 0
173 pages
Mobile
No ratings yet
Mobile
67 pages
Rais12 SM CH04
No ratings yet
Rais12 SM CH04
41 pages
IP 12th SQL
No ratings yet
IP 12th SQL
11 pages
DataMigration AX2012
No ratings yet
DataMigration AX2012
29 pages
Index: S.N O. Experiment Date Remark S T. Sign
No ratings yet
Index: S.N O. Experiment Date Remark S T. Sign
34 pages
Customer (Custid, Custname, Age, Phone) Loan (Loanid, Amount, Custid, EMI)
No ratings yet
Customer (Custid, Custname, Age, Phone) Loan (Loanid, Amount, Custid, EMI)
8 pages
SQL Server by RN Reddy
No ratings yet
SQL Server by RN Reddy
233 pages
Modern Database Management 12th Edition Hoffer Solutions Manual Download
100% (1)
Modern Database Management 12th Edition Hoffer Solutions Manual Download
67 pages

Web Tech File

Uploaded by

Web Tech File

Uploaded by

Guru Tegh Bahadur Institute of Technology

(Affiliated to Guru Gobind Singh Indraprastha University, Dwarka, New Delhi)

Department of Computer Science & Engineering

Submitted to: Submitted by:

Aim:- Write a program to display basic html font, background

<h1>Welcome to My Web Page</h1>

Aim:- Write a program to print an ordered and unordered list

Aim:- Write html code to develop a web page having two

.box1 { background-color: red; }

Aim:- Design web pages for your college containing a

Aim:- Design a registration form.

<input type="radio" id="female" name="gender" value="female" required>

Aim:- Design web page for your hometown within attractive

<h1>Welcome to Delhi - The Heart of India</h1>

Use external, internal and inline CSS to format college webpage

Aim:- Create HTML page with JavaScript which takes integer

<h2>Odd or Even Number Checker</h2>

if (num === "") {

Aim:- Create HTML page that contains form with field

<label for="mobile">Mobile Number:</label>

let nameError = document.getElementById("nameError");

let isValid = true;

if (name === "") {

Create an XML file to store student formation like enrollment

<?xml version="1.0" encoding="UTF-8"?>

Write a program to make time table using DHTML.

<h2>Dynamic Time Table Generator</h2>

<button class="btn" onclick="addEntry()">Add Entry</button>

if (time === "" || subject === "") {

let table = document.getElementById("timetable");

a. Create GTBIT website using PHP.

$conn = new mysqli($servername, $username, $password, $dbname);

echo "<div class='card'><div class='card-title'>{$row['name']}</div></div>";

$stmt = $conn->prepare("INSERT INTO contacts (name, email, message) VALUES

<h3>Guru Tegh Bahadur Institute of Technology</h3>

<?php $conn->close(); ?>

@media (max-width: 768px) {

CREATE DATABASE gtbit_db;

CREATE TABLE departments (

CREATE TABLE courses (

CREATE TABLE faculty (

CREATE TABLE contacts (

You might also like