Monday, April 13, 2020

HOW TO DRAW CIRCLE ON A WEBPAGE ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
   
   
    <body>
        <h1>
            Hello, World!
        </h1>
       
     
       
  
       
        Here we will study about the canvas tag. It is used for drawing lines, circles, gradients etc on a webpage.
        <br>
       
         <br>
       
         <br>
        <br>
       
       <canvas id="Circle" style="border:solid 2px" height="200" width="200">
           My browser
        </canvas>
        <br>
       
           <script type="text/javascript">
           
            alert("Welcome to my page.");
            document.write("Hello");
            var c = document.getElementById("Circle");
            var cont1 = c.getContext("2d");
          
            cont1.beginPath();
               cont1.arc(95,50,40,0,2*Math.PI);
           
              
               cont1.stroke();
           
           
           
         
           
           
        </script>
        
       
     </body>
   
   
</html>


OUTPUT : 


HOW TO INSERT HYPERLINKS IN A WEBPAGE ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
       
        Here we will study how to add hyperlinks i.e the links to other webpage,audio file , video file or some programme.When we click on hyperlink it will open the file to which it is attached.
       <hr>
       
        For example :
       
        To open Google search page through my page i add :
        <br>
       
       
        <ol>
          <li> <a href="https://www.google.com">Google</a></li>
            <li>   <a href ="https://www.amazon.com">Amazon</a></li>
           
           
           
        </ol>
       
    
    
    </body>
</html>


OUTPUT : 


HOW TO DRAW A LINE IN HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title> 
       
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
       
        Here we will study about the canvas tag. It is used for drawing lines, circles, gradients etc on a webpage.
        <br>
       <canvas id="Circle" style="border:solid 2px" height="200" width="200">
           My browser
        </canvas>
       
           <script type="text/javascript">
           
            alert("Welcome to my page.");
            document.write("Hello");
            var c = document.getElementById("Circle");
            var cont1 = c.getContext("2d");
          
            cont1.moveTo(50,50);
            cont1.lineTo(100,100);
          
              
               cont1.moveTo(150,150);
               cont1.lineTo(200,200);
              
               cont1.stroke();
           
           
           
         
           
           
        </script>
       
       
       
       
    </body>
</html>


OUTPUT : 


HOW TO CREATE A SIMPLE FORM IN HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
         Here we study how to makeva simple form for input in HTML . It uses the following tags
        <ol>
         <li>Textbox</li>  
           
            <li>Textarea</li>
            <li>Radio</li>
            <li>Select</li>
            <li>Checkbox</li>
            <li>Button</li>
           
           
           
        </ol>
        <h1>
            Registration Page
        </h1>
       
         <table border="5">
           
         <b>THIS IS AN EXAMPLE OF COMPLEX  TABLE</b>   
           <!--Here <tr></tr>is used for a single row and<td></td> is used for a column-->
           
            <tr><td>1</td><td>NAME : </td><td><input type="text"></td></tr>
            <tr><td>2</td><td>ADDRESS : </td><td>input type="textarea"></td></tr>
       
        <tr><td>3</td><td>DATE OF BIRTH :</td><td>
           
       DAY :   <select>
               
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option
           <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
                <option>31</option>
               
          
          
          
          
          
          
          
          
          
          
          
          
           </select>
           
           
        MONTH :
            <select>
               
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
               
            </select>
           
           
    YEAR :
            <select>
               
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
                <option>2006</option>
                <option>2007</option>
                <option>2008</option>
                <option>2009</option>
                <option>2010</option>
                <option>2011</option>
               
            </select>
           
           
            </td></tr>
       
        <tr><td>4</td><td>SEX :</td><td><input type="radio">MALE <input type="radio">FEMALE</td></tr>
       
        <tr><td>5</td><td>HOBBIES : </td><td><input type="checkbox">PAINTING</td></tr>
       
        <tr><td>6</td><td>SUBMIT</td><td><input type="Submit"></td></tr>
        <tr><td>7</td><td>RESET</td><td><input type="Reset"></td></tr>
       
        </table>
       
    </body>
</html>

OUTPUT : 


How to insert images in HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
        Here we will learn how to insert image into a webpage.Here we can also specify its height and width .
    Here  img tag is used for image with height and width as its attributes.
       
        <img src="3D Movie Effects/3d_movie_effects_351.png" width="200" height="200">
       
   
   
   
    </body>
</html>


OUTPUT : 


HOW TO DRAW HORIZONTAL LINE IN HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
       
         Here we will learn how to draw a horizontal line in a webpage.
        Here hr tag is used for this.We can change the color by value of its ' color ' attribute
        For example :
         
       
        <hr color ="red">
        <hr color ="green">
        <hr color ="yellow">
        <hr color ="blue">
        <hr color ="brown">
       
       
       
    </body>
</html>


OUTPUT : 


HOW TO DISPLAY PARAGRAPH IN HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="styles/style.css"/>
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
       
        Here we Will learn how to display paragraphs in HTML .
        Here p tag is used for placing paragraphs in a webpage.
        With align tag ,we can align paragraph in the webpage.
    For example :
<p align="right">
           
HELLO WORLD

</p>
       
       

    <p align="left">
           
HELLO WORLD
</p>
   
    <p align="center ">
           
HELLO WORLD
</p>
   
   
   
    </body>
</html>


OUTPUT : 


How to display headings in HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
       
        Heading (H1 to H6) tags are used for displaying different size of headings.
        They are of six types from H1 to H2.
        H1 is largest and H6 is smallest in size.
       
        <h1>
            Hello, World!
        </h1>
       
        <h2>
            Hello, World!
        </h2>
       
        <h3>
            Hello, World!
        </h3>
       
        <h4>
            Hello, World!
        </h4>
       
        <h5>
            Hello, World!
        </h5>
       
        <h6>
            Hello, World!
        </h6>
       
    </body>
</html>

Output : 


HOW TO CREATE A COMPLEX HTML TABLE ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
        <table border="5">
           
         <b>THIS IS AN EXAMPLE OF COMPLEX  TABLE</b>   
           <!--Here <tr></tr>is used for a single row and<td></td> is used for a column-->
           
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>4</td><td>5</td><td>6</td></tr>
       
        <tr><td>7</td><td>8</td><td>9</td></tr>
       
        <tr><td>10</td><td>11</td><td>12</td></tr>
       
        <tr><td>13</td><td>14</td><td>15</td></tr>
       
        <tr><td>16</td><td>17</td><td>18</td></tr>
       
       
        </table>
       
    </body>
</html>

OUTPUT : 


HOW TO CREATE A SIMPLE TABLE IN HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
        <table border="5">
           
            <tr><td> THIS IS AN EXAMPLE OF TABLE</td></tr>
           <!--Here <tr></tr>is used for a single row and<td></td> is used for a column-- >
           
           
           
        </table>
       
    </body>
</html>

HOW TO CREATE AN UNORDERED LIST IN HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
        <ul>
        <li>FORTRAN</li>  
           
            <li>C</li>
            <li>C++</li>
            <li>HTML 5</li>
            <li>VB 6</li>
            <li>SQL</li>
            <li>VB.NET</li>
            <li>ASP.NET</li>
            <li>JAVA 2</li>
            <li>PHP 7</li>
           
           
        </ul>
       
    </body>
</html>

OUTPUT : 


HOW TO CREATE AN ORDERED LIST IN HTML ?

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>
            Hello, World!
        </h1>
       <ol>
       <li >FORTRAN</li>
           <li >C</li>
           <li >C++</li>
           <li >HTML 5</li>
           <li >VB 6</li>
           <li >VB.NET</li>
           <li >ASP.NET</li>   
          
        </ol>
    </body>
</html

OUTPUT : 


Tuesday, April 7, 2020