Web Technologies Practical
Uploaded by
Anu TiwariWeb Technologies Practical
Uploaded by
Anu Tiwari1
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>© 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>© 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
- WT Practical File Harshita Gupta COMPLETENo ratings yetWT Practical File Harshita Gupta COMPLETE84 pages
- SITXCCS016 Assessment Workbook v1.1 March 2024No ratings yetSITXCCS016 Assessment Workbook v1.1 March 202438 pages
- Web Technology Manual - Lab-BCSL504-HKBKNo ratings yetWeb Technology Manual - Lab-BCSL504-HKBK44 pages
- K20 Engine Control Module X3 Document ID# 4171676No ratings yetK20 Engine Control Module X3 Document ID# 41716762 pages
- MOOG Standard Hydraulic VS EPU Electro-Hydrostatic Pump100% (1)MOOG Standard Hydraulic VS EPU Electro-Hydrostatic Pump11 pages
- Week 1: A) Write A HTML Program, To Explain The Working of ListsNo ratings yetWeek 1: A) Write A HTML Program, To Explain The Working of Lists50 pages
- Stree 2 Sarkate Ka Aatank Movie Showtimes in Hyderabad & Online Ticket BookingNo ratings yetStree 2 Sarkate Ka Aatank Movie Showtimes in Hyderabad & Online Ticket Booking1 page
- Intergrating Digital Technologies and PH For COVID19No ratings yetIntergrating Digital Technologies and PH For COVID1950 pages
- User Interface Technology Laborator: DescriptionNo ratings yetUser Interface Technology Laborator: Description15 pages
- JD - Evalueserve - FS - Equity Strategy - BASBANo ratings yetJD - Evalueserve - FS - Equity Strategy - BASBA2 pages
- Training Schedule Loan Performer: Tea BreakNo ratings yetTraining Schedule Loan Performer: Tea Break12 pages
- INCOME STATMENT MAY North CHECK DATE ADJUSTEDNo ratings yetINCOME STATMENT MAY North CHECK DATE ADJUSTED17 pages
- UART - Specification by Texas InstrumentsNo ratings yetUART - Specification by Texas Instruments51 pages
- Practical File ON HTML: Maharshi Dayanand University RohtakNo ratings yetPractical File ON HTML: Maharshi Dayanand University Rohtak26 pages
- SKF - Agri Solutions - PUB 46 P1 18686 EN - 1No ratings yetSKF - Agri Solutions - PUB 46 P1 18686 EN - 160 pages
- Weekly Learning Plan: Calculates The Measures of Central Tendency of Ungrouped and Grouped DataNo ratings yetWeekly Learning Plan: Calculates The Measures of Central Tendency of Ungrouped and Grouped Data5 pages
- EContent 2 2023 06 06 12 49 44 WDH Manualpdf 2023 06 06 12 25 06No ratings yetEContent 2 2023 06 06 12 49 44 WDH Manualpdf 2023 06 06 12 25 0632 pages
- Web Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-2023No ratings yetWeb Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-202315 pages
- Query The Service Contracts Tables For Header, Line, Subline and Billing InformationNo ratings yetQuery The Service Contracts Tables For Header, Line, Subline and Billing Information6 pages
