Akhil

Akhil Kandpal
00216702019
Sirifort Institute of Management Studies
Plot No.8, Institutional Area Rohini Sector−25, New Delhi
110085.
(AFFILIATED TO)
GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

SECTOR-16C,DWARKA,NEW DELHI
GENERAL PROFICIENCY
BCA-254
TOPIC- Web Technologies File
Submitted by Submitted to
Akhil Kandpal Mrs. Divya Gupta
BCA 4th SEM
(00216702019)
1
Akhil Kandpal
00216702019
S.no Content
A. HTML
Design a homepage which will display your information, that is BIO-

1.
DATA.
Design a HTML webpage for your collage website displaying

2.
information like course, department.
3. Create links on the word LAN and WIFI.
4. Design a page to make a table of education qualification
Design a marksheet and display all your marks with subject in a

5.
tabular format.
Design a webpage to list a table of content and navigate between

6.
pages.
Design a page to insert an image to create a link such that clicking on

7.
image takes user to other page.
Design a registration form for entering personal details like name,

8.
address, class, mobile no.
9. Create user feedback form (use textbox, checkbox, radio button ).
10. Create a webpage using frame, Divide the page into two parts with
navigation links on left hand side of the page (width-20%) and on left
2
Akhil Kandpal
00216702019
hand side(width-80%) content should be displayed.
Write a html code to develop a webpage having two frame that

11. divide the webpage into two equal rows and then divide the rows
into two equal columns fill each with color.
B. CSS and XML
12. Write a CSS program to make internal, external, inline CSS file.
13. Write a CSS file to apply to the html file at Sl. No.1
14. Write a CSS program to define the table properties of file Sl.no. 5
15. Write external CSS file for the file at Sl. no. 8, Validate using JS.
Write a JS program for ADDITION, DIVISION, MULTIPLICATION,
16.
SUBTRACTION function.
17. Write a JS program to sort an element of array.
Write a JS to create a class Calculator that contains an overloaded
18. method called “add” to calculate the sum of two integers, two float
numbers and one integer and one float.
19. Write a JS program to tell the input number is even or odd.
20. Write a JS program to validate Email Address.
21. Write a JS program for redirecting to a webpage.

Write a JS program on which by clicking on the image it become large
22.
and by remove the cursor it comes to its original size.
3
Akhil Kandpal
00216702019
23 Use regular Expression, for validation the above Feedback Form.

Create XML file to store information like enrollment number, mobile
24.
no.
25. Create DTD for above Xml File.
26. Create XML Schema for above (Sl. no. 18)
27. Write a JS code to Create an Image slider.
28. Write a JS code to validate Pan card details
29. Write a JS code to greet user according to the time.
4
Akhil Kandpal
00216702019
1. Design a home page which will display your

information, i.e. Bio data.
<!DOCTYPE html>
<head>
</head>
<body>
<h1>
Bio-Data
</h1>
<div>
<p> Name : Akhil</p>
<p> DOB: 14feb, 1999</p>
<p> Father's Name : Mr.Pramod</p>
<p> Mother's Name : Mrs. Rama</p>
<p> Permanent Address: BRIJ VIHAR</p>
<p> Telephone : 7889078904 </p>
<p>EDUCATIONAL QUALIFICATIONS:</p>
<table>
<thead>
<th s>S.NO</th>
<th>DETAILS</th>
<th>YEAR PASSING</th>
<th>MARKS OBTAINED</th>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>10th</td>
<td>2017</td>
<td>93%</td>
</tr>
<tr>
<td>2.</td>
<td>12th</td>
<td>2019</td>
<td>73%</td>
</tr>
<tr>
<td>3.</td>
<td>B.C.A</td>
<td>2020-PRESENT</td>
<td>-</td>
5
Akhil Kandpal
00216702019
</tr>
</tbody>
</table>
</p>
</div>

</body>
</html>
6
Akhil Kandpal
00216702019
2. Design a webpage with HTML describing your college

containing a description of the courses, departments, faculties,
library etc, (use href, list tags, styling tags).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

table {
display: inline;
}
.container{
background-color:black ;
opacity: 0.45;

}

p{
text-align: center;
/* border: 3px solid black; */
font-size: 23px;
color:white;

}
th,td{
text-align: center;
border: 3px solid black;
font-size: 23px;
}
.faculty{
display: inline-block;
/* width: 200px; */
padding: 20px;
border: 2px solid red;
}
7
Akhil Kandpal
00216702019
.infa{
color :crimson;
}
</style>
</head>
<body >
<img src="U.png" style="display:block; margin: auto;"> <h1 style="color: g
oldenrod; text-align: center; text-decoration: underline"> SIRIFORT INSTITUTE OF
MANAGEMENT STUDIES</h1>
<br>
<hr>
<div class="container1">
<h1 style="color: rgb(248, 12, 12); text-align: center;"> 22 Years of Excel
lence Affiliated to GGSIPU & Recognized by Govt. of NCT of Delhi.
Assessed as 'A Grade' Institute by Department of Higher Education Govt.
of Delhi.
</h1>
<br>
<hr>
</div>
<div class="container">
<p>SIMS believes in holistic education, which develops the overall perso
nality of students. Field Trip Case Studies/ Discussion Projects and Assignments
Seminars & Workshops
</p>
</div>
<br>
<hr>

<table style="text-align:center;">

<thead>
<th colspan="4" style="background-color: darkcyan; font-size: 28px;
">Course Offered</th>
</thead>
<thead>
<th style="background-color: coral;">S.NO</th>
<th style="background-color: coral;">COURSES</th>
<th style="background-color: coral;">DURATION</th>
<th style="background-color: coral;">Description</th>
</thead>
8
Akhil Kandpal
00216702019
<tbody>
<tr>
<td>1.</td>
<td>B.C.A</td>
<td>3</td>
<td style="background-color:crimson;color:white;border:2px solid
black; margin-left: 12px;">B.C.A is one the best technical course one can persue
and gain knowledge about the technical world. </td>

</tr>

<tr>
<td>2.</td>
<td>B.B.A</td>
<td>3</td>
black; margin-left: 12px;">B.B.A as the name suggests bachelors of business asso
ciation helps the student to understand about the business industry</td>
</tr>
<tr>
<td>3.</td>
<td>B.COM(H)</td>
<td>3</td>
black; margin-left: 12px;">B.COM(H) being a commerce oriented course makes the s
tudent eligible for various industrial commerce related demands and work for the
corporates</td>
</tr>
</tr>
</tbody>
</table>
<hr>
<br>
<div class="faculty" >
<h1>B.B.A. Faculty</h1>
<ul>
<li class="item">Mr. Chetan Singh</li>
<li class="item">Mr. Anushka Sharma</li>
<li class="item">Mr. Sharukh Khan</li>
<li class="item">MR. Aamir Khan</li>
<li class="item">Mr. Rohit Shetty</li>
</ul>
</div>
9
Akhil Kandpal
00216702019
<h1>B.B.A. Faculty</h1>
<ul>
<li class="item">Mr. Singh</li>
<li class="item">Mr. Sharma</li>
<li class="item">Mr. Khan</li>
<li class="item">MR. Khan</li>
<li class="item">Mr. Shetty</li>
</ul>
</div>
<h1>B.C.A. Faculty</h1>
<ul>
<li class="item">Mr. Divya</li>
<li class="item">Mr. Anukool</li>
<li class="item">Mr. Sonali</li>
<li class="item">MR. Minakshi</li>
<li class="item">Mr. Rajesh</li>
</ul>
</div>
<a href="hq.jpg" target="_blank">CLICK HERE TO VIEW OUR BEST FACULTIES</a>
<h1>INFRASTRUCTURE AND LIBRARY INFO</h1>
<p style="color: brown;">We here at SIMS provide a fruitful environment wh
ich helps students to stay motivated and focus on their studies. </p>
<ul>
<li class="infa" >
GOOD FACILITIES
</li>
<li class="infa">
GREAT TEACHERS
</li>
<li class="infa">
GREAT INFRASTRUCTURE
</li>
<l class="infa">
FRIENDLY environment

</ul>

</body>
</html>
10
Akhil Kandpal
00216702019
11
Akhil Kandpal
00216702019
3. Create links on the words e.g. “Wi-Fi” and

“LAN” to link them to Wikipedia pages
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" cont
ent="width=device-width, initi
al-scale=1.0">
</head>
<body>
<h1 style="text-align: cen
ter; color: chocolate;">LAN AN
D Wi-Fi</h1>
<a style="font-weight: 700
; color: darkmagenta;" href="h
12
Akhil Kandpal
00216702019
ttps://en.wikipedia.org/wiki/L
ocal_area_network" target="new
-window">CLICK HERE TO OPEN WI
KIPEDIA PAGE ABOUT LAN</a>
<p> <a style="font-weight:
700; color: crimson;" href="ht
tps://en.wikipedia.org/wiki/Wi
-Fi" target="new-window">CLICL
HERE TO OPEN WIKIPEDIA PAGE AB
OUT Wi-Fi</a></p>
</body>
</html>
13
Akhil Kandpal
00216702019
14
Akhil Kandpal
00216702019
4. Design a page to make a table of your

educational qualification.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="
width=device-width, initial-
scale=1.0">
<style>
.thead {
padding: 2px 12px;
font-size: 23px;
border: 2px solid bl
ack;
}
.tdata {
padding: 2px 12px;
15
Akhil Kandpal
00216702019
border: 2px solid bl
ack;
}
</style>
</head>
<body>
<h1 style="color: darkblue;
text-align: center;"> EDUCATIONAL Q
UALIFICATIONS</h1>

<table>
<thead>
<th s>S.NO</th>
<th>DETAILS</th>
<th>MARKS OBTAINED</t
h>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>10th</td>
<td>2017</td>
16
Akhil Kandpal
00216702019
<td>93%</td>
</tr>
<tr>
<td>2.</td>
<td>12th</td>
<td>2019</td>
<td>73%</td>
</tr>
<tr>
<td>3.</td>
<td>B.C.A</td>
<td>2020-
PRESENT</td>
<td>-</td>
</tr>
</tbody>
</table>
</body>
</html>
17
Akhil Kandpal
00216702019
18
Akhil Kandpal
00216702019
5. Design a mark sheet and display all your

marks with subjects in a tabular format as
follows:
Mark sheet
Subjects Maths SE WT CN Java
-IV
Internal
External
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="wid
th=device-width, initial-scale=1.0">
<style>
table,th,td{
border-collapse:collapse;
19
Akhil Kandpal
00216702019
padding: 12px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="6"> Marks
heet</th>
</tr>
<th>Subject</th>
<th>Maths</th>
<th>SE</th>
<th>WT</th>
<th>CN</th>
<th>Java</th>
</thead>
<tr>
<th>Internal</th>
<td>20</td>
<td>45</td>
<td>45</td>
20
Akhil Kandpal
00216702019
<td>45</td>
<td>45</td>

</tr>
<tr>
<th>External</th>
<td>20</td>
<td>45</td>
<td>45</td>
<td>45</td>
<td>45</td>

</tr>
</table>
</body>
</html>
21
Akhil Kandpal
00216702019
22
Akhil Kandpal
00216702019
6. Design a webpage to List a table of content and navigate within the pages.
<htmL>
<title>Bookmarkwithinpage
</title>
<head>
<style>
h1 {text-align: center; font-size: 50px}
p { font-size: 18px; line-height: 1.8; margin: 42px;}
div {margin: 60px 30px}
h2 {margin:42px;font-size:30px;}
table { width: 90%; margin: 35px;}
</style>
</head>
<body>
<h1>NETWORK TOPOLOGY</h1>
<h2>INTRODUCTION</h2>
<p>
Network topology refers to how various nodes, devices, and connections on you
r network are physically or logically arranged in relation to each other. Thi
nk of your network as a city, and
the topology as the road map. Just as there are many ways to arrange and mai
ntain a city—such as making sure the avenues and boulevards can facilitate pa
ssage between the parts of town
getting the most traffic—there are several ways to arrange a network.Each has
advantages and disadvantages and depending on the needs of your company, cert
ain arrangements can give you a
greater degree of connectivity and security. The layout of your network is im
portant for several reasons. Above all, it plays an essential role in how and
how well your network functions.
Choosing the right topology for your company’s operational model can increase
performance while making it easier to locate faults, troubleshoot errors, and
more effectively allocate
resources across the network to ensure optimal network health. A streamlined
and properly managed network topology can increase energy and data efficiency
, which can in turn help to
reduce operational and maintenance costs.</p>
<h1>TYPES OF NETWORK TOPOLOGY</h1>
<h2>
1) <a href="#1">BUS TOPOLOGY</a><br><br><br>
23
Akhil Kandpal
00216702019
2)<a href="#2"> STAR TOPOLOGY</a><br><br><br>
3)<a href="#3"> RING TOPOLOGY</a><br><br><br>
4)<a href="#4"> MESH TOPOLOGY</a><br><br><br>
5) <a href="#5">TREE TOPOLOGY</a><br><br><br>
6) <a href="#6">HYBRID TOPOLOGY</a><br><br><br>
</h2>
<h2><a id="1">BUS TOPOLOGY</a></h2><hr>
<p>Bus topology uses a single cable which connects all the included nodes. Th
e main cable acts as a spine for the entire network. One of the computers in
the network acts as the
computer server. When it has two endpoints, it is known as a linear bus topol
ogy.</p>
<h4>Advantages</h4>
<p>Here are pros/benefits of using a bus topology:
• Cost of the cable is very less as compared to other topology, so it is wi
dely used to build small networks.
• Famous for LAN network because they are inexpensive and easy to install.
• It is widely used when a network installation is small, simple, or tempor
ary.
• It is one of the passive topologies. So computers on the bus only listen
for data being sent, that are not responsible for moving the data from one co
mputer to others.
</p>
<h4>Disadvantages</h4>
<p>Here are the cons/drawbacks of bus topology:
• In case if the common cable fails, then the entire system will crash down
.
• When network traffic is heavy, it develops collisions in the network.
• Whenever network traffic is heavy, or nodes are too many, the performance
time of the network significantly decreases.
• Cables are always of a limited length.<p><br><br>
<h2><a id="3">Ring Topology</a></h2><hr>
<p>
In a ring network, every device has exactly two neighboring devices for commu
nication purpose. It is called a ring topology as its formation is like a rin
g. In this topology, every
24
Akhil Kandpal
00216702019
computer is connected to another computer. Here, the last node is combined w
ith a first one.
This topology uses token to pass the information from one computer to another
. In this topology, all the messages travel through a ring in the same direct
ion.<p>
<h4>Advantages<h4>
<p>Here are pros/benefits of ring topology:
• Easy to install and reconfigure.
• Adding or deleting a device in-ring topology needs you to move only two c
onnections.
• The troubleshooting process is difficult in a ring topology.
• Failure of one computer can disturb the whole network.
• Offers equal access to all the computers of the networks
• Faster error checking and acknowledgment.</p>
<p>
Here are drawbacks/cons of ring topology:
• Unidirectional traffic.
• Break in a single ring can risk the breaking of the entire network
• Modern days high-speed LANs made this topology less popular.
• In the ring, topology signals are circulating at all times, which develop
s unwanted power consumption.
• It is very difficult to troubleshoot the ring network.
• Adding or removing the computers can disturb the network activity.</p>
<br><br>
<h2><a id="2">Star Topology</a></h2><hr>
<p>
In the star topology, all the computers connect with the help of a hub. This
cable is called a central node, and all other nodes are connected using this
central node.
It is most popular on LAN networks as they are inexpensive and easy to instal
l.</p>
<h4>Advantages:</h4>
<p>
Here are pros/benefits of start topology:
• Easy to troubleshoot, set up, and modify.
• Only those nodes are affected, that has failed. Other nodes still work.
• Fast performance with few nodes and very low network traffic.
• In Star topology, addition, deletion, and moving of the devices are easy.
</p>
<h4>Disadvantages:</h4>
<p>Here are cons/drawbacks of using Star:
25
Akhil Kandpal
00216702019
• If the hub or concentrator fails, attached nodes are disabled.
• Cost of installation of star topology is costly.
• Heavy network traffic can sometimes slow the bus considerably.
• Performance depends on the hub's capacity
• A damaged cable or lack of proper termination may bring the network down.
</p>
<h2><a id="4">Mesh Topology</a></h2><hr>
<p>
The mesh topology has a unique network design in which each computer on the n
etwork connects to every other. It is develops a P2P (point-to-point) connect
ion between all the devices of
the network. It offers a high level of redundancy, so even if one network cab
le fails, still data has an alternative path to reach its destination. </p>
<h4>Advantages</h4>
<p>
Here, are pros/benefits of Mesh topology
• The network can be expanded without disrupting current users.
• Need extra capable compared with other LAN topologies.
• Complicated implementation.
• No traffic problem as nodes has dedicated links.
• It has multiple links, so if any single route is blocked, then other rout
es should be used for data communication.
• P2P links make the fault identification isolation process easy.
• It helps you to avoid the chances of network failure by connecting all th
e systems to a central node.</p>
• Installation is complex because every node is connected to every node.
• Dedicated links help you to eliminate the traffic problem.
• A mesh topology is robust.
• Every system has its privacy and security
• It is expensive due to the use of more cables. No proper utilization of s
ystems.
• It requires more space for dedicated links.
• Because of the amount of cabling and the number of input-outputs, it is e
xpensive to implement.
<h2><a id="5">Tree Topology</a></h2><hr>
<p>Tree topologies have a root node, and all other nodes are connected which
form a hierarchy. So it is also known as hierarchical topology. This topology
integrates various star
26
Akhil Kandpal
00216702019
topologies together in a single bus, so it is known as a Star Bus topology. T
ree topology is a very common network which is similar to a bus and star topo
logy.</p>
<h4>Advantages</h4>
<p>
Here are pros/benefits of tree topology:
• Failure of one node never affects the rest of the network.
• Node expansion is fast and easy.
• Detection of error is an easy process
• It is easy to manage and maintain</p>
<p>
Here are cons/drawback of tree topology:
• It is heavily cabled topology
• If more nodes are added, then its maintenance is difficult
• If the hub or concentrator fails, attached nodes are also disabled.
</p>
<h2><a id="6">Hybrid Topology</a></h2><hr>
<p>Hybrid topology combines two or more topologies. You can see in the above
architecture in such a manner that the resulting network does not exhibit one
of the standard topologies.
For example, as you can see in the above image that in an office in one depar
tment, Star and P2P topology is used. A hybrid topology is always produced wh
en two different basic network
topologies are connected.</p>
<h4>Advantages</h4>
<p>
Here, are advantages/pros using Hybrid topology:
• Offers the easiest method for error detecting and troubleshooting
• Highly effective and flexible networking topology
• It is scalable so you can increase your network size
</p>
<p>
• The design of hybrid topology is complex
• It is one of the costliest processes</p>
<h2>Bibliography</h2><hr>
<p>Data Communication And Networking By Behrouz A. Forouzan </p>
27
Akhil Kandpal
00216702019
</body>
</html>
28
Akhil Kandpal
00216702019
29
Akhil Kandpal
00216702019
7. Design a page to insert an image and create a link

such that clicking on image takes user to other page
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
30
Akhil Kandpal
00216702019
<title>Sirifort</title>
<style>
img
{
height: 200px;
width: 200px;
}
</style>

</head>
<body>
<a href="http://www.sirifort.com/">
<img src="o.jpeg" alt="">CLICK ON THE
LOGO TO LAND INTO THE SIMS</a>
</div>
</body>
</html>
31
Akhil Kandpal
00216702019
WHEN CLICKED:
32
Akhil Kandpal
00216702019
8. Design a Registration form for entering personal

details like name, address, class, mobile number etc .
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" con
tent="IE=edge">
<meta name="viewport" content="width=d
evice-width, initial-scale=1.0">
<style>
body {
padding: 10px 50px;
}
.formdesign {
font-size: 20px;
padding: 8px 20px;
}
.formdesign input {
width: 40%;
padding: 12px 20px;
border: 1px solid blue;
33
Akhil Kandpal
00216702019
border-radius: 4px;
margin: 14px 22px;
}
.FormError {
color: red;
}
.btn {
border-radius: 4px;
width: 120px;
height: 50px;
font-size: 25px;
margin: 22px 10px;
}
</style>
</head>
<body>
<h1>REGISTERATION FORM</h1>
<form action="/action.php" name="myfor
m" onsubmit="return validate_Form()">
<div class="formdesign" id="name">
Name : <input type="text" name
="fname" required> <b><span class="FormErr
or"> </span> </b>
</div>
34
Akhil Kandpal
00216702019
<div class="formdesign" id="Email"
>
Email : <input type="email" na
me="femail" required> <b><span class="Form
Error"> </span></b>
</div>
<div class="formdesign" id="Phone"
>
Phone : <input type="number" n
ame="fphone"> <b><span class="FormError">
</span></b>
</div>
<div class="formdesign" id="pass">
Password : <input type="passwo
rd" name="fpass"> <b><span class="FormErro
r"> </span></b>
</div>
<div class="formdesign" id="cpass"
>
Confirm Password : <input type
="password" name="fcpass"> <b><span class=
"FormError"> </span></b>
</div>
<input class="btn" type="submit" v
alue="Submit">
</form>
35
Akhil Kandpal
00216702019
</body>
</html>
36
Akhil Kandpal
00216702019
9. Create user feedback form (use textbox, text

area, checkbox, radio button, select box etc.)
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
</head>
<body>
<h1 style="align-items: center;
">Feedback form</h1>
<form action="">
<div>
<label for="name">Name:</
label>
<input type="text" name="
name" id="">
</div>
<br>
37
Akhil Kandpal
00216702019
<div>
<label for="number">MO
BILE NUMBER:</label>
<input type="number" n
ame="number" id="">
</div>
<br>
<div>
<label for="email">E-
mail ID:</label>
<input type="email" na
me="email" id="">
</div>
<br>
<div>
<label for="Gender">Ge
nder: </label>
<input type="radio" na
me="Gender" id=""> Male <input type="r
adio" name="Gender" id="">Female
</div>
<br>
38
Akhil Kandpal
00216702019
<div>
<label for="check">HAV
E YOU USED OUR SERIVE?</label>
<input type="checkbox"
name="check" id="">
</div>
<br>
<div>
<label for="message">M
ENTION YOUR OPINION</label>
</div>
<textarea name="message" i
d="" cols="30" rows="10"></textarea>
<br>
<div>
<input type="submit" v
alue="submit now">
<input type="reset" va
lue="Start over">
</div>
</form>
</body>
39
Akhil Kandpal
00216702019
</html>
40
Akhil Kandpal
00216702019
10. Create a webpage using frame, Divide the page into two parts with
navigation links on left hand side of the page (width-20%) and on left
hand side(width-80%) content should be displayed.
<!DOCTYPE html>
<html>
<head><title> frame </title>
</head>
<frameset cols="200,*">
<frame name ="menu_page" src="menu.html"/>
<frame name ="main_page" src="main.html"/>
<noframes>
<body>
browser not support frameset tag
</body>
</noframes>
</frameset>

<!DOCTYPE html>
<html>
<head>
<title>menu page</title>
<style type="text/css">
h1{color: white;
background:green;}
a{text-decoration: none;
color:white;}
</style>
</head>
<body bgcolor="navy">
<h1 align="center">Select</h1>
<a href="AboutUs.html"target="main_page">About</a><br>
<a href="contact.html"target="main_page">Contact</a><br>
<a href="feedback.html"target="main_page">Feedback</a><br>
<a href="profile.html"target="main_page">Profile</a><br>
</body>
</html>
41
Akhil Kandpal
00216702019

<!DOCTYPE html>
<html>
<head>
<title>main page</title>
</head>
<body>
<h1>SIRIFORT</h1>
<dl>
<dt> </dt>
<dd>
<b>DREAM THINGS </b>
</dd>
</dl>
<img src ="buildingnew.jpg" height="300" width="500" align=" middle">
</body>
</html>
42
Akhil Kandpal
00216702019
11. Write a html code to develop a webpage having two frame that
divide the webpage into two equal rows and then divide the rows into
two equal columns fill each with color.
. PART-1
<html>
<head>
<title>Frames</title>
<style>
h1 {font-size: 120px}
.container
{position: absolute; top: 50%;left: 50%;margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
</head>
<body bgcolor=blue>
<h1>3</h1></div>
</body>
</html>
PART-2
<html>
<head>
<style>
</style>
</head>
<body bgcolor=green>
<h1>2</h1>
</body>
</html>
PART-3
<html>
<head>
<style>
</style>
43
Akhil Kandpal
00216702019
</head>
<body bgcolor=red>
<h1>1</h1>
</body>
</html>
PART-4
<html>

<head>
<style>
</style>
</head>
<body bgcolor=yellow>
<h1>4</h1>
</body>
</html>
FINAL
<html>

<head>
</head>

<frameset rows="50%,50%" cols="50%,50%">
<frame name="A" src="Q11_Red.html">
<frame name="B" src="Q11_Green.html">
<frame name="C" src="Q11_Blue.html">
<frame name="D" src="Q11_Yellow.html">
</frameset>
</html>
44
Akhil Kandpal
00216702019
45
Akhil Kandpal
00216702019
46
Akhil Kandpal
00216702019
12. Write a css program to make internal, external,

inline css file.
-HTML FILE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="external.
css">
</head>
<body>
<h1>EXAMPLE OF EXTERNAL CSS</h1>
<p>STYLING OF THIS WEBPAGE IS DONE USI
NG EXTERNAL CSS</p>
</body>
</html>
47
Akhil Kandpal
00216702019
CSS FILE:
body {background-color: rgb(238,
135, 216); color: rgb(23, 20, 22
0);}
h1 {background-color: rg
b(71, 226, 131);}
p { font-size: xx-large;
font-family: Impact, Haettenschw
eiler, 'Arial Narrow Bold', sans
-serif;}
48
Akhil Kandpal
00216702019
2ND: USING INTERNAL CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {background-color: rg
b(238, 135, 216); color: rgb(23, 20, 2
20);}
h1 {background-color: rgb(71,
226, 131);}
p { font-size: xx-large; font-
family: Impact, Haettenschweiler, 'Ari
al Narrow Bold', sans-serif;}
49
Akhil Kandpal
00216702019
</style>
content="IE=edge">
</head>
<body>
<h1>EXAMPLE OF INTERNAL AND INLINE
CSS</h1>
<p>THIS LINE IS DESIGNED USING INT
ERNAL CSS </p>
<p style="color:red; font-size: xx
-large; font-family: Impact, Haettensc
hweiler, 'Arial Narrow Bold', sans-
serif;">STYLING USED IN THIS LINE IS B
Y INLINE CSS</p>
</body>
</;html>
50
Akhil Kandpal
00216702019
51
Akhil Kandpal
00216702019
13. Write a css program to apply to the html file at

Sl. No.1.
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<style>
body{
background-color: khaki;
}
p{
font-style: italic;
text-decoration: underlin
e;
}
table,td,th{
padding: 12px;
}
52
Akhil Kandpal
00216702019
</style>
</head>
<body>
<h1>
Bio-Data
</h1>
<div>
<p> Name : Akhil</
p>
<p> DOB: 14feb, 1999</p>
<p> Father's Name : Mr.P
ramod</p>
<p> Mother's Name : Mrs.
Rama</p>
<p> Permanent Address: A
pke dil main</p>
<p> Telephone : 78890789
04 </p>
<p>EDUCATIONAL QUALIFICATIONS:
</p>
<table>
<thead>
<th s>S.NO</th>
<th>DETAILS</th>
53
Akhil Kandpal
00216702019
<th>MARKS OBTAINED</th>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>10th</td>
<td>2017</td>
<td>93%</td>
</tr>
<tr>
<td>2.</td>
<td>12th</td>
<td>2019</td>
<td>73%</td>
</tr>
<tr>
<td>3.</td>
<td>B.C.A</td>
<td>2020-PRESENT</td>
<td>-</td>
</tr>
</tbody>
</table>
</p>
</div>
54
Akhil Kandpal
00216702019

</body>
</html>
55
Akhil Kandpal
00216702019
14. Write a css program to define the table

properties of file at Sl. No. 5.
h, td {
border:2px solid yellow ;
padding: 40px; color :Black;
font-size:30px;
text-align:center;
}
table {
border-spacing:3px;
width: 80%;
background-color: 66ead9;
}
56
Akhil Kandpal
00216702019
57
Akhil Kandpal
00216702019
15. Write an external css file for the file at Sl. No. 8,
validate its field by using JavaScript
. <!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<style>
body {
padding: 10px 50px;
}
.formdesign {
font-size: 20px;
padding: 8px 20px;
}
.formdesign input {
width: 40%;
58
Akhil Kandpal
00216702019
padding: 12px 20px;
border: 1px solid blue;
border-radius: 4px;
margin: 14px 22px;
}
.FormError {
color: red;
}
.btn {
border-radius: 4px;
width: 120px;
height: 50px;
font-size: 25px;
margin: 22px 10px;
}
</style>
</head>
<body>
<h1>Welcome to best form on Intern
et </h1>
59
Akhil Kandpal
00216702019
<form action="/action.php" name="m
yform" onsubmit="return validate_Form(
)">
<div class="formdesign" id="na
me">
Name : <input type="text"
name="fname" required> <b><span class=
"FormError"> </span> </b>
</div>
<div class="formdesign" id="Em
ail">
Email : <input type="email
" name="femail" required> <b><span cla
ss="FormError"> </span></b>
</div>
<div class="formdesign" id="Ph
one">
Phone : <input type="numbe
r" name="fphone"> <b><span class="Form
Error"> </span></b>
</div>
<div class="formdesign" id="pa
ss">
60
Akhil Kandpal
00216702019
Password : <input type="pa
ssword" name="fpass"> <b><span class="
FormError"> </span></b>
</div>
<div class="formdesign" id="cp
ass">
Confirm Password : <input
type="password" name="fcpass"> <b><spa
n class="FormError"> </span></b>
</div>
<input class="btn" type="submi
t" value="Submit">
</form>
<script>
function clearerror() {
let errors = document.getE
lementsByClassName('FormError');
for (let index = 0; index
< errors.length; index++) {
const element = errors
[index];
element.innerHTML = ""
;
61
Akhil Kandpal
00216702019
}
}
function seterror(id, error) {
// set errors inside tag o
f id
element = document.getElem
entById(id);
element.getElementsByClass
Name('FormError')[0].innerHTML = erro
r;
}
function validate_Form() {
clearerror();
let lower = /[a-z]/g;
let upper = /[A-Z]/g;
let numbers = /[0-9]/g;
let illegalChars = /
[\W_]/;
let returnval = true;
var name = document.forms[
'myform']["fname"].value;
console.log(name);
62
Akhil Kandpal
00216702019
if (name.length < 4) {
seterror("name", "*len
gth of name is too short");
returnval = false;
}
var email = document.forms
['myform']["femail"].value;
console.log(email);
if (email.length > 35) {
seterror("Email", "*Th
e length of email is too long")
returnval = false;
}
if ((email.lastIndexOf("."
) - email.indexOf("@")) < 3) {
console.log(email.inde
xOf("@"));
console.log(email.last
IndexOf("."));
seterror("Email", "*Wr
ong dot position")
returnval = false;
}
63
Akhil Kandpal
00216702019
if (email.length - email.l
astIndexOf(".") <= 2 || email.length -
email.lastIndexOf(".") > 4) {
seterror("Email", "*Wr
ong dot placement");
returnval = false;
}
var phone = document.myfor
m.fphone.value;
if (phone.length != 10) {
seterror("Phone", "*Th
e number is wrong");
returnval = false;
}
var pass = document.myform
.fpass.value;
console.log(pass);
if (pass.length < 6) {
seterror("pass", "*The
password is too short");
returnval = false;
}
64
Akhil Kandpal
00216702019
if (pass.search(lower) ==
-1) {
password must contain an lowercase let
ter.")
returnval = false;
}
if (pass.search(upper) ==
-1) {
password must contain an uppercase let
ter.")
returnval = false;
}
if (pass.search(numbers) =
= -1) {
password must contain a number.")
returnval = false;
}
if (pass.search(illegalCha
rs) == -1) {
password must contain a special charac
ter.")
65
Akhil Kandpal
00216702019
returnval = false;
}
var cpass = document.myfor
m.fcpass.value;
if (cpass != pass) {
seterror("cpass", "The
password doesn't match.");
returnval = false;
}
return returnval;
}
</script>
</body>
</html>
66
Akhil Kandpal
00216702019
ENTERING WRONG DETAILS:

67
Akhil Kandpal
00216702019
68
Akhil Kandpal
00216702019
16. Write a Javascript program for addition,

subtraction, multiplication, division function.
<html>
<head>
<title>ADDITION SUBTRACTION MULTIP
LICATION DIVISION</title>
</head>
<body>
<form>
1st Number : <input type="text"
id="firstNumber" /><br />
2nd Number: <input type="text" i
d="secondNumber" /><br />
<input type="button" onClick="ad
d()" value="add" />
<input type="button" onClick="su
btraction()" value="subtraction" />
<input type="button" onClick="mu
ltiply()" value="Multiply" />
<input type="button" onClick="di
vide()" value="Divide" />
</form>
<p>
The Result is : <br />
69
Akhil Kandpal
00216702019
<span id="result"></span>
</p>
<script>
function add() {
num1 = Number(document.getElem
entById("firstNumber").value);
num2 = Number(document.getElem
entById("secondNumber").value);
// here by default typeof num2
and num2 is string and + operator is u
sed for both addition
// and concatenation. if one o
f the types is returned as a string it
will do concatenation.
// so just parse the value to
number using Number().
document.getElementById("resul
t").innerHTML = num1 + num2;
}
function subtraction() {
num1 = document.getElementById
("firstNumber").value;
("secondNumber").value;
70
Akhil Kandpal
00216702019
t").innerHTML = num1 - num2;
}
function multiply() {
t").innerHTML = num1 * num2;
}
function divide() {
t").innerHTML = num1 / num2;
}
</script>
</body>
</html>
71
Akhil Kandpal
00216702019
ADD
SUBTRACT
72
Akhil Kandpal
00216702019
MULTIPLY
DIVIDE
73
Akhil Kandpal
00216702019
17. Write a JavaScript program to sort elements in a

given array.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to sort the array
in ascending order.</p>
<button onclick="myFunction()">sort</b
utton>
<p id="demo"></p>
<script>
var points = [10, 9, 8, 7, 6, 5, 4, 3,
2, 1];
document.getElementById("demo").innerH
TML = points;
function myFunction() {
points.sort(function(a, b){return a-
b});
74
Akhil Kandpal
00216702019
document.getElementById("demo").inne
rHTML = points;
}
</script>
</body>
</html>
75
Akhil Kandpal
00216702019
18. Write a JavaScript to create a class calculator

that contains an overloaded method called "add" to
calculate the sum of two integers, two float
numbers and, one integer and one float.
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
</head>
<body>
<SCript>
class calculator{
static add(){
var x= Number(prompt("
enter first number"));
var y= Number(prompt("
enter second number"));
document.getElementByI
d("sum").innerHTML = "sum = "+(x+y)
76
Akhil Kandpal
00216702019
}
}
</SCript>
<hr>
<h2>calculator</h2>
<hr>
<button type="button" onclick="cal
culator.add()"> add 2 integer</button>
<br><br>
culator.add()"> add 2 float</button><b
r><br>
culator.add()"> add 1 integer 1 float<
/button><br><br>
<h2 id="sum"></h2>
</body>
</html>
77
Akhil Kandpal
00216702019
2 integer:
2 float:
78
Akhil Kandpal
00216702019
1 integer 1 float:
79
Akhil Kandpal
00216702019
19. Write a JavaScript which takes Integer number

as input and tells whether the number is ODD or
EVEN.
<html>
<head>
<script>
function check(){
var no;
no=Number(document.getElementById("no_
input").value);
if(no%2==0)
{
alert("Even Number");
}
else
{
alert("Odd Number");
}
}
</script>
</head>
<body>
Enter Any Number:<input id="no_input">
<br />
80
Akhil Kandpal
00216702019
<button onclick="check()">Check here</
button>
</body>
</html>
81
Akhil Kandpal
00216702019
20. Write a Javascript program to validate an email

address.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Email Validation</title>
</head>
<body onload="document.form1.text1.f
ocus()">
<div class="mail">
<h2>enter email address</h2>
<form name="form1" action="#">
<ul>
82
Akhil Kandpal
00216702019
<li><input type="text" name=
"text1" /></li>
<li> </li>
<li class="validate">
<input
type="submit"
name="validate"
value="Validate"
onclick="ValidateEmail(d
ocument.form1.text1)"
/>
</li>
<li> </li>
</ul>
83
Akhil Kandpal
00216702019
</form>
</div>
<script>
function ValidateEmail(input)
{
var validRegex = /^[a-zA-Z0-9.!#$
%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.
[a-zA-Z0-9-]+)*$/;
if (input.value.match(validRegex)) {
alert("Valid email address!");
document.form1.text1.focus();
return true;
} else {
alert("Invalid email address!");
84
Akhil Kandpal
00216702019
document.form1.text1.focus();
return false;
}
</script>
</body>
</html>
85
Akhil Kandpal
00216702019
86
Akhil Kandpal
00216702019
21. Write a Javascript program for redirecting a web

page.
<!DOCTYPE html>
<html>
<body>
<p>CLICK THE BELOW BUTTON TO GET REDIR
ECTED</p>
<button onclick="redirect()">REDIRECT<
/button>
<script>
function redirect() {
location.replace("https://www.sirifo
rt.com")
}
</script>
</body>
</html>
87
Akhil Kandpal
00216702019
When clicked on redirect:
88
Akhil Kandpal
00216702019
22. Write a Javascript program which on by clicking

image become large and by removing the mouse
the image comes in its original size.
<html>
<body>
<img onmouseover="big(this)" onmouseou
t="normal(this)" border="0" src="o.jpe
g">
<p>WHEN POINTER OF THE MOUSE IS OVER T
HE IMAGE IT ENLARGES</p>
<script>
function big(x) {
x.style.height = "640px";
x.style.width = "640px";
}
function normal(x) {
x.style.height = "320px";
x.style.width = "320px";
}
</script>
89
Akhil Kandpal
00216702019
</body>
</html>
When clicked on image:
Normal
90
Akhil Kandpal
00216702019
23. Use regexpression for validation of above

feedback form
<html>
<title> FEEDBACK FORM </title>
<body>
<Form name = "myform" onsubmit="return validateForm()">
<H1><B><font color ="blue" >NORTHERN RAILWAYS</font></B></H1>

</img></a><br>
<font color ="Maroon " > <b><h3>Name :</b><INPUT id="Name" TYPE="text" S
IZE="40" MAXLENGTH="30" NAME="name"><br><br>
<b>Email : </b><input id="Email" type="email" multiple SIZE="40"email="email"
></h3><hr>
<font color ="Black " >
<h3>Rate :</h3>
<b>Quality <br><INPUT TYPE="radio" NAME=" Quality" VALUE="Excelent">Excelent
<INPUT TYPE="radio" NAME="Quality" VALUE="Good">Good
<INPUT TYPE="radio" NAME="Quality" VALUE="Average">Average
<INPUT TYPE="radio" NAME="Quality" VALUE="Dissatisfied">Dissatisfied<BR><BR
>
Taste of Food<br><INPUT TYPE="radio" NAME="Taste of Food" VALUE="Excelent">E
xcelent
<INPUT TYPE="radio" NAME="Taste of Food" VALUE="Good">Good
<INPUT TYPE="radio" NAME="Taste of Food" VALUE="Average">Average
<INPUT TYPE="radio" NAME="Taste of Food" VALUE="Dissatisfied">Dissatisfied<
BR><BR>
Service<br><INPUT TYPE="radio" NAME="Service" VALUE="Excelent">Excelent
<INPUT TYPE="radio" NAME="Service" VALUE="Good">Good
<INPUT TYPE="radio" NAME="Service" VALUE="Average">Average
<INPUT TYPE="radio" NAME="Service" VALUE="Dissatisfied">Dissatisfied<BR><BR
>
Price<br><INPUT TYPE="radio" NAME="Price" VALUE="Excelent">Excelent
<INPUT TYPE="radio" NAME="Price" VALUE="Good">Good
<INPUT TYPE="radio" NAME="Price" VALUE="Average">Average
<INPUT TYPE="radio" NAME="Price" VALUE="Dissatisfied">Dissatisfied<BR> </b>
<h3>FEEDBACK TYPE :</h3>
91
Akhil Kandpal
00216702019
<INPUT TYPE="radio" NAME="TYPE" VALUE="Comment">Comment<INPUT TYPE="
radio" NAME="TYPE" VALUE="Suggetion">Suggetion <INPUT TYPE="radio" NAME="TYPE" V
ALUE="Question">Question<BR>
Describe your feedback :<br><TEXTAREA NAME="About" COLS="50" ROWS="5"></TEX
TAREA><br><hr>
<h3>Your Feedback is important for us ...<br>
Thank You For your Precious time.</h3></h3></font>
<button>Submit</button>
</Form>
<script>
function validateForm(){
let returnval= true;
let name = document.getElementById("Name").value;
if(name.length<4){
alert("Your name length is too short");
returnval = false;
}
let email = document.getElementById("Email").value;
if(email.length<10){
alert("Email length is too short");
returnval = false;
}
if(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]
+)*$/.match(email)){
returnval= true;
}
else{
alert("invalid email");
returnval =false;
}
return returnval;
}
</script>
</body>
</html>
92
Akhil Kandpal
00216702019
93
Akhil Kandpal
00216702019
24 Create XML file to store student information like

Enrollment Number, Name , Mobile Number , Email
Id
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type='text/xsl' hre
f='cgpa.xsl'?>
<class>
<student>
<name> Akhil</name>
<enrollment_no> 00216702019 </enrollme
nt_no>
<mobile> 7033227712 </mobile>
<email> akhilkandpal@gmail.com </email
>
<cgpa> 9 </cgpa>
</student>
</class>
94
Akhil Kandpal
00216702019
95
Akhil Kandpal
00216702019
25. <?xml encoding="UTF-8"?>
<!ELEMENT Studentlist (Student1,Student2,Student3)>
<!ATTLIST Studentlist
xmlns CDATA #FIXED ''>
<!ELEMENT Student1 (name,Enrollement,mobile,email)>
<!ATTLIST Student1
<!ATTLIST Student2
<!ATTLIST Student3
<!ELEMENT name (#PCDATA)>
<!ATTLIST name
<!ELEMENT Enrollement (#PCDATA)>
<!ATTLIST Enrollement
<!ELEMENT mobile (#PCDATA)>
<!ATTLIST mobile
<!ELEMENT email (#PCDATA)>
<!ATTLIST email
96
Akhil Kandpal
00216702019
26. <?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
elementFormDefault="qualified">
<xs:element name="Studentlist">
<xs:complexType mixed="true">
<xs:choice minOccurs="0"
maxOccurs="unbounded">
<xs:element ref="Student1"/>
</xs:choice>
</xs:complexType>
</xs:element>
<xs:element name="Student1">
<xs:complexType>
<xs:sequence>
<xs:element ref="name"/>
<xs:element ref="Enrolment"/>
<xs:element ref="mobile"/>
<xs:element ref="email"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:complexType>
<xs:sequence>
<xs:element ref="Enrollement"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:complexType>
<xs:sequence>
<xs:element ref="Enrollement"/>
97
Akhil Kandpal
00216702019
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="name"
type="xs:NCName"/>
<xs:element name="Enrollement"
type="xs:integer"/>
<xs:element name="mobile"
type="xs:integer"/>
<xs:element name="email"
type="xs:string"/>
</xs:schema>
98
Akhil Kandpal
00216702019
OUTPUT:
99
Akhil Kandpal
00216702019
27. <!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container">
<img class="mySlides" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-
1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclic
k="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
100
Akhil Kandpal
00216702019
</body>
</html>
28. <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.PAN
{
text-transform: uppercase;
}
.error
{
color: Red;
visibility: hidden;
}
101
Akhil Kandpal
00216702019
</style>
</head>
<body>
PAN Card:
<input name="txtPANCard" type="text" id="txtPANCard" class="PAN" />
<span id="lblPANCard" class="error">Invalid PAN Number</span>
<hr />
<input type="button" id="btnSubmit" value="Submit" onclick="ValidatePAN()" />
<script type="text/javascript">
function ValidatePAN() {
var txtPANCard = document.getElementById("txtPANCard");
var lblPANCard = document.getElementById("lblPANCard")
var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;
if (regex.test(txtPANCard.value.toUpperCase())) {
lblPANCard.style.visibility = "hidden";
return true;
} else {
lblPANCard.style.visibility = "visible";
return false;
}
}
</script>
</body>
</html>
102
Akhil Kandpal
00216702019
29. <html>

<body>
<script>
var welcome;
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
if (hour < 12) {
welcome = "good morning";
} else if (hour < 17) {
103
Akhil Kandpal
00216702019
welcome = "good afternoon";
} else {
welcome = "good evening";
}
document.write("<h2>" + "<font color='red'>" + welcome + "</font>" + " welco
me to our website");
document.write("<br>" +"The date is "+"<br>"+ date +"-"+"<br>"+ hour + ":" +
minute + ":" + second);
</script>
</body>

</html>
104

Akhil

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Akhil

Uploaded by

Copyright:

Available Formats

Akhil Kandpal

GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

Design a homepage which will display your information, that is BIO-

Design a HTML webpage for your collage website displaying

3. Create links on the word LAN and WIFI.

4. Design a page to make a table of education qualification

Design a marksheet and display all your marks with subject in a

Design a webpage to list a table of content and navigate between

Design a page to insert an image to create a link such that clicking on

Design a registration form for entering personal details like name,

9. Create user feedback form (use textbox, checkbox, radio button ).

hand side(width-80%) content should be displayed.

Write a html code to develop a webpage having two frame that

B. CSS and XML

20. Write a JS program to validate Email Address.

21. Write a JS program for redirecting to a webpage.

23 Use regular Expression, for validation the above Feedback Form.

26. Create XML Schema for above (Sl. no. 18)

27. Write a JS code to Create an Image slider.

28. Write a JS code to validate Pan card details

29. Write a JS code to greet user according to the time.

1. Design a home page which will display your

2. Design a webpage with HTML describing your college

3. Create links on the words e.g. “Wi-Fi” and

4. Design a page to make a table of your

5. Design a mark sheet and display all your

7. Design a page to insert an image and create a link

8. Design a Registration form for entering personal

9. Create user feedback form (use textbox, text

12. Write a css program to make internal, external,

2ND: USING INTERNAL CSS:

13. Write a css program to apply to the html file at

14. Write a css program to define the table

ENTERING WRONG DETAILS:

16. Write a Javascript program for addition,

17. Write a JavaScript program to sort elements in a

18. Write a JavaScript to create a class calculator

19. Write a JavaScript which takes Integer number

20. Write a Javascript program to validate an email

21. Write a Javascript program for redirecting a web

When clicked on redirect:

22. Write a Javascript program which on by clicking

23. Use regexpression for validation of above

24 Create XML file to store student information like

You might also like