Scribd
Upload
6 views

wt-practical-file

The document is a practical file for a Web Technology course at HMR Institute of Technology and Management, detailing various experiments related to web page design and development. It includes aims, HTML code examples, and descriptions of experiments such as creating web pages, using CSS, JavaScript, and PHP for different functionalities. The file is submitted by a student named Aditya Anand and includes an index of the experiments conducted.

Uploaded by

shivkumarbhardwaj043
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

wt-practical-file

The document is a practical file for a Web Technology course at HMR Institute of Technology and Management, detailing various experiments related to web page design and development. It includes aims, HTML code examples, and descriptions of experiments such as creating web pages, using CSS, JavaScript, and PHP for different functionalities. The file is submitted by a student named Aditya Anand and includes an index of the experiments conducted.

Uploaded by

shivkumarbhardwaj043
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

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 ([email protected])
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 ([email protected])


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 ([email protected])


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>&copy; 2024, All rights reserved by Aditya Goyal</p>
</footer>
</body>

Downloaded by Shivam Gupta ([email protected])


lOMoARcPSD|45228015

OUTPUT:

Downloaded by Shivam Gupta ([email protected])


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 ([email protected])


lOMoARcPSD|45228015

OUTPUT:

Downloaded by Shivam Gupta ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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 ([email protected])


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>&copy; 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 ([email protected])


lOMoARcPSD|45228015

OUTPUT:

Downloaded by Shivam Gupta ([email protected])


lOMoARcPSD|45228015

EXPERIMENT – 4

Downloaded by Shivam Gupta ([email protected])


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 ([email protected])
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 ([email protected])


lOMoARcPSD|45228015

width: 100%;
padding: 1.2rem;
color: #fff;
justify-content: center;
align-items: center;
">
<p style="font-size: 1.3rem">&copy; 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 ([email protected])


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 ([email protected])


lOMoARcPSD|45228015

OUTPUT:

Downloaded by Shivam Gupta ([email protected])


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 ([email protected])


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 ([email protected])


lOMoARcPSD|45228015

Downloaded by Shivam Gupta ([email protected])

You might also like