Scribd
Upload
33 views81 pages

Web Technologies Practical

The document contains a series of HTML examples demonstrating various web design techniques, including creating an index page, simple HTML pages, letterheads, single-page navigation, text formatting, time tables, layout using tables, embedding audio and video, vertical division of a webpage, and employee bio-data. Each example includes the HTML structure and CSS styles necessary for implementation. The content is structured to provide practical applications of web design concepts.

Uploaded by

Anu Tiwari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views81 pages

Web Technologies Practical

The document contains a series of HTML examples demonstrating various web design techniques, including creating an index page, simple HTML pages, letterheads, single-page navigation, text formatting, time tables, layout using tables, embedding audio and video, vertical division of a webpage, and employee bio-data. Each example includes the HTML structure and CSS styles necessary for implementation. The content is structured to provide practical applications of web design concepts.

Uploaded by

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

1

1 Design Index Page of a book Titled Web Designing.


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index of book</title>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;

}
</style>
</head>

<body>
<center>
<h1>INDEX</h1>
<table>
<tr>
<th>Serial No.</th>
<th>Chapter</th>
<th>Page No.</th>
</tr>
<tr>
<td>1.</td>
<td>Introduction to Web Designing</td>
<td>1-12</td>
</tr>
<tr>
<td>2.</td>
<td>HTML Basics</td>
<td>13-20</td>
2

</tr>
<tr>
<td>3.</td>
<td>Basic Formatting tags</td>
<td>21-28</td>
</tr>
<tr>
<td>4.</td>
<td>Tables in HTML</td>
<td>29-35</td>
</tr>
<tr>
<td>5.</td>
<td>Lists in HTML</td>
<td>36-43</td>
</tr>
<tr>
<td>6.</td>
<td>Media in HTML</td>
<td>44-55</td>
</tr>
<tr>

<td>7.</td>
<td>Introduction to CSS</td>
<td>56-61</td>
</tr>
<tr>
<td>8.</td>
<td>Animation in CSS</td>
<td>62-78</td>
</tr>
<tr>
<td>9.</td>
<td>CSS Box Properties</td>
<td>79-85</td>
</tr>
3

<tr>
<td>10.</td>
<td>Introduction to Javascript</td>
<td>86-100</td>
</tr>

</table>
</center>
</body>

</html>

Output
4

2.Create a simple HTML page to demonstrate the use of different tags.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple page</title>
</head>
<body>
<H1>I.K. Gujral Punjab Technical University</H1>
<P>I. K. Gujral Punjab Technical University (IKGPTU),<br> formerly
Punjab Technical University (PTU), is a public state university in Kapurthala,
Punjab, <br> India established by an Act of State Legislature on 16 January
1997.</P>
<hr>
<ol>
<H2>Courses offers</H2>
<li>B.Tech(CSE)</li>
<li>B.Tech(ECE)</li>
<li>B.Tech(Civil Engineering) </li>
<li>BCA</li>
<li>MCA</li>
<li>BBA</li>
<li>MBA</li>
</ol>

</body>
</html>

Output
5

3.Display Letter Head of your college on a web page & it must be scrolling
Right to Left.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Letterhead</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.letterhead {
border: 2px solid #730c0c;
padding: 20px;
width: 80%;
margin: auto;
6

}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header img {
width: 100px;
height: auto;
}
.title {
text-align: center;
}
.title h1 {
color: #58180b;
margin: 0;
}
.footer {
text-align: center;
margin-top: 20px;
font-size: 12px;
color: gray;
}
</style>
</head>
<body>
<div class="letterhead">
<div class="header">
<img src="ptu.jpeg" alt="IKGPTU Logo">
<div class="title">
<h1>I.K. Gujral Punjab Technical University</h1>
7

<p>Jalandhar - Kapurthala Highway, Kapurthala, Punjab</p>


</div>
</div>
<hr>
<div class="footer">
<p>Contact Us: [Phone Number] | [Email Address] </p>
<p>Website: www.ptu.ac.in</p>
</div>
</div>
</body>
</html>
Output

4. Create a link to move within a single page rather than to load another
page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Page Navigation</title>
</head>
<body>
<h1>Welcome to My Single Page</h1>

<a href="#section1">Go to Section 1</a> |


8

<a href="#section2">Go to Section 2</a> |


<a href="#section3">Go to Section 3</a>

<div style="height: 600px;"></div>

<h2 id="section1">Section 1</h2>


<p>This is Section 1. You can navigate here using the link above.</p>

<div style="height: 600px;"></div>

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


<p>This is Section 2. Same-page navigation rocks!</p>

<div style="height: 600px;"></div>

<h2 id="section3">Section 3</h2>


<p>This is Section 3. You're at the end of the page!</p>
</body>
</html>

Output
9
10

5.Display “Name of University” using different Text formatting


Tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Formatting Example</title>
</head>
<body>
<h1>I.K. Gujral Punjab Technical University </h1>
<h2>I.K. Gujral Punjab Technical University </h2>
<h3>I.K. Gujral Punjab Technical University </h3>
<h4>I.K. Gujral Punjab Technical University </h4>
<h5>I.K. Gujral Punjab Technical University </h5>
<h6>I.K. Gujral Punjab Technical University </h6>

<p><b>I.K. Gujral Punjab Technical University </b></p>


<p><strong>I.K. Gujral Punjab Technical University </strong></p>
<p><i>I.K. Gujral Punjab Technical University </i></p>
<p><em>I.K. Gujral Punjab Technical University </em></p>
<p><u>I.K. Gujral Punjab Technical University </u></p>
<p><mark>I.K. Gujral Punjab Technical University</mark></p>
<p><small>I.K. Gujral Punjab Technical University </small></p>
<p><del>I.K. Gujral Punjab Technical University </del></p>
<p><ins>I.K. Gujral Punjab Technical University </ins></p>
<p><code>I.K. Gujral Punjab Technical University </code></p>
<p><pre>I.K. Gujral Punjab Technical University </pre></p>
</body>
</html>
11

Output

6. Design Time Table of your department and highlight most


important periods.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Department Time Table</title>
<style>
12

table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #004080;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
.highlight {
background-color: #ffeb3b; /* Highlight important periods in yellow */
font-weight: bold;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Department Time Table</h1>
<table>
<thead>
<tr>
<th>Day</th>
<th>9:00 AM - 10:00 AM</th>
13

<th>10:00 AM - 11:00 AM</th>


<th>11:00 AM - 12:00 PM</th>
<th>12:00 PM - 1:00 PM</th>
<th>2:00 PM - 3:00 PM</th>
<th>3:00 PM - 4:00 PM</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td class="highlight">Data Structures</td>
<td>Web Technologies</td>
<td>Linux Administration</td>
<td>Lunch Break</td>
<td class="highlight">Database Management</td>
<td>Computer Networks</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Java Programming</td>
<td class="highlight">Web Technologies</td>
<td>Machine Learning</td>
<td>Lunch Break</td>
<td>Soft Skills</td>
<td>Linux Administration</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Java Programming</td>
<td>Operating Systems</td>
<td class="highlight">Cyber Security</td>
14

<td>Lunch Break</td>
<td class="highlight">Research Workshop</td>
<td>Team Collaboration</td>
</tr>
<tr>
<td>Thursday</td>
<td>Software Engineering</td>
<td class="highlight">Cloud Computing</td>
<td>Mathematics</td>
<td>Lunch Break</td>
<td>Programming Lab</td>
<td class="highlight">Ethical Hacking</td>
</tr>
<tr>
<td>Friday</td>
<td class="highlight">Web Development</td>
<td>Programming</td>
<td>Operating Systems</td>
<td>Lunch Break</td>
<td>Project Presentations</td>
<td class="highlight">Networking Lab</td>
</tr>
</tbody>
</table>
</body>
</html>
15

Output

7. Use Tables to provide layout to your web page.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Webpage Layout Using Tables</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
16

border: 1px solid #ccc;


padding: 20px;
text-align: center;
}
.header {
background-color: #004080;
color: white;
font-size: 24px;
font-weight: bold;
}
.menu {
background-color: #f4f4f4;
font-weight: bold;
}
.content {
background-color: #e9f5ff;
}
.footer {
background-color: #004080;
color: white;
font-size: 14px;
}
</style>
</head>
<body>
<table>
<tr>
17

<td colspan="2" class="header">Welcome to My


Webpage</td>
</tr>

<tr>
<td class="menu" style="width: 30%;">Menu<br>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</td>
<td class="content" style="width: 70%;">This is the main
content area.<br>
Here you can add text, images, or anything you want to
showcase.
</td>
</tr>

<tr>
<td colspan="2" class="footer">© 2025 Your Website | All
Rights Reserved</td>
</tr>
</table>
</body>
</html>
18

Output

8. Embed Audio and Video into your web page.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Audio and Video Embedding</title>
</head>
<body>
<h1>Embedding Audio and Video</h1>

<h2>Audio</h2>
<p>Here is an audio clip:</p>
<audio controls>
<source src="example-audio.mp3" type="audio/mpeg">
<source src="example-audio.ogg" type="audio/ogg">
</audio>
19

<h2>Video</h2>
<p>Here is a video:</p>
<video controls width="440" height="200">
<source src="example-video.mp4" type="video/mp4">
<source src="example-video.ogg" type="video/ogg">
</video>
</body>
</html>

Output
20

9. Divide a web page vertically and display logo of your college in


left pane and logo of university in right pane.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Division with Logos</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
height: 400px;
font-family: Arial, sans-serif;
}
.left-pane, .right-pane {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.left-pane {
background-color: #f0f8ff;
.right-pane {
background-color: #fffacd;
}
img {
max-width: 400px;
height: 300px;
}
21

</style>
</head>
<body>

<div class="left-pane">
<img src="ptu.jpeg" alt="College Logo">
</div>

<div class="right-pane">
<img src="ptu.jpeg" alt="University Logo">
</div>
</body>
</html>

Output

10.Create Bio- Data of an employee.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
22

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Employee Bio-Data</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
h1 {
text-align: center;
color: #004080;
}
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>Employee Bio-Data</h1>
<table>
<tr>
23

<th>Full Name</th>
<td>John Doe</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>01 January 1990</td>
</tr>
<tr>
<th>Contact Number</th>
<td>+91-123-456-7890</td>
</tr>
<tr>
<th>Email</th>
<td>[email protected]</td>
</tr>
<tr>
<th>Address</th>
<td>123 Main Street, City, State, Postal Code</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
<tr>
<th>Education</th>
<td>Bachelor of Technology in Computer Science</td>
</tr>
<tr>
<th>Experience</th>
<td>5 years as Software Engineer</td>
</tr>
24

<tr>
<th>Skills</th>
<td>Programming (Java, Python), Web Development, Problem
Solving</td>
</tr>
<tr>
<th>Languages Known</th>
<td>English, Hindi</td>
</tr>
</table>
</body>
</html>

Output

11.Design front page of a hospital with different styles.


25

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Hospital Front Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}
.container {
text-align: center;
padding: 20px;
}

.header {
background-color: #004080;
color: white;
padding: 20px 10px;
}
.header h1 {
margin: 0;
}
.navbar {
26

background-color: #ff6666;
overflow: hidden;
padding: 10px 0;
}
.navbar a {
float: left;
color: white;
padding: 10px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #d9534f;
}

.main-content {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.main-content div {
padding: 20px;
background-color: #e9f5ff;
border: 1px solid #ccc;
width: 30%;
border-radius: 10px;
}
27

.footer {
background-color: #004080;
color: white;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>

<div class="header">
<h1>Welcome to Hospital</h1>
<p>Excellence in healthcare since [Year]</p>
</div>

<div class="navbar">
<a href="#about">About Us</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>

<div class="container">
<div class="main-content">
<div>
<h2>Our Mission</h2>
28

<p>We strive to provide the best healthcare services to our


community.</p>
</div>
<div>
<h2>Facilities</h2>
<p>Modern equipment and world-class facilities for patient
care.</p>
</div>
<div>
<h2>Emergency</h2>
<p>24/7 emergency services to cater to all your urgent
medical needs. </p>
</div>
</div>
</div>

<div class="footer">
<p>Contact us: 4567832996 | [email protected]</p>
<p>&copy; 2025 Hospital. All rights reserved.</p>
</div>
</body>
</html>
29

Output

12. Design a web page and display horizontally two different web
pages at a time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Display Two Web Pages Horizontally</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
height: 100vh;
}
30

.iframe-container {
flex: 1;
border: 2px solid #ccc;
}
.iframe-container iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="container">

<div class="iframe-container">
<iframe src="https://www.example.com" title="Web Page
1"></iframe>
</div>

<div class="iframe-container">
<iframe src="https://www.wikipedia.org" title="Web Page
2"></iframe>
</div>
</div>
</body>
</html>
31

Output

13. Write a program to create a login form. On clicking the


submit button, the user should get navigated to a profile page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Login Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
32

background-color: #f8f9fa;
}
.login-form {
padding: 20px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-form h1 {
margin-bottom: 20px;
}
.login-form input[type="text"], .login-form
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-form input[type="submit"] {
background-color: #004080;
color: white;
border: none;
padding: 10px;
width: 100%;
cursor: pointer;
border-radius: 5px;
}
33

.login-form input[type="submit"]:hover {
background-color: #003060;
}
</style>
</head>
<body>
<form class="login-form" action="profile.html" method="POST">
<h1>Login</h1>
<label for="username">Username:</label>
<input type="text" id="username" name="username"
placeholder="Enter your username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password" required>
<input type="submit" value="Login">
</form>
</body>
</html>
34

Output

14. Write a HTML code to create a Registration Form. On


submitting the form, the user should be asked to login with the
new credentials.
<!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;
margin: 0;
35

padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f8f9fa;
}
.registration-form {
padding: 20px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.registration-form h1 {
margin-bottom: 20px;
}
.registration-form input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.registration-form input[type="submit"] {
background-color: #004080;
color: white;
border: none;
cursor: pointer;
36

}
.registration-form input[type="submit"]:hover {
background-color: #003060;
}
</style>
</head>
<body>
<form class="registration-form" action="login.html"
method="POST">
<h1>Registration</h1>
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name"
placeholder="Enter your full name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="Enter your email" required>
<label for="username">Username:</label>
<input type="text" id="username" name="username"
placeholder="Enter your username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password" required>
<input type="submit" value="Register">
</form>
</body>
</html>
37

Output

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f8f9fa;
}
.login-form {
padding: 20px;
38

border: 1px solid #ccc;


background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-form h1 {
margin-bottom: 20px;
}
.login-form input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-form input[type="submit"] {
background-color: #004080;
color: white;
border: none;
cursor: pointer;
}
.login-form input[type="submit"]:hover {
background-color: #003060;
}
</style>
</head>
<body>
<form class="login-form" action="#" method="POST">
<h1>Login</h1>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter
your username" required>
39

<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password" required>
<input type="submit" value="Login">
</form>
</body>
</html>
Output

15.Write a HTML code to create website in your


college or department and create link for Tutorial of
specific subject.
<!DOCTYPE html>
<html lang="en">
<head>
40

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College/Department Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #004080;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #ff6666;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
font-size: 18px;
}
41

nav a:hover {
text-decoration: underline;
}
.content {
padding: 20px;
text-align: center;
}
.tutorial-link {
margin-top: 20px;
padding: 10px;
background-color: #004080;
color: white;
text-decoration: none;
border-radius: 5px;
}
.tutorial-link:hover {
background-color: #003060;
}
footer {
background-color: #004080;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
42

</style>
</head>
<body>
<header>
<h1>I.K Gujral Punjab Technical University</h1>
<p>Welcome to our official website!</p>
</header>

<nav>
<a href="#about">About Us</a>
<a href="#courses">Courses</a>
<a href="#contact">Contact</a>
</nav>

<div class="content">
<h2>Welcome to Our Tutorials Section</h2>
<p>Enhance your skills with our subject-specific tutorials.</p>
<a href="tutorial.html" class="tutorial-link">Go to Tutorials for Python
</a>
</div>

<footer>
<p>&copy; 2025 I.K. Gujral Punjab Technical University All Rights
Reserved.</p>
</footer>
</body>
</html>
43

Output

16.Write a program to perform following operations on two


numbers input by the user: Addition 2) Subtraction 3)
Multiplication 4) Division.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Basic Calculator</title>
44

<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
input {
padding: 10px;
margin: 10px;
width: 200px;
}
button {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
background-color: #004080;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #003060;
}
.result {
margin-top: 20px;
45

font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>Basic Calculator</h1>
<p>Enter two numbers and choose an operation:</p>

<!-- Input fields for numbers -->


<input type="number" id="num1" placeholder="Enter first
number">
<input type="number" id="num2" placeholder="Enter second
number">

<!-- Buttons for operations -->


<br>
<button onclick="performOperation('add')">Addition</button>
<button
onclick="performOperation('subtract')">Subtraction</button>
<button
onclick="performOperation('multiply')">Multiplication</button>
<button onclick="performOperation('divide')">Division</button>

<!-- Result Display -->


<div class="result" id="result"></div>
46

<script>
// JavaScript function to perform operations
function performOperation(operation) {
const num1 =
parseFloat(document.getElementById('num1').value);
const num2 =
parseFloat(document.getElementById('num2').value);
let result;

// Check for valid input


if (isNaN(num1) || isNaN(num2)) {
result = "Please enter valid numbers!";
} else {
// Perform the chosen operation
switch (operation) {
case 'add':
result = `Addition Result: ${num1 + num2}`;
break;
case 'subtract':
result = `Subtraction Result: ${num1 - num2}`;
break;
case 'multiply':
result = `Multiplication Result: ${num1 * num2}`;
break;
47

case 'divide':
if (num2 !== 0) {
result = `Division Result: ${num1 / num2}`;
} else {
result = "Cannot divide by zero!";
}
break;
default:
result = "Invalid operation!";
}
}

// Display the result


document.getElementById('result').innerText = result;
}
</script>
</body>
</html>
48

Output

17. Design a program to solve quadratic equations.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quadratic Equation Solver</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
background-color: #f0f8ff;
49

}
.container {
margin: auto;
padding: 20px;
border: 1px solid #ccc;
background-color: white;
border-radius: 10px;
max-width: 400px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
margin: 10px;
padding: 10px;
width: 80%;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin: 10px;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
50

background-color: #003060;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>Quadratic Equation Solver</h1>
<p>Enter the coefficients of the quadratic equation (ax² + bx + c = 0):</p>

<input type="number" id="a" placeholder="Enter coefficient a" required>


<input type="number" id="b" placeholder="Enter coefficient b" required>
<input type="number" id="c" placeholder="Enter coefficient c" required>
<br>

<button onclick="solveQuadratic()">Solve</button>

<div class="result" id="result"></div>


</div>

<script>
function solveQuadratic() {
51

const a = parseFloat(document.getElementById('a').value);
const b = parseFloat(document.getElementById('b').value);
const c = parseFloat(document.getElementById('c').value);

let result;

if (isNaN(a) || isNaN(b) || isNaN(c)) {


result = "Please enter valid numbers for a, b, and c.";
} else if (a === 0) {
result = "Coefficient 'a' cannot be zero for a quadratic equation.";
} else {
const discriminant = b * b - 4 * a * c;

if (discriminant > 0) {
const root1 = (-b + Math.sqrt(discriminant)) / (2 * a);
const root2 = (-b - Math.sqrt(discriminant)) / (2 * a);
result = `The roots are real and distinct: Root 1 = ${root1}, Root 2
= ${root2}`;
} else if (discriminant === 0) {
const root = -b / (2 * a);
result = `The roots are real and equal: Root = ${root}`;
} else {
const realPart = -b / (2 * a);
const imaginaryPart = Math.sqrt(-discriminant) / (2 * a);
result = `The roots are complex: ${realPart} + ${imaginaryPart}i
and ${realPart} - ${imaginaryPart}i`;
}
}
52

document.getElementById('result').innerText = result;
}
</script>
</body>
</html>

Output

18.Write a program to determine greatest number of


three numbers.
<!DOCTYPE html>
53

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greatest of Three Numbers</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f8ff;
}
input {
margin: 10px;
padding: 10px;
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin: 10px;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
54

}
button:hover {
background-color: #003060;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>Find the Greatest Number</h1>
<p>Enter three numbers to determine the greatest:</p>

<input type="number" id="num1" placeholder="Enter first number">


<input type="number" id="num2" placeholder="Enter second number">
<input type="number" id="num3" placeholder="Enter third number">
<br>

<button onclick="findGreatest()">Find Greatest</button>

<div class="result" id="result"></div>

<script>
55

function findGreatest() {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
const num3 = parseFloat(document.getElementById('num3').value);

let result;

if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {


result = "Please enter valid numbers!";
} else {
if (num1 >= num2 && num1 >= num3) {
result = `The greatest number is ${num1}`;
} else if (num2 >= num1 && num2 >= num3) {
result = `The greatest number is ${num2}`;
} else {
result = `The greatest number is ${num3}`;
}
}

document.getElementById('result').innerText = result;
}
</script>
</body>
</html>
56

Output

19.Write a script to compute, the Average and Grade


of students marks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Marks Average and Grade</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f8ff;
}
input {
padding: 10px;
margin: 5px;
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
57

}
button {
padding: 10px 20px;
margin: 10px;
background-color: #004080;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #003060;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>Compute Average and Grade</h1>
<p>Enter marks for 5 subjects:</p>

<input type="number" id="mark1" placeholder="Enter marks for Subject 1"


required>
<input type="number" id="mark2" placeholder="Enter marks for Subject 2"
required>
58

<input type="number" id="mark3" placeholder="Enter marks for Subject 3"


required>
<input type="number" id="mark4" placeholder="Enter marks for Subject 4"
required>
<input type="number" id="mark5" placeholder="Enter marks for Subject 5"
required>
<br>

<button onclick="calculate()">Calculate</button>
<div class="result" id="result"></div>

<script>
// JavaScript function to calculate average and grade
function calculate() {
// Get marks from input fields
const mark1 = parseFloat(document.getElementById('mark1').value);
const mark2 = parseFloat(document.getElementById('mark2').value);
const mark3 = parseFloat(document.getElementById('mark3').value);
const mark4 = parseFloat(document.getElementById('mark4').value);
const mark5 = parseFloat(document.getElementById('mark5').value);

if (isNaN(mark1) || isNaN(mark2) || isNaN(mark3) || isNaN(mark4) ||


isNaN(mark5)) {
document.getElementById('result').innerText = "Please enter valid
marks for all subjects.";
return;
}
59

const total = mark1 + mark2 + mark3 + mark4 + mark5;


const average = total / 5;

// Determine grade
let grade;
if (average >= 90) {
grade = 'A';
} else if (average >= 80) {
grade = 'B';
} else if (average >= 70) {
grade = 'C';
} else if (average >= 60) {
grade = 'D';
} else {
grade = 'F';
}

document.getElementById('result').innerText = `Average: $
{average.toFixed(2)} \nGrade: ${grade}`;
}
</script>
</body>
</html>

Output
60

20. Design a scientific calculator and make event for


each button using scripting language.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scientific Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
61

}
.calculator {
background: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}
.display {
width: 100%;
height: 50px;
margin-bottom: 20px;
text-align: right;
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 15px;
font-size: 18px;
border: none;
border-radius: 5px;
62

background-color: #004080;
color: white;
cursor: pointer;
}
button:hover {
background-color: #003060;
}
.wide {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" class="display" disabled>
<div class="buttons">
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="performOperation('/')">/</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="performOperation('*')">*</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
63

<button onclick="performOperation('-')">-</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="performOperation('+')">+</button>
<button onclick="clearDisplay()" class="wide">C</button>
<button onclick="performOperation('sqrt')">√</button>
<button onclick="performOperation('square')">x²</button>
</div>
</div>

<script>
let currentInput = '';
let operator = '';
let operand1 = null;

function appendValue(value) {
currentInput += value;
document.getElementById('display').value = currentInput;
}

function performOperation(op) {
if (op === 'sqrt') {
currentInput = Math.sqrt(parseFloat(currentInput)).toString();
} else if (op === 'square') {
currentInput = (Math.pow(parseFloat(currentInput), 2)).toString();
} else {
64

operand1 = parseFloat(currentInput);
operator = op;
currentInput = '';
}
document.getElementById('display').value = currentInput || operand1;
}

function calculate() {
const operand2 = parseFloat(currentInput);
let result;
switch (operator) {
case '+':
result = operand1 + operand2;
break;
case '-':
result = operand1 - operand2;
break;
case '*':
result = operand1 * operand2;
break;
case '/':
result = operand1 / operand2;
break;
default:
result = parseFloat(currentInput);
}
currentInput = result.toString();
65

document.getElementById('display').value = currentInput;
operator = '';
operand1 = null;
}

function clearDisplay() {
currentInput = '';
operator = '';
operand1 = null;
document.getElementById('display').value = '';
}
</script>
</body>
</html>

Output

21.Write a script to check whether a number is even


or odd?
66

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Even or Odd Checker</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f8ff;
}
input {
margin: 10px;
padding: 10px;
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
67

}
button:hover {
background-color: #003060;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>Even or Odd Checker</h1>
<p>Enter a number to check whether it is even or odd:</p>

<!-- Input field for number -->


<input type="number" id="number" placeholder="Enter a number">

<!-- Button to check -->


<button onclick="checkEvenOdd()">Check</button>

<!-- Result display -->


<div class="result" id="result"></div>

<script>
// JavaScript function to check if the number is even or odd
function checkEvenOdd() {
68

const number = parseInt(document.getElementById('number').value);


let result;

if (isNaN(number)) {
result = "Please enter a valid number!";
} else {
result = (number % 2 === 0) ? `${number} is Even` : `${number} is
Odd`;
}

document.getElementById('result').innerText = result;
}
</script>
</body>
</html>

Output

22.Write a program to show whether a number is


prime or not?
<!DOCTYPE html>
69

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Number Checker</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f8ff;
}
input {
margin: 10px;
padding: 10px;
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin: 10px;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
70

}
button:hover {
background-color: #003060;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>Prime Number Checker</h1>
<p>Enter a number to check whether it is prime:</p>

<!-- Input field for number -->


<input type="number" id="number" placeholder="Enter a number">

<!-- Button to check -->


<button onclick="checkPrime()">Check</button>

<!-- Result display -->


<div class="result" id="result"></div>

<script>
// JavaScript function to check if the number is prime
function checkPrime() {
71

const number = parseInt(document.getElementById('number').value);


let result;

if (isNaN(number) || number <= 1) {


result = "Please enter a number greater than 1!";
} else {
let isPrime = true;
for (let i = 2; i <= Math.sqrt(number); i++) {
if (number % i === 0) {
isPrime = false;
break;
}
}
result = isPrime ? `${number} is a Prime Number` : `${number} is
not a Prime Number`;
}

document.getElementById('result').innerText = result;
}
</script>
</body>
</html>

Output
72

23. Write a program to show multiplication table of


any number.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Table</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f8ff;
}
input {
margin: 10px;
padding: 10px;
73

width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin: 10px;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #003060;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
text-align: left;
display: inline-block;
}
</style>
</head>
<body>
<h1>Multiplication Table Generator</h1>
74

<p>Enter a number to see its multiplication table:</p>

<!-- Input field for the number -->


<input type="number" id="number" placeholder="Enter a number">

<!-- Button to generate the table -->


<button onclick="generateTable()">Generate Table</button>

<!-- Result display -->


<div class="result" id="result"></div>

<script>
// JavaScript function to generate the multiplication table
function generateTable() {
const number = parseInt(document.getElementById('number').value);
let result = '';

if (isNaN(number)) {
result = "Please enter a valid number!";
} else {
for (let i = 1; i <= 10; i++) {
result += `${number} x ${i} = ${number * i}<br>`;
}
}

document.getElementById('result').innerHTML = result;
}
75

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

Output

24.Write a program to find the factorial of any


number.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Factorial Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
76

background-color: #f0f8ff;
}
input {
margin: 10px;
padding: 10px;
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin: 10px;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #003060;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
77

</head>
<body>
<h1>Factorial Calculator</h1>
<p>Enter a number to calculate its factorial:</p>

<!-- Input field for number -->


<input type="number" id="number" placeholder="Enter a number">

<!-- Button to calculate factorial -->


<button onclick="calculateFactorial()">Calculate Factorial</button>

<!-- Result display -->


<div class="result" id="result"></div>

<script>
// JavaScript function to calculate factorial
function calculateFactorial() {
const number = parseInt(document.getElementById('number').value);
let result;

if (isNaN(number) || number < 0) {


result = "Please enter a non-negative integer!";
} else if (number === 0 || number === 1) {
result = `The factorial of ${number} is 1.`;
} else {
let factorial = 1;
for (let i = 2; i <= number; i++) {
78

factorial *= i;
}
result = `The factorial of ${number} is ${factorial}.`;
}

document.getElementById('result').innerText = result;
}
</script>
</body>
</html>

Output

25.Write a program to show Fibonacci Series


between 0 to 74.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
79

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Fibonacci Series</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f8ff;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
button {
padding: 10px 20px;
margin: 20px;
background-color: #004080;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #003060;
}
</style>
80

</head>
<body>
<h1>Fibonacci Series Generator</h1>
<p>Click the button below to display the Fibonacci series between 0 and
74:</p>

<!-- Button to generate Fibonacci series -->


<button onclick="generateFibonacci()">Generate Series</button>

<!-- Result display -->


<div class="result" id="result"></div>

<script>
// JavaScript function to generate Fibonacci series
function generateFibonacci() {
let fibSeries = [0, 1];
let nextTerm = 0;

// Generate Fibonacci series up to 74


while (true) {
nextTerm = fibSeries[fibSeries.length - 1] + fibSeries[fibSeries.length
- 2];
if (nextTerm > 74) break;
fibSeries.push(nextTerm);
}

// Display the series


81

document.getElementById('result').innerText = `Fibonacci Series: $


{fibSeries.join(', ')}`;
}
</script>
</body>
</html>

Output

You might also like