Department of Computer Science and Engineering

KPR Institute of Engineering and Technology

LABORATORY MANUAL

U19CS105 – APPLICATION DEVELOPMENT

PRACTISES LABORATORY

(Regulation 2019)

Learning Material for Laboratory Component /

Theory with Lab component

 VISION AND MISSION OF THE INSTITUTION
Vision
To become a premier institute of academic excellence by imparting technical, intellectual and
professional skills to students for meeting the diverse need of the industry, society, the nation and the
world at large
Mission
 Commitment to offer value-based education and enhancement of practical skills
 Continuous assessment of teaching and learning process through scholarly activities
 Enriching research and innovation activities in collaboration with industry and institute of repute
 Ensuring the academic process to uphold culture, ethics and social responsibility

VISION AND MISSION OF THE DEPARTMENT

Vision
To foster the students by providing learner centric teaching environment, continuous learning, research
and development to become thriving professionals and entrepreneurs to excel in the field of computer
science and contribute to the society.

Mission
The Department of Computer Science and Engineering is committed
 Providing value based education and contented learning experience to the students.
 Educating the students with the state of art technologies and cultivating their proficiency in
analytical and designing skills.
 Enabling the students to achieve a successful career in Computer Science and Engineering or
related fields to meet the changing needs of various stakeholders.
 Guiding the students in research by nurturing their interest in continuous learning towards
serving the society and the country.

Program Educational Objectives (PEOs)

 Graduates of mechanical engineering will have a successful professional career in their respective
and/or related field of engineering to meet the changing needs of various stakeholders.
 Graduates with passion towards research and professional development will involve in continuing
education by pursuing advanced professional studies and/or participate in professional activities.
 Graduates will act as a responsible leader or team member with good communication, environment
safety, behavioural attitude and professional ethics for the economic development of the
organization as well as the society

2
Program Outcomes (POs)
Engineering Graduates will be able to:
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering
Fundamentals and an engineering specialization to the solution of complex engineering problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural
sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis of the
information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with
an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering solutions
in societal and environmental contexts, and demonstrate the knowledge of, and need for
sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms
of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the engineering
community and with society at large, such as, being able to comprehend and write effective reports
and design documentation, make effective presentations, and give and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the engineering
and management principles and apply these to one’s own work, as a member and leader in a team,
to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change

3
Program Specific Outcomes (PSOs)
A graduate of Mechanical Engineering will be able to
1. PSO 1: Apply mechanical engineering principles to design, develop and implement advanced
machine/mechanical systems or process for better performance and less human effort.
2. PSO 2: Ensure quality by applying quality tools, maintenance principles and managerial skills to
comprehend the mechanical engineering processes, products and services.
RUBRICS FOR ASSESSMENT

Excellent Good Adequate Inadequate

Criteria
(4 Marks) (3 Marks) (2 Marks) (1 Mark)
Unable to identify
Able to develop Able to use
A. Preparation & Observation

theoretical
contingency or theoretical
Criterion #1 Able to develop framework,
alternative plans framework,
Ability to setup contingency or measurement
and anticipate measurement
and conduct alternative plans. techniques,
problems during techniques, testing
experiments testing apparatus
experiment. apparatus or model.
or model.
Able to formulate,
Able to apply
controls and
Criterion #2 constraint and
evaluate Able to evaluate
Ability to take assumption into the Unable to discuss
alternatives of the data and relate to
measurements experimental experimental
experiment. Able to engineering
/ readings and design. Able to processes and
evaluate data and phenomena for
present data conduct experiment protocols
relate to engineering decision-making.
correctly and collect
phenomena for
data.
decision-making.
Criterion #3
Ability to
Able to combine Able to select and Unable to select
analyze the
B. Results & Interpretation

/organize more than Able to evaluate or use and apply and describe the
data
one set of data, compare data and appropriate techniques or
theoretically
interpret data and make meaningful techniques or methods of
and logically to
make meaningful conclusion methods to analyse analyzing the
conclude
conclusion. the data. data.
experimental
results
Criterion #4
Ability to
Able to verify and/or
interpret and Able to verify and/or Able to identify and Unable to identify
validate several sets
discuss any validate data and verify how results how results
of data and relates
discrepancies relate to engineering relate/differ from relate/differ from
to engineering
between phenomena for theory or previous theory or previous
phenomena for
theoretical and decision making. results results.
decision making.
experimental
results
Able to listen Misunderstand the Unable to listen
C. Viva Voce

Criterion #5 carefully and questions and does carefully to

Able to listen
Demonstrate respond to not respond questions and
carefully and
the ability to questions appropriately to the does not provide
respond to
respond appropriately; is teacher, or has an appropriate
questions
effectively to able to explain and some trouble in answer, or is
appropriately
questions interpret results to answering unable to answer
the teacher questions questions

4
 LIST OF EXPERIMENTS
PAGE
S.NO NAME OF THE EXPERIMENTS
NO
01 Design a webpage with image map 9
02 Design a webpage with hotspot details when clicking 11
03 Create a webpage with all type of CSS file 13
04 Design a webpages with use of CSS to style the webpage looks 17
05 Incorporating multimedia into webpage 20
06 Designing a static website using content management framework 22

Prepared by Approved by

Dr.V.Vignesh HoD/ CSE

5
 CYCLE OF EXPERIMENTS
CYCLE – I
S.NO NAME OF THE EXPERIMENTS
01 Design a webpage with image map
02 Design a webpage with hotspot details when clicking
03 Create a webpage with all type of CSS file

CYCLE – II
S.NO NAME OF THE EXPERIMENTS
01 Design a webpages with use of CSS to style the webpage looks
02 Incorporating multimedia into webpage
03 Designing a static website using content management framework

6
 SAMPLE VIVA QUESTIONS

1. What is inline CSS style?

2. Explain the structure of HTML Programming.
3. List the types of List.
4. What is map in html?
5. List out the types of area in map.
6. Write down the syntax for insert image in html?
7. What is the difference between <figure> tag and <img> tag?
8. Is the <datalist> tag and <select> tag same?
9. What is the ‘class’ attribute in HTML?
10. Define Image Map.
11. What are void elements in HTML?
12. What are HTML Entities?
13. What are difference between ID name and Class name?
14. How can set co-ordinates for image mapping?
15. List the <div> properties of CSS.
16. What is round coner in html?
17. What are the various formatting tags in HTML?
18. How to handle events in HTML?
19. What is round coner in html?
20. What are the various formatting tags in HTML?
21. How to handle events in HTML?
22. What is use of position in html?
23. List out the uses of <href> tag in html.
24. What are the difference between inline and inline block?
25. What is <control> tag in html?
26. List out the types of multimedia available in CSS.
27. How can create YouTube link using html?
28. What is use of mute in audio html?
29. List out the uses of control tag in html.
30. How can create autoplay video using html?
31. What is HTML5?
32. Explain the structure of Form in HTML5Programming?
33. List the properties of HTML5.
34. What is the uses of <embeded >in html?
35. What is the uses of @ media screen?
36. How can create @ media screen using html?

7
37. How many types of heading does an HTML contain?
38. How to create a hyperlink in HTML?
39. Which HTML tag is used to display the data in the tabular form?
40. What are some common lists that are used when designing a page?
41. What is the difference between HTML elements and tags?
42. Is it possible to change the color of the bullet?
43. What is a marquee?
44. How many tags can be used to separate a section of texts?
45. How to make a picture of a background image of a web page?
46. What are empty elements?
47. What is the use of a span tag? Give one example
48. What is SVG?
49. What are the different new form element types in HTML 5?
50. Which type of video formats are supported by HTML5?
51. What is the use of figure tag in HTML 5?
52. What is button tag?
53. What is datalist tag?
54. What is the use of the required attribute in HTML5?
55. If I do not put <!DOCTYPE html> will HTML 5 work?
56. What are the new <input> types for form validation in HTML5?

8
 EX.NO : 01 WEB PAGE WITH IMAGE
DATE :

AIM:
To embed an image in webpage using HTML and CSS code.

PROCEDURE
1. Create a html file with Image tag.
2. Set the source attribute of the image tag to the location of the image.
3. Set the adjustment attribute to align the image.

TAGS USED
1. <h2> tag
2. <img> tag
3. <p> tag

CODING

<!DOCTYPE html>

<html>

<head>

<title>DUDO</title>

<style>

.img- container {
float: lefi;

width: 50%;

padding: 5px;

.txt-container {

float: lefi; width

33.33%;

padding: 5px;
}

</style>

</head>

<body>

<h2 align=center>DUDO</h2>

9
<div class="img-container">

<img src="dudo.jpg" alt="dudo" style="width:100%">

</div>

<div class="txt-container">

<p>The dodo (Raphus cucullatus) is an extinct flightless bird that was endemic to theisland
ofMauritius, which is east of Madagascar in the Indian Ocean. The dodo's closest genetic relative
was the also-extinct Rodrigues solitaire. The two formed the subfamily Raphinae, a clade of
extinct flightless birds that were a part of the family including pigeons and doves. The closest
living relative of the dodo is the Nicobar pigeon. A white dodo was once thought to have existedon
the nearby island of Réunion,but it is now believed that this assumption was merely confusion
based on the also- extinct Réunion ibis and paintings of white dodos.

</p>
</body>
</html>

OUTPUT

RESULT:
Thus the webpage was created with image.

10
 EX.NO : 02
WEBPAGE WITH HOTSPOT
DATE :

AIM

To create a webpage that has the hotspot and show all the related information when the
hotspot is clicked.
PROCEDURE
1. Add the image and find three coordinates points within the image

2. Using <map> and <area> tag to connect with corresponding html page

3.Then Hotspots which show more info about the place is created.

TAGS USED

1. <img>
2. <a href>
3. <area>
4. <map>

CODING

<!DOCTYPE html>

<html>

<head>

<title>Popular Tourist Spots in France</title>

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap”
rel="stylesheet"/>

</head>
<body>
<h1>Some of the Popular Tourist spots across France</h1>

<h2>1. Eiffel Tower</h2>

<img src="1.Eiffel Tower.jpg" alt="Eiffel Tower Picture" width="800" height="600"

/>
<p>The symbol of <strong>Paris</strong>, the Eiffel Tower is a feat of ingenuity as
much as it is a famous landmark. </p>
<map name=”planetmap”>
<area shape=”octa” coords=”148,522,139,471,183,448,174,490″ alt=”Sun” href=”tamil1.html”>
<area shape=”octa” coords=”106,452,135,481,137,522,120,487″ alt=”Mercury”
href=”kerala.html”>
<area shape=”octa” coords=”181,433,155,373,181,330,226,381″ alt=”Mercury”

11
href=”andhra1.html”>
<area shape=”octa” coords=”147,351,134,412,114,452,100,418″ alt=”Mercury”
href=”karnataka.html”>
</map>

<p> The Eiffel Tower's gracefulness has earned it the nickname of <em>"Iron
Lady."</em> Visitors are impressed by the tower's delicate airiness despite its
monumental size and the breathtaking panoramas at each of the three levels.</p>

<a href="https://www.planetware.com/france/where-to-stay-in-paris-best-areas- and-

hotels-f- 1-21.htm" target="_blank">Where to stay in Paris?</a >

<a href="https://unsplash.com/s/photos/eiffel-tower" target="_blank" >More Pictures of

the Eiffel Tower</a>

</body>

</html>

OUTPUT

RESULT:
Thus the webpage was created with image hotspot.

12
 EX.NO : 3
WEB PAGE WITH CSS
DATE :
AIM:

To create a webpage using HTML and inline, internal and external CSS code.
PROCEDURE
1. Create a html file using inline CSS properties.

2. Set the border and margin for the webpage to align the content by adding external CSS file

3. Set the background and import the image by using internal CSS.

TAGS USED

1.<a href> tag

2.<style> tag

CODING

<html>
<head>
<style>
body{

background-color: rgba(31, 7, 63, 0.89);

}

p.inset {

border-style: inset;

border-color: rgba(101, 102,

102, 0.555);text-align: center;

color: rgba(136, 138, 145, 0.658);

background-color:rgba(128, 128, 128, 0.849);font-size: 50px;

text-shadow:-1px 1px 0 #000,1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;

}
.container{
text-align: center;
text-emphasis-color:black;
}
.block{
display: inline-block;
width:200px;
height:240px;
background-color: rgb(145,152,168);
margin: 30px 20px 0 20px; }
.block img

{ width: 100px; height: 100px;

}</style> </head><body>
<p class="inset">
13
<img width="45px" src="file:///C:/Users/neela/Downloads/png-apple-logo-9716.png">Apple</p>
<div class="container">
<div class="block">
<a href="https://www.apple.com/in/shop/buy-mac/macbook-air/space-grey-
apple-m1-chip-with-8-core-cpu-and-8-core-gpu-512gb#">

<h3>MacBook Air</h3>

<img src="file:///C:/Users/neela/Downloads/macbook-air-gold-select-201810.jpg">

<p>MRP ₹117900.00</p></a>

</div>

<div class="block">

<a href="https://www.apple.com/in/shop/buy-mac/macbook-pro/16-inch-space-grey-
10-core- cpu-16-core-gpu-1tb#">

<h3>MacBook M1 Pro</h3>

<img src="file:///C:/Users/neela/Downloads/mbp14-spacegray-select-202110.jpg">

<p>MRP ₹194900.00</p></a>
</div>

<div class="block">

<a href="https://www.apple.com/in/shop/buy-mac/macbook-pro/16-inch-space-grey-
10-core- cpu-32-core-gpu-1tb#">

<h3>MacBook M1 Max</h3>

<img src=file:///C:/Users/neela/Downloads/Apple_MacBook-Pro_14-16-
inch_10182021_big.jpg.large.jpg >
<p>MRP ₹329900.00</p></a> </div>

<div class="block">

<a href="https://www.apple.com/in/shop/buy-mac/imac/blue-24-inch-8-core-cpu-8-core-gpu- 8gb-

memory-512gb#">
<h3>iMac with M1 chip 24"</h3>

<img src="file:///C:/Users/neela/Downloads/imac-24-blue-cto-hero-202104.jpg">

<p>MRP ₹159900.00</p></a> </div> <br> <br> <br>

<div class="block">

<a href="https://www.apple.com/in/shop/buy-iphone/iphone-13-pro">

<h3>iPhone 13 Pro</h3>

<img src="file:///C:/Users/neela/Downloads/iphone-13-pro-family-hero.png">

<p>MRP ₹119900.00</p></a> </div>

<div class="block">

14
<a href="https://www.apple.com/in/shop/buy-watch/apple-
watch?preSelect=false&product=MKN83HN/A&step=detail#">
<h3>Apple Watch Series 7</h3>

<img src="file:///C:/Users/neela/Downloads/MKUE3_VW_34FR+watch-41-alum-blue-nc-
7s_VW_34FR_WF_CO.jpg">

<p>MRP ₹41900.00</p></a> </div>

<div class="block">
<a href="https://www.apple.com/in/shop/buy-ipad/ipad-mini">
<h3>iPad Mini</h3>

<img src="file:///C:/Users/neela/Downloads/ipad-mini-select-202109.jpg">
<p>MRP ₹41900.00</p></a> </div>
<div class="block">

<a href="https://www.apple.com/in/shop/product/MME73HN/A/airpods-3rd-generation">
<h3>AirPods 3rd Gen</h3>

<img src="file:///C:/Users/neela/Downloads/MME73.jpg">

<p>MRP ₹41900.00</p></a> </div>

</div>
</body
</html>

15
OUTPUT

RESULT:

Thus the webpage was created with inline internal and external CSS code

16
 EX.NO : 4 WEBPAGE LOOKS USING CSS
DATE :
AIM:

To design a webpage using HTML and CSS code and style the webpage looks.

PROCEDURE

1.Create a webpage with necessary HTML tag

2..Style the web page looks by using css code.

TAGS USED
1. text-decoration
2. margin
3. topnav oveflow
CODING

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.cs ”>

<style>

body { margin: 0;
font-family: Arial, Helvetica, sans-serif;
background:url("https://cdn.orvis.com/images/DBS_Sammoyed_12 80.jpg");
background-repeat:no-repeat;
background-size:1700px 850px;

.topnav {
overflow:hidden;
background-color: #333;

.topnav a {
float:left;
display:block;
color:#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none; font-size: 17px;
}
.topnav a:hover {
background-color:
#ddd; color: black;}
.topnav a.active {
background-color:
17
 #04AA6D; color: white;
}
.topnav .icon
{ display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {float:
right; display: block;
}}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon
{
position: absolute;right: 0;
top: 0; }

.topnav.responsive a
{
float: none;
display:block; text-
align: left; } }

</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#german shepard">German shepard</a>
<a href="#">labrador</a>
<a href="#about">golden retriver</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>

18
OUTPUT

RESULT

Thus the webpage was created with CSS code

19
 EX.NO : 5 WEBPAGE WITH MULTIMEDIA
DATE :
AIM:
To create a webpage with multimedia content using HTML and CSS code

PROCEDURE

1. Create a website using HTML and CSS code

2. Add image and video tag with this webpage
3. Finally embedded the YouTube video using <video> tag.

TAGS USED

1.<audio>
2.<video>
3.<source>
4.<iframe>

CODING

<!DOCTYPE html>
<html>
<head>

<title>MULTIMEDIA</title>
</head>
<body>

<body style="background-color:powderblue;">
<h1 style="border: 2px solid Tomato;">Multi Media Web Page</h1>
<img src="C:\Users\Dell\OneDrive\Desktop\PROJECT FOLDER\images\MMIimage.JPG"
style="width:1500px;height:700px;">

<h1 style="background-color:rgb(255, 0, 0);">MEDIA WORKS</h1> <audio controls>

<source src="https://2u039f-
a.akamaihd.net/downloads/ringtones/files/mp3/martingarrix-
original-mix-3178.mp3">

</audio>
<video width="500" height="500" autoplay unmuted>
<source src="https://cdn.videvo.net/videvo_files/video/free/2019-
12/large_watermarked/190915_B_01_Timelapse%20Danang_02_preview.mp4" controls></video>

<p style="color:red;">Multimedia is a form of communication that combines different content

forms such as text, audio, images, animations, or video into a single interactive
presentation, in contrast to traditional mass media which featured little to no interaction
from users, such as printed material or audio recordings.
Popular examples of multimedia include video podcasts, audio slideshows and
Animatedvideos.</p>
<ol>
<li>AUDIO</li>

<li>VIDEO</li>
20
<li>ANIMATIONS</li>

<li>PICTURES</li>

</ol>
<iframe width="420" height="345"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">

</iframe>

</body>
<html>

OUTPUT

RESULT

Thus the webpage was created with multimedia content using HTML and CSS code

21
 EX.NO : 6 STATIC WEBPAGE USING CONTENT MANAGEMENT SYSTEM
DATE :
AIM:

To design a static webpage using Content management system using HTML code.

PROCEDURE

1. Create a website using HTML and CSS code

2. Add form to create, delete, modify, and publish content even in this webpage

TAGS USED

1. PARAGRAPH
2. HEADING
3. OPTION
4. SUBMIT BUTTON
5. FORM
6. SELECT
7. LABEL

CODING
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;

input[type=text], select,
textarea {width: 100%;
padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}

input[type=submit] { background-
color: #04AA6D;

color: white;padding: 12px

22
 20px;border:
none; border- radius: 4px;
cursor: pointer;float: right;
}
input[type=submit]:hover { background-color

.container {
border-radius: 5px;
background-color:
#f2f2f2;padding:
20px;
}
.col-25 {
float: left;
width:
25%;
margin-top: 6px;

}
.col-75 { float: left;
width:75%;
margin-top: 6px;
}
.row:after { content: "";
display: table;
clear:both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75,
input[type=submit]
{width:100%;
margin-top: 0;
}}
</style>

</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide,
make the twocolumns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">

23
<label for="fname">First Name</label> </div>
<div class="col-75">

<input type="text" id="fname" name="firstname" placeholder="Your name..">

</div> </div>
<div class="row">
<div class="col-25">

<label for="lname">Last Name</label> </div>

<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div> </div>
<div class="row">
<div class="col-25">
<label for="country">Country</label> </div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">

<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject"
placeholder="Writesomething.."
style="height:200px"></textarea>
</div> </div>
<div class="row">
<input type="submit" value="Submit">

</div> </form>

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

24
OUTPUT

RESULT

Thus the webpage using Content management was created using HTML code.

25