Section A: Using Raptor
1) Write an algorithm for programmable problems Design a flowchart for programmable problems
• Add/subtract two numbers
• Find the largest/smallest of 3 numbers
• Calculate and print sum of 'N' numbers • Add/subtract two numbers
• Find the largest/smallest of 3 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)
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
IT Skill Lab Manual 20CS01P.pdf
1. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 1 of 28
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: …………………………………………….
2. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 2 of 28
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
Course Category ES Total Contact Hours
6Hrs Per Week
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
3. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 3 of 28
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
Find the largest/smallest of 3 numbers
Calculate and print sum of 'N' numbers
Add/subtract two numbers
Find the largest/smallest of 3 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)
4. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 4 of 28
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.
5. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 5 of 28
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).
6. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 6 of 28
Raptor Symbol Dialogs:
Symbol Assignment Call Input Output Selection Loop control
Dialogs
Appearance
7. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 7 of 28
1) Write an algorithm for programmable problems Design a flowchart for programmable problems
Add/subtract two numbers
Find the largest/smallest of 3 numbers
Calculate and print sum of 'N' numbers
Add/subtract two numbers
Find the largest/smallest of 3 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
8. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 8 of 28
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
9. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 9 of 28
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
10. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 10 of 28
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.
11. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 11 of 28
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.
12. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 12 of 28
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
13. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 13 of 28
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
14. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 14 of 28
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:
15. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 15 of 28
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:
16. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 16 of 28
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
17. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 17 of 28
<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>
18. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 18 of 28
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
19. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 19 of 28
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
21. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 21 of 28
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">
22. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 22 of 28
<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
23. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 23 of 28
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>
24. Vidya Vikas Educational Trust (R),
Vidya Vikas Polytechnic
27-128, Mysore - Bannur Road Alanahally,Alanahally Post, Mysuru, Karnataka 570028
Praperd by: Mr Thanmay J.S, H.O.D Mechanical Engineering VVETP, Mysore Page 24 of 28
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