practising C, C++ and JAVA programming with examples: July 2020

C++ if..else programs

1) Write a program to know a number is even or odd.

solution

2) Write a program to know a number is divisible by both 3 and 5 or not.

solution

3) Write program to know a number is positive or negative or zero.

solution

4)Write a program to know two numbers entered by you are same or not.

solution

5) Write a program to get greatest number among three numbers.

solution
6)Write a program to know a number entered by you lies between two values/range or not.

  solution
7)Write a program to get smallest number among three numbers.

     solution
8)Write a program to get sum or product or difference or quotient of two numbers using switch.

     solution
9) Write a program to know a triangle is right angled or not.

solution

10) Write a program to know a triangle is equilateral or not.

solution

HTML with SVG to draw circle.

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<!-- here cx is x co-ordinate,cy is y-co-ordinate, r is radius,stroke is boundary color,stroke-width means width of circle outline

and fill means color inside circle-->

</svg>

</body>

</html>

HTML with SVG to draw rectangle

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<!-- here width is the length ,height is breadth, stroke is boundary color,stroke-width means width of rectangle outline

and fill means color inside rectangle-->

<!--further

x is x co-ordinate,

y is y-co-ordinate

rx is radius of x co-ordinate

ry is radius of y-co-ordinate

-->

</svg>

</body>

</html>

HTML with SVG to draw rectangle

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<!-- here width is the length ,height is breadth, stroke is boundary color,stroke-width means width of rectangle outline

and fill means color inside rectangle-->

</svg>

</body>

</html>

HTML with SVG to draw ellipse.

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<!-- here cx is x co-ordinate,cy is y-co-ordinate,

rx is x-radius,

ry is y radius,

stroke is boundary color,stroke-width means width of circle outline

and fill means color inside circle-->

</svg>

</body>

</html>

HTML with SVG to draw line

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<!-- here x is first x co-ordinate,y is first y-co-ordinate,

x1 is second x-coordinate,

y1 is second y co-ordinate,

stroke is boundary color,stroke-width means width of circle outline

and fill means color inside circle-->

</svg>

</body>

</html>svg to draw line

HTML with SVG to draw polygon.

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<!-- here 12 and 13 are first x and y-co-ordinate,

here 14 and 14 are second x and y-co-ordinate,

and so on.

-> stroke is boundary color,stroke-width means width of circle outline

and fill means color inside circle

-->

</svg>

</body>

</html>

HTML with SVG to draw polyline

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<!-- here 10 and 50 are first x and y-co-ordinate,

here 40 and 150 are second x and y-co-ordinate,

and so on.

-> stroke is boundary color,stroke-width means width of circle outline

and fill means color inside circle.

->somewhere it looks like polygon

-->

</svg>

</body>

</html>

HTML with SVG to draw path

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics. It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<!-- here, 'd' is a string containing a series of path commands that define the path to be drawn.

->M moves to particular point

->L lines to particular point

->Z means close the path.

-> stroke is boundary color,stroke-width means width of path outline

and fill means color inside path.

-->

</svg>

</body>

</html>

HTML with SVG to draw text

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics. It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<text x="20" y="50" dx="30" fill="red">Hello SVG</text>

<!--

->X is x co-ordinate

->Y is y co-ordinate

->dx moves the text to particular x value

-> stroke is boundary color,stroke-width means width of path outline

and fill means color of text.

-->

</svg>

</body>

</html>

HTML with SVG to draw text.

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics. It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

<text x="20" y="50" fill="red">Hello SVG</text>

<!--

->X is x co-ordinate

->Y is y co-ordinate

-> stroke is boundary color,stroke-width means width of path outline

and fill means color of text.

-->

</svg>

</body>

</html>

HTML with SVG to animate object

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics. It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

</rect>

<!--

->rx is the attribute name

->values=o is starting time

=100 is the speed of animation

=0 is start that animation from 0

->dur=5s is the time for which animation will be in effect and then it repeats

->repeatcount:-It repeats the animation indefinite times

</svg>

</body>

</html>

HTML with SVG to animate the circle.

<html>

<head>

<title>

html with SVG tag. It stands for scalable vector graphics. It is used for vector based graphics in XML. We use this tag for graphics on web/page.

</title>

</head>

<body>

</circle>

<!--

->path attribute creates path using different co-ordinates. We have already discussed about this

->dur=10s is the time for which animation will be in effect and then it repeats

->repeatcount:-It repeats the animation indefinite times

</svg>

</body>

</html>

HTML with CANVAS to draw rectangle.

<html>

<head>

<title>

html with canvas tag. We use this tag for graphics on web/page.

</title>

</head>

<body>

</canvas>

</body>

</html>

HTML with CANVAS to draw square.

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

</body>

</html>

HTML with canvas to draw straight line.

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.moveTo(0, 0); //it is the starting point of line.

object.lineTo(200, 200); //it is the ending part of line

object.stroke(); //it draws or connects both the co-ordinates

</script>

</body>

</html>

HTML with canvas to draw circle.

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.beginPath(); //it begins the path

object.arc(100, 100, 100, 0, 2*Math.PI); //it creates the arc/curve with

//first value is x-co-ordinate

//second value is y-co-ordinate

//third value is radius

//forth value is starting angle

//last value is for one complete rotation/360

object.stroke(); //it draws the circle

</script>

</body>

</html>

HTML with canvas to draw arc.

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.beginPath(); //it begins the path

object.arc(100, 100, 100, 0, Math.PI); //it creates the arc/curve (half circle). We can also use Math.PI/2

//first value is x-co-ordinate

//second value is y-co-ordinate

//third value is radius

//forth value is starting angle

//last value is for one complete rotation/360

object.stroke(); //it draws the circle

</script>

</body>

</html>

HTML with canvas to write text on canvas.

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.font = "40px Arial"; //changes the size of text to 40.

object.fillText("Hello javascript", 40, 50) //40 is x co-ordinate,50 is y co-ordinate

</script>

</body>

</html>

HTML with canvas to write text on canvas. with background color

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.font = "40px Arial"; //changes the size of text to 40.

object.fillStyle = "green";

object.fillText("Hello javascript", 40, 50) //40 is x co-ordinate,50 is y co-ordinate

</script>

</body>

</html>

HTML with canvas to fill entire canvas with color

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.fillStyle = "green"; //changes the color of canvas

//Either we can use

//object.fillRect(0, 0, 500, 500);//it fills the entire canvas with green color

//or

object.fillRect(0, 0, straightline.width, straightline.height); //it fills the entire canvas with green color

</script>

</body>

</html>

HTML graphics

We have two ways to work with graphics. They are:

using canvas

using svg

Difference between canvas and SVG:

HTML with SVG concept

Scalable Vector Graphics (SVG) is a 2D vector image format based on an XML syntax.

The W3C began work on SVG in the late 1990s, but SVG only became popular when Internet Explorer 9 came out with SVG support. All major browsers now support SVG.

Based on an XML syntax, SVG can be styled with CSS and made interactive using JavaScript. HTML5 now allows direct embedding of SVG tags in an HTML document.

As a vector image format, SVG graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size. SVG also provides a useful set of tools, such as clipping, masking, filters, and animations.(Source:https://developer.mozilla.org/en-US/docs/Glossary/SVG)

----------------------------------------------------------------------------------------------------------------

Let's understand SVG with the help of following examples.

-------------------------------------------------------------------------------------------

1)HTML with SVG to draw circle.

click the solution

2)HTML with SVG to draw rectangle

click the solution

3)HTML with SVG to draw rectangle

click the solution

4)HTML with SVG to draw ellipse.

click the solution

5)HTML with SVG to draw line

click the solution

6)HTML with SVG to draw polygon.

click the solution

7)HTML with SVG to draw polyline

click the solution

8)HTML with SVG to draw path

click the solution

9)HTML with SVG to draw text

click the solution

10)HTML with SVG to draw text.

click the solution

11)HTML with SVG to animate object.

click the solution

12)HTML with SVG to animate the circle.

click the solution

HTML graphics with CANVAS tag

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.

source:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

-----------------------------------------------------------------------------------------------------------------

LEt's understand about canvas in detail using following example.

--------------------------------------------------------------------------------------------------------

1)HTML with CANVAS to draw rectangle.

click me

2)HTML with CANVAS to draw square.

click here

3)HTML with canvas to draw straight line.

click here

4)HTML with canvas to draw circle.

click here

5)HTML with canvas to draw arc.

click here

6)HTML with canvas to write text on canvas.

click here

7) HTML with canvas to write text on canvas. with background color

click here

8)HTML with canvas to fill entire canvas with color

click here

HTML with pre tag

Let's have following example to understand about pre tag.

-------------------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>

pre tags

</title>

</head>

<body>

<pre>

are

learning

HTML.

</pre>

</body>

</html>

HTML page with hr tag

With the help of following example we can understand about hr tag.

----------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>

understanding horizontal line/ruler tag

</title>

</head>

<body>

</body>

</html>

HTML font tag

How to work with font tag? We understand it using following HTML code.

--------------------------------------------------------------------------------------------------------

<html>

<head>

<title>

understanding font tag

</title>

</head>

<body>

first paragraph

</font>

<br>

We are learning html

</font>

</body>

</html>

HTml with marquee tag

Let's look at following example to understand better about marquee tag.

----------------------------------------------------------------------------------------------------

<html>q

<head>

<title>

understanding marquee tag

</title>

</head>

<body>

<!--direction is right,in scroll an dbcakground color green

-->

my text

Impact

Tab Completion allows quickly completing words by pressing the tab key. When enabled, pressing Tab will expand the text to the left of the cursor into the best match, using Sublime Text's fuzzy matching algorithm.

</marquee>

<br>

<H4>second parAGRAPH<H4>

Tab Completion is enabled by default.

</marquee>

</p>

</body>

</html>

HTML page with youtube video

Here is an example to understand how to play youtube video on browser.

----------------------------------------------------------------------------------------------------

<html>

<head>

<title>

html with plugins. Plugins is a small program that extends the functionality of browser. Like To display Flash movies To display maps To scan for viruses To verify a bank id

</title </head>

<body>

</iframe>

</body>

</html>

HTL plugins

Plugins is a small program that extends the functionality of browser. Like To display Flash movies To display maps To scan for viruses To verify a bank id.

We use a tag for this as plugins. that is object. IT can be used for video,audio,image etc

-----------------------------------------------------------------------------------------------------------

<html>

<head>

<title>

html with plugins. Plugins is a small program that extends the functionality of browser. Like To display Flash movies To display maps To scan for viruses To verify a bank id

</title </head>

<!--

now-a-days most of the browsers are not supporting plugins.

it does not mean that they do not work with some applets

or viruses etc.

->for this, we are using one tag called object

->we can use this tag

->for image

->for video

->for audio etc.

-->

<body>

for picture,<br>

</body>

</html>

HTML page with responsive concept

On different device different looks can be there. So How to make responsive our page?

We can make it using viewport using css.

-------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

.menu {

float:left;

width:20%;

text-align:center;

}

.menu a {

background-color:#e5e5e5;

padding:8px;

margin-top:7px;

display:block;

width:100%;

color:black;

}

.main {

float:left;

width:60%;

padding:0 20px;

}

.right {

background-color:#e5e5e5;

float:left;

width:20%;

padding:15px;

margin-top:7px;

text-align:center;

}

@media only screen and (max-width:620px) {

/* For mobile phones: */

.menu, .main, .right {

width:100%;

}

</style>

</head>

<h1>Hello World</h1>

</div>

</div>

<h2>Lorum Ipsum</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

<h2>About</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>

</body>

</html>

------------------------------------------------------------------------------------------------------------

Credit:-:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query3

HTL page with coding lines

How can we put codes in same way as we write in real code editor? For this we use code tag.

-------------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>

understanding about code tag

</title>

</head>

<body>

a=3<br>

b-12<br>

c=a+b<br>

</code>

</body>

</html>

HTML entities/symbols

So, how can we write white space or some other characters/symbols? For this, we use & or # or somewhere both followed by some pre-defined characters.

--------------------------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>

understanding about entities tag

</title>

</head>

<body>

it is greater than >.

it is smaller than <

it is diacritical mark Ǒ

</body>

</html>

HTML symbols

So one questions is, how can we write different symbols in HTML? Answers is using some keywords followed by &.Better we can understand from following example.

--------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>

HOW TO WRITE DIFFERENT SYMBOLS IN HTML

</title>

</head>

<body>

FOR euro, We write €

we have &dollar;

If we want to use all, &ForAll;<br> if we want to use summation, ∑ <br> If an element is a member of , ∈

for sp ace ;

for greater than, we use >

for smaller than, we use <

</body>

</html>

HTML page with emoji

If we want to insert emoji symbols or pictures then we can use its decimal number followed by & and # symbols. We do not use hexadecimal numbers.

-------------------------------------------------------------------------------------------------

note:

It is not supported in earlier version of WINDOWS(7 or basic or vista).

It can only be used in WINDOWS 10.

--------------------------------------------------------------------------------------------------------

<html>

<head>

<title>

HOW TO WRITE emoji/small pictures IN HTML

</title>

</head>

<body>

SMILING FACE WITH OPEN MOUTH 😃for SMILING FACE WITH OPEN MOUTH AND COLD SWEAT 😅

</body>

</html>

HTML with meta tag

html with metatag;it is used to have page deescription,keyword,character set,author etc.

------------------------------------------------------------------------------------------------------

1)HTML page with meta tag

click here

2)HTML page with viewport (for different sized devices).

click here

HTML with meta tag (different size device)

Somewhere we have to display content on different device. How to work with them?

---------------------------------------------------------------------------------------------

html with metatag;it is used to have page deescription,keyword,character set,author etc.

</title>

</head>

<body>

we have used meta tag in our page as shown inside head tag.

</body>

</html>

HTML with meta tag

html with metatag;it is used to have page deescription,keyword,character set,author etc.

</title>

</head>

<body>

we have used meta tag in our page as shown inside head tag.

</body>

</html>

HTML file path

If We have stored files in different folders or folders are located in other folder then how can we work?

------------------------------------------------------------------------------------------------------------

1)HTML with simple path

click

2)HTML with files which are in other folders.

click here

--------------------------------------------------------------------------

note:

It is also called relative file path.

Where as if we give full URL as path to particular file, it is called absolute file path.

menu

Labels