Thursday 19 March 2015

Basic HTML & Internal CSS – Part I

Basic HTML & Internal CSS – Part I
What are HTML forms?
HTML Forms are one of the main points of interaction between a user and a web site or application. They allow users to send data to the web site. Most of the time that data is sent to the web server, but the web page can also intercept it to use it on its own.
An HTML Form is made of one or more widgets. Those widgets can be text fields (single line or multiline), select boxes, buttons, checkboxes, or radio buttons. Most of the time, those widgets are paired with a label that describes their purpose.
Example of basic html & internal Css


Coding Part:
<html>
                          <head>
                             <title>
                                      Scratch Work
                             </title>
                             <!--- In this portion we include CSS and Javascript--->
                             <style>
                                      body{
                                                background-color: red;
                                      }
                                      ul
                                      {
                                                list-style: none;
                                                text-align:center;
                                      }
                                      li
                                      {
                                                display: inline;
                                      }
                                      .header_div
                                      {
                                                width: 100%;
                                                height: auto;
                                                background-color: pink;
                                      }
                                      .header_div1
                                      {
                                                width: 100%;
                                                height: auto;
                                                background-color: green;
                                      }
                                      .header_div2
                                      {
                                                width: 100%;
                                                height: auto;
                                                background-color: yellow;
                                      }
                             </style>
                          </head>
                          <body>
                             <div class="header_div">
                                      <ul>
                                                <li><a href="">Home</a></li>
                                                <li><a href="">About Us</a></li>
                                                <li><a href="">Career</a></li>
                                                <li><a href="">Vision</a></li>
                                                <li><a href="">Contact Us</a></li>
                                      </ul>
                             <div class="header_div1">
                                      <form>
                                                <table align="center">
                                                          <tr>
                                                                   <td>Name</td>
                                                                   <td><input type="text" ></td>
                                                          </tr>
                                                          <tr>
                                                                   <td>Password</td>
                                                                   <td><input type="text" ></td>
                                                          </tr>
                                                          <tr>
                                                                   <td>Contact No</td>
                                                                   <td><input type="text" ></td>
                                                          </tr>
                                                          <tr>
                                                                   <td>Address</td>
                                                                   <td><input type="text" ></td>
                                                          </tr>
                                                          <tr align="center">
                                                                  
                                                                   <td colspan="2"><input type="submit" ></td>
                                                          </tr>
                                                </table>
                                      </form>
                                      <div class="header_div2">
                                      <!--pan</br> pan</br> pan</br> pan</br> pan-->
                                      </div>
                             </div>
                            
                             </div>
                             <!--- Headings--->
<!--<p>Hello <br/>world</p>
<p>Hi</p>-->
                          </body>

</html>

No comments:

Post a Comment