Tuesday, April 14, 2020

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 CIRCLE 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>
       
         <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 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 : 


Monday, April 13, 2020

HOW TO CREATE 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 INSERT IMAGE 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 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 CREATE COMPLEX 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">
            
         <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 HORIZONTAL LINES 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 : 


MY MARS DREAM 2021