Vidya Vikas Educational Trust (R),

Vidya Vikas Polytechnic

27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028

Department of Mechanical Engineering

Laboratory Manual

Subject : IT SKILLS [Common subject]

Subject Code : 20CS01P

Semester : 2nd Semester

Branch : Mechanical Engineering [General]

Name of the Student: …………………………………………….

Register Number: …………………………………………….

Branch: …………………………………………….

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 1 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Government of Karnataka
Department of Collegiate and Technical Education
Board of Technical Examinations, Bangalore
Course Code 20CS01P Semester I/II
Course Title IT SKILLS Course Group ES/CS
No. of Credits 4 Type of Course Lecture + Practice
6Hrs Per Week
Course Category ES Total Contact Hours
78Hrs Per Semester
Prerequisites Basic Computer Skills Teaching Scheme (L:T:P)= 1:0:2
CIE Marks 60 SEE Marks 40

COURSE OBJECTIVES
1. Demonstrate the basics of coding.
2. Design and develop web pages that include static and dynamic content.
3. Describe the basic concepts of Cloud and IoT.
4. Express the workflow and business automation
5. Recognize the best practices of Cyber Safety and security.

COURSE OUT COMES

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 2 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
SUGGESTED PRACTICAL SKILL EXERCISES
Section A: Using Raptor
1) Write an algorithm for programmable problems Design a flowchart for programmable problems
 Add/subtract two numbers  Add/subtract two numbers
 Find the largest/smallest of 3 numbers  Find the largest/smallest of 3 numbers
 Calculate and print sum of 'N' numbers  Calculate and print sum of 'N' numbers

Section B: Using Scratch

2) Design and create simple game using MIT-scratch/Code.org

Section C: Webpage Designing

3) Design and create webpage for displaying your poem (Title, header, paragraph, formatting tags)
4) Design and create webpage for your wish list (What you want to do). Also list challenges and opportunities
along with images to present your dreams (List ordered and unordered, Image, table)
5) Design and create webpage using HTML and CSS about an awesome animal (Use necessary CSS tags)
6) Design and create web page for a travel book/recipe book with more than 3 pages, table to list places/recipes
(iframe, hyperlink)
7) Design and create web page with JavaScript to design a simple calculator to perform the following
operations: sum, product, difference and quotient
8) Design and create a personal webpage with dashboard
9) Design and create web page about advantages of business process automation with respect to your branch
of engineering

Section D: Workflow Designer

Create a workflow for education loan approval in bank/diploma admission process (Use any tool)

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 3 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section A: Using Raptor
Raptor Overview [Download Link: https://raptor.martincarlisle.com/]
Raptor is a simple-to-use problem solving tool that enables the user to generate executable flowcharts. Raptor
was written for students being introduced to the computing discipline in order to develop problem solving
skills and improve algorithmic thinking. The primary window consists of four main areas:

The Symbols area in the upper left presents the 6 primary graphical symbols that can be used in Raptor:
• The assignment symbol is used to give a variable a numeric or string value.
• The call symbol is used to make calls to outside procedures, such as graphics routines.
• The input symbol is used for getting input from the user.
• The output symbol is used to display text to the Master Console.
• The selection structure is used for decision making.
• The loop structure is used for iteration and repetition.
The area immediately below the Symbols area is the Watch Window. This area allows the user to view the
current contents of any ’variables and arrays as the flowchart is executing. The large, white area to the right
is the primary Workspace. Users can build their flowcharts in this area and watch them update as they execute.
The workspace is tabbed. Most flowcharts have a single tab named "main”, but programmer-defined sub charts
appear as tabs in the workspace. The final area is the menu and toolbar. This area allows the user to change
settings and control the view' and execution of individual flowcharts.
Adding Symbols to a Flowchart
To build a flowchart, left click on a symbol in the Symbol Window. Move the mouse to the place in the
flowchart where the symbol belongs. You may need to move the cursor slightly to find an insertion point.
When the cursor is at an insertion point, the cursor will change to . When the left mouse button is
clicked at an insertion point, the selected symbol is added to the existing flowchart at the specified location.
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 4 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
If symbols are incorrectly placed, select undo. Delete, or Cut from the Edit or Right Mouse Button menu.
Symbols may also be copied and pasted in another area of a flowchart. Once a symbol has been correctly
placed, you can double click the symbol to edit its contents.
Raptor Symbols
The six symbols used in Raptor are displayed in the Symbol Window in the upper left comer of the main
window.
a) Assignment
The assignment symbol is used to change the value of a variable. The right hand side of the assignment is
evaluated, and the resulting value is placed in the variable on the left hand side. For example, consider the
case where the value of x is currently 5, and the assignment "x <- x - 1" is executed. First "x+l" is evaluated,
yielding the result 6. Then the value of x is changed to be 6. Note that assignment is very different from
mathematical equality. The statement should be read "Set x to x+l" instead of "x equals x+l". The assignment
symbol can also be used to assign a string expression to a string variable
b) Call
The call symbol is used to invoke procedures such as graphics routines and other
instructor-provided procedures. The call symbol is also used to run sub charts
included in a Raptor program
c) Input
The input symbol is used to ask the user for a number or string while the flowchart is
executing. When an input symbol is executed, the user will be prompted with a dialog
to enter a value that can be interpreted as either a number or string, depending on what
the user. The user can also override the source for input by specifying a text file to be
used in place of the keyboard.
d) Output
The output symbol is used to either write a number or text to the Master Console window. The user can also
override the destination for output by specifying a text file to be used instead of the Master Console.
e) Selection
The selection structure is used for decision making. The programmer enters in the diamond an expression that
evaluates to Yes (True) or No (False). Such expressions are formally referred to as Boolean expressions. Based
on the result of the expression in the diamond, control of the program will branch either left (Yes. or Tine) or
right (No. or False).
f) Loop Control
The loop structure is used to repeat a sequence of symbols until a certain condition is met. When execution
reaches the bottom of the loop, it stalls over again at the top. The loop is excited when the diamond symbol is
executed and the Boolean expression in the diamond evaluates to Yes (True).
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 5 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Raptor Symbol Dialogs:
Symbol Assignment Call Input Output Selection Loop control

Dialogs

Appearance

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 6 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028

1) Write an algorithm for programmable problems Design a flowchart for programmable problems
 Add/subtract two numbers  Add/subtract two numbers
 Find the largest/smallest of 3 numbers  Find the largest/smallest of 3 numbers
 Calculate and print sum of 'N' numbers  Calculate and print sum of 'N' numbers
Section A: Experiment 01:

Algorithm for adding two Numbers.

Step 1: Start.
Step 2: Read two numbers A and B.
Step 3: Answer = A + B.
Step 4: Display Answer.
Step 5: Stop.

Flow Chart

Algorithm for subtracting two Numbers.

Step 1: Start.
Step 2: Read two numbers A and B.
Step 3: Answer = A - B.
Step 4: Display Answer.
Step 5: Stop.

Flow Chart

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 7 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section A: Experiment 02:
Algorithm to find the largest of 3 numbers

Step 1:Star

Step 2:Read three numbers A,B & C

Step 3:If A>B, then go to step 6

Step 4:If B>C, then print B & go to step 8

Step 5:print C is greatest & go to step 8

Step 6:If A>C, then print A is greatest & go to step 8

Step 7:Print C is greatest

Step 8:end
Flow Chart

Algorithm to find the smallest of 3 numbers

Step 1: Start

Step 2: Read three numbers in variable a, b and c.

Step 3:

If a<b and a<c then display “a is the smallest number"

If b<a and b<c then display “b is the smallest number"

If c<a and c<b then display “c is the smallest number"

Step 4: Stop

Flow Chart

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 8 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section A: Experiment 03:

Algorithm for Calculate and print sum of 'N' numbers

Step 1 : Start

Step 2 : Assign sum=0 and i=1

Step 3 : Read limit of number , n

Step 4 : Repeat steps 5 to 6 until i=n reached

Step 5 : Compute sum=sum+i

Step 6 : Compute i=i+1

Step 7 : Print sum

Step 8 : Stop

Flow Chart

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 9 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section B: Using Scratch
Scratch Overview: [Download Link: https://scratch.mit.edu/download]
Scratch is a block based programming language that is perfect for making games, animations, interactive
stories and other visually rich programs. Scratch provided a friendly introduction to the kind of creative
problem solving that programmers do all the time. Scratch is easier to use than most other programming
languages for a number of reasons:
• You don’t have to remember or type any commands: they’re all on screen, so you can just drag and drop
them.
• Commands fit together like jigsaw pieces, so there are strong visual hints about how you can combine them.
• Error messages are rare. Because Scratch commands lock together, programs always make some kind of
sense. It is possible to still write programs with logical errors in, if they don’t do what you expected, but
Scratch guides you to write things that work, rather than nagging you when they don’t.
• The commands are color-coded and categorized, so you can easily find a command when you need it.
• The commands in Scratch simplify common activities in games, such as testing whether a missile has hit an
alien (collision detection), or rotating a character on screen.

The main parts of the Scratch screen are:

Stage: This is where you can see your animations and games in action. When Scratch starts, there’s a large
orange cat in the middle of the Stage. In Scratch 2.0, the Stage is on the left, whereas in Scratch 1.4, the Stage
is on the right.
Sprite List: The cat is a ‘sprite’, which is like a character or object in a game. Your project might include lots
of sprites, such as the player’s spaceship, invading aliens and a missile. In the Sprite List, you can see all the
sprites that are in your project, and click them to switch between them. In both versions of Scratch, the Sprite
List is underneath the Stage.

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 10 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Blocks Palette: In Scratch, you give the computer commands by using blocks, which are instructions that fit
together like jigsaw pieces. The Blocks Palette presents you with all the blocks you can use. When you start
Scratch, you can see the Motion blocks, which are color-coded in dark blue, and are used for moving sprites
around the Stage. You can browse a different set of blocks in the Blocks Palette by clicking one of the buttons
above it, such as the Looks button or the Sound button.
Scripts Area: The Scripts Area is where you make your programs in Scratch, by assembling blocks there.
This area expands to fill the screen space available, so if you use a larger monitor, the Scripts Area will be
bigger.
Backpack: The Backpack is a new feature in Scratch 2.0, which you can find underneath the Blocks Palette
and Scripts Area. Click it to open it. It works a bit like a clipboard. You can copy scripts or sprites to it by
dragging them there and dropping them. If you want to use them, just drag them from the Backpack back into
your project. Your Backpack works across all your projects, so it’s a great way to copy sprites or bits of
program between different projects.
Types of Scratch games
a) Clicker game: In a clicker game, players click on-screen Sprites to earn points on each successful action.
b) Chase game: Control a sprite and move it around to score points.
c) Pong game: This can create a game using the mouse to guide the paddle and knock the ball back to the
opponent’s side.
Scratch interface
a) File menu: This is where games can be saved (to the Scratch account or computer) and project files can
be loaded.
b) Code Tab: This is where all the code blocks are kept. Creators can add code blocks to Sprites and
backdrops to animate their scenes.
c) Costumes Tab: This is where Scratch sprites and their costumes can be created and edited.
d) Sounds Tab: This is where Sprite sound files can be added and deleted.
e) Project Name: This is where projects are named.
f) Coding Area: This is where code blocks are placed in order to create Sprite animations.
g) Green Flag (Start): The green flag button, or the start button, is used to run code.
h) Game Preview: This window displays the scene - or game - where creators can preview their code and
quickly see how changes to code will affect the game.
i) Sprite: Sprites are kept in the Sprite panel. Clicking on each Sprite allows you to edit the code blocks
attached to it.
j) Backdrop: The Backdrop is the background art for the scene.
k) Choose a Sprite: With this button in the bottom right corner, new Sprites can be added to scenes.

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 11 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028

Section B: Experiment 01: Design and create simple game using scratch [Jumping Game / Pong Game]

Step 01: Select a spirit of your choice

Step 02: Chose a suitable back ground

Step 03: Make it Jump with sound

Step 04: Make Moving obstacles

Step 05: Make it stop

Stop at Touch Reset if stuck

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 12 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Step 06: Make more obstacles

Hide 2nd Apple for 1 second and show after

Step 07: Keep Score

Step 08: Verify all Parameters

Monkey Control Apple 1 Control Apple 2 Control

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 13 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section C: Webpage Designing
[Hyper Text Markup Language] HTML overview
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link",etc.

Structure of HTML

Learn HTML Using Notepad or Text Edit

Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe in that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 14 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the
Notepad menu. Name the file "index.htm" and set the
encoding to UTF-8 (which is the preferred encoding for
HTML files).

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the
file, or right-click - and choose "Open with"). The result will look much
like this:
HTML Basic Examples
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example:

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example:

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 15 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example:

HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
Example:

HTML Formatting Elements

Formatting elements were designed to display special types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 16 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Example
<b>This text is bold</b>
Example
<strong>This text is important!</strong>

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 17 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section C: Experiment 01: Design and create webpage for displaying your poem (Title, header, paragraph,
formatting tags)
Program in Note Pad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>All about rabbits!</title>
</head>
<body>

<h1>All about Poem</h1>

<h2>Basic info</h2>

<p>Poems are Feelings of heart collected as words.</p>

<h2>“Johny Johny, Yes Papa” <br></h2>

<p>
Johny, Johny,<br>
Yes papa?<br>
Eating sugar?<br>
No papa.<br>
Telling lies?<br>
No papa.<br>
Open your mouth<br>
Ha ha ha! <br>
</p>

</body>
</html>
Output in HTML

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 18 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section C: Experiment 02: Design and create webpage for your wish list (What you want to do). Also list
challenges and opportunities along with images to present your dreams (List ordered and unordered, Image,
table)
Program in Note Pad [Ordered List] Output in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>HTML Ordered List</h2>
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
<hr>
</body>
</html>
Program in Note Pad [Unordered List] Output in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>HTML Unordered List</h2>
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
<hr>
</body>
</html>
Program in Note Pad [Inserting Images] Output in HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Monkey Image</h2>
<img src="Monkey.jpg" alt="Trulli" width="600"
height="333">
</body>
</html>

Note: A file named “Monkey.jpg” should be in same

location

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 19 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Program in Note Pad [Inserting Table] Output in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table with Collapsed
Borders</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>Table with Collapsed Borders</h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Register Number</th>
</tr>
<tr>
<td>1</td>
<td>Rahul B M</td>
<td>456ME21001</td>
</tr>
<tr>
<td>2</td>
<td>Ravikumar M</td>
<td>456ME21002</td>
</tr>
<tr>
<td>3</td>
<td>Vikas Gowda</td>
<td>456ME21004</td>
</tr>
</table>

</body>
</html

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 20 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section C: Experiment 03: Design and create webpage using HTML and CSS [Cascading Style Sheets] about
an awesome animal (Use necessary CSS tags)
Flyingsquirrel.jpg Girdledlizard.jpg platypus.jpg Seaswallow.jpg

HTML and CSS Program

<!DOCTYPE html>
<html>
<head>
<style>
div.Web {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.Web:hover {
border: 1px solid #777;
}
div.Web img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="Web">
<a target="_blank" href="Flyingsquirrel.jpg">
<img src="Flyingsquirrel.jpg" alt="Flyingsquirrel" width="600" height="400">
</a>
<div class="desc">Northern flying squirrels (Glaucomys sabrinus) and southern flying squirrels
(Glaucomys volans) are the only two native flying squirrel species found in North America.</div>
</div>
<div class="Web">
<a target="_blank" href="Girdledlizard.jpg">
<img src="Girdledlizard.jpg" alt="Girdledlizard" width="600" height="400">
</a>
<div class="desc">The Armadillo girdled lizard is a unique heavily-armored reptile native to South
Africa.</div>
</div>
<div class="Web">
<a target="_blank" href="platypus.jpg">
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 21 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
<img src="platypus.jpg" alt="Platypus" width="600" height="400">
</a>
<div class="desc">The platypus (Ornithorhynchus anatinus) is one of the most unusual creatures in the
animal kingdom. It is a Amphibious mammal</div>
</div>
<div class="Web">
<a target="_blank" href="Seaswallow.jpg">
<img src="Seaswallow.jpg" alt="Seaswallow" width="600" height="400">
</a>
<div class="desc">Also known as blue dragon, blue glaucus and many other names, the sea swallow is a
small sea slug that measures up to 3cm </div>
</div>
</body>
</html>
Output

Output Folder

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 22 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section C: Experiment 04: Design and create web page for a travel book/recipe book with more than 1 pages,
Main Recipe Book HTML[recipe.html] Output
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recipe Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-content">
<div class="w3-container">
<h1>Recipe</h1>
<p>Table of Contents</p>
<p><a href="Book1.htm">1. Chicken Fry</a></p>
<p>2. Fish Fry</p>
<p>3. Chicken Kabab</p>
<p>4. Biryani</p>
<p>5. Chicken Chilly Chops</p>
</div>
</body>
</html>
Page 01 extension [Book1.htm] Output
<!DOCTYPE html>
<html lang="en">
<head>
<body class="w3-content">
<div class="w3-container">
<h1>1. Chicken Fry</h1>
<h3>Items Required.</h3>
<ul>
<li>Chicken 1 kg</li>
<li>Chicken Fry Masala</li>
<li>Onion</li>
<li>Ginger garlic paste</li>
<li>Cooking oil</li>
<li>Pan</li>
</ul>
<p>Cooking Method:</p>
<ul>
<li>Ask the Chicken which Masala it needs?</li>
<li>Dont cry while cutting Onion</li>
<li>Dont eat Too much</li>
<li>check your weight after eating</li>
<li>See Doctor if there is any stomach upset</li>
</ul>
</div>
</body>
</html>
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 23 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section C: Experiment 05: Design and create web page with HTML to design a simple calculator to perform
the following operations: sum, product and difference
HTML Code for Calculator
<html>
<head>
<title>HTML Calculator</title>
</head>
<body bgcolor= "#000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'"><br>
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'"><br>
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'"><br>
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="="
onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</body>
</html>

Output window

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 24 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section C: Experiment 06: Design and create a personal webpage with dashboard
HTML Code Output
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-c-plus-plus'></i>
<span class="logo_name">Vidya Vikas
Polytechnic,Mysore </span>
</div>
<ul class="nav-links">
<li>
<a href="#" class="active">
<i class='bx bx-grid-alt' ></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-box' ></i>
<span class="links_name">Product</span>
</a>
</li>
<li class="log_out">
<a href="#">
<i class='bx bx-log-out'></i>
<span class="links_name">Log out</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class='bx bx-menu sidebarBtn'></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search...">
<i class='bx bx-search' ></i>
</div>
</body>
</html>

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 25 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section C: Experiment 07: Design and create web page about advantages of business process automation
with respect to your branch of engineering
HTML Program Code
<html>
<head>
<center>Vidya Vikas Educational Trust(R)</center>
</title>
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css">
font{font-family:georgia;color:blue;font-size:20}
ul{list-style-type:circle}
</style>
</head>
<body>
<ol style="list-style-type:lower-alpha">
<b>GROUP OF COLLEGES</b><br>
<li>Vidya Vikas Polytechnic
<li>Vidya Vikas Institution of Engineering & Technology
<li>Vidya Vikas Degree College
<li>Vidya Vikas Arts and Science
</ol>
<p style="font-size:20pt;color:purple">Vidya Vikas Polytechnic & ITI</p>
<p class="ani">127-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka
570028<br>It is approved by AICTE It is affliated to DTE Karnataka.<br></p>
<font>
List of Courses offered
<ul>
<li>Mechanical Engineering</li>
<li>Computer Science</li>
<li>Civil Engineering</li>
<li>Electronics & Electrical Engneering</li>
</ul>
</font>
<h2>Results of Mechanical students</h2>
<table width="100%" cellspacing="2" cellpadding="2" border="5">
<tr>
<th>S.NAME</th>
<th>MARKS</th>
<th>RESULT</th>
</tr>
<tr>
<td align="center">Rahul B M</td>
<td align="center">100</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Ravi Kumar M</td>
<td align="center">99</td>
<td align="center">pass</td>
</tr>
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 26 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
<tr>
<td align="center">Vikas Gowda</td>
<td align="center">98</td>
<td align="center">pass</td>
</tr>
</table>
</body>
</html>
Output

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 27 of 28
 Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Section D: Workflow Designer
Create a workflow for education loan approval in bank/diploma admission process (Use any tool)

To be completed Later…

Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 28 of 28