Scribd
Upload
22 views40 pages

Web Technologies Practical Assignments

The document outlines various web technologies assignments, including creating HTML pages, displaying college letterheads, and designing forms. Each program includes specific HTML markup examples demonstrating different functionalities and formatting techniques. The assignments aim to enhance understanding of web design and development concepts.

Uploaded by

cec237550.mca.cec
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
22 views40 pages

Web Technologies Practical Assignments

The document outlines various web technologies assignments, including creating HTML pages, displaying college letterheads, and designing forms. Each program includes specific HTML markup examples demonstrating different functionalities and formatting techniques. The assignments aim to enhance understanding of web design and development concepts.

Uploaded by

cec237550.mca.cec
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

Subject: Web Technologies 1

Index
S. No. Title Signature
1. Design index page of a book Titled Web Designing.
2. Create a simple HTML page to demonstrate the use of different tags.
3. Display Letter Head of your college on a web page & it must be scrolling Right to Left.
4. Create a link to move within a single page rather than to load another page.
5. Display “Name of University” using different Text formatting Tags.
6. Design Time Table of your department and highlight most important periods.
7. Use Tables to provide layout to your web page.
8. Embed Audio and Video into your web page.
9. Divide a web page vertically and display logo of your college in left pane and logo of university in
right pane.
10. Create Bio- Data of an employee
11. Design front page of a hospital with different styles.
12. Design a web page and display horizontally two different web pages at a time.
13. Write a program to create a login form. On clicking the submit button, the user should get
navigated to a profile page.
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.
15. Write a HTML code to create website in your college or department and create link for Tutorial
of specific subject.
16. Write a program to perform following operations on two numbers input by the user:
1. Addition
2. Subtraction
3. Multiplication
4. Division
17. Design a program to solve quadratic equations.
18. Write a program to determine greatest number of three numbers.
19. Write a script to compute, the Average and Grade of student’s marks.
20. Design a scientific calculator and make event for each button using scripting language.
21. Write a script to check whether a number is even or odd?
22. Write a program to show whether a number is prime or not?
23. Write a program to show multiplication table of any number.
24. Write a program to find the factorial of any number.
25. Write a program to show Fibonacci Series between 0 to 74.

Roll No: Name:


Subject: Web Technologies 2

Program 1: Design index page of a book Titled Web Designing.

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>Index Page</title>
<style>
body {
font-family: 'calibri';
}

table {
width: 40%;
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>

<body>
<h1 align = "center">INDEX</h1>
<table align = "center" border = "2">
<thead>
<th>S. No.</th>
<th>Title</th>
<th>Page</th>
</thead>
<tr>
<td>1.</td>
<td>INTRODUCTION TO HTML</td>
<td>1</td>
</tr>
<tr>
<td>2.</td>
<td>THE HISTORY OF HTML</td>
<td>2</td>
</tr>
<tr>
<td>3.</td>
<td>TAGS AND ATTRIBUTES</td>
<td>4</td>
</tr>
<tr>
<td>4.</td>
<td>STRUCTURE</td>
<td>10</td>
</tr>
<tr>
<td>5.</td>
<td>TEXT</td>
<td>12</td>
</tr>
<tr>
<td>6.</td>
<td>LISTS</td>
<td>13</td>
</tr>
Roll No: Name:
Subject: Web Technologies 3
<tr>
<td>7.</td>
<td>LINKS</td>
<td>16</td>
</tr>
<tr>
<td>8.</td>
<td>IMAGES</td>
<td>18</td>
</tr>
<tr>
<td>9.</td>
<td>TABLES</td>
<td>20</td>
</tr>
<tr>
<td>10.</td>
<td>FORMS</td>
<td>26</td>
</tr>
<tr>
<td>11.</td>
<td>EXTRA MARKUP</td>
<td>30</td>
</tr>
<tr>
<td>12.</td>
<td>FLASH,VIDEO AND AUDIO</td>
<td>33</td>
</tr>
<tr>
<td>13.</td>
<td>INTRODUCING CSS</td>
<td>45</td>
</tr>
<tr>
<td>14.</td>
<td>COLOR</td>
<td>49</td>
</tr>
<tr>
<td>15.</td>
<td>TEXT</td>
<td>51</td>
</tr>
<tr>
<td>16.</td>
<td>BOXES</td>
<td>55</td>
</tr>
<tr>
<td>17.</td>
<td>LISTS,TABLES AND FORMS</td>
<td>57</td>
</tr>
<tr>
<td>18.</td>
<td>LAYOUT</td>
<td>67</td>
</tr>
Roll No: Name:
Subject: Web Technologies 4
<tr>
<td>19.</td>
<td>IMAGES</td>
<td>70</td>
</tr>
<tr>
<td>20.</td>
<td>HTMLS LAYOUT</td>
<td>72</td>
</tr>
<tr>
<td>21.</td>
<td>PROCESS AND DESIGN</td>
<td>74</td>
</tr>
<tr>
<td>22.</td>
<td>PRACTICAL INFORMATION</td>
<td>78</td>
</tr>
</table>
</body>
</html>

Output

Roll No: Name:


Subject: Web Technologies 5
Program 2: Create a simple HTML page to demonstrate the use of different tags.

HTML Markup
<!DOCTYPE html>

<html>
<!--Head Tag: Contains Information about HTML Document-->
<head>
<!--Title Tag: Shows Title on Browser Tab-->
<title>Basic HTML Tags</title>

<!--Style Tag: Stores CSS-->


<style>
body {
font-family: 'calibri';
}
</style>
</head>

<!--Body Tag: Contains content visible in browser-->


<body>
<!--Comment Tag: Inserts a Comment, not readable by browser-->

<!--Heading Tags-->
<h1>Heading 1, Font Size: 2em</h1>
<h2>Heading 2, Font Size: 1.5em</h2>
<h3>Heading 3, Font Size: 1.17em</h3>
<h4>Heading 4, Font Size: 1em</h4>
<h5>Heading 5, Font Size: .83em</h5>
<h6>Heading 6, Font Size: .67em</h6>

<!--Paragraph Tag-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id velit
dictum, fringilla velit quis, tristique ante. Praesent lacinia, augue lacinia sollicitudin
cursus, risus lacus varius lacus, non consequat lectus dolor quis lorem. Vivamus lorem
risus, varius in arcu eu, pharetra blandit ligula. Cras dui dolor, sollicitudin a posuere
et, maximus sed sem. Aenean commodo sollicitudin enim in tincidunt. Vestibulum quis mauris
tempor, volutpat lectus tristique, vestibulum orci. Fusce pulvinar cursus est, ac blandit
enim facilisis quis. Etiam arcu odio, vestibulum at pellentesque ac, fermentum non nibh.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam nec facilisis tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra tellus blandit,
placerat velit sed, dapibus augue.</p>

<!--HTML Text Formatting Tags-->


<p>
HTML Text Formatting
<!--br Tag: Self closing tag which inserts a Line Break--> <br><br>
<!--b Tag--> <b>Bolds a Text</b><br>
<!--i Tag--> <i>Italicises a Text</i><br>
<!--u Tag--> <u>Underlines a Text</u><br>
<!--sub Tag--> Subscripts a Text. For Example: H<sub>2</sub>O<br>
<!--sup Tag--> Superscripts a Text. For Example: E = MC<sup>2</sup><br>
</p>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 6

Output

Program 3: Display Letter Head of your college on a web page & it must be scrolling Right to Left.

HTML Markup
<!DOCTYPE html>
<html>
<head>
<title>LETTERHEAD DISPLAY</title>
<style type="text/css">
div {
background: linear-gradient(to left,white, #4db8ff);
height:80px;
text-align: right;
color: white;
margin: 20px 0 0 10px;
z-index: -1;
}
</style>
</head>

<body>
<img src = "https://uploads.sarvgyan.com/2018/03/CGC-Landran.jpg" style =
"position: fixed; margin-left: 10px; margin-top: -10px; z-index: 1;" height="100px"
width="60px" >
<div>
<marquee><p align = "center">
<b>Chandigarh Group of Colleges</b><br>
Transforming Education, Transforming Lives.
</p></marquee>
</div>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 7
Output

Program 4: Create a link to move within a single page rather than to load another page.

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>Same Page Link</title>
</head>

<body style = "font-family: 'calibri';">


<header>
<div align = "center">
<h2>Indian Heritage Restruant</h2>

<a href = "#Seasonal">Seasonal</a> &emsp;


<a href = "#Continental">Continental</a> &emsp;
<a href = "#Desserts">Dessert</a> &emsp;
<a href = "#Savory">Savory</a> &emsp;
</div>
</header>

<main>
<h3 id = "Seasonal">Seasonal Dishes</h3>
<ul>
<li>Sarson Ka Saag</li>
<li>Kulle Ki Chaat</li>
<li>Dal Ke Paranthe</li>
<li>Kandalee Ka Saag</li>
</ul>

<h3 id = "Continental">Continental Dishes</h3>


<ul>
<li>Chickpea Soup</li>
<li>Buttered Patatoes</li>
<li>Sticky Toffee Pudding</li>
<li>Roesti and Salad</li>
</ul>

<h3 id = "Desserts">Desserts</h3>
<ul>
<li>Ghewar</li>
<li>Gond Ke Laddo</li>
<li>Gajar Ka Halwa</li>
<li>Alsi Ke Ladoo</li>
</ul>

<h3 id = "Savory">Savory Food</h3>


<ul>
<li>Moong Dal Kachori</li>
<li>Dahi Papdi Chaat</li>
<li>Samosa</li>
<li>Kathi Roll</li>
Roll No: Name:
Subject: Web Technologies 8
</ul>
</main>
</body>
</html>

Output

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

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>FORMATTING TAGS</title>
</head>

<body style = "font-family: 'calibri';">


<p>
<b>IK Gujral Punjab Technical University, Jalhandhar</b><br>
<i>IK Gujral Punjab Technical University, Jalhandhar</i><br>
<u>IK Gujral Punjab Technical University, Jalhandhar</u><br>
<tt>IK Gujral Punjab Technical University, Jalhandhar</tt><br>
<strike>IK Gujral Punjab Technical University, Jalhandhar</strike><br>
<del>IT</del> <ins>IK Gujral Punjab Technical University, Jalhandhar</ins><br>
<hr>
IK Gujral Punjab Technical University <sub>Jalhandhar</sub><br>
IK Gujral Punjab Technical University <sup>Jalhandhar</sup><br>
<hr>
<big>IK Gujral Punjab Technical University, Jalhandhar</big><br>
<small>IK Gujral Punjab Technical University, Jalhandhar</small><br>
<strong>IK Gujral Punjab Technical University, Jalhandhar</strong><br>
<em>IK Gujral Punjab Technical University, Jalhandhar</em><br>
</p>

Roll No: Name:


Subject: Web Technologies 9
</body>
</html>

Output

Program 6: Design Time Table of your department and highlight most important periods.

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>MCA 2A | Time Table</title>
<style>
body {
font-family: Calibri;
}

table {
border: 3px solid black;
margin-left: auto;
margin-right: auto;
}

th, tr, td {
border: 1px solid black;
}

.Emphasis {
border: 2px solid black;
}

table, tr, th, td {


border-collapse: collapse;
}
</style>
</head>

<body>
<main>
Roll No: Name:
Subject: Web Technologies 10
<table>
<tbody>
<!--Heading-->
<tr>
<th colspan="9">MCA 2A - Time Table</th>
</tr>

<!--Periods-->
<tr class = "Emphasis">
<th rowspan="2" class = "Emphasis">Period/Day Time</th>
<th class = "Emphasis">1st</th>
<th class = "Emphasis">2nd</th>
<th class = "Emphasis">3rd</th>
<th class = "Emphasis">4th</th>
<th class = "Emphasis">5th</th>
<th class = "Emphasis">6th</th>
<th class = "Emphasis">7th</th>
<th class = "Emphasis">8th</th>
</tr>

<!--Period Times-->
<tr class = "Emphasis">
<th class = "Emphasis">09:15 - 10:10</th>
<th class = "Emphasis">10:10 - 11:05</th>
<th class = "Emphasis">11:05 - 12:00</th>
<th class = "Emphasis">12:00 - 12:55</th>
<th class = "Emphasis">12:55 - 01:50</th>
<th class = "Emphasis">01:50 - 02:45</th>
<th class = "Emphasis">02:45 - 03:40</th>
<th class = "Emphasis">03:40 - 04:35</th>
</tr>

<!--Monday-->
<tr>
<th class = "Emphasis">Monday</th>
<td bgcolor= "yellow">Ad. Java</td>
<td>IS</td>
<td bgcolor= "yellow">Tech.</td>
<td bgcolor= "yellow">DAA</td>
<th rowspan="8" class = "Emphasis">Lunch</td>
<td>Soft Skills</td>
<td>WT</td>
<td></td>
</tr>

<!--Tuesday-->
<tr>
<th class = "Emphasis">Tuesday</th>
<td>Apti.</td>
<td bgcolor= "yellow">DAA</td>
<td>Linux</td>
<td>WT</td>
Roll No: Name:
Subject: Web Technologies 11
<td colspan="2" bgcolor= "yellow">A2 - Advanced Java Lab 7</td>
<td></td>
</tr>

<!--Wednesday-->
<tr>
<th rowspan="2" class = "Emphasis">Wednesday</th>
<td rowspan="2" bgcolor= "yellow">Ad. Java</td>
<td rowspan="2">Apptitude</td>
<td rowspan="2">Linux</td>
<td rowspan="2" bgcolor= "yellow">Tech.</td>
<td rowspan="2">Soft Skills</td>
<td bgcolor= "yellow">A1 - WT Lab 9</td>
<td rowspan="2"></td>
</tr>

<tr>
<td>A2 - Library</td>
</tr>

<!--Thursday-->
<tr>
<th rowspan="2" class = "Emphasis">Thursday</th>
<td rowspan="2">Linux</td>
<td>A1 - Linux Lab</td>
<td bgcolor= "yellow">A2 - WT Lab 9</td>
<td rowspan="2" bgcolor= "yellow">Ad. Java</td>
<td rowspan="2">IS</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>

<tr>
<td>A2 - Library</td>
<td>A1 - Library</td>
</tr>

<!--Friday-->
<tr>
<th rowspan="2" class = "Emphasis">Friday</th>
<td rowspan="2">IS</td>
<td rowspan="2" bgcolor= "yellow">DAA</td>
<td rowspan="2">WT</td>
<td rowspan="2" bgcolor= "yellow">Ad. Java</td>
<td rowspan="2">Linux</td>
<td colspan="2" bgcolor= "yellow">A1 - Ad. Java Lab 7</td>
</tr>

<tr>
<td colspan="2">A2 - Linux Lab</td>
</tr>
</tbody>
Roll No: Name:
Subject: Web Technologies 12
</table>
</main>
</body>
</html>

Output

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

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>Table Layout Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 10px;
}
.sidebar {
width: 25%;
vertical-align: top;
}
.main-content {
width: 75%;
vertical-align: top;
}
</style>
</head>
<body style = "font-family: 'calibri';">
<table>
<thead>
<td colspan = "2" align = "center">
<img src = "https://s3-us-west-
2.amazonaws.com/issuewireassets/primg/54371/chandigarh-group-of-colleges-
landran1865648758.png" width = "300px">
</td>
</thead>
<tr>
<td class="sidebar">
<h3>Quicklinks</h3>
<a>Results</a><br>
Roll No: Name:
Subject: Web Technologies 13
<a>Admissions</a><br>
<a>Departments</a><br>
<a>Announcements</a><br>
</td>
<td class="main-content">
<h2>Chandigarh Group of Colleges Landran</h2>
<img src = "https://www.cgc.edu.in/public/images/common-
pages/amenities/lively-campus.jpg">
<p>Chandigarh Group of Colleges, Landran has become a synonym to
excellence. Situated on the National Highway 205A, Chandigarh Group of Colleges bespeaks
A-class educational facilities. CGC, Landran has come a long way in the field of
education. In the year 2001, it got incepted with a hope to bridge the gap between
inquisitive minds and education. Initially, Engineering was the flagship program at CGC,
Landran and with time, more & more programs got added to the curriculum. Currently, the
college offers 45+ programs under seven domains namely Engineering, Biotechnology,
Computer Application, Management, Education, Pharmacy, Commerce, Design, Bachelor of
Science and Hotel Management</p>
</td>
</tr>
</table>
</body>
</html>

Output

Roll No: Name:


Subject: Web Technologies 14

Program 8: Embed Audio and Video into your web page.

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>Audio & Video Example</title>
</head>

<body style = "font-family: 'calibri';">


<h3>This is an Audio</h3>
<audio controls>
<source src = "/On&On.mp3" type = "audio/mp3">
Your Browser does not Support Audio Element
</audio>

<h3>This is a Video</h3>
<video controls>
<source src = "/On&On.mp4" type = "video/mp4">
Your Browser does not Support Video Element
</video>
</body>
</html>

Output

Program 9: Divide a web page vertically and display logo of your college in left pane and logo of university in right pane.

HTML Markup
<!DOCTYEP html>

<html>
<head>
<title>College & University</title>

<style>
#OuterBox {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}

Roll No: Name:


Subject: Web Technologies 15
.Column {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
}

.logo {
max-width: 50%;
max-height: 50%;
margin: auto;
}
</style>
</head>

<body>
<div id = "OuterBox">
<div class = "Column">
<img src = "https://s3-us-west-
2.amazonaws.com/issuewireassets/primg/54371/chandigarh-group-of-colleges-
landran1865648758.png" alt = "College Logo" width = "250px" class = "Logo">
</div>

<div class = "Column">


<img src = "https://sbsstc.ac.in/IMGs/PTULogo.gif" alt = "University Logo"
width = "250px" class = "Logo">
</div>
</div>
</body>
</html>

Output

Program 10: Create Bio- Data of an employee.

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>Employee Data</title>
</head>

<body>
<table id = "EmployeeData" Border = "2px" align = "Center">
<!--Heading-->
<thead>

Roll No: Name:


Subject: Web Technologies 16
<th bgcolor= "DarkGreen"><img src =
"https://static.wikia.nocookie.net/shingekinokyojin/images/a/a7/Survey_Corps_Logo.png/revi
sion/latest?cb=20140307090257" width = "50px"></th>
<th>Employee Bio Data</th>
</thead>

<tbody>
<!--Employee Photo-->
<tr>
<td colspan= "2"><img src = "erenpfp.jpg" alt = "Profile Photo" width
= "250px"></td>
</tr>

<!--Employee Information-->
<tr>
<td><b>Name</b></td>
<td>Eren Yeager</td>
</tr>

<tr>
<td><b>Age</b></td>
<td>19</td>
</tr>

<tr>
<td><b>Species</b></td>
<td>Human/Intelligent Titan</td>
</tr>

<tr>
<td><b>Rank</b></td>
<td>Soldier</td>
</tr>

<tr>
<td><b>Squad</b></td>
<td>Levi's Squad</td>
</tr>

<tr>
<td><b>Residence</b></td>
<td>Wall Rose</td>
</tr>
</tbody>
</table>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 17

Output

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

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>The Hospital</title>
<style>
body {
margin: 0 20% 0 20%;
font-family: "Century Gothic";
}

.Title {
text-align: center;
font-weight: bold;
}

.NavItem {
margin: 0 10px 0 10px;
}
</style>
</head>

<body>
<header>
<h2 class = "Title">The Hospital</h2>
<div class = "NavBar" align = "center">
<a class = "NavItem">About</a>
<a class = "NavItem">Services</a>
<a class = "NavItem">Doctors</a>
<a class = "NavItem">Career</a>
</div>
Roll No: Name:
Subject: Web Technologies 18
</header>

<main>
<br>
<img src = "https://amritahospitals.org/wp-
content/uploads/2022/08/amritahospital-kochi-2048x845.png" width="100%">

<table width = "100%">


<thead align = "left">
<th width = "20%"><br>Quick Links</th>
<th width = "80%"><br>About Us</th>
</thead>

<tbody>
<tr>
<td>
<a>Book Appointment</a><br>
<a>Consult a Doctor</a><br>
<a>Contact Cutomer Care</a><br>
<a>Order Medicines</a><br>
</td>

<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
vulputate nulla eu augue ultricies, vitae laoreet augue elementum. Ut eget diam vel eros
auctor volutpat convallis at est. Mauris pulvinar euismod odio, quis gravida orci rutrum
sit amet. Duis ultrices mattis elementum. Phasellus malesuada leo id tellus blandit
placerat. Curabitur viverra nunc eros, a rhoncus eros commodo pharetra. Mauris molestie
quis purus vitae molestie.

Cras eu urna gravida, feugiat diam ac, dictum metus. Praesent quis feugiat leo, et viverra
sem. Proin sodales ut risus at elementum. Nunc non velit sit amet nisl finibus semper at
in urna. Maecenas et dictum ante. Nullam vulputate ante sed urna facilisis, quis efficitur
arcu lobortis. Sed rutrum turpis nec aliquet condimentum. Maecenas odio nisl, convallis a
tempor ac, lacinia nec sapien. Nulla a consequat sem, sed mattis nisi. Quisque dui eros,
malesuada ut magna a, commodo consectetur tortor. Ut ac quam magna. Ut maximus a nisl vel
tincidunt. Ut euismod accumsan orci ut faucibus. Nam ac felis nisl. Aliquam erat
volutpat. </td>
</tr>
</tbody>
</table>
</main>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 19

Output

Program 12: Design a web page and display horizontally two different web pages at a time.

HTML Markup
<!DOCTYPE html>

<html>
<head>
<title>Two Web Pages Horizontally</title>

<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.frame {
width: 49%;
height: 800px;

}
</style>
</head>

<body>
<div class = "container">
<iframe class = "frame" src = "https://www.example1.com/"></iframe>
<iframe class = "frame" src = "https://www.example2.com/"></iframe>
</div>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 20

Output

Program 13: Write a program to create a login form. On clicking the submit button, the user should get navigated to a
profile page.

HTML Markup – Login Page


<!DOCTYPE html>

<html>
<head>
<title>Student Login</title>
</head>

<body style = "font-family: 'calibri';">


<h3>Student Login</h3>

<form name = "Login" action="profile.html">


<!--Username-->
<label for = "Username">Username</label> &emsp;
<input type = "text" id = "Username">

<br><br>

<!--Password-->
<label for = "Password">Password</label> &emsp;
<input type = "password" id = "Password">

<br><br>

<input type = "submit" value = "Login">


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

Roll No: Name:


Subject: Web Technologies 21

Output – Login Page

HTML Markup – Profile Page


<!DOCTYPE html>

<html>
<head>
<title>Welcome User</title>
</head>

<body style = "font-family: 'calibri';">


<h2>Welcome <label id = "Username" text = ""></label></h2>
</body>
</html>

Output – Profile Page

Program 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.

HTML Markup – Registration Form


<!DOCTYPE html>

<html>
<head>
<title>Register User</title>

<style>
input {
border: 1px solid black;
border-radius: 10px;
height: 30px;
width: 100%;
padding: 0 20px 0 20px;
margin-left: 20px;
font-family: "calibri";
font-size: 15px;
}

#submit {
width: 50%;
background-color: black;
color: white;
font-weight: bold;
}

a {
color: black;
Roll No: Name:
Subject: Web Technologies 22
}

</style>
</head>

<body style = "font-family: 'Calibri';">


<form name = "Register" method = "post" action = "login.html"><table align =
"center">
<tr>
<td colspan = "2" align = "center"><h2>Register User</h2></td>
</tr>

<tr>
<td>First Name</td>
<td><input type = "text" id = "FirstName"></td>
</tr>

<tr>
<td>Last Name</td>
<td><input type = "text" id = "LastName"></td>
</tr>

<tr>
<td>Date of Birth</td>
<td><input type = "date" id = "DOB"></td>
</tr>

<tr>
<td>Username</td>
<td><input type = "text" id = "Username"></td>
</tr>

<tr>
<td>Password</td>
<td><input type = "password" id = "Password"></td>
</tr>

<tr>
<td colspan = "2" align = "center">
<br>Already have an Account? <a href = "login.html">Login
Here</a><br><br>
<input type = "submit" id = "submit">
</td>
</tr>
</table></form>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 23

Output – Register User

HTML Markup – Login Page


<!DOCTYPE html>

<html>
<head>
<title>Login</title>

<style>
input {
border: 1px solid black;
border-radius: 10px;
height: 30px;
width: 100%;
padding: 0 20px 0 20px;
margin-left: 20px;
font-family: "calibri";
font-size: 15px;
}

#submit {
width: 50%;
background-color: black;
color: white;
font-weight: bold;
}

a {
color: black;
}

</style>
</head>

<body style = "font-family: 'Calibri';">


<form name = "Login" method = "post" action = "profile.html"><table align =
"center">
<tr>
<td colspan = "2" align = "center"><h2>User Login</h2></td>
</tr>

<tr>
Roll No: Name:
Subject: Web Technologies 24
<td>Username</td>
<td><input type = "text" id = "Username"></td>
</tr>

<tr>
<td>Password</td>
<td><input type = "password" id = "Password"></td>
</tr>

<tr>
<td colspan = "2" align = "center">
<br>Don't have an Account? <a href = "register.html">Register
Here</a><br><br>
<input type = "submit" id = "submit" value = "Login">
</td>
</tr>
</table></form>
</body>
</html>

Output – Login Page

Program 15: Write a HTML code to create website in your college or department and create link for Tutorial of specific
subject.

HTML Markup
<!DOCTYPE html>

<html>
<head>
<!--Page Style-->
<title>Subject Tutorials</title>

<!--CSS Styles-->
<style>
body {
margin: 1% 20% 0 20%;
}

.MainTitle {
font-family: 'Helvetica';
font-weight: bold;
color: #006db5;
}

.MainText, a, select, option, input {


font-family: 'Helvetica';
font-weight: normal;
Roll No: Name:
Subject: Web Technologies 25
font-size: 1em;
color: #1a1a1a;
text-align: justify;
}

#submit {
height: 40px;
background-color: #006db5;
color: white;
font-weight: bold;
border: none;
padding: 0 10px 0 10px;
border-radius: 10px;
}
</style>
</head>

<body>
<header>
<img src = "https://s3-us-west-
2.amazonaws.com/issuewireassets/primg/54371/chandigarh-group-of-colleges-
landran1865648758.png" alt = "CGC Logo" width = "200px">
</header>

<main>
<h2 class = "MainTitle" align = "Center">Department of Computer
Applications</h2>
<p class = "MainText">From programming to web development, from cyber security
to AI, CGC Landran and its Department of Computer Applicationoffers tech-based learning in
its programs to makes student a tech expert. DCA offers a veriety of courses such as BCA,
MCA, B.Sc. Graphic & Web Designing, B.Sc. Cyber Security, etc that helps student to excel
on ever expanding world of tech.<br><br>
This page is specifically designed to provide a video based learning to
students. These can be user to review lectures, revise covered topics or cover up for
absents or leaves.</p>

<table>
<tr>
<td width = "30%"><h4 class = "MainTitle">Most Visited
Tutorials</h4></td>
<td><h4 class = "MainTitle">Get Your Tutorial</h4></td>
</tr>
<tr>
<td width = "30%">
<a href="#">Data Structured and Algorithms</a><br>
<a href="#">Advanced Java</a><br>
<a href="#">Web Designing Fundamentals</a><br>
<a href="#">Programming in C/C++</a><br>
<a href="#">Deep Learning</a>
</td>

<td>
<table>
<tr class = "MainText">
<td>
<label for = "Course">Select Course:</label><br>
<select name = "Course" id = "Course">
<option value = "0">Please
Select......................</option>

Roll No: Name:


Subject: Web Technologies 26
<option value = "BCA">Bachelor of Computer
Application</option>
<option value = "BSC">Bachelor of Science</option>
<option value = "MCA">Master of Computer
Application</option>
</select> &emsp;
</td>

<td>
<label for = "Semester">Select Semester:</label><br>
<select name = "Semester" id = "Semester">
<option value = "0">Please
Select......................</option>
<option value = "1">First Semester</option>
<option value = "2">Second Semester</option>
<option value = "3">Third Semester</option>
<option value = "4">Fourth Semester</option>
<option value = "5">Fifth Semester</option>
<option value = "6">Sixth Semester</option>
</select> &emsp;
</td>

<td>
<label for = "Course">Select Subject:</label><br>
<select name = "Subject" id = "Subject">
<option value = "0">Please
Select......................</option>
<option value = "1">First Subject</option>
<option value = "2">Second Subject</option>
<option value = "3">Third Subject</option>
<option value = "4">Fourth Subject</option>
<option value = "5">Fifth Subject</option>
</select>
</td>
</tr>

<tr>
<td colspan = "3" align = "center"><form action =
"tutorial.html">
<br><input type = "submit" id = "submit" value = "Get
Tutorial">
</form></td>
</tr>
</table>
</td>
</tr>
</table>
</main>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 27

Output

Program 16: Write a program to perform following operations on two numbers input by the user:
1. Addition
2. Subtraction
3. Multiplication
4. Division

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Calculator</title>

<link rel="stylesheet" href="style.css">

<script>
function Calculate() {
let Num1, Num2, Operation, Result;
Num1 = parseFloat(document.getElementById("Text1").value);
Num2 = parseFloat(document.getElementById("Text2").value);
Operation = document.getElementById("Operation").value;

if (Operation == "+") {
Result = Num1 + Num2;
} else if (Operation == "-") {
Result = Num1 - Num2;
} else if (Operation == "*") {
Result = Num1 * Num2;
} else if (Operation == "/") {
Result = Num1 / Num2;
}

document.getElementById("Display").value = Result;
}
</script>
</head>

<body>
<table align = "Center">

Roll No: Name:


Subject: Web Technologies 28
<tr>
<td colspan = "2"><h2 align = "Center">Calculator</h2></td>
</tr>

<tr>
<td colspan="2"><input type = "text" id = "Display"></td>
</tr>

<tr>
<td>Number 1</td>
<td><input type="text" id = "Text1" class = "Input"></td>
</tr>

<tr>
<td>Number 2</td>
<td><input type="text" id = "Text2" class = "Input"></td>
</tr>

<tr>
<td>Operation</td>
<td>
<select id = "Operation" class = "Input">
<option value = "0">Please Select</option>
<option value = "+">Addition</option>
<option value = "-">Subtraction</option>
<option value = "*">Multiplication</option>
<option value = "/">Division</option>
</select>
</td>
</tr>

<tr>
<td colspan = "2" align = "Center">
<br><button onclick = Calculate()>Calculate</button>
</td>
</tr>
</table>
</body>
</html>

Output

Roll No: Name:


Subject: Web Technologies 29

Program 17: Design a program to solve quadratic equations.

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Quadratic Equation Solver</title>

<script>
function solveQuadraticEquation() {
// Get input values
let a = parseFloat(document.getElementById("Num1").value);
let b = parseFloat(document.getElementById("Num2").value);
let c = parseFloat(document.getElementById("Num3").value);

// Calculate discriminant
let discriminant = Math.pow(b, 2) - 4 * a * c;

// Check if equation has real roots


if (discriminant < 0) {
alert("This equation has no real roots");
return;
}

// Calculate roots
let root1 = (-b + Math.sqrt(discriminant)) / (2 * a);
let root2 = (-b - Math.sqrt(discriminant)) / (2 * a);

// Display roots
document.getElementById("Root1").value = root1;
document.getElementById("Root2").value = root2;
}
</script>
</head>

<body align = "Center" style = "font-family: 'calibri';">


<div>
<h3>Quadratic Equation Solver</h3>

<label for = "Number1">Number 1</label> &emsp;


<input type = "number" step = "any" id = "Num1"><br><br>

<label for = "Number2">Number 2</label> &emsp;


<input type = "number" step = "any" id = "Num2"><br><br>

<label for = "Number3">Number 3</label> &emsp;


<input type = "number" step = "any" id = "Num3"><br><br>

<button onclick = solveQuadraticEquation()>Find Roots</button><br><br>

<label for = "Root1">Root 1</label> &emsp;


<input type = "number" step = "any" id = "Root1" readonly><br><br>

<label for = "Root1">Root 2</label> &emsp;


<input type = "number" step = "any" id = "Root2" readonly><br><br>
</div>
</body>
</html>
Roll No: Name:
Subject: Web Technologies 30

Output

Program 18: Write a program to determine greatest number of three numbers.

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Gretest Number Finder</title>

<script>
function findGreatest() {
// Get User input
let Num1, Num2, Num3, Result;
Num1 = parseFloat(document.getElementById("Num1").value);
Num2 = parseFloat(document.getElementById("Num2").value);
Num3 = parseFloat(document.getElementById("Num3").value);

// Compare Numbers
if (Num1 > Num2 && Num1 > Num3) {
Result = Num1 + " is Largest";
} else if (Num2 > Num1 && Num2 > Num3) {
Result = Num2 + " is Largest";
} else if (Num3 > Num1 && Num3 > Num2) {
Result = Num3 + " is Largest";
}

// Show Result
document.getElementById("Display").innerText = Result;
}
</script>
</head>

<body align = "Center" style = "font-family: 'calibri';">


<div>
<h3>Greatest Number Finder</h3>

<p><label id = "Display"></label></p>

<label for = "Number1">Number 1</label> &emsp;


<input type = "number" step = "any" id = "Num1"><br><br>

<label for = "Number2">Number 2</label> &emsp;


<input type = "number" step = "any" id = "Num2"><br><br>

Roll No: Name:


Subject: Web Technologies 31
<label for = "Number3">Number 3</label> &emsp;
<input type = "number" step = "any" id = "Num3"><br><br>

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


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

Output

Program 19: Write a script to compute, the Average and Grade of student’s marks.

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Grade Calculator</title>

<script>
function findGrades() {
// Get User Inputs
let Sub1, Sub2, Sub3, Sub4, Sub5, Avarage, Grade;
Sub1 = parseFloat(document.getElementById("sub1").value);
Sub2 = parseFloat(document.getElementById("sub2").value);
Sub3 = parseFloat(document.getElementById("sub3").value);
Sub4 = parseFloat(document.getElementById("sub4").value);
Sub5 = parseFloat(document.getElementById("sub5").value);

Avarage = (Sub1 + Sub2 + Sub3 + Sub4 + Sub5) / 5

if (Avarage > 85 && Avarage <= 100) {


Grade = 'A';
} else if (Avarage > 75 && Avarage <= 85) {
Grade = 'B';
} else if (Avarage > 50 && Avarage <= 75) {
Grade = 'C';
} else if (Avarage > 35 && Avarage <= 50) {
Grade = 'D';
} else if (Avarage > 0 && Avarage <= 35) {
Grade = 'F';
} else {
Grade = "Invalid";
}

document.getElementById("Avarage").innerText = "Avarage = " + Avarage;


document.getElementById("Grade").innerText = "Grade = " + Grade;
Roll No: Name:
Subject: Web Technologies 32
}
</script>
</head>

<body align = "Center" style = "font-family: 'calibri';">


<h2>Grade Calculator</h2>

<table align = "Center">


<tr><td colspan= "2">Enter Your Marks Below</td></tr>

<tr>
<td>Subject #1</td>
<td><input type = "number" step = "any" id = "sub1"></td>
</tr>

<tr>
<td>Subject #2</td>
<td><input type = "number" step = "any" id = "sub2"></td>
</tr>

<tr>
<td>Subject #3</td>
<td><input type = "number" step = "any" id = "sub3"></td>
</tr>

<tr>
<td>Subject #4</td>
<td><input type = "number" step = "any" id = "sub4"></td>
</tr>

<tr>
<td>Subject #5</td>
<td><input type = "number" step = "any" id = "sub5"></td>
</tr>

<tr>
<td colspan = "2"><b>
<label id = "Avarage"></label> &ensp;
<label id = "Grade"></label>
</b></td>
</tr>

<tr><td colspan = "2"><br><button onclick =


findGrades()>Calculate</button></td></tr>
</table>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 33

Output

Program 20: Design a scientific calculator and make event for each button using scripting language.

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Scientific Calculator</title>

<style>
.calculator {
border: 1px solid black;
width: 220px;
padding: 10px;
}

.row {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}

.btn {
width: 40px;
}

</style>

<script>
function insert(value) {
document.getElementById("display").value += value;
}

function clearDisplay() {
document.getElementById("display").value = "";
}

function backspace() {
let displayValue = document.getElementById("display").value;
document.getElementById("display").value = displayValue.substring(0,
displayValue.length - 1);
}

function calculate() {
Roll No: Name:
Subject: Web Technologies 34
let displayValue = document.getElementById("display").value;
let result = eval(displayValue);
document.getElementById("display").value = result;
}
</script>
</head>

<body align = "center">


<div class="calculator">
<input type="text" id="display" disabled><br><br>

<div class="row">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="backspace()">&larr;</button>
<button class="btn" onclick="insert('^')">^</button>
<button class="btn" onclick="insert('%')">%</button>
</div>

<div class="row">
<button class="btn" onclick="insert('7')">7</button>
<button class="btn" onclick="insert('8')">8</button>
<button class="btn" onclick="insert('9')">9</button>
<button class="btn" onclick="insert('/')">/</button>
</div>

<div class="row">
<button class="btn" onclick="insert('4')">4</button>
<button class="btn" onclick="insert('5')">5</button>
<button class="btn" onclick="insert('6')">6</button>
<button class="btn" onclick="insert('*')">*</button>
</div>

<div class="row">
<button class="btn" onclick="insert('1')">1</button>
<button class="btn" onclick="insert('2')">2</button>
<button class="btn" onclick="insert('3')">3</button>
<button class="btn" onclick="insert('-')">-</button>
</div>

<div class="row">
<button class="btn" onclick="insert('0')">0</button>
<button class="btn" onclick="insert('.')">.</button>
<button class="btn" onclick="calculate()">=</button>
<button class="btn" onclick="insert('+')">+</button>
</div>

<div class="row">
<button class="btn" onclick="insert('(')">(</button>
<button class="btn" onclick="insert(')')">)</button>
<button class="btn" onclick="insert('sin(')">sin</button>
<button class="btn" onclick="insert('cos(')">cos</button>
</div>

<div class="row">
<button class="btn" onclick="insert('tan(')">tan</button>
<button class="btn" onclick="insert('sqrt(')">√</button>
<button class="btn" onclick="insert('log(')">log</button>
<button class="btn" onclick="insert('pi')">π</button>
</div>
</div>
Roll No: Name:
Subject: Web Technologies 35
</body>
</html>

Output

Program 21: Write a script to check whether a number is even or odd?

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Odd & Even Checker</title>

<script>
function checkOddEven() {
let Number, Result;
Number = parseInt(document.getElementById("Number").value);

if (Number % 2 == 0) {
Result = "Even";
} else {
Result = "Odd";
}

document.getElementById("Result").innerText = "The Number is " + Result


}
</script>
</head>

<body align = "Center" style = "font-family: 'calibri';">


<h3>Odd Even Checker</h3>

<p>Enter a Number to check if it's odd or even</p>

<label for = "Number">Number</label> &emsp;


<input type = "number" step = "any" id = "Number"> <br><br>

<label id = "Result"></label> <br><br>

<button onclick = checkOddEven()>Check</button>


</body>
</html>

Roll No: Name:


Subject: Web Technologies 36

Output

Program 22: Write a program to show whether a number is prime or not?

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Prime Number Checker</title>

<script>
function checkPrime() {
let Number, Result;
Number = parseInt(document.getElementById("Number").value);

for (let i = 2; i * i <= Number; i++) {


if (Number % i == 0) {
Result = "not a Prime Number";
break;
}
Result = "a Prime Number";
}

document.getElementById("Result").innerText = "The Number is " + Result


}
</script>
</head>

<body align = "Center" style = "font-family: 'calibri';">


<h3>Prime Number Checker</h3>

<p>Enter a Number to check if Prime or Not</p>

<label for = "Number">Number</label> &emsp;


<input type = "number" step = "any" id = "Number"> <br><br>

<label id = "Result"></label> <br><br>

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


</body>
</html>

Roll No: Name:


Subject: Web Technologies 37

Output

Program 23: Write a program to show multiplication table of any number.

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Multiplication Table</title>

<style>
table, th, td {
border: 1px solid black;
padding: 10px;
border-collapse: collapse;
}
</style>
</head>

<body align = "Center" style = "font-family: 'calibri';">


<h2>Multiplication Table</h2>

<label for="num">Enter a number:</label>


<input type="number" id="num">

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


<br><br>

<table id="table" align = "Center"></table>

<script>
function generateTable() {
let num = document.getElementById("num").value;
let table = document.getElementById("table");
table.innerHTML = "";
for (let i = 1; i <= 10; i++) {
let row = table.insertRow();
let cell1 = row.insertCell();
let cell2 = row.insertCell();
cell1.innerHTML = i;
cell2.innerHTML = num + " x " + i + " = " + num * i;
}
}
</script>
</body>
</html>

Roll No: Name:


Subject: Web Technologies 38

Output

Program 24: Write a program to find the factorial of any number.

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Factorial Finder</title>

<script>
function doFactorial(Number) {
if (Number > 1) {
return Number * doFactorial(Number - 1);
} else {
return Number;
}
}

function findFactorial() {
let Number, Result;
Number = parseFloat(document.getElementById("Number").value);
Result = doFactorial(Number);

document.getElementById("Factorial").value = Result;
}
</script>
</head>

<body align = "Center" style = "font-family: 'calibri';">


<h3>Factorial Finder</h3>
<p>Enter a Number to find it's Factorial</p>
Roll No: Name:
Subject: Web Technologies 39

<label for = "Number">Number</label> &emsp;


<input id = "Number" type = "number" step = "any"> <br><br>

<label for = "Factorial">Factorial</label> &emsp;


<input id = "Factorial" type = "Number" readonly> <br><br>

<button onclick = findFactorial()>Find</button>


</body>
</html>

Output

Program 25: Write a program to show Fibonacci Series between 0 to 74.

HTML Markup & JS Script


<!DOCTYPE html>

<html>
<head>
<title>Fibonacci Generator</title>

<script>
function generateFibo() {
let t1, t2, nt, Range, Display;
Range = document.getElementById("Range").value;
t1 = 0;
t2 = 1;

document.getElementById("Display").innerHTML = t1 + "&nbsp;" + t2 +
"&nbsp;";

for (let i = 2; i <= Range; i++) {


nt = t1 + t2;
document.getElementById("Display").innerHTML += nt + "&nbsp;";

t1 = t2;
t2 = nt;
}
}
</script>
</head>

<body align = "center" style = "font-family: 'calibri';">


<h3>Fibonacci Generator</h3>
<p>Select a Range to Generate Fibonacci Series</p>

<input type = "number" value = "0" readonly> &emsp;


to &emsp;
Roll No: Name:
Subject: Web Technologies 40
<input id = "Range" type = "number"> <br><br>

<button onclick = generateFibo()>Generate</button> <br><br>

<div style = "width: 100%; word-wrap: break-word;">


<b><label id = "Display"></label></b>
</div>
</body>
</html>

Output

Roll No: Name:

You might also like