Scribd
Upload
4 views

Pankaj WT lab report (3)

The document contains a series of HTML experiments conducted by Pankaj Kushwaha, showcasing various web page designs and functionalities. Each experiment includes a problem statement, HTML code, and an explanation of the HTML tags and CSS styles used. The experiments cover topics such as creating basic web pages, HTML links, text formatting, and forms.

Uploaded by

rthe2036
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
4 views

Pankaj WT lab report (3)

The document contains a series of HTML experiments conducted by Pankaj Kushwaha, showcasing various web page designs and functionalities. Each experiment includes a problem statement, HTML code, and an explanation of the HTML tags and CSS styles used. The experiments cover topics such as creating basic web pages, HTML links, text formatting, and forms.

Uploaded by

rthe2036
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/ 55

Name: Pankaj Kushwaha Adm. No.

: 23SCSE2030465

EXPERIMENT NO: 1
Problem Statement: Write HTML code to create a basic web page consis ng
of various HTML tags.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
< tle>Sam Web Page</ tle>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
nav {
margin: 20px 0;
background-color: #555;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decora on: none;
}
ar cle {
background-color: white;
padding: 20px;
margin: 20px 0;
}
footer {

1
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

text-align: center;
margin-top: 20px;
padding: 10px 0;
background-color: #333;
color: white;
}
</style>
</head>
<body>

<header>
<h1>Welcome to Sam Web Page</h1>
<h4>Created by Sambhu Kumar</h4>
</header>

<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>

<ar cle>
<h2>About This Page</h2>
<p>This is a basic example of a web page using various HTML tags. It includes a header,
naviga on menu, an ar cle sec on, and a footer.</p>
<p>Here are some of the HTML tags used in this example:</p>
<ul>
<li><strong>&lt;header&gt;:</strong> Defines the header sec on of the page.</li>
<li><strong>&lt;nav&gt;:</strong> Contains the naviga on links.</li>
<li><strong>&lt;ar cle&gt;:</strong> Represents the main content of the page.</li>
<li><strong>&lt;footer&gt;:</strong> Represents the footer of the page.</li>
<li><strong>&lt;a&gt;:</strong> Creates hyperlinks.</li>
<li><strong>&lt;p&gt;:</strong> Defines paragraphs.</li>
<li><strong>&lt;ul&gt; and &lt;li&gt;:</strong> Used to create an unordered list.</li>
</ul>
<p>This Simple Web page is created for Lab file of Web Technology.</p>
</ar cle>

<footer>
<p>&copy; 2024 Sam Web Page</p>
</footer>
</body>
</html>

2
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

Output:

3
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 2
Problem Statement: Create an HTML document with HTML links.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
< tle>HTML Links Example</ tle>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
a{
color: #0066cc;
text-decora on: none;
margin-right: 10px;
}
a:hover {
text-decora on: underline;
}
.nav-links {
margin-bo om: 20px;
}
</style>
</head>
<body>

<h1>HTML Links Example</h1>


<p>This page contains examples of various types of HTML links.</p>

<div class="nav-links">
<h2>Naviga on Links</h2>
<nav>
<a href="#sec on1">Go to Sec on 1</a>

4
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

<a href="#sec on2">Go to Sec on 2</a>


<a href="#sec on3">Go to Sec on 3</a>
</nav>
</div>

<sec on id="sec on1">


<h2>Sec on 1: External Links</h2>
<p>
Here are some links to popular websites:
</p>
<ul>
<li><a href="h ps://www.w3schools.com" target="_blank">W3Schools</a></li>
<li><a href="h ps://geeksforgeeks.org" target="_blank">GeeksforGeeks</a></li>
<li><a href="www.linkedin.com/in/sambhukumar" target="_blank">Sambhu LinkedIn
Profile</a></li>
</ul>
</sec on>

<sec on id="sec on2">


<h2>Sec on 2: Internal Links</h2>
<a href="#top">Back to top</a>
</sec on>

<sec on id="sec on3">


<h2>Sec on 3: Email Links</h2>
<p>
It's possible to create a link that opens the user's email client with a pre-filled email
address:
<a
href="mailto:[email protected]">[email protected]</a>
</p>
<h3> Created by Sambhu Kumar</h3>
</sec on>

</body>
</html>

5
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

Output:

6
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 3
Problem Statement: Write an HTML code to design a page containing text, in
form of paragraphs giving suitable heading style.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
< tle>Sample Text Page</ tle>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f7f7f7;
}
h1, h2, h3 {
color: #333;
}
h1 {
font-size: 2em;
margin-bo om: 10px;
}
h2 {
font-size: 1.75em;
margin-bo om: 10px;
}
h3 {
font-size: 1.5em;
margin-bo om: 10px;
}
p{
margin: 15px 0;
color: #555;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;

7
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);


}
</style>
</head>
<body>

<div class="container">
<h1>Welcome to Sam Text Page</h1>
<p>This page demonstrates how to structure text using paragraphs and headings in
HTML. Different heading levels are used to organize content and make it more readable.</p>

<h2>Introduc on to HTML Headings</h2>


<p>HTML headings are used to create tles and sub tles on your webpage. The
headings range from <strong>&lt;h1&gt;</strong> to <strong>&lt;h6&gt;</strong>, where
<strong>&lt;h1&gt;</strong> is the most important heading, and
<strong>&lt;h6&gt;</strong> is the least important.</p>
<p>Using headings helps to define the structure of your document, making it easier for
users and search engines to understand the content hierarchy.</p>

<h3>Example of Paragraphs</h3>
<p>Paragraphs in HTML are defined using the <strong>&lt;p&gt;</strong> tag. Each
paragraph tag will automa cally create a new line and some space before and a er the
text.</p>
<p>It's a good prac ce to keep paragraphs short and focused on a single idea. This
makes the content easier to read and understand.</p>

<h2>Conclusion</h2>
<p>By using headings and paragraphs effec vely, you can create well-structured and
readable web pages. This example shows how to organize content into sec ons with
headings and how to use paragraphs to present your text clearly.</p>
</div>
<h3> Created by Sambhu Kumar</h3>
</body>
</html>

8
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

Output:

9
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 4
Problem Statement: Create a Web page with appropriate content and insert
CSS in HTML.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
< tle>My Personal Web Page</ tle>
<style>
/* Basic styling for the body */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 0;
}

/* Styling for the header */


header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}

/* Styling for the naviga on bar */


nav {
display: flex;
jus fy-content: center;
background-color: #333;
}

nav a {
color: white;
padding: 14px 20px;
text-decora on: none;
text-align: center;

10
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

nav a:hover {
background-color: #575757;
}

/* Main content area styling */


.container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

/* Heading styling */
h1, h2 {
color: #4CAF50;
}

/* Footer styling */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
margin-top: 20px;
}
</style>
</head>
<body>

<header>
<h1>Welcome to My Personal Web Page</h1>
<p>Sharing my thoughts and experiences with the world</p>
</header>

<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
</nav>

11
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

<div class="container">
<sec on id="home">
<h2>Home</h2>
<p>Hello and welcome to my personal web page. Here, you'll find a collec on of my
thoughts, experiences, and projects. I hope you find something of interest!</p>
</sec on>

<sec on id="about">
<h2>About Me</h2>
<p>My name is Sambhu Kumar, and I'm a web developer with a passion for crea ng
beau ful and func onal websites. I am an MCA student and love to explore new
technologies and design trends.</p>
</sec on>

<sec on id="blog">
<h2>Latest Blog Posts</h2>
<p>Check out some of my recent blog posts:</p>
<ul>
<li><a href="#">Understanding CSS Grid</a> - A guide to modern layout
techniques.</li>
<li><a href="#">JavaScript ES6 Features</a> - A look at some of the most exci ng
new features in ES6.</li>
<li><a href="#">Designing for Accessibility</a> - Tips on making your websites
more accessible to everyone.</li>
</ul>
</sec on>

<sec on id="contact">
<h2>Contact</h2>
<p>If you'd like to get in touch, feel free to <a
href="mailto:[email protected]">email me</a> or connect with me on <a
href="www.linkedin.com/in/sambhukumar">LinkedIn</a>.</p>
</sec on>
</div>

<footer>
<p>&copy; 2024 Sambhu Kumar. All rights reserved.</p>
</footer>

</body>
</html>

12
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

Output:

13
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 5
Problem Statement: Create a Web page, containing HTML Forms.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
< tle>Contact Us</ tle>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 20px;
}
h1 {
color: #4CAF50;
text-align: center;
}
.form-container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.form-group {
margin-bo om: 15px;
}
label {
display: block;
margin-bo om: 5px;
color: #333;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,

14
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 10px;
}
bu on {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
bu on:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<h1>Contact Us</h1>

<div class="form-container">
<form ac on="#" method="post">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Enter your full name"
required>
</div>

<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Enter your email
address" required>
</div>

<div class="form-group">
<label for="password">Password</label>

15
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

<input type="password" id="password" name="password" placeholder="Enter a


secure password" required>
</div>

<div class="form-group">
<label for="gender">Gender</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>

<div class="form-group">
<label for="hobbies">Hobbies</label>
<input type="checkbox" id="hobby1" name="hobbies" value="reading">
<label for="hobby1">Reading</label>
<input type="checkbox" id="hobby2" name="hobbies" value="traveling">
<label for="hobby2">Traveling</label>
<input type="checkbox" id="hobby3" name="hobbies" value="sports">
<label for="hobby3">Sports</label>
</div>

<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country">
<op on value="usa">India</op on>
<op on value="canada">Nepal</op on>
<op on value="uk">Bhutan</op on>
<op on value="australia">Others</op on>
</select>
</div>

<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" placeholder="Enter your
message here"></textarea>
</div>

<bu on type="submit">Submit</bu on>


</form>
<h3> Created by Sambhu Kumar</h3>
</div>
</body>
</html>

16
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

Output:

17
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 6
Problem Statement: Create HTML lists.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
< tle>HTML Lists Example</ tle>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #4CAF50;
text-align: center;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
ul, ol {
margin-bo om: 20px;
}
ul li {
margin-bo om: 5px;
}
ol li {
margin-bo om: 5px;
}
dl dt {
font-weight: bold;
margin-top: 10px;

18
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

}
dl dd {
margin-le : 20px;
margin-bo om: 10px;
}
</style>
</head>
<body>

<h1>Examples of HTML Lists</h1>

<div class="container">
<!-- Unordered List -->
<h2>Unordered List (Bulleted)</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ul>

<!-- Ordered List -->


<h2>Ordered List (Numbered)</h2>
<ol>
<li>Learn HTML</li>
<li>Master CSS</li>
<li>Understand JavaScript</li>
<li>Explore Python</li>
<li>Dive into Java</li>
</ol>

<!-- Nested List -->


<h2>Nested List</h2>
<ul>
<li>Frontend Development
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Development
<ul>

19
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

<li>Python</li>
<li>Java</li>
<li>Node.js</li>
</ul>
</li>
</ul>

<!-- Descrip on List -->


<h2>Descrip on List</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language used for crea ng web pages.</dd>
<dt>CSS</dt>
<dd>A style sheet language used for describing the presenta on of a web page.</dd>
<dt>JavaScript</dt>
<dd>A programming language used to create interac ve effects within web
browsers.</dd>
</dl>

</div>
<footer>
<p>&copy; Created by Sambhu Kumar</p>
</footer>
</body>
</html>

20
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

Output:

21
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 7
Problem Statement: Create a web page that contains HTML frames.

Code:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
< tle>Frame Example</ tle>
</head>
<body>

<frameset rows="100, *" border="1">


<frame src="header.html" name="headerFrame" scrolling="no" noresize>
<frameset cols="200, *" border="1">
<frame src="menu.html" name="menuFrame" noresize>
<frame src="content.html" name="contentFrame">
</frameset>
</frameset>

</body>
</html>

header.html
<!DOCTYPE html>
<html lang="en">
<head>
< tle>Header</ tle>
<style>
body {
font-family: Arial, sans-serif;
background-color: #4CAF50;
color: white;
margin: 0;
padding: 10px;
text-align: center;
}

22
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

</style>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>

menu.html
<!DOCTYPE html>
<html lang="en">
<head>
< tle>Menu</ tle>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 10px;
}
a{
display: block;
padding: 8px 0;
color: #333;
text-decora on: none;
}
a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h3>Menu</h3>
<a href="content.html" target="contentFrame">Home</a>
<a href="about.html" target="contentFrame">About</a>
<a href="contact.html" target="contentFrame">Contact</a>
<footer>
<p>&copy; Created by Sambhu Kumar</p>
</footer>
</body>
</html>

23
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

content.html
<!DOCTYPE html>
<html lang="en">
<head>
< tle>Home</ tle>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h2>Home Page</h2>
<p>This is the main content of the website. You can click the links in the menu to navigate
to different sec ons.</p>
</body>
</html>

about.html
<!DOCTYPE html>
<html lang="en">
<head>
< tle>About</ tle>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h2>About Us</h2>
<p>This page provides informa on about us.</p>
</body>
</html>

contact.html
<!DOCTYPE html>
<html lang="en">
<head>
< tle>Contact</ tle>

24
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h2>Contact Us</h2>
<p>This page provides contact informa on.</p>
</body>
</html>

Output:

25
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

26
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 8
Problem Statement: Create XML with DTD.

Code:
library.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE library SYSTEM "library.dtd">
<library>
<book>
< tle>Introduc on to Cybersecurity</ tle>
<author>Sambhu Kumar</author>
<year>2024</year>
<genre>Technology</genre>
</book>
<book>
< tle>Learning Python</ tle>
<author>Rajesh Mishra</author>
<year>2021</year>
<genre>Programming</genre>
</book>
<book>
< tle>Ar ficial Intelligence: A Modern Approach</ tle>
<author>Peter Norvig</author>
<year>2020</year>
<genre>AI/ML</genre>
</book>
</library>

library.dtd

<!ELEMENT library (book+)>


<!ELEMENT book ( tle, author, year, genre)>
<!ELEMENT tle (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT genre (#PCDATA)>

27
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 9
Problem Statement: Create a Web page, which contains HTML embedded
with Java Script results.

Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Simple Calculator</ tle>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
background-color: #f0f4f8;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
width: 300px;
}
input {
padding: 10px;
margin: 10px 0;
width: calc(100% - 20px);
border: 1px solid #ddd;
border-radius: 5px;
}

28
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

bu on {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
bu on:hover {
background-color: #0056b3;
}
.result {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Sum Calculator</h1>
<p>Enter two numbers:</p>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<bu on onclick="calculateSum()">Calculate</bu on>
<div class="result" id="result"></div>
</div>

<script>
func on calculateSum() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);

if (!isNaN(num1) && !isNaN(num2)) {


const sum = num1 + num2;
document.getElementById("result").innerText = `The sum is: ${sum}`;
} else {
document.getElementById("result").innerText = "Please enter valid numbers.";
}
}
</script>
</body>
</html>

29
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

Output:

30
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 10
Problem Statement: Create HTML with JavaScript to perform basic
opera ons and to show how try catch works.

Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Basic Opera ons with Error Handling</ tle>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
background-color: #f8f9fa;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
width: 300px;
}
input {
padding: 10px;
margin: 10px 0;
width: calc(100% - 20px);
border: 1px solid #ddd;
border-radius: 5px;
}

31
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

bu on {
padding: 10px;
margin: 5px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
bu on:hover {
background-color: #0056b3;
}
.result {
margin-top: 15px;
font-weight: bold;
}
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Basic Calculator</h1>
<p>Enter two numbers:</p>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<div>
<bu on onclick="performOpera on('add')">Add</bu on>
<bu on onclick="performOpera on('subtract')">Subtract</bu on>
<bu on onclick="performOpera on('mul ply')">Mul ply</bu on>
<bu on onclick="performOpera on('divide')">Divide</bu on>
</div>
<div class="result" id="result"></div>
<h4>Created by Sambhu Kumar</h4>
</div>

<script>
func on performOpera on(opera on) {
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;

try {

32
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

// Check for empty inputs


if (num1 === "" || num2 === "") {
throw new Error("Both inputs are required.");
}

// Convert inputs to numbers


const number1 = parseFloat(num1);
const number2 = parseFloat(num2);

// Check for invalid inputs


if (isNaN(number1) || isNaN(number2)) {
throw new Error("Please enter valid numbers.");
}

let result;
switch (opera on) {
case "add":
result = number1 + number2;
break;
case "subtract":
result = number1 - number2;
break;
case "mul ply":
result = number1 * number2;
break;
case "divide":
if (number2 === 0) {
throw new Error("Cannot divide by zero.");
}
result = number1 / number2;
break;
default:
throw new Error("Invalid opera on.");
}

// Display the result


document.getElementById("result").innerHTML = `<span>The result is:
${result}</span>`;
} catch (error) {
// Handle errors
document.getElementById("result").innerHTML = `<span
class="error">${error.message}</span>`;
}
}

33
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

</script>
</body>
</html>

Output:

34
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 11
Problem Statement: Write a program Using Java Script valida on in HTML
Forms.

Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Form Valida on</ tle>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
background-color: #f8f9fa;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 400px;
}
input {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
bu on {

35
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
bu on:hover {
background-color: #0056b3;
}
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="container">
<h2>User Registra on Form</h2>
<form id="registra onForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<span class="error" id="nameError"></span>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<span class="error" id="emailError"></span>

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
password">
<span class="error" id="passwordError"></span>

<label for="age">Age:</label>
<input type="number" id="age" name="age" placeholder="Enter your age">
<span class="error" id="ageError"></span>

<bu on type="submit">Register</bu on>


</form>
<h4>Created by Sambhu Kumar</h4>
</div>

<script>

36
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

func on validateForm() {
// Get form values
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value.trim();
const age = document.getElementById("age").value.trim();

// Error flags
let isValid = true;

// Clear previous errors


document.getElementById("nameError").innerText = "";
document.getElementById("emailError").innerText = "";
document.getElementById("passwordError").innerText = "";
document.getElementById("ageError").innerText = "";

// Name valida on
if (name === "") {
document.getElementById("nameError").innerText = "Name is required.";
isValid = false;
}

// Email valida on
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === "") {
document.getElementById("emailError").innerText = "Email is required.";
isValid = false;
} else if (!emailRegex.test(email)) {
document.getElementById("emailError").innerText = "Invalid email format.";
isValid = false;
}

// Password valida on
if (password === "") {
document.getElementById("passwordError").innerText = "Password is required.";
isValid = false;
} else if (password.length < 6) {
document.getElementById("passwordError").innerText = "Password must be at
least 6 characters long.";
isValid = false;
}

// Age valida on
if (age === "") {

37
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

document.getElementById("ageError").innerText = "Age is required.";


isValid = false;
} else if (isNaN(age) || age <= 0) {
document.getElementById("ageError").innerText = "Age must be a valid posi ve
number.";
isValid = false;
}

// Return the validity of the form


return isValid;
}
</script>
</body>
</html>

Output:

38
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

39
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 12
Problem Statement: Write a program using PHP and HTML to create a form
and display the details entered by the user.

Code:
form.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>PHP Form Demo</ tle>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 400px;
}
input {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
bu on {

40
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
bu on:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>Enter Your Details</h2>
<form ac on="display.php" method="POST">
<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="age">Age:</label>
<input type="number" id="age" name="age" required>

<label for="city">City:</label>
<input type="text" id="city" name="city" required>

<bu on type="submit">Submit</bu on>


</form>
</div>
</body>
</html>

display.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Details Entered</ tle>
<style>

41
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 400px;
}
p{
font-size: 1.1em;
margin: 10px 0;
}
.back-bu on {
display: block;
margin-top: 20px;
text-align: center;
}
.back-bu on a {
text-decora on: none;
color: white;
background-color: #007BFF;
padding: 10px 20px;
border-radius: 5px;
transi on: background-color 0.3s;
}
.back-bu on a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>Your Details</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {

42
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

$name = htmlspecialchars($_POST["name"]);
$email = htmlspecialchars($_POST["email"]);
$age = htmlspecialchars($_POST["age"]);
$city = htmlspecialchars($_POST["city"]);

echo "<p><strong>Name:</strong> $name</p>";


echo "<p><strong>Email:</strong> $email</p>";
echo "<p><strong>Age:</strong> $age</p>";
echo "<p><strong>City:</strong> $city</p>";
} else {
echo "<p>No details submi ed.</p>";
}
?>
<div class="back-bu on">
<a href="form.php">Go Back</a>
</div>
</div>
</body>
</html>

Output:

43
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

44
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 13
Problem Statement: Write a PHP code to upload a file and store at a given
loca on.

Code:
Upload_form.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>File Upload</ tle>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
input[type="file"], bu on {
margin: 10px 0;
padding: 10px;
border-radius: 5px;
}
bu on {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;

45
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

}
bu on:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>Upload a File</h2>
<form ac on="upload_file.php" method="POST" enctype="mul part/form-data">
<input type="file" name="uploadedFile" required><br>
<bu on type="submit">Upload</bu on>
</form>
</div>
</body>
</html>

upload_file.php

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Directory where files will be uploaded
$uploadDirectory = "uploads/";

// Check if the directory exists, create if not


if (!is_dir($uploadDirectory)) {
mkdir($uploadDirectory, 0777, true);
}

// Get the uploaded file informa on


$fileName = $_FILES['uploadedFile']['name'];
$fileTmpName = $_FILES['uploadedFile']['tmp_name'];
$fileSize = $_FILES['uploadedFile']['size'];
$fileError = $_FILES['uploadedFile']['error'];

// Full path for the file


$fileDes na on = $uploadDirectory . basename($fileName);

// Check for errors


if ($fileError === UPLOAD_ERR_OK) {
// Validate file size (example: max size 5MB)
if ($fileSize <= 5 * 1024 * 1024) {
// Move file to the upload directory
if (move_uploaded_file($fileTmpName, $fileDes na on)) {

46
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

echo "<h2>File uploaded successfully!</h2>";


echo "<p>File Name: $fileName</p>";
echo "<p>File Size: " . round($fileSize / 1024, 2) . " KB</p>";
echo "<p>Stored at: $fileDes na on</p>";
} else {
echo "<h2 style='color:red;'>Failed to move uploaded file.</h2>";
}
} else {
echo "<h2 style='color:red;'>File size exceeds the maximum limit of 5MB.</h2>";
}
} else {
echo "<h2 style='color:red;'>An error occurred while uploading the file.</h2>";
}
} else {
echo "<h2 style='color:red;'>Invalid request method. Please use the form to upload a
file.</h2>";
}
?>

Output:

47
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 14
Problem Statement: Create a PHP page for login system using session.

Code:
login.php
<?php
session_start();

// Hardcoded username and password for demo purposes


$validUsername = "sambhu";
$validPassword = "password123";

// Check if the form is submi ed


if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = $_POST['password'];

// Validate creden als


if ($username === $validUsername && $password === $validPassword) {
$_SESSION['username'] = $username; // Set session variable
header("Loca on: dashboard.php"); // Redirect to dashboard
exit();
} else {
$error = "Invalid username or password.";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Login</ tle>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
jus fy-content: center;

48
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
width: 300px;
}
input[type="text"], input[type="password"], bu on {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
bu on {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
bu on:hover {
background-color: #0056b3;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form ac on="" method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<bu on type="submit">Login</bu on>
</form>
<?php if (isset($error)): ?>
<p class="error"><?php echo $error; ?></p>

49
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

<?php endif; ?>


</div>
</body>
</html>

dashboard.php
<?php
session_start();

// Check if the user is logged in


if (!isset($_SESSION['username'])) {
header("Loca on: login.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Dashboard</ tle>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
width: 300px;
}
a{
color: #007BFF;
text-decora on: none;
margin-top: 20px;
display: inline-block;

50
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

}
a:hover {
color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>!</h2>
<p>You are logged in.</p>
<a href="logout.php">Logout</a>
</div>
</body>
</html>

logout.php
<?php
session_start();
session_unset(); // Remove all session variables
session_destroy(); // Destroy the session
header("Loca on: login.php"); // Redirect to login page
exit();
?>

Output:

51
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

52
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

EXPERIMENT NO: 15
Problem Statement: Write a PHP program for sending e-mail.

Code:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve form inputs
$to = $_POST['to'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$headers = "From: " . $_POST['from'];

// Send email
if (mail($to, $subject, $message, $headers)) {
$status = "Email sent successfully to $to.";
} else {
$status = "Failed to send the email.";
}
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Send Email</ tle>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.container {
background: white;
padding: 20px;

53
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 400px;
}
input, textarea, bu on {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
bu on {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
bu on:hover {
background-color: #0056b3;
}
.status {
color: green;
}
.status.error {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Send Email</h2>
<?php if (isset($status)): ?>
<p class="status <?php echo strpos($status, 'Failed') !== false ? 'error' : ''; ?>">
<?php echo htmlspecialchars($status); ?>
</p>
<?php endif; ?>
<form method="POST" ac on="">
<input type="email" name="from" placeholder="Your Email (From)" required>
<input type="email" name="to" placeholder="Recipient Email (To)" required>
<input type="text" name="subject" placeholder="Subject" required>
<textarea name="message" placeholder="Write your message here..." rows="5"
required></textarea>
<bu on type="submit">Send Email</bu on>
</form>

54
Name: Pankaj Kushwaha Adm. No.: 23SCSE2030465

</div>
</body>
</html>

Output:

55

You might also like