Web Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-2023

Web Technologies Lab
CSP352
B.TECH 3rd YEAR

SEMESTER: 6th
SESSION: 2022-2023
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
SHARDA UNIVERSITY, GREATER NOIDA
Name:
Roll No:
System ID:
Section: B
Submitted To Ms. Gunjan Aggarwal
Program 1 - Resume
<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>
</head>
<body>
<h1>Pratik Jadon</h1>
<nav class="main-nav">
<h2>About Me</h2>
<p>My name is Pratik Jadon. I'm an Btech student at sharda university Computer Science
Department. I was born and raised in
Bhiwadi.<p>I like to travel. I believe travelling gives you a new perspective to everything.
You get to know a lot about the
different cultures, the <p></p>cuisines, their history, the language and all the small unique
things every place has to offer.</p>
<h2>Project</h2>
<ol>
<li>Self Driving Car</li>
<p>Its an prototype model in which deep neural network is used as a self driving force
for car. It shows how can AI can be trained for driving car.</p>
<li>Sorting Visualizer</li>
<p>Sorting.Visualizer is a web app for visualizing a bunch of
different sorting algorithms Like Selection Sort, Bubble Sort, Inserti on Sort,.</p>
<p>This platform going to help juniors to make a connection with seniors so that they
can
get guided from seniors and referrals from the alumni.</p>
</ol>
<h2>Work</h2>
<ol>
<li>Data Analyst in NIC</li>
<li>Google cloud facilitor program</li>
<li>UI/UX designer at paisaking.com</li>
</ol>
<h2>contact</h2>
<ol>
<li><a href="mailto:pratikucskmpj@gmail.com?subject = Feedback&body = Message">
Contact Me
</a></li>
<li>Phone Number:7014542464</li>
</ol>
<h2>Feedback</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="-"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="-"><br><br>

<label for="fname">Feedback:</label><br>
<input type="text" id="fname" name="fname" value="-"><br>
<input type="submit" value="Submit">
</form>
</nav>
</body>
</html>
Output:
Program 2 - Time Table
<html>
<body>
<h1><center>Time Table</center></h1><br>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}
</style>
<table>
<tr>
<th>Timing</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>8:35 - 9:25 </td>
<td>Campus to Corporate (104 - B1)</td>
<td><center>PE-4</center><br>Software Project Management (312 - B1) |
Software Testing (205 - B1)</td>
<td></td>
<td>Compiler Design</td>
<td>Software Project Management</td>
</tr>
<tr>
<td>9:30 - 10:20 </td>
<td><center>PE-3</center><br>Image Processing (204 - B1) | Crypto (106 -
B1)</td>
<td><center>Compiler Design (107 - B1)</center></td>
<td><center>PE-3</center><br>Image Processing (204 - B1) | Crypto (106 -
B1)</td>
<td>ARP</td>
<td>Management for Engineers</td>
</tr>
<tr>
<td>10:25 - 11:15 </td>
<td rowspan="2"><center>Bootcamp<br>Java Bootcamp (211A - B1) | C
Bootcamp (211B - B1)</center></td>
<td rowspan="2"><center>LAB(G1 | G2)<br>TSEP (218B - B1) | PBL
(220B - B1)</center></td>
<td><center>PE-4</center><br>Software Project Management (312 - B1) |
Software Testing (205 - B1)</td>
<td></td>
<td>ARP</td>
</tr>
<tr>
<td>11:20 - 12:10 </td>
<td>Compiler Design</td>
<td>Crypto</td>
<td>Web Tech</td>
</tr>
<tr>
<td>12:15 - 1:05 </td>
<td rowspan="2"><center>LAB(G1 | G2)<br>PBL (211C - B1) | Compiler
Design (214B - B1)</center></td>
<td><center>Management for Engineers (104 - B1)</center></td>
<td rowspan="2">Compiler Design Lab</td>
<td>Web Tech</td>
<td></td>
</tr>
<tr>
<td>1:10 - 2:00 </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2:05: 2:55 </td>
<td rowspan="2"><center>LAB(G1 | G2)<br>Web Tech (211C - B1) | TSEP
(214B - B1)</center></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00 - 3:50 </td>
<td></td>
<td></td>
<td>Management for Engineers</td>
<td></td>
</tr>
</table>
</body>
</html>
Output:
Program 3 - Registration Form using HTML Forms
<html>
<head>
<title>registration form</title>
</head>
<h2 align="CENTER">Registration form</h2>
<form action="Welcome.html" method="post">

<table border="0" align="center">
<tbody>
<tr>
<td><label for="id">Id: </label></td>
<td><input id="id" maxlength="50" name="name" type="text" /></td>
</tr>
<tr>
<td><label for="name">Name: </label></td>
<td><input id="name" maxlength="50" name="name" type="text" /></td>
</tr>
<tr>
<td><label for="course">Course: </label></td>
<td>
<input id="course" maxlength="50" name="course" type="text" />
</td>
</tr>
<tr>
<td><label for="branch">Branch: </label></td>
<td>
<input id="branch" maxlength="50" name="branch" type="text" />
</td>
</tr>
<tr>
<td><label for="rolln0">Rollno: </label></td>
<td>
<input id="rollno" maxlength="50" name="rollno" type="text" />
</td>
</tr>
<tr>
<td><label for="email">Email_Address:</label></td>
<td><input id="email" maxlength="50" name="email" type="text" /></td>
</tr>
<tr>
<td><label for="username">User_Name:</label></td>
<td>
<input id="username" maxlength="50" name="username" type="text" />
</td>
</tr>
<tr>
<td><label for="aboutus">About Us:</label></td>
<td valign="middle" align="center"><textarea></textarea></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td>
<input
id="password"
maxlength="50"
name="password"
type="password"
/>
</td>
</tr>
<tr>
<td align="right">
<input name="Submit" type="Submit" value="Add" />
</td>
</tr>
</tbody>
</table>
</form>
</html>
Output:
Program 4 - HyperLink
<html>
<body>
<h1><center>Hyper Link</center></h1>
<h2>About</h2>
<p>
Hardworking, and ambitious are two words I would use to describe myself. I
keep the mindset to always grow and enhance my capabilities. I have a
balance between technical and commutative aspects. In the technical
aspect, my interests include Web Development, Andriod Development, Machine
Learning, Artificial Intelligence, Digital Creating, and Video Editing. On
the other hand, in commutative aspects, I can effectively communicate with
my peers and teammates, as well as executive presentations fluently. To
learn more about me click on the link below to visit my LinkedIn profile!
</p>
<h2>
<a href="https://www.linkedin.com/in/pratik-jadon-2380701a0/"
>LinkedIn Profile!</a
>
</h2>
</body>
</html>
Output:
Program 5 – Image Mapping
<!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>
</head>
<body>

<img src="india.jpg" usemap="#image-map" />
<map name="image-map">
<area
target=""
alt="Rajathan"
title="Rajathan"
href="https://rajasthan.gov.in/"
coords="93,330,303,495"
shape="rect"
/>
</map>
</body>
</html>
Output
Experiment No. 6 - Create Canvas, display given patterns
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Canvas experiment</title>
<style> canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
}
</style>
<script type="application/javascript">
function draw() {
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
Output –
Different Shapes –
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="application/javascript">
function draw() {
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(105, 25);
ctx.fill();
ctx.beginPath();
ctx.moveTo(125, 125);
ctx.closePath();
ctx.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
Output –

Web Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-2023

Uploaded by

Document Information

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

Web Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-2023

Uploaded by

Copyright:

Available Formats

Web Technologies Lab

B.TECH 3rd YEAR

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

SHARDA UNIVERSITY, GREATER NOIDA

Submitted To Ms. Gunjan Aggarwal

<input type="text" id="lname" name="lname" value="-"><br><br>

<h2 align="CENTER">Registration form</h2>

<form action="Welcome.html" method="post">

Program 5 – Image Mapping

You might also like