LAB MANUAL

OF
WEB TECHNOLOGY
(BCACCA1204)

USING
HTML,XML,Java Script

BCA 1st Semester

I Semester Academic
Session
2024-2025

Prepared By:
Mr. Somnath
Bhattacharya
 TABLE OF CONTENTS

S.No. Contents Page No.

1 Lab Rules 2-3
2 Instructions 4
3 Syllabus 5
4 Marks Scheme 6
5 Lab Plan 7
6 Lab objective 8
7 List of lab exercises 9
8 Resources 10
9 Experiments 11-47
 LAB RULES

Responsibilities of Users
Users are expected to follow some fairly obvious rules of conduct:

Always:

• Enter the lab on time and leave at proper time.

• Wait for the previous class to leave before the next class enters.
• Keep the bag outside in the respective racks.
• Utilize lab hours in the corresponding.
• Turn off the machine before leaving the lab unless a member of lab staff has specifically told you not to
do so.
• Leave the labs at least as nice as you found them.
• If you notice a problem with a piece of equipment (e.g. a computer doesn't respond) or the room in
general (e.g. cooling, heating, lighting) please report it to lab staff immediately. Do not attempt to fix the
problem yourself.

Never:

• Don't abuse the equipment.

• Do not adjust the heat or air conditioners. If you feel the temperature is not properly set, inform lab
staff; we will attempt to maintain a balance that is healthy for people and machines.
• Do not attempt to reboot a computer. Report problems to lab staff.
• Do not remove or modify any software or file without permission.
• Do not remove printers and machines from the network without being explicitly told to do so by lab staff.
• Don't monopolize equipment. If you're going to be away from your machine for more than 10 or 15
minutes, log out before leaving. This is both for the security of your account, and to ensure that others are
able to use the lab resources while you are not.
 • Don’t use internet, internet chat of any kind in your regular lab schedule.
• Do not download or upload of MP3, JPG or MPEG files.
• No games are allowed in the lab sessions.
• No hardware including USB drives can be connected or disconnected in the labs without prior permission
of the lab in-charge.
• No food or drink is allowed in the lab or near any of the equipment. Aside from the fact that it leaves
a mess and attracts pests, spilling anything on a keyboard or other piece of computer equipment could
cause permanent, irreparable, and costly damage. (and in fact has) If you need to eat or drink, take a break
and do so in the canteen.
• Don’t bring any external material in the lab, except your lab record, copy and books.
• Don’t bring the mobile phones in the lab. If necessary, then keep them in silence mode.
• Please be considerate of those around you, especially in terms of noise level. While labs are a natural
place for conversations of all types, kindly keep the volume turned down.

If you are having problems or questions, please go to either the faculty, lab in-charge or the lab supporting
staff. They will help you. We need your full support and cooperation for smooth functioning of the lab.
 INSTRUCTIONS

Before entering in the lab

All the students are supposed to prepare the theory regarding the next experiment. Students are
supposed to bring the practical file and the lab copy.
Previous programs should be written in the practical file.
All the students must follow the instructions, failing which he/she may not be allowed in the lab.

While working in the lab

Adhere to experimental schedule as instructed by the lab in-charge. Get the

previously executed program signed by the instructor.
Get the output of the current program checked by the instructor in the lab copy. Each student
should work on his/her assigned computer at each turn of the lab. Take responsibility of valuable
accessories.
Concentrate on the assigned practical and do not play games
If anyone caught red handed carrying any equipment of the lab, then he/she will have to face serious
consequences.
 Code: BCACCA1204 Web 1 Credit [LTP:0-0-2]
Technology
Lab manual

A. LIST OF EXPERIMENTS:

Hello World Web Page

1(a)Create a web page using basic HTML features like tags, attributes, elements and page title.
(b). How to install and configure a web server.

2. Write a HTML program for demonstrating Hyperlinks.

a. Navigation from one page to another.
b. Navigation within the page.

3. Write a HTML program to develop a static Home Page using frames.

4. Write a HTML program to develop a static Registration Form

5. Create the following webpage

a. Show the class time table in a tabular format.
b. Create a web page using HTML to show your geolocation.

6. Create a webpage using HTML for audio and video player.

7. Write HTML for demonstration of cascading style sheets.

a. Embedded stylesheets.
b. External stylesheets.
c. Inline styles.

8. Write a JavaScript program to validate the USER LOGIN page.

9. Write a program for implementing XML documents for CUSTOMER DETAILS.

10. Write an internal Document Type Definition to validate XML for CUSTOMER DETAILS.

12. Develop a static website.

 MARKS SCHEME

Examination Marks Scheme

• Practical (Laboratory) Subjects:-

a. Internal Evaluation (IE) 60%

CIE (Pr): Performance, Lab Record, Viva, Attendance and 40%

discipline- Two Times

MSE (Pr): Performance, Lab Record, Viva, Attendance 20%

and discipline- One Time

b. End Semester Exam (ESE) - One Time 40%

TOTAL 100 %
 Internal Assessment System
Total Marks – 10

Performance &
Attendance Discipline Recor Total
Viva
d
1 1 5 3 10

LAB PLAN

Total number of experiments 12

Total number of turns required 12
Number of turns required for

Experiment Number Turns Turn

Required No.
Exp.1 1 1
Exp.2 1 2
Exp.3 1 3
Exp.4 1 4
Exp.5 1 5
Exp.6 1 6
Exp.7 1 7
Exp.8 1 8
Exp.9 1 9
Exp.10 1 10
Exp.11 1 11
Exp.12 1 12
Distribution of lab hours

Attendance 05 minutes
Explanation of features of language 15 minutes
Explanation of experiment 15 minutes

Performance of experiment 70 minutes

Viva / Quiz / Queries 15 minutes

Total 120 minutes

Lab Objective
Understanding Web Fundamentals:
 Learn the basics of how the web works, including the client-server model, HTTP/HTTPS
protocols, and web architecture.
HTML/CSS Proficiency:
 Develop proficiency in HTML for structuring web content and CSS for styling web pages.
 Create responsive web designs that work across different devices and screen sizes.
JavaScript and Front-End Development:
 Gain a strong understanding of JavaScript to create dynamic and interactive web pages.
 Learn to use modern JavaScript frameworks and libraries like React, Angular, or Vue.js.
Server-Side Programming:
 Understand the basics of server-side programming and back-end development.
 Learn to use server-side languages and frameworks.

Web Hosting and Deployment:

 Learn how to deploy web applications to live servers.

Performance Optimization:
 Learn techniques for optimizing web application performance.
 Understand the importance of minimizing load times and improving user experience.
 List of Lab Exercises
Sr. No. Name of experiment
1.
1(a)Create a web page using basic HTML features like tags, attributes, elements and
page title.
(b). How to install and configure a web server.

2.
Write a HTML program for demonstrating Hyperlinks.
a. Navigation from one page to another.
b. Navigation within the page.

3.
Write a HTML program to develop a static Home Page using frames.
4.
Write a HTML program to develop a static Registration Form
5.
Create the following webpage
a. Show the class time table in a tabular format.
b. Create a web page using HTML to show your geolocation.

6.
Create the following webpage
a. Show the class time table in a tabular format.
b. Create a web page using HTML to show your geolocation.

7. Write HTML for demonstration of cascading style sheets.

a. Embedded stylesheets.
b. External stylesheets.
c. Inline styles.

8.
Write a JavaScript program to validate the
USER LOGIN page.
9.
Write a program for implementing XML documents for CUSTOMER DETAILS.

10.
Write an internal Document Type Definition to validate XML for CUSTOMER
DETAILS.
11.
Write an internal Document Type Definition to validate XML for CUSTOMER DETAILS.
12.
Develop a static website.
 Resources for all the labs

Hardware:

1. Computer

2. Peripheral
devices

Software:
• Visual Studio Code
• Visual Studio
• Notepad

Text Books:
1. Introduction to Web Technology by Pankaj Sharma
2. Web Technologies by Achyut Godbole, Atul Kahate

Reference Books:

Web Technology: A developer’s perspective by N. P. Gopalan

Reference Websites:
 Udemy (Paid)
 FreeCodeCamp – (Free)
 Microsoft Learn – (Free)
 Pluralsight – (Free)
 Treehouse – (Paid)
 W3Schools – (Free/Paid)
 Codeacademy – (Free/Paid)
 Odin Project – (Free)
 Experiment:1

Name of the experiment: (a) Create a web page using basic HTML features like tags, attributes,
elements and page title.
(b). How to install and configure a web server.

Solution:(a)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My First Web Page</h1>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>About Me</h2>
<p>Hi! My name is John Doe. This is my first web page. I am learning HTML and web
development.</p>
<img src="profile.jpg" alt="Profile Picture" width="200">
</section>
<section id="services">
<h2>Services</h2>
<p>Here are some services I offer:</p>
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>SEO Optimization</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<br>
<input type="submit" value="Submit">
</form>
</section>
</main>
<footer>
<p>&copy; 2024 John Doe. All rights reserved.</p>
 </footer>
</body>
</html>

Output:

1(b):

Installing and configuring a web server on a Windows platform can be done using various software, but
one of the most popular and widely used options is IIS (Internet Information Services). Below is a step-
by-step guide to help you install and configure IIS on Windows.
Step 1: Install IIS
1. Open the Control Panel:
o Click on the Start menu and type "Control Panel," then press Enter.
2. Go to Programs and Features:
o Click on Programs and then Programs and Features.
3. Turn Windows features on or off:
o In the left-hand sidebar, click on Turn Windows features on or off.
4. Enable IIS:
o In the Windows Features dialog, check the box for Internet Information Services.
o Expand the Internet Information Services tree to ensure that the necessary features are
selected. For a basic setup, the default options are sufficient, but you can also select
additional features as needed.
o Click OK and wait for the installation to complete.
Step 2: Verify the Installation
1. Open a Web Browser:
o Open any web browser and enter http://localhost.
2. Check the Default IIS Page:
o You should see the default IIS welcome page, which means IIS is installed and running.
Step 3: Configure IIS
1. Open the IIS Manager:
o Click on the Start menu, type "IIS Manager," and press Enter.
2. Add a New Website:
o In the IIS Manager, expand the node for your computer in the left-hand Connections pane.
o Right-click on Sites and select Add Website.
3. Fill in the Site Information:
 o Site name: Enter a name for your site.
o Physical path: Browse to or create a directory where your site's files will be stored (e.g.,
C:\inetpub\wwwroot\yoursite).
o Binding: Select the type (typically http), IP address, and port (usually 80 for HTTP).
o Click OK to create the site.
4. Configure the Site:
o Click on your newly created site in the left-hand Connections pane.
o In the center pane, you can configure various settings like authentication, SSL, default
documents, etc.
Step 4: Set Up Directory and Permissions
1. Create Directory Structure:
o If you haven’t already, create the directory structure for your site (e.g.,
C:\inetpub\wwwroot\yoursite).
2. Set Permissions:
o Right-click on your site’s folder, select Properties, then go to the Security tab.
o Ensure that the IIS_IUSRS group has appropriate permissions to read and execute files.
Step 5: Create an Index Page
1. Create a Simple HTML Page:
o Open Notepad (or any text editor) and create an index.html file with some basic HTML
content:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Your Site!</title>
</head>
<body>
<h1>Success! Your IIS server is configured correctly.</h1>
</body>
</html>

1. Save the File:

o Save the file to the directory you specified for your site (e.g.,
C:\inetpub\wwwroot\yoursite\index.html).
Step 6: Test Your Configuration
1. Open a Web Browser:
o Open a web browser and navigate to http://localhost or http://<your_site_name> if you
set up a custom site name.
2. Verify the Content:
o You should see the content of your index.html page.

Experiment:2

Write a HTML program for demonstrating Hyperlinks.

a. Navigation from one page to another.
b. Navigation within the page.

File1: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyperlink Demonstration</title>
</head>
<body>
<h1>Welcome to the Hyperlink Demonstration</h1>
<p>This page demonstrates hyperlinks.</p>

<!-- Navigation to another page -->

<p><a href="page2.html">Go to Page 2</a></p>

<!-- Navigation within the same page -->

<h2 id="section1">Section 1</h2>
<p>This is the first section.</p>
<p><a href="#section2">Go to Section 2</a></p>

<h2 id="section2">Section 2</h2>

<p>This is the second section.</p>
<p><a href="#section1">Go to Section 1</a></p>
</body>
</html>

File 2:page2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 2</title>
</head>
<body>
<h1>Welcome to Page 2</h1>
<p>This is the second page.</p>

<!-- Navigation back to the first page -->

<p><a href="index.html">Go back to the main page</a></p>
</body>
</html>
Output:
Experiment:3

Write a HTML program to develop a static Home Page using frames.

File 1: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page with Frames</title>
</head>
<frameset rows="20%,*">
<frame src="header.html" name="headerFrame">
<frameset cols="20%,*">
<frame src="menu.html" name="menuFrame">
<frame src="content.html" name="contentFrame">
</frameset>
</frameset>
<noframes>
<body>
<p>Your browser does not support frames. Please update your browser.</p>
</body>
</noframes>
</html>

File 2: header.html

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

File 3: menu.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Menu</title>
</head>
<body>
<ul>
<li><a href="content.html" target="contentFrame">Home</a></li>
<li><a href="about.html" target="contentFrame">About</a></li>
<li><a href="contact.html" target="contentFrame">Contact</a></li>
</ul>
</body>
</html>

File 4: content.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content</title>
</head>
<body>
<h2>Home Page</h2>
<p>This is the home page content.</p>
</body>
</html>

File 5: about.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
</head>
<body>
<h2>About Us</h2>
<p>This is the about us page content.</p>
</body>
</html>

File 6: 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</title>
</head>
<body>
<h2>Contact Us</h2>
<p>This is the contact page content.</p>
</body>
</html>

Explanation:
 index.html: This is the main page that uses frames to divide the layout. The outer
<frameset> divides the page into two rows: the header (20%) and the main content
area. The inner <frameset> divides the main content area into two columns: the
menu (20%) and the main content frame.
 header.html: This file contains the header of the website.
 menu.html: This file contains the navigation menu with links that load different
content into the contentFrame.
 content.html, about.html, and contact.html: These files contain the content for the
home, about, and contact pages, respectively.
Save these files in the same directory and open index.html in your web browser to see the
frames in action. However, for modern web development, consider using CSS Grid or Flexbox
for layout purposes.

Output:

Experiment:04
Write a HTML program to develop a static Registration Form.

<!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>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
 align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form>
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" required>

<label for="lastname">Last Name</label>

<input type="text" id="lastname" name="lastname" required>

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="password">Password</label>
<input type="password" id="password" name="password" required>
 <label for="confirm_password">Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password"
required>

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

Output:

This HTML code creates a registration form with fields for the first name, last name, email,
password, and password confirmation. It also includes basic CSS for styling. The form is
static and does not perform any actions when submitted. You can add backend functionality
or JavaScript validation to enhance it further.

Experiment:05

Create the following webpage:

a. Show the class time table in a tabular format.

b. Create a web page using HTML to show your geolocation.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
table {
border-collapse: collapse;
width: 80%;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
caption {
margin-bottom: 10px;
font-size: 1.5em;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>Class Timetable</caption>
<tr>
<th>Day/Time</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>1:00 - 2:00</th>
<th>2:00 - 3:00</th>
<th>3:00 - 4:00</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td>Lunch</td>
 <td>Chemistry</td>
<td>History</td>
<td>Art</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Biology</td>
<td>Math</td>
<td>English</td>
<td>Lunch</td>
<td>PE</td>
<td>Physics</td>
<td>Geography</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Chemistry</td>
<td>History</td>
<td>Math</td>
<td>Lunch</td>
<td>English</td>
<td>PE</td>
<td>Computer Science</td>
</tr>
<tr>
<td>Thursday</td>
<td>Physics</td>
<td>Geography</td>
<td>Biology</td>
<td>Lunch</td>
<td>Math</td>
<td>History</td>
<td>Art</td>
</tr>
<tr>
<td>Friday</td>
<td>English</td>
<td>PE</td>
<td>Math</td>
<td>Lunch</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Computer Science</td>
</tr>
</table>
</body>
</html>
Output:

(b) Create a web page using HTML to show your geolocation.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geolocation Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>Show Your Geolocation</h1>
<button onclick="getLocation()">Show My Location</button>
<p id="status"></p>
 <div id="map"></div>

<script>
function getLocation() {
const status = document.getElementById('status');
const map = document.getElementById('map');

if (navigator.geolocation) {
status.textContent = 'Locating…';
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
status.textContent = 'Geolocation is not supported by this browser.';
}
}

function showPosition(position) {
const status = document.getElementById('status');
const map = document.getElementById('map');
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;

status.textContent = `Latitude: ${latitude}, Longitude: ${longitude}`;

const img = new Image();

img.src =
`https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom
=14&size=400x300&sensor=false&key=YOUR_API_KEY`;
map.innerHTML = '';
map.appendChild(img);
}

function showError(error) {
const status = document.getElementById('status');
switch (error.code) {
case error.PERMISSION_DENIED:
status.textContent = 'User denied the request for Geolocation.';
break;
case error.POSITION_UNAVAILABLE:
status.textContent = 'Location information is unavailable.';
break;
case error.TIMEOUT:
status.textContent = 'The request to get user location timed out.';
break;
case error.UNKNOWN_ERROR:
status.textContent = 'An unknown error occurred.';
break;
}
}
</script>
</body>
</html>

Output:
 Experiment:07
Write HTML for demonstration of cascading style sheets.
a. Embedded stylesheets.
b. External stylesheets.
c. Inline styles.
 Experiment: 08

Write a JavaScript program to validate the USER LOGIN page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Login</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
margin-bottom: 20px;
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
 input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>User Login</h2>
<div id="error" class="error"></div>
<form id="loginForm" onsubmit="return validateForm()">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>

<label for="password">Password</label>
<input type="password" id="password" name="password" required>

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

<script>
function validateForm() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorDiv = document.getElementById('error');
errorDiv.textContent = '';

if (username === '' || password === '') {

errorDiv.textContent = 'Username and Password are required.';
return false;
}

// Example of additional validation (e.g., length, pattern)

if (username.length < 5) {
 errorDiv.textContent = 'Username must be at least 5 characters long.';
return false;
}

if (password.length < 6) {
errorDiv.textContent = 'Password must be at least 6 characters long.';
return false;
}

// Placeholder for actual authentication logic

if (username !== 'user' || password !== 'password') {
errorDiv.textContent = 'Invalid username or password.';
return false;
}

alert('Login successful!');
return true;
}
</script>
</body>
</html>

Explanation:
1. HTML Structure:
o The login form consists of two input fields: one for the username and one for
the password.
o There is also a submit button to log in.
o An error message will be displayed in a div with the id error.
 2. CSS Styles:
o Basic styles are applied to make the form look presentable.
3. JavaScript Validation:
o The validateForm function is called when the form is submitted.
o The function checks if the username and password fields are not empty.
o It also includes additional validation, such as minimum length requirements.
o A placeholder authentication check is included, which you can replace with
actual authentication logic.
o If any validation fails, an error message is displayed and the form is not
submitted.
You can further customize the validation logic as needed for your specific requirements.
4o.

Experiment:09

Write a program for implementing XML documents for CUSTOMER DETAILS.

File: customer_details.xml

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

<Customers>
<Customer id="1">
<Name>John Doe</Name>
<Email>[email protected]</Email>
<Phone>+1234567890</Phone>
<Address>
<Street>123 Elm Street</Street>
<City>Springfield</City>
<State>IL</State>
<ZipCode>62701</ZipCode>
</Address>
</Customer>
<Customer id="2">
<Name>Jane Smith</Name>
<Email>[email protected]</Email>
<Phone>+0987654321</Phone>
<Address>
<Street>456 Oak Avenue</Street>
<City>Shelbyville</City>
<State>IL</State>
<ZipCode>62565</ZipCode>
</Address>
</Customer>
</Customers>
Output:

Experiment:10
Write an internal Document Type Definition to validate XML for CUSTOMER DETAILS.

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

<!DOCTYPE customer_details [
<!ELEMENT customer_details (customer*)>
<!ELEMENT customer (id, name, address, phone, email)>

<!ELEMENT id (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT address (street, city, state, zip)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT email (#PCDATA)>

<!ELEMENT street (#PCDATA)>

<!ELEMENT city (#PCDATA)>
<!ELEMENT state (#PCDATA)>
<!ELEMENT zip (#PCDATA)>

<!ATTLIST customer id ID #REQUIRED>

]>
<customer_details>
<customer id="C001">
<id>C001</id>
<name>John Doe</name>
<address>
<street>123 Elm Street</street>
<city>Springfield</city>
<state>IL</state>
<zip>62701</zip>
</address>
<phone>555-1234</phone>
<email>[email protected]</email>
 </customer>
<!-- More customers can be added here -->
</customer_details>

Output:

Experiment:11
Write an internal Document Type Definition to validate XML for CUSTOMER DETAILS.

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

<!DOCTYPE customers [

<!ELEMENT customers (customer+)>

<!ELEMENT customer (name, address, email, phone)>

<!ELEMENT name (#PCDATA)>

<!ELEMENT address (street, city, state, zip)>

<!ELEMENT street (#PCDATA)>

<!ELEMENT city (#PCDATA)>

<!ELEMENT state (#PCDATA)>

<!ELEMENT zip (#PCDATA)>

<!ELEMENT email (#PCDATA)>

<!ELEMENT phone (#PCDATA)>

 <!ATTLIST customer id ID #REQUIRED>

]>

<customers>

<customer id="C001">

<name>John Doe</name>

<address>

<street>123 Main St</street>

<city>Springfield</city>

<state>IL</state>

<zip>62701</zip>

</address>

<email>[email protected]</email>

<phone>555-1234</phone>

</customer>

<customer id="C002">

<name>Jane Smith</name>

<address>

<street>456 Elm St</street>

<city>Springfield</city>

<state>IL</state>

<zip>62702</zip>

</address>

<email>[email protected]</email>

<phone>555-5678</phone>

</customer>

</customers>

An internal Document Type Definition (DTD) can be used to validate XML documents for
CUSTOMER DETAILS. Below is an example of an internal DTD for customer details, which
includes elements like customer, name, address, email, and phone.

Explanation

 Root Element:

o The root element is customers, which can contain one or more customer
elements.
  Customer Element:

o The customer element must contain name, address, email, and phone elements in
that order.

o Each customer element has an attribute id which is of type ID and is required.

 Name Element:

o The name element contains parsed character data (#PCDATA).

 Address Element:

o The address element contains street, city, state, and zip elements in that order.

o Each of these elements contains parsed character data (#PCDATA).

 Email and Phone Elements:

o Both email and phone elements contain parsed character data (#PCDATA).

This DTD ensures that each customer element has a unique id and contains the required child
elements in the specified order. The document structure and data types are validated against
this DTD.

Experiment:12

Develop a static website.

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 Static Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Static Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h2>Home</h2>
<p>This is the home page of my static website.</p>
</section>
 <section id="about">
<h2>About</h2>
<p>This section contains information about me.</p>
</section>

<section id="contact">
<h2>Contact</h2>
<p>Here is how you can contact me.</p>
</section>
</main>

<footer>
<p>&copy; 2024 My Static Website</p>
</footer>

<script src="script.js"></script>
</body>
</html>

Style.css

/* Basic reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body styling */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}

/* Header styling */
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}

/* Navigation styling */
nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}

/* Main content styling */

main {
margin-top: 20px;
}

section {
margin-bottom: 20px;
}

/* Footer styling */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}

Script.js

document.addEventListener('DOMContentLoaded', () => {
console.log('JavaScript is loaded and ready!');
});

View Your Website

1. Open your project folder my-static-website.

2. Double-click on index.html to open it in your web browser.
You should see a simple static website with a header, navigation links, main content sections,
and a footer. The CSS styles should be applied, and the JavaScript should log a message to the
console when the page loads.
Feel free to modify and expand upon this basic structure to suit your needs. If you have any
specific features or designs in mind, let me know, and I can help you with that!
Output: