Global Institute of Information Technology
Practical File of
Web Technology
Submitted To: Submitted By:
Dr. Samta Ma’am Abhishek.kr Thakur
MCA-2 Sem
(124037)
1|Page
INDEX
S.No. Content P.No. Sign.
1. Create a simple webpage using HTML 3
2. Create an HTML page… 4
3. Write a program to display a list… 5-6
4. Use frames to include images… 7-8
5. Add a CSS file for designing… 9-11
6. Design a dynamic webpage… 12-13
7. JavaScript program for built-in array… 14-15
8. Write a program using JavaScript… 16
9. JavaScript program to display… 17-18
10. JavaScript program to merge… 19
11. JavaScript program to include a Js… 20
12. Create a Servlet to validate… 21-22
13. Design a multi-page website… 23-41
2|Page
1. Create a simple webpage using HTML.
<!DOCTYPE html>
<html>
<head>
<title>Simple Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple webpage using HTML.</p>
</body>
</html>
Output:
3|Page
2. Create an HTML page with properly aligned paragraphs with an
image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Paragraphs and Image</title>
</head>
<body>
<div class="content">
<h1>Welcome to My Webpage</h1>
<img src="./globalnew.png" alt="Institute Logo">
<p>
This is the first paragraph. It's aligned to be justified, meaning the text
lines up evenly on both the left and right sides. This improves readability and
gives a clean appearance to the content.
</p>
<p>
This is the second paragraph. It continues the example by showing how
multiple paragraphs can be neatly aligned using CSS. We can replace this text
with your own content to suit the purpose of your page.
</p>
<p>
We can also customize the image above by changing the `src` attribute to
point to your own image URL or a local file. Make sure the image fits well
within the design of your page.
</p>
</div>
</body>
</html>
Output:
4|Page
3. Write a program to display a list of items in different styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styled List Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 style="text-align: center;">List of Items with Different Styles</h2>
<ul style="list-style-type: disc; color: darkblue; font-size: 18px;">
<li>Item 1 - Blue, large font, disc bullet</li>
</ul>
<ol style="list-style-type: decimal; color: green; font-weight: bold;">
<li>Item 2 - Green, bold, decimal numbering</li>
5|Page
</ol>
<ul style="list-style-type: square; color: crimson; font-style: italic;">
<li>Item 3 - Crimson, italic, square bullet</li>
</ul>
<ul style="list-style-type: circle; color: purple; text-transform: uppercase;">
<li>Item 4 - Purple, uppercase, circle bullet</li>
</ul>
<ul style="list-style-type: none; padding-left: 0;">
<li style="background-color: #f0f0f0; padding: 8px; border: 1px solid #ccc;">
Item 5 - No bullet, boxed with background
</li>
</ul>
</body>
</html>
Output:
6|Page
4. Use frames to include images and videos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images and Videos in Frames</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: row;
height: 100vh;
font-family: Arial, sans-serif;
}
.frame {
flex: 1;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.header {
text-align: center;
padding: 10px;
background-color: #f0f0f0;
font-size: 1.2em;
border-bottom: 1px solid #ccc;
}
iframe {
flex: 1;
width: 100%;
border: none;
}
</style>
</head>
<body>
7|Page
<!-- Left Frame: Image -->
<div class="frame">
<div class="header">Image Frame</div>
<iframe srcdoc="
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #fff;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src='./globalnew.png' alt='Institute Logo'>
</body>
</html>
"></iframe>
</div>
<!-- Right Frame: Video -->
<div class="frame">
<div class="header">Video Frame</div>
<iframe src="https://www.youtube.com/embed/J3iO2PYEEnw"
allowfullscreen></iframe>
</div>
</body>
</html>
8|Page
Output:
5. Add a CSS file for designing the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Webpage</title>
<style>
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
9|Page
color: #333;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #333;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 20px;
}
footer {
background-color: #ddd;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
10 | P a g e
.container {
max-width: 800px;
margin: auto;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Simple Webpage</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<main class="container">
<h2>About This Page</h2>
<p>This is a basic HTML and CSS example. It includes a header, navigation
bar, content area, and footer. You can use this as a template for building more
complex websites.</p>
</main>
<footer>
<em><p>© 2025 <a href="web tech">Web Tech</a></p></em>
</footer>
</body>
</html>
11 | P a g e
Output:
6. Design a dynamic webpage with validation using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
var name = document.getElementById("name").value.trim();
if (name === "") {
alert("Name cannot be empty!");
return false;
}
return true;
}
12 | P a g e
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter Name">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
13 | P a g e
7. JavaScript program for built-in array methods.
<!DOCTYPE html>
<html>
<head>
<title>Array Methods</title>
<script>
function displayArrayMethods() {
let numbers = [1, 2, 3, 4];
let output = "Original Array: " + numbers + "\n";
numbers.push(5);
output += "After push(5): " + numbers + "\n";
numbers.pop();
output += "After pop(): " + numbers + "\n";
numbers.unshift(0);
output += "After unshift(0): " + numbers + "\n";
numbers.shift();
output += "After shift(): " + numbers + "\n";
alert(output);
}
</script>
</head>
<body>
<button onclick="displayArrayMethods()">Show Array Methods</button>
</body>
</html>
14 | P a g e
Output-1:
Output-2:
15 | P a g e
8. Write a program using JavaScript to demonstrate the concept of
nested functions.
<!DOCTYPE html>
<html>
<head>
<title>Nested Functions</title>
<script>
function outerFunction() {
function innerFunction() {
alert("Hello from Inner Function!");
}
innerFunction();
}
</script>
</head>
<body>
<button onclick="outerFunction()">Run Nested Function</button>
</body>
</html>
Output-1:
16 | P a g e
Output-2:
9. JavaScript program to display browser information.
<!DOCTYPE html>
<html>
<head>
<title>Browser Info</title>
<script>
function showBrowserInfo() {
let browserInfo = "User Agent: " + navigator.userAgent;
alert(browserInfo);
}
</script>
</head>
<body>
<button onclick="showBrowserInfo()">Show Browser Info</button>
</body>
</html>
17 | P a g e
Output-1:
Output-2:
18 | P a g e
10. JavaScript program to merge two object properties.
<!DOCTYPE html>
<html>
<head>
<script>
function mergeObjects() {
let obj1 = { name: "Alice" };
let obj2 = { age: 25 };
let merged = { ...obj1, ...obj2 };
alert(JSON.stringify(merged));
}
</script>
</head>
<body>
<button onclick="mergeObjects()">Merge Objects</button>
</body>
</html>
Output-1:
19 | P a g e
Output-2:
11. JavaScript program to include a JS file into another.
<!-- File 1: index.html --!>
<!DOCTYPE html>
<html>
<head>
<script src="11.1.js"></script>
</head>
<body>
<h1>JS File Included</h1>
</body>
</html>
<!-- File 2: main.js --!>
console.log("This is main.js");
20 | P a g e
Output:
12. create a Servlet to validate username and password.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script>
function showSuccessMessage(event) {
event.preventDefault(); // Prevent actual form submission for demo
alert("Login successful!");
// You can proceed with form submission via AJAX here if needed
}
</script>
</head>
<body>
<form onsubmit="showSuccessMessage(event)">
<label for="username">Username:</label>
21 | P a g e
<input type="text" id="username" name="username"
autocomplete="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
autocomplete="current-password" required><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Output-1:
Output-2:
22 | P a g e
13. Design a multi-page website using JavaScript.
<!-- index.hmtl --!>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Global Educational College</title>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Global Educational College</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="academics.html">Academics</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main class="content-container">
<h2>Welcome to Global Educational College</h2>
<p>
Empowering students to learn, lead, and make a difference in the world.
Our mission is to provide a world-class education that fosters critical
thinking,
creativity, and global citizenship.
</p>
<p>
Global Educational College is strategically located in the most promising
and secure city of Greater Noida with
close proximity to the world of business and industries. Global College is in
Knowledge Park-I, an area
23 | P a g e
specifically earmarked by Greater Noida Industrial Development Authority
for Educational Institutes. The fresh
graduates have ample opportunities available to them due to the ever
growing industrial zone in the area.
</p>
</main>
<footer>
<p>© 2025 Global Educational College</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
Output:
24 | P a g e
<!-- about.hmtl --!>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>About Us -Global Educational College</title>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>About Global Educational College</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="academics.html">Academics</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main class="content-container">
<h2>Our History</h2>
<p>Founded in 2002,Global Educational College is committed to academic
excellence and innovation.</p>
<p>
Global Educational College is a dynamic and growth oriented College,
established by Global Education Trust,
New Delhi in the year 2002 to impart graduate and post- graduate level
educational programmes to equip students
for a meaningful career. These educational programmes enables the
students to compete in today’s demanding economy
of an inter-connected world. Global Educational College has always
maintained its commitment to provide overall
growth of students through innovative teaching methodology and training
them in Personality Development and Soft
Skill programmes.
</p>
25 | P a g e
<p>
Global Educational Colleges offer MBA, MBA (Integrated), MCA, MCA
(Integrated) BBA, BCA, B.Com, BA and B.Ed.
programmes. These programmes are approved by All India Council for
Technical Education (AICTE), Ministry of Human
Resource Development, Government of India and affiliated to Dr. A.P.J.
Abdul Kalam Technical University (AKTU)
Lucknow and Chaudhary Charan Singh University (CCSU), Meerut.
</p>
<p>
Global Educational College is strategically located in the most promising
and secure city of Greater Noida with
close proximity to the world of business and industries. Global College is in
Knowledge Park-I, an area
specifically earmarked by Greater Noida Industrial Development Authority
for Educational Institutes. The fresh
graduates have ample opportunities available to them due to the ever
growing industrial zone in the area.
</p>
</main>
<footer>
<p>© 2025 Global Educational College</p>
</footer>
</body>
</html>
26 | P a g e
Output:
<!-- academics.hmtl --!>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico" />
<title>Academics - Global Educational College</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
27 | P a g e
<h1>Academics at Global Educational College</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="academics.html">Academics</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main class="content-container">
<h2>Academic Departments</h2>
<ul>
<li>
<strong>Computer Science:</strong> Explore programming, software
engineering, artificial intelligence, and more
through hands-on learning and research.
</li>
<li>
<strong>Business Administration:</strong> Learn modern business
practices, leadership, marketing, finance, and
entrepreneurship with real-world case studies.
</li>
<li>
<strong>Biological Sciences:</strong> Discover the wonders of biology,
genetics, ecology, and lab-based research
in our state-of-the-art science facilities.
</li>
<li>
<strong>Arts & Humanities:</strong> Engage with literature, philosophy,
history, and the fine arts to develop
critical thinking and communication skills.
</li>
</ul>
</main>
<footer>
<p>© 2025 Global Educational College</p>
</footer>
</body>
</html>
28 | P a g e
Output:
<!-- Login-contact.hmtl --!>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico" />
<title>Global Educational College - Login & Contact</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
29 | P a g e
background: #f0f0f0;
}
header,
footer {
text-align: center;
background-color: #003366;
color: white;
padding: 1em 0;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
main {
max-width: 600px;
margin: 30px auto;
background: white;
padding: 20px;
border-radius: 10px;
}
fieldset {
border: none;
padding: 0;
}
label {
display: block;
margin-top: 15px;
}
input,
textarea,
button {
width: 100%;
padding: 8px;
30 | P a g e
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #003366;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #0055a5;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.tab {
margin: 0 10px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
cursor: pointer;
}
.tab.active {
background-color: #003366;
color: white;
}
.form-container {
display: none;
}
31 | P a g e
.form-container.active {
display: block;
}
#messageBox,
#formFeedback {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>Global Educational College</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="academics.html">Academics</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<div class="tabs">
<div class="tab active" id="loginTab">Login</div>
<div class="tab" id="contactTab">Contact</div>
</div>
<!-- Login Form -->
<div id="loginFormContainer" class="form-container active">
<form id="loginForm">
<fieldset>
<legend><strong>Login</strong></legend>
<label for="username">Username:</label>
<input type="text" id="username" required />
<label for="password">Password:</label>
32 | P a g e
<input type="password" id="password" required />
<button type="submit">Login</button>
<div id="messageBox"></div>
</fieldset>
</form>
</div>
<!-- Contact Form -->
<div id="contactFormContainer" class="form-container">
<form id="contactForm" action="submit_form.php" method="POST">
<fieldset>
<legend><strong>Contact Us</strong></legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5"
required></textarea>
<button type="submit">Send</button>
<div id="formFeedback"></div>
</fieldset>
</form>
</div>
</main>
<footer>
<p>© 2025 Global Educational College</p>
</footer>
<script>
// Toggle Tabs
const loginTab = document.getElementById('loginTab');
const contactTab = document.getElementById('contactTab');
33 | P a g e
const loginFormContainer =
document.getElementById('loginFormContainer');
const contactFormContainer =
document.getElementById('contactFormContainer');
loginTab.addEventListener('click', () => {
loginTab.classList.add('active');
contactTab.classList.remove('active');
loginFormContainer.classList.add('active');
contactFormContainer.classList.remove('active');
});
contactTab.addEventListener('click', () => {
contactTab.classList.add('active');
loginTab.classList.remove('active');
contactFormContainer.classList.add('active');
loginFormContainer.classList.remove('active');
});
// Login Validation (Demo Only)
const validUsername = "admin";
const validPassword = "password123";
document.getElementById("loginForm").addEventListener("submit",
function (event) {
event.preventDefault();
const username = document.getElementById("username").value.trim();
const password = document.getElementById("password").value.trim();
const messageBox = document.getElementById("messageBox");
if (username === validUsername && password === validPassword) {
messageBox.style.color = "green";
messageBox.textContent = "Login successful!";
} else {
messageBox.style.color = "red";
messageBox.textContent = "Invalid username or password.";
}
});
34 | P a g e
// Contact Form Client-Side Feedback (Optional)
document.getElementById("contactForm").addEventListener("submit",
function (e) {
const message = document.getElementById("message").value.trim();
const feedback = document.getElementById("formFeedback");
if (message.length < 10) {
e.preventDefault();
feedback.style.color = "red";
feedback.textContent = "Message must be at least 10 characters.";
} else {
feedback.style.color = "green";
feedback.textContent = "Thank you! Your message has been submitted.";
// For demo purposes. Remove in production if submitting to PHP
e.preventDefault();
}
});
</script>
</body>
</html>
Output-1:
35 | P a g e
Output-2:
Output-3:
36 | P a g e
<-- style.css --!>
/* ===== Global Reset & Base Styles ===== */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f4f7fa;
color: #333;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ===== Container for main content ===== */
.content-container {
max-width: 800px;
margin: 30px auto;
background: #fff;
padding: 25px 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* ===== Header Styles ===== */
header {
background-color: #003366;
color: white;
padding: 20px 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
header h1 {
font-weight: 700;
37 | P a g e
font-size: 2rem;
margin-bottom: 10px;
}
/* ===== Navigation Styles ===== */
nav {
margin-top: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: 600;
font-size: 1rem;
transition: color 0.3s ease;
position: relative;
}
nav a:hover,
nav a:focus {
color: #ffcc00;
outline: none;
}
/* Highlight the current page link */
nav a[aria-current="page"] {
border-bottom: 2px solid #ffcc00;
padding-bottom: 2px;
color: #ffcc00;
}
/* ===== Main Content Styles ===== */
main h2 {
color: #003366;
font-size: 1.75rem;
margin-bottom: 20px;
font-weight: 700;
}
38 | P a g e
main p {
font-size: 1.1rem;
margin-bottom: 18px;
color: #444;
}
main ul {
list-style-type: disc;
padding-left: 20px;
color: #333;
margin-bottom: 20px;
line-height: 1.8;
}
main ul li {
margin-bottom: 12px;
font-size: 1.1rem;
}
/* ===== Form Styles (Contact page) ===== */
form {
max-width: 600px;
margin: 0 auto;
}
fieldset {
border: 1px solid #ccc;
padding: 20px 25px;
border-radius: 6px;
background-color: #fafafa;
}
legend {
font-weight: 700;
font-size: 1.3rem;
margin-bottom: 15px;
color: #003366;
}
label {
39 | P a g e
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #333;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
font-family: inherit;
resize: vertical;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #003366;
outline: none;
}
button[type="submit"] {
background-color: #003366;
color: white;
padding: 12px 25px;
border: none;
border-radius: 6px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}
button[type="submit"]:hover,
40 | P a g e
button[type="submit"]:focus {
background-color: #002244;
outline: none;
}
/* ===== Footer Styles ===== */
footer {
text-align: center;
padding: 15px 0;
background-color: #003366;
color: white;
margin-top: auto;
font-size: 0.9rem;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
/* ===== Responsive Adjustments ===== */
@media (max-width: 600px) {
header h1 {
font-size: 1.5rem;
}
nav a {
display: inline-block;
margin: 10px 8px;
font-size: 0.95rem;
}
.content-container {
margin: 15px 15px;
padding: 20px;
}
main h2 {
font-size: 1.4rem;
}
}
41 | P a g e
