191B129 Aplab

JAYPEE UNIVERSITY OF ENGINEERING & TECHNOLOGY, GUNA
DEPARTMENT OF Computer science & engineering
A PRACTICAL WORK BOOK

of
Advanced Programming Lab-3
(18B17CI673)
SUBMITTED
TO
DR. Ravindra Kumar Singh
Name of student – Isha Jain ENRL NO. - 191b129
Year – 3 Batch – B4
BRANCH – cse Semester- 6
I hereby declare that the contents of this practical book are my own work. These are not taken from any other
sources.
(Signature of Student)
Lab-1
<!DOCTYPE html>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; 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>
<link rel="stylesheet" href="./Document_files/style.css">
</head>
<body>
<header>
<u><h3>Resume</h3></u>
</header>
<main>
<div class="details">
<h5>Isha Jain</h5>
<p>827, shahi naka garha ,Jabalpur</p>
<div class="details2">
<span><i>Mobile no </i>6265666798</span><br>
<b><i>Email: </i></b>newidhiteshgurnani@gmail.com
</div>
</div>
<hr>
<div class="education">
<h2><u>Educational Qualifications:</u></h2>
<br><br><table>
<tbody><tr><th style="border: 1px solid black; ">Qualifications</th>
<th style="border: 1px solid black;">Institute</th>
<th style="border: 1px solid black;">University</th>
<th style="border: 1px solid black;">Marks</th>
<th style="border: 1px solid black;">Year of passing</th>
</tr><tr>
<td>10th</td>
<td>Joy Senior Secondary School</td>
<td>-</td>
<td>9 cgpa</td>
<td>2017</td>
</tr>
<tr>
<td>12th</td>
<td>Smita Children Acadmy SSS</td>
<td>-</td>
<td>73.5%</td>
<td>2019</td>
</tr>
<tr>
<td>B.Tech</td>
<td>Jaypee University of engineering and technology</td>
<td>-</td>
<td>8.2 cgpa</td>
<td>2023</td>
</tr>
</tbody></table>
</div>
<div class="skills">
<h2><u>Skill set:</u></h2>
<p><span style="font-size: 20px;"><b>Data structure and algorithm</b></span></p>
<p><span style="font-size: 20px;"><b>Python</b></span></p>
<p><span style="font-size: 20px;"><b>Database management system</b></span></p>
<p><span style="font-size: 20px;"><b>C++s</b></span></p>
<p><span style="font-size: 20px;"><b>Flutter</b></span></p>
</div>
</main>
<footer></footer>
</body></html>
Lab-2
• Prob-1:
<!DOCTYPE html>
<html>
<head>
<title> Learn about States of India </title>
</head>
<body>

<img src="swmap.jpg" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="J&K" title="J&K"

href="https://en.wikipedia.org/wiki/Jammu_and_Kashmir_(union_territory)"
coords="140,102,126,81,137,55,117,32,147,26,186,59,230,55,215,74,205,99,194,95,167,90,157,94" shape="poly">
<area target="_blank" alt="Rajasthan" title="Rajasthan"

href="https://hi.wikipedia.org/wiki/%E0%A4%B0%E0%A4%BE%E0%A4%9C%E0%A4%B8%E0%A5%8D%E0%A4%A5%E0%A
4%BE%E0%A4%A8#:~:text=%E0%A4%B0%E0%A4%BE%E0%A4%9C%E0%A4%B8%E0%A5%8D%E0%A4%A5%E0%A4%B
E%E0%A4%A8%20%E0%A4%AD%E0%A4%BE%E0%A4%B0%E0%A4%A4%20%E0%A4%97%E0%A4%A3%E0%A4%B0%E
0%A4%BE%E0%A4%9C%E0%A5%8D%E0%A4%AF%20%E0%A4%95%E0%A4%BE%20%E0%A4%95%E0%A5%8D%E0%A
4%B7%E0%A5%87%E0%A4%A4%E0%A5%8D%E0%A4%B0%E0%A4%AB%E0%A4%B2,%E0%A4%AA%E0%A4%BE%E0%
A4%95%E0%A4%BF%E0%A4%B8%E0%A5%8D%E0%A4%A4%E0%A4%BE%E0%A4%A8%20%E0%A4%95%E0%A5%87%
20%E0%A4%B8%E0%A4%BE%E0%A4%A5%20%E0%A4%B2%E0%A4%97%E0%A4%A4%E0%A5%80%20%E0%A4%B9%E
0%A5%88%E0%A5%A4&text=%E0%A4%87%E0%A4%B8%E0%A4%95%E0%A5%87%20%E0%A4%A6%E0%A4%95%E
0%A5%8D%E0%A4%B7%E0%A4%BF%E0%A4%A3%2D%E0%A4%AA%E0%A4%B6%E0%A5%8D%E0%A4%9A%E0%A4%
BF%E0%A4%AE%20%E0%A4%AE%E0%A5%87%E0%A4%82%20%E0%A4%97%E0%A5%81%E0%A4%9C%E0%A4%B0%E
0%A4%BE%E0%A4%A4,(132139%20%E0%A4%B5%E0%A4%B0%E0%A5%8D%E0%A4%97%20%E0%A4%AE%E0%A5%80
%E0%A4%B2)%20%E0%A4%B9%E0%A5%88%E0%A5%A4"
coords="116,171,137,186,158,210,177,230,157,259,142,259,123,277,113,286,99,274,85,265,68,267,65,255,58,242,51,227,56,213,78,
213,97,194" shape="poly">
<area target="_blank" alt="Punjab" title="Punjab" href="https://en.wikipedia.org/wiki/Punjab, India"

coords="149,120,138,130,136,142,122,152,134,160,146,165,156,165,166,159,169,147" shape="poly">
<area target="_blank" alt="Kerala" title="Kerala" href="https://en.wikipedia.org/wiki/Kerala"
coords="131,531,171,618,173,593,162,561,148,545" shape="poly">
<area target="_blank" alt="Madhya Pradesh" title="Madhya Pradesh" href="https://en.wikipedia.org/wiki/Madhya Pradesh"

coords="200,277,216,272,230,274,248,275,274,284,254,296,260,315,246,333,126,329,144,299,171,290,180,274,188,264,177,256,188
,249,198,243" shape="poly">
<area target="_blank" alt="UP" title="UP" href="https://en.wikipedia.org/wiki/Uttar Pradesh"

coords="185,165,177,186,189,214,205,218,210,228,221,241,221,248,230,248,237,253,246,254,261,260,272,261,292,276,295,259,301
,253,304,237,301,220,274,217,228,196,193,177" shape="poly">
<area target="_blank" alt="Maharashtra" title="Maharashtra" href="https://en.wikipedia.org/wiki/Maharashtra"

coords="93,376,106,449,127,432,179,399,198,371,241,381,238,351,215,347,186,352,155,359,126,346,118,358" shape="poly">
<area target="_blank" alt="Gujrat" title="Gujrat" href="https://en.wikipedia.org/wiki/Gujarat"

coords="18,281,17,299,34,309,57,299,27,328,60,352,101,351,116,312,91,286,64,278" shape="poly">
<area target="_blank" alt="Andhra Pradesh" title="Andhra Pradesh" href="https://en.wikipedia.org/wiki/Andhra Pradesh"

coords="205,383,182,486,230,506,253,456,300,416,305,400,257,425" shape="poly">
</map>
</body>
</html>
Lab-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML tutorials</title>
</head>
<body>
<h1>Learn HTML</h1>
<section>
<h2>Topics</h2>
<ul>
<li><a href="#HEADER">HEADER</a></li>
<li><a href="#NAV">NAV</a></li>
<li><a href="#SECTION">SECTION</a></li>
<li><a href="#ARTICLE">ARTICLE</a></li>
<li><a href="#p">P</a></li>
<li><a href="#ASIDE">ASIDE</a></li>
<li><a href="#FOOTER">FOOTER</a></li>
</ul>
<img src="html.png" width="600" height="600" alt="html" usemap="#workmap">
<map name="workmap">
</map>
<section>
<h1 id="HEADER">HEADER</h1>
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,
as opposed to using 'Content here, content here', making it look like readable English.</P>
<h1 id="NAV">NAV</h1>
<h1 id="SECTION">SECTION</h1>
<h1 id="ARTICLE">ARTICLE</h1>
<h1 id="P">P</h1>
<h1 id="ASIDE">ASIDE</h1>
<h1 id="FOOTER">FOOTER</h1>
</section>
</section>
</body>
</html>
Lab- 4
<!DOCTYPE html>
<html>
<head>
<title> Tricolor </title>
</head>
<body>
<div class = "Saffron">

<p style="text-align:center;">
<canvas id="myCanvas" width="700" height="100" style="background-color:orangered;"></canvas>
</p>
</div>
<div class = "White" style="background-color:white;" ><p style="text-align:center;"><img

src="Spinning_Ashoka_Chakra.gif" width="100" height="100" ></p></div>
<div class = "Green">
<p style="text-align:center;">
<canvas id="myCanvas" width="700" height="100" style="background-color:green;"></canvas>
</p>
</div>
</body>
</html>
Lab-5
• Prob-1:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul{
list-style: none;
}
li{
float: left;
margin-right: 10px;
margin-left: 10px;
background-color: cyan;
li: hover {
background-color: pink;
div.parent {
position: relative;
width: 900px;
height: 200px;
top: 100px;
left: 200px;
div.child {
position: absolute;
top: 0px;
left: 0px;
width: 450px;
height: 100px;
background-color: green;
div.grandchild {
position: absolute;
top: 0px;
left: 0px;
width: 225px;
height: 50px;
background-color: yellow;
.pagination {
margin-left: 10px;
margin-top: 380px;
display: inline-block;
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
</style>
</head>
<body>
<div class="header">
<ul>
<li><a href="#url">Home</a></li>
<li><a href="#url">Product</a></li>
<li><a href="#url">About Us</a></li>
</ul>
</div>
<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">»</a>
</div>
</body>
</html>
• Prob-2:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul{
list-style: none;
li{
float: left;
margin-right: 10px;
margin-left: 10px;
li:hover {
background-color: pink;
div.parent {
position: fixed;
width: 400px;
height: 400px;
bottom: 0px;
right: 0px;
background-color: yellow;
div.child {
position: absolute;
bottom: 0px;
right: 0px;
width: 200px;
height: 200px;
background-color: blue;
div.grandchild {
position: absolute;
bottom: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: green;
.pagination {
margin-top: 400px;
display: inline-block;
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
</style>
</head>
<body>
<div class="header">
<ul>
<li><a href="#url">Home</a></li>
<li><a href="#url">Product</a></li>
<li><a href="#url">About Us</a></li>
</ul>
</div>
<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">»</a>
</div>
</body>
</html>
Lab-6
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.python{
font-size: 18px;
background-color: skyblue;
.cobra{
font-size: 24px;
background-color: lightgreen;
.none{
font-size: 20px;
background-color: white;
ul{
position: absolute;
right: 30px;
list-style-type: none;
li{
float: left;
margin-left: 5px;
button{
border: 2px solid #e971cb;

background-color: transparent;
border-radius: 14px;
button:hover {
background-color: #e971cb;
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
</style>
</head>
<body class="none">
<div class="Theme">
<ul>
<li><button type="button" onclick="cobra()">Cobra</button></li>
<li>|</li>
<li><button type="button" onclick="python()">Python</button></li>
<li>|</li>
<li><button type="button" onclick="none()">None</button></li>
</ul>
</div>
<br>
<br>
<br>
Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of
significant indentation. Its language constructs and object-oriented approach aim to help programmers write clear, logical code for
small- and large-scale projects.[30]
<br>
<br>
<br>
</body>
<script>
function cobra(){
let collection1=document.getElementsByTagName("body");
for(let i=0 ; i<collection1.length ; i++){
collection1[i].className = "cobra";
function python(){
collection1[i].className = "python";
function none(){
collection1[i].className = "none";
</script>
</html>

191B129 Aplab

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

191B129 Aplab

Uploaded by

Copyright:

Available Formats

JAYPEE UNIVERSITY OF ENGINEERING & TECHNOLOGY, GUNA

DEPARTMENT OF Computer science & engineering

A PRACTICAL WORK BOOK

Name of student – Isha Jain ENRL NO. - 191b129

BRANCH – cse Semester- 6

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<p>827, shahi naka garha ,Jabalpur</p>

<tbody><tr><th style="border: 1px solid black; ">Qualifications</th>

<th style="border: 1px solid black;">Institute</th>

<th style="border: 1px solid black;">University</th>

<th style="border: 1px solid black;">Marks</th>

<th style="border: 1px solid black;">Year of passing</th>

<td>Joy Senior Secondary School</td>

<td>Smita Children Acadmy SSS</td>

<td>Jaypee University of engineering and technology</td>

<p><span style="font-size: 20px;"><b>Data structure and algorithm</b></span></p>

<p><span style="font-size: 20px;"><b>Python</b></span></p>

<p><span style="font-size: 20px;"><b>Database management system</b></span></p>

<p><span style="font-size: 20px;"><b>C++s</b></span></p>

<p><span style="font-size: 20px;"><b>Flutter</b></span></p>

<title> Learn about States of India </title>

<img src="swmap.jpg" usemap="#image-map">

<area target="_blank" alt="J&amp;K" title="J&amp;K"

<area target="_blank" alt="Rajasthan" title="Rajasthan"

<area target="_blank" alt="Punjab" title="Punjab" href="https://en.wikipedia.org/wiki/Punjab, India"

<area target="_blank" alt="Madhya Pradesh" title="Madhya Pradesh" href="https://en.wikipedia.org/wiki/Madhya Pradesh"

<area target="_blank" alt="UP" title="UP" href="https://en.wikipedia.org/wiki/Uttar Pradesh"

<area target="_blank" alt="Maharashtra" title="Maharashtra" href="https://en.wikipedia.org/wiki/Maharashtra"

<area target="_blank" alt="Gujrat" title="Gujrat" href="https://en.wikipedia.org/wiki/Gujarat"

<area target="_blank" alt="Andhra Pradesh" title="Andhra Pradesh" href="https://en.wikipedia.org/wiki/Andhra Pradesh"

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<img src="html.png" width="600" height="600" alt="html" usemap="#workmap">

<title> Tricolor </title>

<div class = "Saffron">

<canvas id="myCanvas" width="700" height="100" style="background-color:orangered;"></canvas>

<div class = "White" style="background-color:white;" ><p style="text-align:center;"><img

<div class = "Green">

<canvas id="myCanvas" width="700" height="100" style="background-color:green;"></canvas>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

padding: 8px 16px;

<li><a href="#url">About Us</a></li>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

padding: 8px 16px;

<li><a href="#url">About Us</a></li>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

border: 2px solid #e971cb;

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

<li><button type="button" onclick="cobra()">Cobra</button></li>

<li><button type="button" onclick="python()">Python</button></li>

<li><button type="button" onclick="none()">None</button></li>

for(let i=0 ; i<collection1.length ; i++){

for(let i=0 ; i<collection1.length ; i++){

for(let i=0 ; i<collection1.length ; i++){

You might also like

<area target="_blank" alt="J&K" title="J&K"