lOMoARcPSD|45228015
Wt practical file
Computer Science & Engineering (Guru Gobind Singh Indraprastha University)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
HMR
INSTITUTE OF TECHNOLOGY AND
MANAGEMENT
PRACTICAL FILE
Web Technology
CIE-356P
FOR
BACHELOR OF TECHNOLOGY, 3RD YEAR
DEPARTMENT-COMPUTER SCIENCE AND
ENGINEERING
SUBMITTED BY: - SUBMITTED TO:-
ADITYA ANAND Mr. PARDEEP
CSE-(6A) (CSE Department)
09813302721
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
INDEX
S.NO. AIM OF EXPERIMENT EXPERIMENT SUBMISSION REMARKS SIG.
DATE DATE
Design web pages for your college
containing a description of the courses,
1. departments, faculties, library etc, use href,
list tags
Write html code to develop a web page
having two frames that divide the
2. webpage into two equal rows and then divide
the row into equal columns fill each
frame with a different background color
Design a web page of your home town with
3. an attractive background color, text color, an
Image, font etc. (use internal CSS).
Use External, Internal, and Inline CSS to
4. format the college web page that you created.
Create HTML Page with JavaScript which
takes Integer number as input and tells
5. whether the number is ODD or EVEN.
Create HTML Page that contains form with
fields Name, Email, Mobile No, Gender,
6. Favourtie Colour and a button now write
JavaScript code to combine and display the
information in textbox when the button is
clicked and implement validation.
Create XML file to store student information
like Enrollment Number, Name, Mobile
7. Number, Email Id
Write a PHP script to read data from txt file
and display it in html table (the file contains
8. info in format Name: Password: Email)
Write a PHP script for login authentication.
Design html form which takes username &
9. password from user and validate against
stored username and password in file.
Write PHP script for storing and retrieving
10. user information from My Sql table. a.
Design A HTML page which takes Name,
Address, Email and Mobile No. From user
(register.php) b. Store this data in Mysql
database / text file. c. Next page display all
user in html table using PHP (display.php)
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
EXPERIMENT – 1
AIM - Design web pages for your college containing a description of the courses,
departments, faculties, library etc, use href, list tags.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 />
<title>EXPERIMENT -1 | WEB TECHNOLOGY </title>
</head>
<body>
<header>
<h2 class="logo">HMRITM</h2>
<div>
<nav class="navigation">
<a href="#homepage">Home</a>
<a href="#courses">Courses</a>
<a href="#departments">Departments</a>
<a href="#faculties">Faculties</a>
<a href="#library">Library</a>
</nav>
</div>
</header>
<main>
<section class="section" id = "home">Home</section>
<section class="section" id = "courses">Courses</section>
<section class="section" id = "departments">Departments</section>
<section class="section" id = "faculties">Faculties</section>
<section class="section" id = "library">Library</section>
</main>
<footer>
<p>© 2024, All rights reserved by Aditya Goyal</p>
</footer>
</body>
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
OUTPUT:
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
EXPERIMENT – 2
AIM - Write html code to develop a web page having two frames that divide the
webpage into two equal rows and then divide the row into equal columns fill each
frame with a different background color
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Experiment - 2 | Web technology</title>
<style>
body,
html {
height: 100%;
margin: 0; }
.row {
width: 100%;
height: 50%;
display: flex; }
.column {
flex: 1;
}
.frame1 {
background-color: blueviolet; }
.frame2 {
background-color: lightgreen; }
</style>
</head>
<body>
<div class="row frame1">
<div class="column" style="background-color: rgb(128, 240, 204)"></div>
<div class="column" style="background-color: seagreen"></div>
</div>
<div class="row frame2">
<div class="column" style="background-color: navajowhite"></div>
<div class="column" style="background-color: darkgray"></div>
</div>
</body>
</html>
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
OUTPUT:
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
EXPERIMENT – 3
AIM - Design a web page of your home town with an attractive background
color, text color, an Image, font etc. (use internal CSS).
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Experiment - 3 | Web technology</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
color: azure;
font-family: "poppins", "sans-serif";
}
body {
display: flex;
flex-direction: column;
background: linear-gradient(to bottom right, #cd7bd6, #0fb3ee);
justify-content: center;
align-items: center;
min-height: 100vh;
}
::-webkit-scrollbar {
display: none;
}
main {
width: 100%;
height: 100%;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
background-color: rgba(156, 211, 234, 0.5);
}
header div {
display: flex;
justify-content: center;
align-items: center;
}
.logo {
font-size: 2.3em;
color: #fff;
user-select: none;
}
.navigation a {
position: relative;
font-size: 1.2rem;
color: #fff;
text-decoration: none;
font-weight: 700;
margin-left: 40px;
}
.navigation a::after {
content: "";
position: absolute;
width: 100%;
height: 3px;
background: #00aff0;
border-radius: 5px;
left: 0;
bottom: -5px;
transform: scaleX(0);
transition: transform 0.5s;
}
.navigation a:hover::after {
transform: scaleX(1);
}
.homeLink {
text-decoration: none;
}
.burger {
position: relative;
width: 40px;
height: 30px;
background: transparent;
cursor: pointer;
display: none;
}
.burger input {
display: none;
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
}
.burger span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.burger span:nth-of-type(1) {
top: 0px;
transform-origin: left center;
}
.burger span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
transform-origin: left center;
}
.burger span:nth-of-type(3) {
top: 100%;
transform-origin: left center;
transform: translateY(-100%);
}
.burger input:checked ~ span:nth-of-type(1) {
transform: rotate(45deg);
top: 0px;
left: 5px;
}
.burger input:checked ~ span:nth-of-type(2) {
width: 0%;
opacity: 0;
}
.burger input:checked ~ span:nth-of-type(3) {
transform: rotate(-45deg);
top: 28px;
left: 5px;
}
@media (max-width: 945px) {
.burger {
display: block;
}
.navigation {
display: none;
}
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
.logo {
font-size: 1.4rem;
}
.home {
flex-direction: column;
}
.about {
flex-direction: column;
}
.attractions {
flex-direction: column-reverse;
}
.activities {
flex-direction: column;
}
}
.mobile-nav {
position: absolute;
top: 70px;
right: 0;
flex-direction: column;
background: transparent;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
padding: 20px;
display: none;
}
.mobile-nav nav {
display: flex;
align-items: start;
flex-direction: column;
gap: 10px;
}
.mobile-nav nav a {
font-size: 1.3em;
color: #fff;
text-decoration: none;
font-weight: 700;
padding: 10px;
}
.mobile-nav nav a:hover {
color: #80ddff;
}
section {
min-height: 100vh;
padding: 6rem 9% 2rem;
}
.home {
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
background: transparent;
background-color: rgba(0, 0, 0, 0.6);
}
h1 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.3;
}
p{
font-size: 1.6rem;
}
.hometownName {
color: #4dd0ff;
}
.homeimg img {
width: 350px;
height: 350px;
border-radius: 50%;
box-shadow: 0px 0px 30px #fff;
}
.about {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
background: transparent;
background-color: rgba(0, 0, 0, 0.4);
}
.aboutimg img {
width: 350px;
height: 350px;
border-radius: 40px;
box-shadow: 0px 0px 30px #fff;
}
.attractions {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
background: transparent;
background-color: rgba(0, 0, 0, 0.3);
}
.attractions-content ul p {
font-size: 1.7rem;
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
font-weight: 700;
margin-bottom: 10px;
}
.attractions-content ul li {
font-size: 1.6rem;
}
.activities {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
background: transparent;
background-color: rgba(0, 0, 0, 0.2);
}
.activities-content ul p {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 10px;
}
.activities-content ul li {
font-size: 1.6rem;
}
footer {
background: #000;
display: flex;
width: 100%;
padding: 1.2rem;
color: #fff;
justify-content: center;
align-items: center;
}
footer p {
font-size: 1.3rem;
}
</style>
</head>
<body>
<header>
<a href="#home" class="homeLink">
<h2 class="logo">Bodh Gaya, Bihar</h2>
</a>
<div>
<nav class="navigation">
<a href="#about">About</a>
<a href="#attractions">Attractions and Landmarks</a>
<a href="#activities">Outdoor Activities</a>
</nav>
<label class="burger" for="burger">
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
<input type="checkbox" id="burger" />
<span></span>
<span></span>
<span></span>
</label>
<div class="mobile-nav" id="mobile-nav">
<nav>
<a href="#about">About</a>
<a href="#attractions">Attractions and Landmarks</a>
<a href="#activities">Outdoor Activities</a>
</nav>
</div>
</div>
</header>
<main>
<section class="home" id="home">
<div class="home-content">
<h1>Welcome to <span class="hometownName">Bodh Gaya,
Bihar</span></h1>
<p>
Welcome to the official webpage of BodhGaya, a place of
profound spiritual significance nestled in the heart of Bihar,
India.Whether you're a visitor planning your trip or a curious
explorer, we invite you to discover the rich heritage, vibrant culture, and
serene beauty of our beloved village.
</p>
</div>
<div class="homeimg">
<img src="C:\Users\adity\Desktop\download.jpeg" alt />
</div>
</section>
<section class="about" id="about">
<div class="aboutimg">
<img src="C:\Users\adity\Desktop\download (1).jpeg" alt />
</div>
<div class="about-content">
<h1>About BodhGaya</h1>
<p>
BodhGaya holds a special place in the hearts of millions
around the world as the site of Gautama Buddha's enlightenment over
2,500 years ago. Situated along the banks of the Niranjana River,
this sacred village has drawn pilgrims and seekers from far and wide
for centuries. It is here that the Bodhi Tree, under which
the Buddha attained enlightenment, continues to stand as a symbol
of peace and enlightenment.
</p>
</div>
</section>
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
<section class="attractions" id="attractions">
<div class="attractions-content">
<h1>Attractions and Landmarks</h1>
<ul>
<p>
Explore the timeless beauty and spiritual resonance
of BodhGaya through its iconic landmarks and attractions:
</p>
<li>
<b>Mahabodhi Temple: </b>A UNESCO World Heritage
Site, the Mahabodhi Temple is a magnificent structure built at
the site of the Buddha's enlightenment. Adorned with intricate
carvings and surrounded by lush gardens, it is a place of deep
reverence and contemplation.
</li>
<li>
<b>Bodhi Tree: </b>Experience the tranquility of
sitting beneath the sacred Bodhi Tree, believed to be a direct
descendant of the original tree under which the Buddha attained
enlightenment.
</li>
<li>
<b>Great Buddha Statue: </b>Marvel at the towering
Great Buddha Statue, a serene depiction of the Buddha in a meditative
posture,overlooking the landscape with compassion and wisdom.
</li>
</ul>
</div>
<div class="aboutimg">
<img src="C:\Users\adity\Desktop\download (2).jpeg" />
</div>
</section>
<section class="activities" id="activities">
<div class="aboutimg">
<img src="C:\Users\adity\Desktop\download (3).jpeg" alt />
</div>
<div class="activities-content">
<h1>Attractions and Landmarks</h1>
<ul>
<p>Immerse yourself in the natural beauty surrounding
BodhGaya:</p>
<li>
<b>Niranjana River: </b>Take a peaceful stroll along
the banks of the Niranjana River, where the gentle flow of water
and rustling of leaves create a serene atmosphere for reflection
and relaxation.
</li>
<li>
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
<b>Rajgir Hills: </b>Embark on a scenic hike through
the picturesque Rajgir Hills, known for their panoramic
views of the surrounding countryside and historical significance
in Buddhist lore.
</li>
</ul>
</div>
</section>
</main>
<footer>
<p>© 2024 Aditya Goyal, All rights reserved</p>
</footer>
<script>
const checkbox = document.getElementById("burger");
const div = document.getElementById("mobile-nav");
checkbox.addEventListener("change", function () {
if (checkbox.checked) {
div.style.display = "block";
} else {
div.style.display = "none";
}
});
</script>
</body>
</html>
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
OUTPUT:
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
EXPERIMENT – 4
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
AIM - Use External, Internal, and Inline CSS to format the college web page that
you created.
CODE:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Experiment - 4 | Web technology</title>
<link rel="stylesheet" href="EXP-4.css" />
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
font-family: "poppins", "sans-serif";
}
body {
display: flex;
flex-direction: column;
background: linear-gradient(to bottom right, #e600ff, #00aff0);
justify-content: center;
align-items: center;
min-height: 100vh;
}
::-webkit-scrollbar {
display: none;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.navigation a {
position: relative;
font-size: 1.3em;
color: #fff;
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
text-decoration: none;
font-weight: 700;
margin-left: 40px;
}
.navigation a::after {
content: "";
position: absolute;
width: 100%;
height: 3px;
background: #00aff0;
border-radius: 5px;
left: 0;
bottom: -5px;
transform: scaleX(0);
transition: transform 0.5s;
}
.navigation a:hover::after {
transform: scaleX(1);
}
</style>
<body>
<header>
<h2 class="logo" style="font-size: 3em; color: #fff; user-select:
none">
HMRITM
</h2>
<div style="display: flex; justify-content: center; align-items:
center">
<nav class="navigation">
<a href="#home">Home</a>
<a href="#courses">Courses</a>
<a href="#departments">Departments</a>
<a href="#faculties">Faculties</a>
<a href="#library">Library</a>
</nav>
</div>
</header>
<main>
<section class="section" id="home">Home</section>
<section class="section" id="courses">courses</section>
<section class="section" id="departments">departments</section>
<section class="section" id="faculties">faculties</section>
<section class="section" id="library">library</section>
</main>
<footer
style="
background: #000;
display: flex;
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
width: 100%;
padding: 1.2rem;
color: #fff;
justify-content: center;
align-items: center;
">
<p style="font-size: 1.3rem">© 2024, All rights reserved</p>
</footer>
</body>
</html>
CSS:
.burger {
position: relative;
width: 40px;
height: 30px;
background: transparent;
cursor: pointer;
display: none; }
.burger input {
display: none;
}
.burger span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.burger span:nth-of-type(1) {
top: 0px;
transform-origin: left center;
}
.burger span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
transform-origin: left center;
}
.burger span:nth-of-type(3) {
top: 100%;
transform-origin: left center;
transform: translateY(-100%);
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
}
.burger input:checked~span:nth-of-type(1) {
transform: rotate(45deg);
top: 0px;
left: 5px;
}
.burger input:checked~span:nth-of-type(2) {
width: 0%;
opacity: 0;
}
.burger input:checked~span:nth-of-type(3) {
transform: rotate(-45deg);
top: 28px;
left: 5px;
}
@media (max-width: 940px) {
.burger {
display: block;
}
.navigation {
display: none;
}
}
main {
width: 100%; }
.section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
font-size: 3rem;
color: #fff;
}
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
OUTPUT:
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
EXPERIMENT – 5
AIM - Create HTML Page with JavaScript which takes Integer number as input
and tells whether the number is ODD or EVEN
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
background: linear-gradient(to bottom right, #e600ff, #00aff0);
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}
.input-container {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(to right, rgb(172, 235, 158), rgb(204, 102, 29));
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
input[type="number"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #00ddff;
border-radius: 4px;
outline: none;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 4px;
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
}
button:hover {
opacity: 0.8;
}
#result {
color: #ff0011;
margin-top: 16px;
}
</style>
</head>
<body>
<div class="container">
<div class="input-container">
<h1>Check Even or Odd</h1>
<input type="number" id="num" placeholder="Enter a number" required />
<button onclick="checkOddEven()">Check</button>
<p id="result"></p>
</div>
</div>
<script>
function checkOddEven() {
var number = document.getElementById("num").value;
var result = document.getElementById("result");
if (number === "") {
alert("Enter some input !!");
return;
}
number = parseInt(number);
if (number % 2 === 0) {
result.innerText = number + " is an Even number";
} else {
result.innerText = number + " is an Odd number";
}
}
</script>
</body>
</html>
OUTPUT :
Downloaded by Shivam Gupta (sg7320968@gmail.com)
lOMoARcPSD|45228015
Downloaded by Shivam Gupta (sg7320968@gmail.com)
