DEPARTMENT OF COMPUTER APPLICATION
WEB TECHNOLOGY LAB
(BMC251)
MCA - 1st Year
Even Sem (2025-26)
Submitted By:
Name: Durgesh Patel Submitted To:
Roll No: 2511980140004 Mr. Chaman Gautam
Assistant Professor
Year/Sem.: 1st Year/ 2nd Sem.
Department of CSE
VISHVESHWARYA GROUP OF INSTITUTIONS
(Affiliated to Dr A.P.J. Abdul Kalam Technical University, Lucknow U.P.)
S.N. Date of Date of Faculty
Program Name Experiment Submission Signature
1 Create a simple webpage using HTML.
2 Create a HTML page, which has properly aligned
paragraphs with image along with it.
3 Write a program to display list of items in different
styles.
4 Use frames to Include Images and Videos.
5 Add a Cascading Style sheet for designing the web
page.
6 Design a dynamic web page with validation using
JavaScript.
7 Write a program using JavaScript to demonstrate the
concept of built-in array methods.
8 Write a program using JavaScript to demonstrate the
concept of nested functions.
9 Write programs using JavaScript for Web Page to
display browsers information.
10 Write a program using JavaScript to merge property of
two objects.
11 Write a program using JavaScript to include a JS file
into another JS file.
Q. 1 Create a simple webpage using HTML
Aim:
To create a simple HTML webpage using basic tags.
HTML (HyperText Markup Language) is used to create webpages. It uses tags like <html>,
<head>, <body>, etc
Code
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page.</p>
</body>
</html>
Output
Q.2 Create a HTML page, which has properly aligned paragraphs with image along with it.
HTML (HyperText Markup Language) is used to design web pages.
Text alignment can be done using CSS properties like text-align.
Images are added using the <img> tag, and layout can be managed using CSS (like flexbox or
float).
Program
<!DOCTYPE html>
<html>
<head>
<title>Aligned Paragraph with Image</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
align-items: center;
margin: 20px;
}
.text {
width: 60%;
text-align: justify;
padding-right: 20px;
}
.image {
width: 40%;
}
.image img {
width: 100%;
height: auto;
border-radius: 10px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>My Web Page</h1>
<div class="container">
<div class="text">
<p>
This is a sample paragraph that is properly aligned using CSS.
The text is justified so that it looks clean and professional
on both sides. HTML and CSS together help in creating structured
and attractive web pages.
</p>
<p>
Along with the paragraph, an image is displayed on the right side.
This layout improves user experience and makes the webpage more
visually appealing. Flexbox is used here to align both elements
side by side.
</p>
</div>
<div class="image">
<img src="[Link] alt="Sample Image">
</div>
</div>
</body>
</html>
Output
Q. 3 Write a program to display list of items in different styles.
Aim:
To create an HTML program that displays lists of items in different styles.
Theory:
HTML provides different types of lists to organize data:
• Ordered List (<ol>) → displays items with numbers or letters
• Unordered List (<ul>) → displays items with bullets
• Description List (<dl>) → displays terms with descriptions
CSS can be used to change list styles like square, circle, Roman numbers, etc.
Code
<!DOCTYPE html> </ul>
<html>
<head> <h2>Unordered List (Circle)</h2>
<title>List Styles Example</title> <ul class="circle">
<style> <li>Red</li>
body { <li>Green</li>
font-family: Arial; <li>Blue</li>
} </ul>
.square { <h2>Ordered List (Roman)</h2>
list-style-type: square; <ol class="roman">
} <li>HTML</li>
<li>CSS</li>
.circle { <li>JavaScript</li>
list-style-type: circle; </ol>
}
<h2>Ordered List (Alphabet)</h2>
.roman { <ol class="alpha">
list-style-type: upper-roman; <li>Computer</li>
} <li>Keyboard</li>
<li>Mouse</li>
.alpha { </ol>
list-style-type: lower-alpha;
} <h2>Description List</h2>
</style> <dl>
</head> <dt>HTML</dt>
<body> <dd>Used to create web pages</dd>
<h1>Different List Styles</h1> <dt>CSS</dt>
<dd>Used to style web pages</dd>
<h2>Unordered List (Square)</h2> </dl>
<ul class="square">
<li>Apple</li> </body>
<li>Banana</li> </html>
<li>Mango</li>
Output
Q.4 Use frames to Include Images and Videos.
Aim:
To create an HTML webpage that uses frames (iframe) to display images and videos
Theory:
A frame is used to divide a webpage into sections.
In modern HTML, <iframe> (inline frame) is used to embed:
• Images
• Videos
• Other webpages
It allows displaying external content inside a webpage.
Code
<!DOCTYPE html>
<html> <h1>Using Frames (iFrame)</h1>
<head>
<title>Frames Example</title> <h2>Running different website in our web
<style> page</h2>
body { <iframe src="[Link]
font-family: Arial; width="400" height="250">
text-align: center; </iframe>
}
<h2>Video Frame</h2>
iframe { <iframe src="[Link]
margin: 10px; Q9YWU1N2g?si=mM_FoG8V2ugHn7oS"
border: 2px solid black; width="500" height="250"></iframe>
}
</style> </body>
</head> </html>
<body>
Output
Q.5 Add a Cascading Style sheet for designing the web page.
Aim:
To design a web page using Cascading Style Sheets (CSS).
Theory:
CSS (Cascading Style Sheets) is used to style and design web pages.
It controls layout, colors, fonts, spacing, and overall appearance.
There are three types of CSS:
1. Inline CSS → applied inside a tag
2. Internal CSS → applied inside <style> tag
3. External CSS → applied using a separate .css file
CSS improves the visual presentation of a webpage.
Code
File [Link]
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph styled using external CSS.</p>
<button>Click Me</button>
</body>
</html>
File [Link]
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph styled using external CSS.</p>
<button>Click Me</button>
</body>
</html>
Output
Q.6 Design a dynamic web page with validation using JavaScript.
Aim:
To create a dynamic web page with form validation using JavaScript.
Theory:
A dynamic web page responds to user actions using scripting languages like JavaScript.
Form validation ensures that users enter correct and complete data before submission.
JavaScript can validate:
• Empty fields
• Email format
• Password length
• Input type
This improves user experience and data accuracy.
Code
<!DOCTYPE html> let password =
<html> [Link]["myForm"]["password"].value;
<head>
<title>Form Validation</title> if (name == "") {
<style> alert("Name must be filled out");
body { return false;
font-family: Arial; }
text-align: center;
} if (email == "" || ![Link]("@")) {
alert("Enter a valid email");
form { return false;
width: 300px; }
margin: auto;
} if ([Link] < 6) {
alert("Password must be at least 6
input { characters");
width: 100%; return false;
padding: 8px; }
margin: 5px 0;
} alert("Form submitted successfully!");
return true;
button { }
padding: 10px; </script>
background-color: green; </head>
color: white; <body>
border: none;
} <h1>Registration Form</h1>
</style>
<form name="myForm" onsubmit="return
<script> validateForm()">
function validateForm() { <input type="text" name="name"
let name = placeholder="Enter Name">
[Link]["myForm"]["name"].value; <input type="text" name="email"
let email = placeholder="Enter Email">
[Link]["myForm"]["email"].value; <input type="password" name="password"
placeholder="Enter Password"> </html>
<button type="submit">Submit</button>
</form>
</body>
Output
Q.7 Write a program using JavaScript to demonstrate the concept of built-in array
methods.
Aim:
To write a JavaScript program demonstrating the use of built-in array methods.
Theory:
JavaScript arrays provide many built-in methods to manipulate data efficiently.
Some commonly used array methods are:
• push() → adds element at the end
• pop() → removes last element
• shift() → removes first element
• unshift() → adds element at beginning
• slice() → extracts part of array
• splice() → adds/removes elements
• sort() → sorts elements
• reverse() → reverses array
These methods make data handling easy and dynamic.
Code
<!DOCTYPE html>
<html>
<head>
<title>Array Methods</title>
</head>
<body>
<h1>JavaScript Array Methods Demo</h1>
<script>
let arr = ["Apple", "Banana", "Mango"];
[Link]("<b>Original Array:</b> " + arr + "<br><br>");
// push()
[Link]("Orange");
[Link]("<b>After push:</b> " + arr + "<br>");
// pop()
[Link]();
[Link]("<b>After pop:</b> " + arr + "<br>");
// shift()
[Link]();
[Link]("<b>After shift:</b> " + arr + "<br>");
// unshift()
[Link]("Grapes");
[Link]("<b>After unshift:</b> " + arr + "<br>");
// slice()
let newArr = [Link](1, 3);
[Link]("<b>Slice (1,3):</b> " + newArr + "<br>");
// splice()
[Link](1, 1, "Pineapple");
[Link]("<b>After splice:</b> " + arr + "<br>");
// sort()
[Link]();
[Link]("<b>After sort:</b> " + arr + "<br>");
// reverse()
[Link]();
[Link]("<b>After reverse:</b> " + arr + "<br>");
</script>
</body>
</html>
Output
Q. 8 Write a program using JavaScript to demonstrate the concept of nested functions.
Aim:
To write a JavaScript program demonstrating the concept of nested functions.
Theory:
A nested function is a function defined inside another function.
• The inner function can access variables of the outer function (this is called closure).
• It helps in better organization and data protection.
Code
<!DOCTYPE html> return "Hello, " + name + "! Welcome to
<html> JavaScript.";
<head> }
<title>Nested Functions</title>
</head> // Calling inner function
<body> return innerFunction();
}
<h1>JavaScript Nested Functions Demo</h1>
let result = outerFunction("Durgesh");
<script> [Link](result);
function outerFunction(name) { </script>
// Inner function </body>
function innerFunction() { </html>
Output
Q.9 Write programs using JavaScript for Web Page to display browsers information.
Aim:
To write a JavaScript program to display browser information on a web page.
Theory:
JavaScript provides the navigator object to get information about the browser.
Common properties:
• [Link] → Browser name
• [Link] → Browser version
• [Link] → Full browser details
• [Link] → Operating system
• [Link] → Browser language
This helps in understanding the user’s environment.
Code
<!DOCTYPE html>
<html>
<head>
<title>Browser Information</title>
<style>
body {
font-family: Arial;
text-align: center;
}
.box {
border: 2px solid black;
padding: 20px;
width: 400px;
margin: auto;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Browser Information</h1>
<div class="box" id="info"></div>
<script>
let info = "";
info += "<b>Browser Name:</b> " + [Link] + "<br><br>";
info += "<b>Browser Version:</b> " + [Link] + "<br><br>";
info += "<b>User Agent:</b> " + [Link] + "<br><br>";
info += "<b>Platform:</b> " + [Link] + "<br><br>";
info += "<b>Language:</b> " + [Link] + "<br><br>";
[Link]("info").innerHTML = info;
</script>
</body>
</html>
Output
Q.10 Write a program using JavaScript to merge property of two objects.
Aim:
To write a JavaScript program to merge properties of two objects.
Theory:
In JavaScript, objects store data in key-value pairs.
We can merge two objects using:
• [Link]() method
• Spread operator (...)
Code
<!DOCTYPE html> course: "MCA",
<html> age: 22 // same property (will override)
<head> };
<title>Merge Objects</title>
</head> // Merging using [Link]()
<body> let mergedObj = [Link]({}, obj1, obj2);
<h1>Merge Two Objects</h1> [Link]("<b>Object 1:</b> " +
[Link](obj1) + "<br><br>");
<script> [Link]("<b>Object 2:</b> " +
// First object [Link](obj2) + "<br><br>");
let obj1 = { [Link]("<b>Merged Object:</b> " +
name: "Durgesh", [Link](mergedObj));
age: 21 </script>
};
</body>
// Second object </html>
let obj2 = {
Output
Q.11 Write a program using JavaScript to include a JS file into another JS file.
Aim:
To write a JavaScript program to include one JS file into another.
Theory:
JavaScript files are usually included in HTML using the <script> tag.
• JavaScript does not directly include one JS file into another (like C/C++)
• Instead, multiple JS files are included in an HTML file
• Files are executed in the order they are included
Modern JavaScript (ES6) allows using:
• import and export (module system)
Code
[Link]
function greet() {
return "Hello from Script 1";
}
[Link]
function showMessage() {
let message = greet(); // calling function from [Link]
[Link](message);
}
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Include JS Files</title>
</head>
<body>
<h1>Including Multiple JS Files</h1>
<script src="[Link]"></script>
<script src="[Link]"></script>
<script>
showMessage(); // call function from [Link]
</script>
</body>
</html>
Output