Scribd
Upload
8 views

Web Programming Final Submission

Uploaded by

seshanesai
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Web Programming Final Submission

Uploaded by

seshanesai
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

SIES College of Arts, Science and Commerce (Autonomous)

Sion (W), Mumbai – 400 022.

Department of Computer Science

CERTIFICATE

This is to certify that Mr./Ms. Esai Seshan S Thanga Perumal of FYBSc [Computer Science],

Semester I , Seat No FCS2425025 has successfully completed the practicals and submitted

it online in Microsoft Teams for the subject of Web Programming as a partial fulfilment of

the degree BSc(CS) during the academic year 2024-2025.

________________ _______________
Faculty-in-charge Internal Examiner
Rajesh Yadav Rajesh Yadav

Date: College Seal


Sr.No Index Page No
1 1.A. Design a webpage which 2
displays data in a table.

1.B. Design a registration form web


page

2 2.A. Design a webpage that


contains 3 hyperlinks (audio, video
and gif)

2.B. Design a webpage to display 5


the map of India. Create a clickable
region using image map on same
image so that when we click on
Maharashtra it opens another tab
with information about
Maharashtra. Create 2 more
clickable regions for states of your
choice

3 3.Design a webpage and apply css 8


properties like background-color,
background-image, position, font
size, font-color, etc.

4 4.A. Create a webpage which takes


a number from the user through
the input box. On click of button it
should display the factorial of that
number.

4.B. Create a webpage which


takes a number from the user 12
through the input box. On click of
button it should display the
Fibonacci series of that length.

4.C. Create a webpage which takes


series length from the user through
the input box. On click of button it
should display the reverse of that
number

5 5.A. Write a Javascript program


which contains a dropdown list
with 3 images names as items. On
click of Image from dropdown, the
background Image should change
to that Image. 13

5.B. Write a javascript program


which contains a color picker. On
selection of color from color picker,
background-color should change to
that color.

6 6. Write a Javascript program to


take firstname, lastname,
contactno, age and address for
registration. Validate all fields
using Regular Expression (Reg Exp
Object) such that I. Firstname 15
should contain only characters II.
Lastname should contain only
characters III. Age should contain
only number IV. Contact no should
contain only number V. Address

1
should not contain $ sign

7 Write a javascript program which


conatins the following buttons: I.
Browser window size (height and 16
width) II. Current page details
(hostname and protocol) III.
Browser details like (appversion,
appname and language)

1.A. Design a webpage which displays data in a table.

Code with input and output

2
1.B. Design a registration form web page

Code with input and output

3
4
5
2.A. Design a webpage that contains 3 hyperlinks (audio, video
and gif)

Code with input and output

-----------------------------------------------------------------------------------------
Video

-----------------------------------------------------------------------------------------Audio

-----------------------------------------------------------------------------------------

Gif

-----------------------------------------------------------------------------------------

6
2.B. Design a webpage to display the map of India. Create a
clickable region using image map on same image so that when we
click on Maharashtra it opens another tab with information about
Maharashtra. Create 2 more clickable regions for states of your
choice
Code with input and output

7
Maharashtra Output and Input code

-----------------------------------------------------------------------------------------
Tamil Nadu Output and Input code

8
-----------------------------------------------------------------------------------------
Ladakh Output and Input code

-----------------------------------------------------------------------------------------

3.Design a webpage and apply css properties like background-


color, background-image, position, fontsize, font-color, etc.
-Input code-
<!doctype html>

<html>

<head><title>Sign up</title></head>

<style>

body{background-color: #c3c6c6;}

.container{

height: 450px;

width: 650px;

margin-top: 150px;

9
margin-left: 400px;

background-color:#868f8f;

.image{

height: 450px;

width: 300px;

float: left;

background-color: white;

.image a{

font-size: 15px;

padding-left: 40px;

.login-box{

height: 450px;

width: 350px;

float: right;

background-color: white;

.image img{

height: auto;

width: 250px;

padding-left: 25px;

padding-top: 30px;

.login-box h2{

padding-top: 30px;

.username img{

padding-top: 30px;

padding-left: 15px;

height: auto;

width: 15px;

10
.username input{

margin-left: 15px;

.password img{

padding-top: 15px;

padding-left: 15px;

height: auto;

width: 15px;

.password input{

margin-left: 25px;

.remember-me{

padding-top: 15px;

padding-left: 15px;

.login button{

background-color: #82cfff;

font-size: 17px;

margin-top: 20px;

margin-left: 15px;

.socials{

font-size: 15px;

padding-top: 100px;

.socials img{

padding-left: 10px;

height: auto;

width: 20px;

</style>

<body>

<div class="container">

11
<div class="image">

<img src="person.jpeg" alt="Person with Laptop">

<a href="#">Create an account</a>

</div>

<div class="login-box">

<form>

<h2>Sign Up</h2>

<div class="username">

<img src="user.jpeg" alt="User">

<i>User Name</i>

<input type="text">

</div>

<div class="password">

<img src="passwordlogo.jpeg" alt="Password">

<i>Password</i>

<input type="password">

</div>

<div class="remember-me">

<input type="checkbox" id="rm">

<label for="rm"><i>Remember Me</i></label>

</div>

<div class="login">

<button type="submit">Log In</button>

</div>

</form>

<div class="socials">

Or login with

<a href="https://www.facebook.com/" alt="Facebook"><img src="facebooklogo.jpeg" alt="facebook


icon"></a>

<a href="https://www.twitter.com/" alt="Twitter"><img src="twitterlogo.jpeg" alt="twitter icon"></a>

<a href="https://www.google.com/" alt="Google"><img src="googlelogo.jpeg" alt="google icon"></a>

</div>

</div>

</div>

12
</body>

</html>

-Output-

4.A. Create a webpage which takes a number from the user


through the input box. On 0click of button it should display the
factorial of that number

----------------------------------------------------------------------------------------------------------------

13
4.B. Create a webpage which takes a number from the user
through the input box. Onclick of button it should display the
Fibonacci series of that length

----------------------------------------------------------------------------------------------------------------
4.C. Create a webpage which takes series length from the user
through the input box. On click of button it should display the
reverse of that number

-----------------------------------------------------------------------------------------

5.A. Write a javascript program which contains a dropdown list


with 3 images names as items. Onclick of Image from dropdown,
the background Image should change to that Image.

14
15
-----------------------------------------------------------------------------------------

5.B. Write a javascript program which contains a color picker. On


selection of color from color picker, background-color should
change to that color

16
6. Write a javascript program to take firstname, lastname,
contactno, age and address for registration. Validate all fields
using Regular Expression (RegExp Object) such that I. Firstname
should contain only characters II. Lastname should contain only
characters III. Age should contain only number IV. Contactno
should contain only number V. Address should not contain $ sign
Code with input and output

17
7] Write a javascript program which conatins the following
buttons: I. Browser window size (height and width) II. Current
page details (hostname and protocol) III. Browser details like
(appversion, appname and language)

18
19

You might also like