-->

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>
WE
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>
<hr width="100%" size="2px" color="#ABCDEF" align="right">

</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>
<font face="Impact" color="#123244" size="4">
first paragraph
</font>
<br>
<font face="Algerian" color="#222222" size="7">
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>
<marquee direction="right" behavior="scroll"  bgcolor="green" >
<!--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>
<marquee direction="left" behavior="slide" bgcolor="SKYBLUE">

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 width="640" height="360" src="https://www.youtube.com/embed/CBwweBXSFAA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </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>
        <object width="100%" height="500px" data="../pictures/picture.jpg"></object> for video,<br>
        <object width="100%" height="500px" data="../video/elon musk.mp4"></object><br> for audio,
        <object width="100%" height="500px" data="../video/ommusic.mp3"></object><br>
        <!--note:we can also use embedded tag or video controls or audio controls tag-->


    </body>

</html>